@charset "utf-8";

/*---------------------------------
Font
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/*---------------------------------
Variable
---------------------------------*/
:root{

    --color-green: #BFFF00;
    --color-green-rgb: 191, 255, 0;

    --color-red: #ee4f6b;
    --color-red-rgb: 251,34,72;

    --color-marine: #00a1dc;
    --color-marine-rgb: 0,105,140;

    --color-yellow: #f9bd1b;
    --color-yellow-rgb: 247, 253, 44;

    --color-blue: #3ebebf;
    --color-rgb: 12, 208, 200;

    --color-pink: #FF6F75;
    --color-pink-rgb: 255, 111, 117;

    --color-bk: #333;
    --color-bk-rgb: 51,51,51;

    --color-dark: #666;
    --color-dark-rgb: 102,102,102;

    --color-medium: #ddd;
    --color-medium-rgb: 153,153,153;

    --color-light: #E8E8E8;
    --color-light-rgb: 204,204,204;

    --color-wh: #fff;
    --color-wh-rgb: 255,255,255;

    --box-shadow-bk: 0 0 8px rgba(var(--color-bk-rgb),.1);

    --size-xs: 4px;

    --size-s: 8px;

    --size-m: 16px;

    --size-m: 24px;

    --size-l: 32px;

    --size-xl: 40px;
}
@media (min-width: 768px) {
    :root{
        --box-shadow-bk: 0 0 16px rgba(var(--color-bk-rgb),.1);

        --size-xs: 8px;

        --size-s: 16px;

        --size-m: 32px;

        --size-m: 48px;

        --size-l: 64px;

        --size-xl: 80px;
    }
}

/*---------------------------------
Reset
---------------------------------*/
html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    background: var(--color-wh);
}
body {
    margin: 0;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック", YuGothic, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", sans-serif;
    color: var(--color-bk);
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: break-all;
    padding: 64px 0 0 0;
}
div {
    box-sizing: border-box;
}
a {
    color: var(--color-marine);
    font-weight: 700;
}
a:hover {
    color: var(--color-marine);
}
a:visited {
    color: var(--color-marine);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol {
    padding-left: 1.6rem;
}
img {
    max-width: 100%;
    height: auto;
}
p {
    font-size: 1.5rem;
    margin: 0 0 var(--size-s) 0;
    line-height: 1.8em;
    font-weight: 500;
}
p strong {
    color: var(--color-red);
}
li {
    font-size: 1.5rem;
}
pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
@media (min-width: 768px) {
    body {
        padding: 0 0 0 240px;
        box-sizing: border-box;
    }
    p {
        font-size: 1.6rem;
    }
    li {
        font-size: 1.6rem;
    }
    li + li {
        margin-top: 8px;
    }
}

/*---------------------------------
Header
---------------------------------*/
header {
    background-color: var(--color-wh);
    height: 64px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    border-bottom:solid 4px var(--color-light);
    box-sizing: border-box;
    box-shadow: rgba(var(--color-bk-rgb) ,.2) 0 0 8px;
}
div.title-area {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 3.2vw;
}
header a.logo {
    display: block;
    text-decoration: none;
    color: var(--color-bk);
    transition: opacity .3s;
}
img.logo {
    width:auto;
    padding: 0 ;
    display:block;
    height: 34px;
}
p.title {
    display: block;
    line-height: 1;
    margin: 4px 0 0;
    font-size: 1rem;
    transform: scale(.8);
    transform-origin: left;
    font-weight: 700;
}
header input#g-menu {
    display: none;
}
header input#g-menu + label {
    text-indent: -1000px;
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 60px;
    line-height: 60px;
    background-color: var(--color-wh);
    font-size: 70%;
    background-image: url(img/icon-menu.png);
    background-size: 30px auto;
    background-position: center;
    background-repeat: no-repeat;
    z-index:110;
    border-left: solid 4px var(--color-light);
}
header input#g-menu:checked + label {
    background-image: url(img/icon-x.png);
}
header input#g-menu + label + ul.g-menu {
    position: fixed;
    z-index:10;
    height: calc(100% - 64px);
    top:64px;
    left: -100vw;
    background-color:var(--color-wh);
    width: calc( 100vw - 60px );
    transition: 0.5s;
    box-sizing: border-box;
    padding: 16px 3.2vw;
    border-right: solid 4px var(--color-light);
}
header input#g-menu:checked + label + ul.g-menu {
    left: 0;
    overflow: auto;
}
header input#g-menu + label + ul.g-menu > li {
    width: 100%;
    box-sizing:border-box;
    padding: 0px 8px;
    display:block;
    text-align: left;
}
header input#g-menu + label + ul.g-menu > li a {
    display: block;
    text-decoration: none;
    border-bottom: 1px solid var(--color-light);
    padding: 8px 0;
    color: var(--color-bk);
    line-height: 1.2;
}
header input#g-menu + label + ul.g-menu > li:last-child a {
    border-bottom: none;
}
header input#g-menu + label + ul.g-menu > li a span {
    font-size: 1.2rem;
    position: relative;
    padding-left: 16px;
    color: var(--color-dark);
}
header input#g-menu + label + ul.g-menu > li a span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1px;
    width: 8px;
    background: var(--color-dark);
}
header ul.g-menu > li > ul.sub-menu {
    display: none;
}
header input#g-menu + label + ul.g-menu + label {
    text-indent: -1000px;
    position: fixed;right:
    -60px;bottom:0;
    background-color: rgba(var(--color-bk-rgb) ,.5);
    width: 60px;
    height: calc( 100% - 64px);
    transition: 0.5s;
}
header input#g-menu:checked + label + ul.g-menu + label {
    right:0;
}
@media (min-width: 768px) {
    header {
        width: 240px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        border: 0;
        border-right: solid 4px var(--color-light);
    }
    div.title-area {
        display: block;
        height: auto;
        margin: 0 auto;
        padding: 20px;
        border-bottom: solid 4px var(--color-light);
    }
    img.logo {
        height: 100px;
        margin: 0 auto;
    }
    header a.logo:hover {
        opacity: .7;
    }
    p.title {
        text-align: center;
        transform: none;
        font-size: 1.2rem;
        line-height: 1.4;
        margin-top: 8px;
    }
    header input#g-menu + label {
        display: none;
    }
    header input#g-menu + label + ul.g-menu {
        width: 100%;
        padding: 16px;
        position: static;
        border: none;
        overflow: scroll;
        height: calc(100% - 185px);
    }
    header input#g-menu + label + ul.g-menu + label {
        display: none;
    }
    header input#g-menu + label + ul.g-menu > li a {
        border: none;
        transition: .3s;
        border-left: var(--color-red) solid 0;
    }
    header input#g-menu + label + ul.g-menu > li:nth-child(3n+2) a {
        border-left-color: var(--color-green);
    }
    header input#g-menu + label + ul.g-menu > li:nth-of-type(3n) a {
        border-left-color: var(--color-blue);
    }
    header input#g-menu + label + ul.g-menu > li a:hover {
        border-left-width: 2px;
        padding-left: 8px;
    }
}


/*---------------------------------
Main
---------------------------------*/
main {position: relative;}
.section {
    padding: 40px 0;
}
.container {
    margin: 0 3.2vw;
}
.section-title {
    position: relative;
    color: var(--color-wh);
    line-height: 1.6;
    margin: auto;
    text-align: center;
    background: var(--color-bk);
    padding: 8px;
    box-sizing: border-box;
    z-index: 9;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 4px 4px 0px var(--color-marine), inset 4px 4px 0 var(--color-red);
    filter: drop-shadow(0 0 4px rgba(var(--color-bk-rgb) ,.2));
    margin-bottom: 40px;
}
.section-title h2 {
    margin: 0;
    font-size: 2rem;
    z-index: 2;
    position: relative;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 32px;
    width: 32px;
    border-radius: 4px;
    margin: auto;
    background: var(--color-marine);
    transform: rotate(45deg);
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 32px;
    width: 32px;
    border-radius: 4px;
    margin: auto;
    background: var(--color-bk);
    transform: rotate(45deg);
}

.display-pc {
    display: none !important;
}
.display-sp {
    display: block !important;
}
@media (min-width: 768px) {
    .section {
        padding: 88px 0;
    }
    .container {
        margin: 0 auto;
        padding: 0 40px;
        max-width: 1280px;
    }
    .section-title {
        max-width: 810px;
        margin-bottom: 64px;
    }
    .section-title h2 {
        font-size: 3rem;
    }

    .display-pc {
        display: block !important;
    }
    .display-sp {
        display: none !important;
    }
}


/*---------------------------------
Common
---------------------------------*/

/* Bg
---------------------------------*/
.bg-grunge{position:relative}
.bg-01{background-color:#ebe7dc;background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px}
.bg-01.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-01.png);background-size:512px,40px}
.bg-02.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-02.png);background-size:512px,40px}
.bg-03{background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px;background-color:#ebe7dc}
.bg-03.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-03.png);background-size:512px,40px}
.bg-04{background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px;background-color:#e9e7df}
.bg-04.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-04.png);background-size:512px,40px}
.bg-05{background-color:#ebe7dc;background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px}
.bg-05.bg-grunge{background-color:var(--color-blue);background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px}
.bg-06{background-size:20px;background-image:linear-gradient(to right,#fff2 0px,#fff2 10px,#fff0 10px,#fff0 20px);background-color:#d7d0be}
.bg-07{background-image:url(img/bg-07.png);background-size:40px}
.bg-07.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-07.png);background-size:512px,40px}
.bg-08{background-image:url(img/bg-08.png);background-size:40px}
.bg-08.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-08.png);background-size:512px,40px}
.bg-09{background-image:radial-gradient(circle,#fff5 2px,transparent 2px);background-size:10px 10px;background-color:#cecfbd}
.bg-09.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-09.png);background-size:512px,40px}
.bg-10{background-image:url(img/bg-10.png);background-size:40px}
.bg-10.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-10.png);background-size:512px,40px}
.bg-11{background-image:url(img/bg-11.png);background-size:40px}
.bg-11.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-11.png);background-size:512px,40px}
.bg-12{background-image:url(img/bg-12.png);background-size:40px}
.bg-12.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-12.png);background-size:512px,40px}
.bg-13{background-image:url(img/bg-13.png);background-size:40px}
.bg-13.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-13.png);background-size:512px,40px}
.bg-14{background-image:url(img/bg-14.png);background-size:40px}
.bg-14.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-14.png);background-size:512px,40px}
.bg-15{background-image:url(img/bg-15.png);background-size:40px}
.bg-15.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-15.png);background-size:512px,40px}
.bg-16{background-image:url(img/bg-16.png);background-size:40px}
.bg-16.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-16.png);background-size:512px,40px}
.bg-17{background-image:url(img/bg-17.png);background-size:40px}
.bg-17.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-17.png);background-size:512px,40px}
.bg-18{background-image:url(img/bg-18.png);background-size:40px}
.bg-18.bg-grunge{background-image:url(img/bg-00.webp),url(img/bg-18.png);background-size:512px,40px}


/* Frame
---------------------------------*/
.frame-line-01 {
    border: solid 8px var(--color-wh);
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    border-radius: 4px;
	background-color:var(--color-wh);
}
.frame-line-02 {
    border: solid 8px var(--color-wh);
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-green);
    padding: 16px;
    border-radius: 4px;
}
.frame-01 {
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
}
@media (min-width: 768px) {
    .frame-line-01 {
        border: solid 12px var(--color-wh);
        padding: 24px;
    }
    .frame-line-02 {
        border: solid 12px var(--color-wh);
        padding: 24px;
    }
    .frame-01 {
        padding: 24px;
    }
}



/* Btn
---------------------------------*/
a.btn {
    display: inline-block;
    padding: 12px 32px 12px 12px;
    border-radius: 28px;
    background: var(--color-bk);
/*    border: 1px solid #000;*/
    box-shadow: 0px 4px 0px #000;
    color: var(--color-wh);
    text-decoration: none;
    min-width: 240px;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}
a.btn::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f105";
    top: 50%;
    right: 12px;
    color: var(--color-wh);
    font-size: 2rem;
    margin-top: -10px;
    transition: color .3s;
}
 a.btn-s {
    position: relative;
    display: inline-block;
    padding: 6px 16px 6px 6px;
    border-radius: 18px;
    background: var(--color-bk);
/*    border: 1px solid #000;*/
    box-shadow: 0px 4px 0px #000;
    color: var(--color-wh);
    text-decoration: none;
    font-size: 1.4rem;
    min-width: 160px;
    text-align: center;
        transition: transform .3s, box-shadow .3s;
}
a.btn-s::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f105";
    top: 50%;
    right: 8px;
    color: var(--color-wh);
    font-size: 1.6rem;
    margin-top: -8px;
    transition: color .3s;
}
.home-btn {
    padding: 40px 3.2vw;
    text-align: center;
}
.home-btn a {
    display: inline-block;
    padding: 12px;
    border-radius: 28px;
    background: var(--color-bk);
/*    border: 1px solid #000;*/
    box-shadow: 0px 4px 0px #000;
    color: var(--color-wh);
    text-decoration: none;
    min-width: 240px;
    position: relative;
        transition: transform .3s, box-shadow .3s;
}
.home-btn a::before {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f015";
    top: 50%;
    left: 12px;
    color: var(--color-wh);
    font-size: 2rem;
    margin-top: -10px;
    transition: color .3s;
}
.text-area p.btn a {
    position: relative;
    display: block;
    padding: 12px;
    border-radius: 28px;
    background: var(--color-bk);
/*    border: 1px solid #000;*/
    box-shadow: 0px 4px 0px #000;
    color: var(--color-wh);
    text-decoration: none;
    min-width: 240px;
    max-width: 320px;
    text-align: center;
    margin: 20px auto 50px;
        transition: transform .3s, box-shadow .3s;
}
.text-area p.btn a::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f105";
    top: 50%;
    right: 12px;
    color: var(--color-wh);
    font-size: 2rem;
    margin-top: -10px;
    transition: color .3s;
}

@media (min-width: 768px) {
    .home-btn {
        padding: 80px 40px;
    }
    a.btn:hover,
    a.btn-s:hover,
    p.btn a:hover,
    .home-btn a:hover {
        box-shadow: 0px 0x 0px var(--color-bk);
        transform: translateY(4px);
    }
     a.btn-s {
        padding: 8px 16px 8px 6px;
        border-radius: 20px;
     }
}




/* List
---------------------------------*/
.check-list {
    font-weight: 700;
}
.check-list li {
    padding-left: 32px;
    position: relative;
}
.check-list li + li {
    margin-top: 8px;
}
.check-list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    border: solid 4px var(--color-bk);
    height: 20px;
    width: 20px;
    box-sizing: border-box;
}
.check-list li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 2px;
    height:12px;
    width: 20px;
    border-left: solid 4px var(--color-red);
    border-bottom: solid 4px var(--color-red);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
@media (min-width: 768px) {
    
}

/* Flex
---------------------------------*/
.flex-column {
    display: flex;
    justify-content: space-between
}
.flex-column .flex-item {
    width: 48%;
}
@media (min-width: 768px) {
    
}


/* Text
---------------------------------*/
.note {
    font-size: 1.4rem;
}
@media (min-width: 768px) {
    
}

/*---------------------------------
Top Page
---------------------------------*/
h1.site-title {
    color: var(--color-wh);
    line-height: 1.6em;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 16px;
    margin: auto;
    width: 93.6vw;
    text-align: center;
    background: #333;
    padding: 10px 8px 6px;
    box-sizing: border-box;
    z-index: 99;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 4px 4px 0px var(--color-marine), inset 4px 4px 0 var(--color-red);
    filter: drop-shadow(0 0 4px rgba(var(--color-bk-rgb) ,.2));
}
.mv_swiper {
    padding: 40px 0 0;
    background: var(--color-light);
}
.swiper-slide img {
    width: 100%;
}
.main-visual .mv-pager .swiper-pagination-bullet {
    background: var(--color-wh);
    opacity: 1;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
}
.main-visual .mv-pager .swiper-pagination-bullet-active {
    background: var(--color-red);
}
.entry-box {
    position: absolute;
    z-index: 2;
    top: -40px;
    width: 94%;
    left: 0;
    right: 0;
    border-radius: 8px;
    margin: 0 auto;
    background: var(--color-wh);
    padding: 3.2vw;
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
}
.entry-box ul{
    display:flex;
    justify-content:space-between;
}
.entry-box ul li {
    display:block;
    width:48%;
}
a.entry-box-btn {
    background: var(--color-red);
    border: solid 2px var(--color-wh);
    border-radius: 24px;
    color: var(--color-wh);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    height: 48px;
    position: relative;
    box-shadow: 0px 2px 8px var(--color-red);
    transition: box-shadow .3s;
}
a.entry-box-btn img {
    width: 16px;
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.entry-box ul li:last-child a.entry-box-btn {
    background: var(--color-marine);
    box-shadow: 0px 2px 8px var(--color-marine);
}

@media (min-width: 768px) {
    h1.site-title {
        width: auto;
        max-width: 810px;
        font-size: 3rem;
        padding: 16px;
        top: 32px;
    }
    .main-visual .mv-swiper {
        padding: 64px 0;
        background-color: white;
    }

    .mv-swiper-slide {
        overflow: hidden;
        border-radius: 4px;
    }
    .main-visual .mv-swiper .mv-pager {
        bottom: 20px;
    }
    .main-visual .mv-swiper  .mv-pager .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 8px;
    }
    .entry-box ul {
        justify-content: center;
    }
    .entry-box ul li {
        max-width: 400px;
    }
    .entry-box ul li + li {
        margin: 0 0 0 40px;
    }
    a.entry-box-btn {
        font-size: 2.4rem;
        padding: 16px;
        border-radius: 37px;
        height: auto;
    }
    a.entry-box-btn img {
        margin-right: 16px;
        width: 24px;
    }
    a.entry-box-btn:hover {
        box-shadow: 0px 2px 24px var(--color-red);
    }
    .entry-box ul li:last-child a.entry-box-btn:hover {
        box-shadow: 0px 2px 24px var(--color-marine);
    }
}
@media (min-width: 1100px) {
    .entry-box {
        padding: 24px 40px;
        width: 70%;
    }
}

/* Top Status
---------------------------------*/
.top-status {
    position: relative;
    padding-top: 80px;
}
.top-status-graph .graph-area {
		/*稼働状況が不具合で正しく表示されていない間 display: none;*/
		/*display: none;*/

}
.top-status-graph .site-data {
    display: flex;
    background-color: var(--color-wh);
    padding-top: 20px;
    height: 300px;
    border: solid #fff 4px;
    border-radius: 8px;
}
.top-status-graph .site-data + .site-data {
    margin-top: 32px;
}
.top-status-graph .graph-box {
    display: flex;
    height: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 48%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.10) 0.1px, transparent 0.1em);
    background-size: 100% 20%;
}
.top-status-graph .graph-box div {
    width: 40%;
    border-radius: 4px 4px 0 0;
    position: absolute;
    bottom: 0px;
    box-sizing: border-box;
    border: 2px solid rgb(255, 255, 255);
    border-bottom: none;
    animation-name: graphmotion;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
}
.top-status-graph .graph-box .left {
    background-color: var(--color-marine);
    left: 20%;
}
.top-status-graph .graph-box .right {
    background-color: var(--color-red);
    left: 45%;
}
.top-status-graph .graph-box .left::after,
.top-status-graph .graph-box .right::after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    display: block;
    top: 48px;
    left: -2.8em;
    position: absolute;
    color: white;
    font-size: 12px;
    width: 8em;
}
.top-status-graph .graph-box .left::after {
    content: "配信中";
}
.top-status-graph .graph-box .right::after {
    content: "チャット中";
}

.top-status-graph .data-box {
    text-align: center;
    padding: 5px 0;
    background: #fff;
    margin-bottom: 20px;
    border-radius: 8px;
    width: 48%;
    margin-right: 4%;
}
.top-status-graph .site-logo {
    width: 80%;
    max-width: 100px;
    margin: 0 auto;
}
.top-status-graph .site-data .detail {
    color: #999;
    font-size: 11px;
    letter-spacing: 0.5px;
    border: 1px solid #eaeaea;
    margin: 0 10px;
    padding: 10px;
    border-radius: 4px;
    height: calc(100% - 36px);
    background: #f2f2f2;
}
.top-status-graph .site-data span {
    margin-left: 4px;
}
.top-status-graph span.rate {
    color: var(--color-bk);
    font-size: 170%;
}
.top-status-graph .rate-detail {
    position: relative;
    display: block;
    margin: 6px auto 2px auto;
    padding: 2px 0;
    background: var(--color-yellow);
    max-width: 100px;
    width: 96%;
    color: #333;
    font-size: 110%;
}
.top-status-graph .rate-detail::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-bottom: 8px solid var(--color-yellow);
}


.top-status-graph span.total {
    color: var(--color-marine);
    font-size: 170%;
}
.top-status-graph span.connect-people {
    color: var(--color-red);
    font-size: 170%;
}
.top-status-graph .connect-detail {
    position: relative;
    display: block;
    margin: 6px auto 2px auto;
    padding: 2px 0;
    font-size: 90%;
    background: #fff1f1;
    max-width: 100px;
    width: 96%;
}
.top-status-graph .connect-detail::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-bottom: 8px solid #fff1f1;
}
.top-status-graph span.connect-people {
    color: var(--color-red);
    font-size: 170%;
}
.top-status-graph span.connect-male {
    color: var(--color-marine);
    font-size: 170%;
}
@media (min-width: 768px) {
    .top-status {
        padding-top: 20px;
    }
}
@media (min-width: 1100px) {
    .top-status-graph .graph-area {
        display: flex;
        justify-content: space-between;
		/*稼働状況が不具合で正しく表示されていない間 display: none;*/
		/*display: none;*/
    }
    .top-status-graph .site-data {
        width: calc(96% / 3);
        height: auto;
    }
    .top-status-graph .site-data + .site-data {
        margin-top: 0;
    }
}




/* Top Time
---------------------------------*/
.top-time-graph .card {
    border: solid 1px #eaeaea;
    border-radius: 8px;
    background: var(--color-wh);
}
.top-time-graph .card-heading {
    background-color: #eaeaea;
    padding: 9px 15px;
    border-bottom: 1px solid transparent;
}
.top-time-graph .card-title {
    margin: 0;
}
.top-time-graph .graph-con {
    overflow-x: auto;
    display: flex;
    padding: 0 3.2vw;
}
.top-time-graph .card-body {
    padding: 15px;
    font-size: 12px;
}
.top-time-graph .info {
    margin: 0 0 16px;
}
.top-time-graph .info span {
    padding: 4px 6px;
    color: var(--color-wh);
    font-size: 12px;
}
.top-time-graph .standby {
    background-color: var(--color-dark);
}
.top-time-graph .party {
    background-color: var(--color-blue);
}
.top-time-graph .twoshot {
    background-color: var(--color-pink);
}
.top-time-graph .graph {
    border: 4px solid #eaeaea;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
    border-radius: 15px;
}
.top-time-graph .graph span {
    color: #f0ffff;
    display: block;
    float: left;
    line-height: 24px;
    position: relative;
    text-align: center;
    font-size: 12px;
    box-sizing: border-box;
    white-space: nowrap;
}
.top-time-graph .col-lg-4 {
    min-width: 80%;
}
.top-time-graph .col-lg-4 + .col-lg-4 {
    margin-left: 16px;
}
@media (min-width: 768px) {
    .top-time-graph .col-lg-4 {
        min-width: 60%;
    }
}
@media (min-width: 1100px) {
    .top-time-graph .graph-con {
        justify-content: space-between;
    }
    .top-time-graph .col-lg-4 {
        min-width: calc( 96% /3 );
    }
    .top-time-graph .col-lg-4 + .col-lg-4 {
        margin-left: 0;
    }
}



/* Top Info
---------------------------------*/
.top-info {
    position: relative;
}

.top-info .flex-item {
    width: 64%;
}
.top-info .top-info-img img {
    position: absolute;
    bottom: 0;
    width: 40%;
    height: 40%;
    right: 0;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,.2));
}
@media (min-width: 768px ) {
    .top-info .container {
        max-width: 1080px;
    }
}
@media (min-width: 1200px) {
    .top-info .frame-line-01 {
        display: flex;
        position: relative;
    }
    .top-info .frame-line-01 .txt {
        width: 64%;
    }
    .top-info .flex-item {
        width: auto;
    }
    .top-info .top-info-img img {
        width: 24%;
        bottom: -100px;
        height: auto;
        right: 8%;
    }
}


/* Top About
---------------------------------*/
.top-about .frame-01 {
    position: relative;
    margin-top: 240px;
    padding: 40px 16px 16px;
}
.about-list {
    border: solid 4px var(--color-light);
    padding: 16px;
    margin-top: 16px;
    position: relative;
}
.top-about .frame-01 .img {
    position: absolute;
    top: -200px;
    width: 200px;
    left: 0;
    right: 0;
    margin: auto;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,.2));
}
@media (min-width: 768px ) {
    .top-about .container {
        max-width: 1080px;
    }
}
@media (min-width: 1200px) {
    .top-about .frame-01 {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 24px;
        margin: 0;
    }
    .top-about .frame-01 .img {
        position: static;
        width: 32%;
        margin: 0;
    }
    .top-about .frame-01 .txt {
        width: 64%;
    }
}

/* Top Service
---------------------------------*/
.service-item + .service-item {
    margin-top: 32px;
}
.service-item {
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
}
.service-item h3 {
    background: var(--color-light);
    padding: 8px;
    border-radius: 2px;
    margin: 0 0 16px;
}
.service-item .top-thumnail {
    border-radius: 2px;
    box-shadow: 4px 4px 0px var(--color-light);
    overflow: hidden;
    font-size: 0;
    width: calc(100% - 2px);
}
.service-item p {
    margin: 16px 0;
}
.service-item .btn-wrap {
    margin: auto 0 0;
    text-align: center;
}
@media (min-width: 768px ) {
    .service-list {
        display: flex;
        flex-wrap: wrap;
    }
    .service-list .service-item {
        display: flex;
        flex-direction: column;
    }
    .service-list .service-item .top-topix {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}
@media ( min-width: 1000px ) and (max-width: 1299px ) {
    .service-item {
        width: 48%;
    }
    .service-item + .service-item {
        margin: 0 0 0 4%;
    }
    .service-list .service-item:nth-of-type(2n+1) {
        margin-left: 0;
    }
    .service-list .service-item:nth-of-type(n+3) {
        margin-top: 4%;
    }
}
@media (min-width: 1300px) {
    .service-item {
        width: 30%;
    }
    .service-item + .service-item {
        margin: 0 0 0 5%;
    }
    .service-list .service-item:nth-of-type(3n+1) {
        margin-left: 0;
    }
    .service-list .service-item:nth-of-type(n+4) {
        margin-top: 5%;
    }
}


/* Top Worries
---------------------------------*/
.top-worries {
    padding-bottom: 0;
}
.top-worries-header {
    padding-bottom: 40px;
}
.worries-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.worries-list li {
    box-shadow: 4px 4px 0px var(--color-marine), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 50%;
    height: 200px;
    width: 200px;
    margin: 16px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.worries-list h3 {
    color: var(--color-marine);
    position: relative;
    margin: 0;
    padding: 0 0 16px;
    margin: 0 0 24px;
}
.worries-list h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    height: 2px;
    background: var(--color-marine);
    margin: auto;
}
.top-worries-body {
    background: var(--color-wh);
    padding: 104px 0 40px;
    position: relative;
    text-align: center;
}
.top-worries-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: url(img/bg-half-01.png) top/12px repeat-x;
}
.worries-choose {
    position: relative;
    color: var(--color-blue);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    display: inline-block;
}
.worries-choose::before,
.worries-choose::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    background: var(--color-blue);
}
.worries-choose::before {
    transform: rotate(-15deg);
    left: -12px;
}
.worries-choose::after {
    transform: rotate(15deg);
    right: -12px;
}
.worries-choose-list {
    margin-top: 24px;
}
.worries-choose-list li {
    box-shadow: 4px 4px 0px var(--color-marine), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-blue);
    border-radius: 4px;
    margin: 0 auto;
	width:80%;
	max-width:320px;
}
.worries-choose-list li + li {
    margin: 2em auto 0;
}
.worries-choose-list h3 {
    color: var(--color-yellow);
    position: relative;
    margin: 0;
    padding: 0 0 16px;
    margin: 0 0 24px;
    text-align: center;
}
.worries-choose-list h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    height: 2px;
    background: var(--color-marine);
    margin: auto;
}
.worries-choose-list p {
    color: var(--color-wh);
    text-align: left;
}
@media (min-width: 768px) {
    .top-worries-header .container,
    .top-worries-body .container {
        max-width: 1080px;
    }
    .worries-list li {
        height: 240px;
        width: 240px;
    }
    .worries-choose-list li + li {
        margin: 0 0 0 32px;
    }
    .worries-list h3 {
        font-size: 2rem;
    }
    .top-worries-body {
        padding: 104px 0 88px;
    }
    .worries-choose {
        font-size: 3rem;
    }
    .worries-choose-list {
        display: flex;
        margin-top: 40px;
    }
    .worries-choose-list li {
        width: calc(94%/3);
    }
    .worries-choose-list li + li {
        margin: 0 0 0 3%;
        padding: 24px;
    }
    .worries-choose-list h3 {
        font-size: 2rem;
    }
}


/* Top Emergency
---------------------------------*/
.top-emergency .frame-line-02 {
    position: relative;
    padding-bottom: 160px;
	background-color: var(--color-wh);
}
.top-emergency .frame-line-02 .img {
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,.2));
}
@media (min-width: 768px) {
    .top-emergency .container {
        max-width: 1080px;
    }
    .top-emergency .frame-line-02 {
        display: flex;
        padding-bottom: 24px;
    }
    .top-emergency .frame-line-02 p {
        width: 48%;
    }
    .top-emergency .frame-line-02 .img {
        width: 48%;
        left: auto;
    }
}


/* Top Welcome
---------------------------------*/
.top-welcome {
    position: relative;
}
.top-welcome .frame-01 {
    padding-bottom: 240px;
}
.top-welcome .frame-01 img {
    position: absolute;
    bottom: 0;
    width: 200px;
    left: 20%;
}
@media (min-width: 768px) {
}
@media (min-width: 1200px) {
    .top-welcome .frame-01 {
        padding-bottom: 24px;
        width: calc(100% - 320px);
        margin-left: auto;
    }
    .top-welcome .frame-01 img {
        width: 320px;
        left: 40px;
    }
}
@media (min-width: 1520px) {
    .top-welcome .frame-01 img {
        left: calc((100% - 1200px)/2);
    }
}


/* Top Sidebusiness
---------------------------------*/
.sidebusiness-list {
    margin: 24px 0 0;
}
.sidebusiness-list li {
    box-shadow: 4px 4px 0px var(--color-light), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
    text-align: center;
}
.sidebusiness-list li + li {
    margin-top: 24px;
}
.sidebusiness-list h3 {
    background: var(--color-light);
    padding: 8px;
    border-radius: 2px;
    margin: 0 0 16px;
}
.sidebusiness-list li .img {
    font-size: 0;
}
.sidebusiness-list li img {
    width: 150px;
    height: auto;
    margin: 0 auto;
}
.sidebusiness-list p {
    margin: 0;
    text-align: left;
}
@media (min-width: 1200px) {
    .top-sidebusiness .container {
        max-width: 890px;
    }
    .sidebusiness-list li {
        display: flex;
        padding-bottom: 0;
    }
    .sidebusiness-list li .img {
        margin-top: auto;
        width: 24%;
    }
    .sidebusiness-list li .txt {
        width: 78%;;
    }
    .sidebusiness-list p {
        padding-bottom: 24px;
    }
    .sidebusiness-list li img {
        width: 100%;
        max-width: 200px;
    }
}


/* Top Smartphone
---------------------------------*/
.smartphone-img {
    position: relative;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.smartphone-img img {
    width: 80%;
    margin-left: 5%;
}
.smartphone-img span {
    position: absolute;
    display: inline-block;
    background: var(--color-wh);
    border-radius: 32px;
    padding: 2.4vw;
    font-size: min(3.2vw,1.6rem);
}
.smartphone-img span:nth-of-type(1) {
    top: 0;
    left: 0;
}
.smartphone-img span:nth-of-type(2) {
    top: 5%;
    right: 0;
}
.smartphone-img span:nth-of-type(3) {
    bottom: 25%;
    right: 0;
}
.smartphone-img span:nth-of-type(4) {
    bottom: 10%;
    left: 0;
}
@media (min-width: 1200px) {
    .top-smartphone .container {
        max-width: 890px;
    }
    .smartphone-img {
        max-width: 920px;
    }
    .smartphone-img img {
        width: 60%;
    }
    .smartphone-img span {
        border-radius: 46px;
        padding: 32px 40px;
        font-size: min(3.2vw,1.8rem);
    }
}



/* Top flow
---------------------------------*/
.flow-box {
    box-sizing: border-box;
    width: 100%;
    position: relative;
}
.flow-box > .inner {
    padding: 0px 4% 0;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}
.flow-box h3 {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px;
    position: relative;
    width: 100%;
    text-align: center;
    background: var(--color-dark);
    color: #fff;
    border-radius: 2px;
}
.flow-box .flow-wrap-container + h3 {
    margin-top: 32px;
}
.flow-box .flow-wrap-container {
    box-shadow: 4px 4px 0px var(--color-marine), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
    margin: 24px 0 0;
}
.flow-box .flow-wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    position: relative;
}
.flow-box .flow-wrap .flow-wrap-num {
    position: relative;
    border-bottom: solid var(--color-marine) 2px;
    display: flex;
    align-items: center;
    color: var(--color-marine);
    padding: 0 0 12px;
    margin: 0 0 12px;
}
.flow-box h4 {
    font-weight: 700;
    margin: 0 0 0 16px;
    font-size: 1.6rem;
}
.flow-box .flow-wrap .num-step {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.flow-box .flow-wrap .num-step span {
    display: block;
    font-size: 3.2rem;
}

@media (min-width: 1200px) {
    .top-flow .container {
        max-width: 1080px;
    }
    .flow-box .flow-wrap {
        display: flex;
    }
    .flow-box .flow-wrap-container {
        padding: 32px 40px;
        margin: 40px 0 0;
    }
    .flow-box .flow-wrap .flow-wrap-num {
        width: 240px;
        padding: 0 40px 0 0;
        margin: 0 40px 0 0;
        border: 0;
        border-right: solid var(--color-marine) 2px;
    }
    .flow-box .flow-wrap .flow-wrap-txt {
        width: calc(100% - 240px);
    }
    .flow-box h3 {
        text-align: left;
        display: inline-block;
        width: auto;
        padding: 8px 16px;
        font-size: 2.4rem;
    }
    .flow-box h4 {
        font-size: 2rem;
        margin: 0 auto;
    }
    .flow-box .flow-wrap .num-step {
        font-size: 2.4rem;
    }
    .flow-box .flow-wrap .num-step span {
        font-size: 6.4rem;
    }
}


/* Top Environment
---------------------------------*/

.top-environment .environment-list {
    border: solid 4px var(--color-light);
    padding: 16px;
}
.top-environment .room-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 32px 3.2vw 0;
}
.top-environment .room-list li {
    width: calc( 100% / 3 );
    font-size: 0;
}
.top-environment .room-list img {
    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    .top-environment .container {
        max-width: 890px;
    }
    .top-environment .room-list {
        margin: 48px auto 0;
        max-width: 890px;
        padding: 0 40px;
    }
    .top-environment .room-list li + li {
        margin: 0;
    }
}
@media (min-width: 1200px) {
}


/* Tsuukin
---------------------------------*/
.tsuukin h3 {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px;
    position: relative;
    text-align: center;
    background: var(--color-marine);
    color: #fff;
    border-radius: 2px;
    margin: 32px 3.2vw 16px;
}
.tsuukin .area {
    width: 100%;
    overflow-x: auto;
    display: flex;
    padding: 0 1.6vw;
}
.tsuukin .area .shop-li {
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
    margin: 3.2vw 2.4vw;
    width: 56%;
    min-width: 56%;
    max-width: 56%;
    display: flex;
    flex-direction: column;
}
.tsuukin .area .shop-li a {
    text-decoration: none;
    min-width: 0;
    text-decoration: none;
    display: block;
    margin-top: auto;
}
.tsuukin .area .shop-li h4 {
    background: var(--color-light);
    padding: 8px;
    border-radius: 2px;
    margin: 0 0 16px;
}
.tsuukin .area .shop-li .thumb {
    width: calc(100% + 32px);
    margin: 0 -16px;
    font-size: 0;
}
.tsuukin .area .shop-li .thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.tsuukin .area .shop-li p {
    color: #333;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 12px 0 12px;
}
@media (min-width: 768px) {
    .tsuukin .area {
        padding: 0 40px;
    }
    .tsuukin h3 {
        margin: 32px 40px 16px;
    }
    .tsuukin .area .shop-li {
        width: 45.8%;
        min-width: 45.8%;
        max-width: 45.8%;
        margin: 2% 0;
    }
    .tsuukin .area .shop-li + .shop-li {
        margin-left: 4%;
    }
}
@media (min-width: 1300px) {
    .tsuukin {
        max-width: 1280px;
        margin: 0 auto;
    }
    .tsuukin h3 {
        padding: 12px 32px;
        margin: 32px 40px 16px;
        max-width: 360px;
        text-align: left;
    }
    .tsuukin .area {
        flex-wrap: wrap;
    }
    .tsuukin .area .shop-li {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
    }
    .tsuukin .area .shop-li + .shop-li {
        margin-left: 5%;
    }
    .tsuukin .area .shop-li:nth-of-type(3n+1) {
        margin-left: 0;
    }
}


/* Topix
---------------------------------*/
.topix-list {
    padding: 0 1.6vw;
    display: flex;
    overflow-x: auto;
}
.topix-list::-webkit-scrollbar{
    display:none;
    height:0!important;
}
.topix-list li {
    background-color: var(--color-wh);
    border: 2px solid var(--color-blue);
    margin: 0 2.4vw 4px;
    width: 56%;
    min-width: 56%;
    max-width: 56%;
    box-shadow: 0px 4px 0px var(--color-blue);
    box-sizing: border-box;
}
.topix-list li a {
    color: var(--color-bk);
    text-decoration: none;
}
.topix-list li div.thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 0;
}
.topix-list li div.thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}
.topix-list li div.text {
    padding: 8px;
}
.topix-list li h3 {
    font-size: 1.4rem;
    overflow-y: hidden;
    margin: 0;
}
.topix-list li .excerpt {
    font-size: 1.2rem;
    margin-top: 8px;
    color: var(--color-dark);
}
@media (min-width: 768px) {
    .topix-list {
        padding: 0 40px;
        flex-wrap: wrap;
        overflow: visible;
    }
    .topix-list li {
        width: 48%;
        max-width: none;
        min-width: auto;
        margin: 0;
    }
    .topix-list li + li {
        margin-left: 4%;
    }
    .topix-list li div.text {
        padding: 16px;
    }
    .topix-list li h3 {
        font-size: 1.6rem;
    }
    .topix-list li .excerpt {
        font-size: 1.4rem;
    }
    .topix-list li a {
        transition: opacity .3s;
    }
    .topix-list li a:hover {
        opacity: .7;
    }
}
@media (min-width: 768px) and (max-width: 999px) {
    .topix-list li:nth-of-type(2n+1) {
        margin-left: 0;
    }
    .topix-list li:nth-of-type(n+3) {
        margin-top: 4%;
    }
    

}
@media (min-width: 1000px) {
    .topix-list {
        max-width: 1280px;
        margin: 0 auto;
    }
    .topix-list li {
        width: calc(91%/4);
    }
    .topix-list li + li {
        margin-left: 3%;
    }
}


/*/////////////////////////////////////////////TOPページのみここまで*/

/*---------------------------------
Page
---------------------------------*/
/* Title Thumb Text Btn Img
---------------------------------*/
.page-title {
    position: absolute;
    top: 15vw;
    left: 0;
    width: 100%;
    text-align: center;
    display: block;
    padding: 0 3.2vw;
}
.page-title h1 {
    font-size: min(5vw,2.4rem);
    color: var(--color-wh);
    padding: 8px;
    margin: 0;
    text-align: center;
    box-shadow: 4px 4px 0px var(--color-marine), inset 4px 4px 0 var(--color-red);
    background: var(--color-bk);
    border-radius: 4px;
    width: auto;
    display: inline-block;
    min-width: 80%;
}
.page-title + .thumbnail {
    height: 42vw;
}
.page-title + .thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.text-area {
    border-bottom: rgba(225,225,225,1.00) 1px solid;
    padding: 40px 3.2vw;
}
.text-area.login-top{
border: 1px solid #00698c30;
border: 1px solid #00698c30;
    margin: 20px 20px;
    border-radius: 5px;
    background-color: #fbfaef;
    padding: 40px 20px;
    font-size: 1.6rem;
    color: #655757;
    line-height: 1.8;
}

.text-area h2 {
    position: relative;
    color: var(--color-bk);
    background: var(--color-wh);
    box-sizing: border-box;
    z-index: 9;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    filter: drop-shadow(0 0 4px rgba(var(--color-bk-rgb) ,.2));
    padding: 8px;
    font-size: 2rem;
    margin: 40px 0 24px 0;
}
.text-area h2:first-child {
    margin: 0px 0 30px 0;
}
.text-area h2 a {
    text-decoration:none;
}
.text-area > h3 {
    margin: 20px 0 30px;
    padding: 8px;
    background: var(--color-marine);
    color: #fff;
    border-radius: 4px;
    font-size: 1.8rem;
}
.text-area h4 {
    background-color: var(--color-light);
    padding: 4px 8px;
    margin: 10px auto 20px;
    border-radius: 4px;
}

.text-area .size-medium, .text-area .size-full, .text-area .size-large {
    width: auto;
    max-width: 100%;
    margin: 0 0 20px;
    height: auto;
    border-radius: 4px;
}
.text-area .image-1 {
    width:auto;
    max-width:100%;
    height:auto;
}
@media (min-width: 768px) {
    .page-title h1 {
        font-size: 4rem;
    }
    .page-title + .thumbnail {
        height: 32vw;
        max-height: 400px;
    }
}
@media (min-width: 1200px) {
    .page-title {
        top: 240px;
    }
    .page-title h1 {
        font-size: 4.8rem;
    }
    .page-title + .thumbnail img {
        max-height: 400px;
    }
    .text-area {
        padding: 80px calc((100% - 890px)/2);
    }
    .text-area h2 {
        font-size: 3.2rem;
        padding: 12px 16px;
        margin: 64px 0 32px 0;
    }
    .text-area > h3 {
        font-size: 2.4rem;
        padding: 12px 16px;
        margin: 60px 0 30px;
    }
    .text-area h4 {
        padding: 8px 12px;
        font-size: 1.8rem;
    }

}


/* Breadcrumbs
---------------------------------*/
#breadcrumbs {
    padding: 12px 3.2vw 12px;
    margin: 0;
    text-align: center;
    background-color: var(--color-bk);
    color: var(--color-wh);
    font-size: 1.4rem;
}
#breadcrumbs a {
    color: white;
}
@media (min-width: 768px) {
    #breadcrumbs {
        padding: 24px;
        font-size: 1.6rem;
    }
}

/* Page List
---------------------------------*/
ul.simple, ol.simple {
    position: relative;
    margin: 0 0 32px; 
    padding: 16px;
  background-color: #f3f3f3;
  background-image: radial-gradient(circle, #fff 2px, transparent 2px);
  background-size: 10px 10px;
}
ul.simple li {
    list-style-type: circle;
    margin-left: 24px;
}
ul.simple li + li {
    margin-top: 8px;
}
ol.simple li {
    margin: 0 0 15px;
    list-style-type:auto;
    margin-left: 30px;
}
.simple_dl_list {
    position: relative;
    margin: 0 0 32px; 
    padding: 16px;
    background-image: url(img/bg-18.png);
    background-size: 40px;
    border-radius: 4px;
}
.simple_dl_list dt {
    font-weight: 700;
    color: var(--color-red);
}
.simple_dl_list dd {
    margin: 8px 0 0 0;
}
.simple_dl_list dd + dt {
    margin-top: 16px;
}
@media (min-width: 768px) {
    ul.simple, ol.simple {
        padding: 24px;

    }
    ul.simple li + li {
        margin-top: 12px;
    }
    .simple_dl_list {
        padding: 24px;
    }
    .simple_dl_list dt {
        font-size: 1.7rem;
    }
    .simple_dl_list dd + dt {
        margin-top: 24px;
    }
    .simple_dl_list dd {
        margin: 12px 0 0 0;
    }
}



/* Page Table
---------------------------------*/
table.no-border {
    position: relative;
    width: 100%;
    background-image: url(img/bg-17.png);
    background-size: 40px;
    border-collapse: collapse;
    margin: 16px 0 32px;
    border-radius: 4px;
    font-size: 1.4rem;
}
table.no-border th, table.no-border td {
    vertical-align: top;
    box-sizing: border-box;
    padding: 16px 8px;
    border-bottom: 1px solid var(--color-marine);
}
table.no-border tr:last-child th, table.no-border tr:last-child td {
    border: none;
}
table.no-border th {
    color: var(--color-marine);
}
@media (min-width: 768px) {
    table.no-border {
        margin: 24px 0 40px;
        font-size: 1.6rem;
    }
    table.no-border th, table.no-border td {
        padding: 20px 8px;
    }
}


.staff { padding: 0 10px;}
.staff h3 {font-size: 150%;text-align: center; margin: 0;border: none;}
.staff h3 + p {text-align: center;font-size: 85%;border-bottom: rgba(0,0,0,1.00) 1px solid;color: rgba(95,95,95,1.00);}
.staff .staff-prof {padding: 20px 0 40px;}
.staff .staff-prof img {margin: 0 auto 10px; width: 100%;height: auto;}
.staff .staff-prof p {line-height: 1.7em;margin: 0 0 30px;}



/* Page FAQ
---------------------------------*/
.text-area dl.faq {
    letter-spacing: 1px;
}
.text-area dl.faq dt {
    font-size: 1.8rem;
    line-height: 1.8;
    padding: 0 0 0 56px;
    position: relative;
}
.text-area dl.faq dt::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--color-red);
    margin: auto;
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--color-wh);
    height: 48px;
    width: 48px;
    background: #fff;
    padding: 4px 8px 8px;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url(img/bg-13.png);
    background-size: 40px;
}
.text-area dl.faq dd {
    padding: 0 0 32px 56px;
    position: relative;
    margin: 20px 0 40px;
    color: var(--color-dark);
    border-bottom: dashed 2px var(--color-dark);
}
.text-area dl.faq dd::before {
    content: "A";
    position: absolute;
    left: 0;
    top: 0;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--color-marine);
    margin: auto;
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--color-wh);
    height: 48px;
    width: 48px;
    background: #fff;
    padding: 4px 8px 8px;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url(img/bg-11.png);
    background-size: 40px;
}

h5.blog-title {font-size: 120%;}
p.date {margin: 0;font-size: 85%;color: rgba(188,188,188,1.00);}

/* 250417 faq改修 */
.text-area dl.faq * {
    box-sizing: border-box;
}
.text-area dl.faq {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.text-area dl.faq dt {
    cursor: pointer;
    padding: 1em 32px 1em 60px;
    transition: .3s;
    width: 100%;
    min-height: calc(48px + 2em);
    display: flex;
    align-items: center;
}
.text-area dl.faq dt:not(:first-child) {
    border-top: dashed 2px rgba(0, 161, 220, 0.2);
}

.text-area dl.faq dt::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: solid 3px var(--color-red);
    border-bottom: solid 3px var(--color-red);
    position: absolute;
    top: 50%;
    right: 10px;
    translate: 0 -50%;
    rotate: 45deg;
    transition: .3s;
}

.text-area dl.faq dt.open::after {
    rotate: 225deg; 
    border-right: solid 3px var(--color-marine);
    border-bottom: solid 3px var(--color-marine);
}
.text-area dl.faq dd {
    transition: .3s;
    padding: 0 0 1em 60px;
    margin: 0;
    border: none;

    max-height: 0;
    display: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

.text-area ul.faq_toc {
    background: none;
    margin: 0 auto;
    width: fit-content;
}

.text-area ul.faq_toc li {
    list-style: none;
    margin: 0;
}

.text-area ul.faq_toc li + li {
    margin-top: 8px;
}

.text-area ul.faq_toc li a {
    text-decoration: none;
    color: var(--color-bk);
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    background-color: #f3f3f3;
    background-image: radial-gradient(circle, #fff 2px, transparent 2px);
    background-size: 10px 10px;
    padding: 1em 3em 1em 2.8em;
    box-shadow: -3px 3px 3px rgba(var(--color-bk-rgb), .2);
    transition: .3s;
    position: relative;

}
.text-area ul.faq_toc li a::before {
    content: "";
    width: .8em;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--color-wh);
    border-radius: 50%;
    border: solid 1px #f3f3f3;
    position: absolute;
    top: 50%;
    left: 1em;
    translate: 0 -50%;
}
.text-area ul.faq_toc li a::after {
    content: "";
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 2;
    background-color: #fff;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    position: absolute;
    top: 0;
    right: -1px;
}

@media screen and (min-width: 768px) {
    .text-area ul.faq_toc {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 1em;
    }
    .text-area ul.faq_toc li + li {
        margin: 0;
    }
    .text-area ul.faq_toc li a:hover {
        translate: 3px -3px;
        box-shadow: -6px 6px 3px rgba(var(--color-bk-rgb), .2);
    }
}
@media screen and (min-width: 1200px) {
    .text-area ul.faq_toc {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1.5em;
    }

    .text-area ul.faq_toc li a {
        padding: 0.5em 3em 0.5em 2.8em;
    }
}

/* Page Contact
---------------------------------*/

dl.mail-form dt, dl.mail-form dd {
    padding: 10px;
}
dl.mail-form p {
    font-size:90%;
    margin:10px 0;
    color:#777;
}
dl.mail-form dt {
    border-bottom: var(--color-dark) 1px solid;
}
dl.mail-form dd {
    margin: 0 0 10px;
}
dl.mail-form dd input[type="text"],
dl.mail-form dd input[type="email"],
dl.mail-form dd input[type="tel"],
dl.mail-form dd input[type="password"],
dl.mail-form dd select {
    height: 60px;
}
dl.mail-form dd input[type="text"],
dl.mail-form dd input[type="email"],
dl.mail-form dd input[type="tel"],
dl.mail-form dd input[type="password"],
dl.mail-form dd textarea,
dl.mail-form dd select {
    display: block;
    width: 100%;
    font-size: 100%;
    margin: 0;
    border: rgba(0,0,0,0.05) 1px solid;
    padding: 5px 10px;
    box-sizing: border-box;
}
dl.mail-form dd select {
    font-size: 100%;
    margin: auto;
    border: rgba(0,0,0,0.05) 1px solid;
    padding: 5px 10px;
    box-sizing: border-box;
    width: auto;
    display: inline-block;
}
dl.mail-form dd.form-date select{width:8em;}
dl.mail-form dd input[type="checkbox"] {
    display:none
}
dl.mail-form dd input[type="checkbox"] + span {
    display:block;
    width:auto;
    margin:0 auto 10px;
    background-color:#eaeaea;
    line-height:60px;
    padding:0 20px;
    text-align:center;
    cursor:pointer;
}
dl.mail-form dd input[type="checkbox"] + span:hover {
    background-color:rgba(246,170,0,0.80);
    color:white;
}
dl.mail-form dd input[type="checkbox"]:checked + span {
    background-color:rgba(246,170,0,1.00);
    color:white;
}
input[type="submit"].wpcf7-submit {
    display: block;
    padding: 16px;
    border-radius: 28px;
    background: var(--color-red);
    border: 0;
    box-shadow: 0px -4px 0px rgba(0,0,0,.2) inset;
    color: var(--color-wh);
    text-decoration: none;
    min-width: 240px;
    margin: 40px auto 0;
    font-size: 1.6rem;
    font-weight: 700;
    transition: opacity .3s;
}

.wpcf7-form-control-wrap {
    position: relative;
    margin: 8px 0 0;
    display: inline-block;
    width: 100%;
}
dl.mail-form dd.form-date .wpcf7-form-control-wrap {
    width: auto;
}
dl.mail-form dd.form-age .wpcf7-form-control-wrap {
    width: 10rem;
}
.policy {
    margin: 20px 0;
    background-color:white;
    padding: 0px 20px;
    height: 200px;
    overflow: auto;
    font-size: 95%
}
.policy b {
    display: block;
    padding: 20px 0px 5px;
}
div.rule {
    display: block;
    width: 85%;
    height: 200px;
    overflow: auto;
    margin: auto;
    border: 1px solid #eaeaea;
    padding: 50px 25px;
    font-size: 85%;
    line-height: 1.8em;
    color: #888;
}
div.rule strong{font-size: 16px;color: #666;display: block;margin: 20px 0;}
div.rule p{color: #888;}
div.rule li {
	padding: 5px 40px;
}

p.submit-quiz {
    background: #333;
    color: white !important;
    width: 300px;
    margin: 32px auto 0;
    text-align: center;
    padding: 15px !important;
    border-radius: 6px;
}
p.submit-quiz span {
    max-width: 90%;
    color: white;
}
p.submit-quiz label > span {
    display: block;
    color: #f24d7c;
    font-size: 160%;
    margin: 7px auto;
}
p.submit-quiz input {
    line-height: 40px;
    height: 40px;
    width: 200px;
    text-align: center;
}
.required:after {
    content: "必須";
    background-color: var(--color-red);
    color: white;
    margin: 0 0 0 10px;
    font-size: 1.2rem;
    padding: 2px 5px;
    border-radius: 2px;
}
/* reCAPTCHA */
div.grecaptcha-badge {display:none}



/* 鍵付ページフォーム */
form.post_password {
    width: 95%;
    text-align: center;
    background-color: #eaeaea;
    padding: 20px 10px;
    border: 1px solid #00000022;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 40px auto;
    max-width: 320px;
}
form.post_password input[type="password"] {
    width: 80%;
    line-height: 40px;
    margin: 0 0 20px;
    text-align: center;
}
form.post_password input[type="submit"] {
    height: 50px;
    width: 180px;
}
form.post_password input[type="password"]{width: 80%; line-height: 40px; margin: 0 0 20px;text-align: center;}
form.post_password input[type="submit"] {height: 50px; width: 180px;}
.pw-page {
    padding: 20px;
    line-height: 30px;
}
@media (min-width: 768px) {
    .pw-page {
        text-align: center;
        padding: 100px 0 50px;
    }
}




@media (min-width: 768px) {
    dl.mail-form {
        display: flex;
        flex-wrap: wrap;
    }
    dl.mail-form dt {
        width: 29%;
        box-sizing: border-box;
        padding: 24px 0 0;
        border: none;
    }
    dl.mail-form dd {
        width: 70%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    dl.mail-form dd + dt {
        margin-top: 24px;
    }
    dl.mail-form dd:nth-of-type(n+2) {
        margin-top: 24px;
    }
    input[type="submit"].wpcf7-submit:hover {
        opacity: .7;
    }
}
@media screen and (max-width: 768px) and (min-width: 319px) {
    dl.mail-form dd select[name="yy"],
    dl.mail-form dd select[name="mm"],
    dl.mail-form dd select[name="dd"] {
        width: auto;
        display: inline-block;
        padding: 5px 10px;
        margin: 0 10px;
    }
}



















/*---------------------------------
Category
---------------------------------*/
/* 通勤
---------------------------------*/
.section-area-list .section-area {
    background-image: url(img/bg-01.png);
    background-size: 40px;
}
.section-area-list .section-area:nth-of-type(2n +1) {
    background-image: url(img/bg-07.png);
    background-size: 40px;
}
.section-area-list .section-area:nth-of-type(3n +1) {
    background-image: url(img/bg-04.png);
    background-size: 40px;
}
.section-area .section-title a {
    color: var(--color-wh);
    text-decoration: none;
}
.section-area .area-column .thumbnail {
    border-radius: 4px;
    box-shadow: 4px 4px 0px var(--color-light);
    overflow: hidden;
    font-size: 0;
    width: calc(100% - 2px);
    width: 60%;
    margin: 0 auto;
    border: solid 8px #fff;
    max-width: 240px;
}
.section-area .area-column .thumbnail img {
    border-radius: 2px;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.section-area .area-column p {
    margin: 16px 0;
}



.area-map-wrapper {
    margin: 0 0 40px;
}
.area-map img {
    width: 100%;
}
.area-item {
    margin-top: 32px;
    background: var(--color-wh);
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
}
.area-item h3 {
    padding: 0 0 8px;
    margin: 0;
    border-bottom: 1px solid #cdcdcd;
    text-align: center;
}
.area-item h3 a {
    text-decoration: none;
    color: #333;
}
.area-item-list {
    padding: 16px 0 0;
    margin: 0;
}
.area-item-list li {
    position: relative;
    padding-left: 24px;
    margin: 4px 0;
    background: none;
}
.area-item-list li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #333;
    height: 2px;
    width: 8px;
    margin: auto;
}


@media (min-width: 1100px) {
    .area-map-wrapper {
        position: relative;
        width: 100%;
    }
    .area-map {
        width: 40%;
        margin: 0 auto;
        height: 640px;
        padding-top: 140px;
    }
    .area-item h3 {
        font-size: 1.6rem;
    }
    .area-map-wrapper .area-item {
        width: 30%;
        position: absolute;
        margin-top: 0;
    }

    .area-map-wrapper .area-item:nth-of-type(2) {
        top: 0;
        right: 0;
    }
    .area-map-wrapper .area-item:nth-of-type(3) {
        top: 156px;
        right: 0;
    }
    .area-map-wrapper .area-item:nth-of-type(4) {
        bottom: 0;
        right: 0;
    }
    .area-map-wrapper .area-item:nth-of-type(5) {

        top: 0;
        left: 0;
    }
    .area-map-wrapper .area-item:nth-of-type(6) {
        top: 256px;
        left: 0;
    }
    .area-map-wrapper .area-item:nth-of-type(7) {
        bottom: 0;
        left: 0;

    }

}


@media (min-width: 768px) {
    .section-area .container {
        max-width: 890px;
    }
    .section-area .area-column {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .section-area .area-column .thumbnail {
        width: 40%;
    }
    .section-area .area-column p {
        width: 56%;
        margin: 0 auto;
    }
}







/* ブログ
---------------------------------*/

.section-blog {
    background-image: url(img/bg-06.png);
    background-size: 40px;
}
.blog-item {
    box-shadow: 4px 4px 0px var(--color-blue), -4px -4px 0 var(--color-yellow);
    padding: 16px;
    background: var(--color-wh);
    border-radius: 4px;
    margin: 40px 0 0;
    position: relative;
}
.blog-item + .blog-item {
    margin-top: 64px;
}
.blog-item h2 {
    background: var(--color-light);
    padding: 8px;
    border-radius: 2px;
    margin: 0 0 16px
}
.blog-item h2 a {
    text-decoration: none;
}
.blog-item .thumbnail {
    border-radius: 2px;
    box-shadow: 4px 4px 0px var(--color-light);
    overflow: hidden;
    font-size: 0;
    width: calc(100% - 2px);
}
.blog-item .thumbnail img {
    height: auto;
    width:100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.blog-item p {
    margin: 16px 0;
}
.blog-item .blog_info {
    position: absolute;
    top: -30px;
    right: 10px;
    font-size: 1.4rem;
    padding: 0px;
    margin: auto;
    color: var(--color-wh);
    background-color: var(--color-marine);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.blog-item .blog_info ul {
    display: flex;
    flex-wrap: wrap;
}
.blog-item .blog_info li.cat {
    color: var(--color-wh);
    background: var(--color-red);
    display: block;
    padding: 4px 8px;
}
.blog-item .blog_info li.cat a {
    color: var(--color-wh);
    text-decoration: none;
}
.blog-item .blog_info li.cal {
    padding: 4px 8px;
    margin: 0;
}
@media (min-width: 1000px) {
    .section-blog .container {
        max-width: 890px;
    }
    .blog-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .blog-list .blog-item {
        width: 48%;
        padding: 24px;
        margin: 64px 0 0;
    }
    .blog-list .blog-item + .blog-item {
        margin-left: 4%;
        margin-top: 64px;
    }
    .blog-list .blog-item:nth-of-type(2n+1){
        margin-left: 0;
    }
}






/*---------------------------------
Single
---------------------------------*/
/* 店舗
---------------------------------*/
/* ギャラリー */
.text-area .photo-box .photo {
    width: 80vw;
    background-color: white;
    margin: 0 auto 30px;
    border-radius: 4px;
    border: solid 1px var(--color-light);
    padding: 8px;
    overflow: hidden;
    box-shadow: 4px 4px 0px var(--color-light);
}
.text-area .photo-box .img-area {
    display: block;
    width: 100%;
}
.text-area .photo-box .img-area img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin: 0;
}
.text-area .photo-box p {
    padding: 8px;
    text-align: center;
    font-size: 1.4rem;
    margin: 0;
}
@media (min-width: 768px) {
    .text-area .photo-box {
        display: flex;
		flex-wrap: wrap;
        justify-content: space-between;
    }
    .text-area .photo-box .photo {
        width: 48%;
        margin: 0 0 30px;
    }
    .text-area .photo-box p {
        font-size: 1.6rem;
    }
}
/* 店舗概要 */
.access table {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 10px;
    border-collapse: collapse;
    font-size: 94%;
    line-height: 1.7em;
    border-radius: 4px 4px 0 0;
    background-image: url(img/bg-06.png);
    background-size: 40px;
}
.access table th, .access table td {
    padding: 10px;
    border-bottom: 1px solid rgba(224,224,224,0.20);
    font-size: 1.4rem;
}
.access table th {
    color: rgba(100,100,100,1.00);
    font-weight: 400;
    width: 5em;
    font-size: 1.3rem;
}
.access table td {
    vertical-align: top;
}
.access table tr:last-child th, .access table tr:last-child td {
    border: none;
}
.access iframe {
    width: 100%;
    height: 500px;
}
@media (min-width: 768px) {
    .access {
        display: flex;
    }
    .access table {
        width: 50%;
    }
    .access table th, .access table td {
        padding: 16px;
        font-size: 1.6rem;
    }
    .access table th {
        font-size: 1.5rem;
    }
    .access > div,
    .access > p {
        width: 50%;
    }
    .access iframe {
        height: 100%;
    }
}
/* タグリスト（おすすめ待遇）*/
ul.tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px;
    margin: 0 0 32px;
    background-image: url(img/bg-18.png);
    background-size: 40px;
    border-radius: 4px;
}
ul.tag-list li {
    font-size: 1.4rem;
    display: block;
    margin: 0;
}
ul.tag-list li a {
    color: var(--color-wh);
    text-align: center;
    display: block;
    text-decoration: none;
    background-color: var(--color-red);
    border-radius: 2px;
    padding: 4px 8px;
    border-radius: 15px;
}
@media (min-width: 768px) {
    ul.tag-list {
        padding: 24px;
        margin: 0 0 48px;
    }
    ul.tag-list li a:hover {
        opacity: 0.85;
    }
    ul.tag-list li {
        font-size: 1.6rem;
    }
    ul.tag-list li a {
        border-radius: 17px;
    }
}
/* 待遇アイコン */
ul.Commute-t {
    margin: 0 0 100px 0;
    font-size: 1.2rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    justify-content: space-between;
}
ul.Commute-t > li {
    width: 90px;
    height: 20px;
    padding: 75px 6px 6px;
    background-image: url(img/icon-sozai.gif);
    background-size: 90px 2250px;
    background-position-x: center;
    text-align: center;
    font-size: 14px;
    background-repeat: no-repeat;
    margin: 0 auto 30px;
    border-radius: 4px;
    border: solid 1px var(--color-light);
    overflow: hidden;
    box-shadow: 4px 4px 0px var(--color-light);
}
.icon-no01{background-position:0px 0px;}/*24時間自由*/
.icon-no02{background-position:0px -90px;}/*即日勤務*/
.icon-no03{background-position:0px -180px;}/*主婦OK*/
.icon-no04{background-position:0px -270px;}/*交通費*/
.icon-no05{background-position:0px -360px;}/*副業OK*/
.icon-no06{background-position:0px -450px;}/*短期可*/
.icon-no07{background-position:0px -540px;}/*長期歓迎*/
.icon-no08{background-position:0px -630px;}/*長期休暇OK*/
.icon-no09{background-position:0px -720px;}/*初心者OK*/
.icon-no10{background-position:0px -810px;}/*髪型自由*/
.icon-no11{background-position:0px -900px;}/*服装自由*/
.icon-no12{background-position:0px -990px;}/*駐車場あり*/
.icon-no13{background-position:0px -1080px;}/*単発OK*/
.icon-no14{background-position:0px -1170px;}/*社員登用あり*/
.icon-no15{background-position:0px -1260px;}/*日払い*/
.icon-no16{background-position:0px -1350px;}/*送迎あり*/
.icon-no17{background-position:0px -1440px;}/*制服・衣装*/
.icon-no18{background-position:0px -1530px;}/*託児所有*/
.icon-no19{background-position:0px -1620px;}/*履歴書不要*/
.icon-no20{background-position:0px -1710px;}/*友人同士OK*/
.icon-no21{background-position:0px -1800px;}/*シフト自由*/
.icon-no22{background-position:0px -1890px;}/*週一日から*/
.icon-no23{background-position:0px -1980px;}/*まかない有*/
.icon-no24{background-position:0px -2070px;}/*住み込み可*/
.icon-no25{background-position:0px -2160px;}/*ボーナス有*/
@media (min-width: 768px) {
    ul.Commute-t {
        margin: 0 auto 100px;
        max-width: 690px;
        font-size: 1.4rem;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        width: auto;
        justify-content: flex-start;
    }
    ul.Commute-t > li {
        padding: 75px 12px 12px;
        font-size: 1em;
        margin: 0 20px 20px;
    }
}

/* 応募ボタン */
ul.entry {
    max-width: 320px;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
ul.entry > li {
    margin: 30px auto;
}
ul.entry > li a {
    color: var(--color-wh);
    text-decoration: none;
    border-radius: 3px;
    display: block;
    padding: 15px 0;
    box-sizing: border-box;
    border-bottom: 4px solid rgba(0,0,0,.3);
    border-radius: 29px;
}
ul.entry > li a.mail {
    background-color: var(--color-red);
}
ul.entry > li a.line {
    background-color: #06C755;
}
ul.entry > li a.tel {
    background-color: var(--color-marine);
}
@media (min-width: 768px) {
    ul.entry {
        display: flex;
        justify-content: center;
        max-width: none;
    }
    ul.entry > li a {
        padding: 20px 60px;
        transition: background-color .3s;
        border-radius: 35px;
    }
    ul.entry > li a:hover {
        background-color: #666;
    }

}


/* 投稿
---------------------------------*/
.single-head {
    position: relative;
}
.single-head h1 {
    font-size: min(5vw,2.4rem);
    color: var(--color-wh);
    padding: 8px;
    text-align: center;
    box-shadow: 4px 4px 0px var(--color-marine), inset 4px 4px 0 var(--color-red);
    background: var(--color-bk);
    border-radius: 4px;
    display: inline-block;
    min-width: 80%;
    position: absolute;
    top: 4vw;
    left: 0;
    right: 0;
    width: 80%;
    margin: auto;
}
.single-head .thumbnail2 {
    width: 100%;
    max-height: calc(100vw / 16 * 9);
    margin: 0;
    overflow: hidden;
    background-image: url(img/noimage.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.single-head .thumbnail2 img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto 1536 / 672;
    border-radius: 4px 4px 0 0;
    object-fit: cover;
}


.single-head ul.single-info {
    display: flex;
    justify-content: space-around;
    -ebkit-justify-content: space-around;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    line-height: 35px;
}
.single-head ul.single-info li {
    box-sizing: border-box;
    text-align: center;
}
.single-head ul.single-info li a {
    text-decoration: none;
}
.single-head ul.single-info li.cat {
    width: 100%;
    background-color: var(--color-light);
    margin: 0;
    padding: 8px;
}
.single-head ul.single-info li.cal {
    color: var(--color-wh);
    font-size: 1.2rem;
    width: 50%;
    background-color: var(--color-dark);
    margin: 0;
    padding: 8px;
}
@media (min-width: 768px) {
    .single-head h1 {
        font-size: 4rem;
    }
    .single-head .thumbnail2 img {
        max-height: 400px;
    }
    .single-head ul.single-info li.cal {
        width: 38%;
        font-size: 1.4rem;
    }
    .single-head ul.single-info li.cat {
        width: 24%;
    }
}



.blog-nav-area {
    margin: 50px auto;
    width: 100%;
}
.blog-nav-area a {
    text-decoration:
    none;
    color: white;
}
.blog-nav-area .nav-below {
    display:flex;
    display:-webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}
.blog-nav-area .nav-below span {
    display: block;
    width: 45%;
    text-align: center;
    max-width: 240px;
}
.blog-nav-area .nav-below span a {
    position: relative;
    display: block;
    padding: 12px;
    border-radius: 2px;
    background: var(--color-marine);
    box-shadow: 0px 4px 0px #00455c;
    color: var(--color-wh);
    text-decoration: none;
    max-width: 240px;
    text-align: center;
    margin: 0 auto;
    transition: transform .3s, box-shadow .3s;
    border-radius: 25px;
}
@media (min-width: 768px) {
    .blog-nav-area {
        margin: 60px auto;
        width: 768px;
    }
    .blog-nav-area .nav-below span a:hover {
        box-shadow: 0px 0 0px #00455c;
        transform: translateY(4px);
    }
}




body.single figure{position: relative;}
body.single figure img{margin: auto; width: auto; max-width: 100%; height: auto;display: block;}
body.single figure figcaption{text-align:center;font-size: 90%;}

p.has-large-font-size{font-size:16px!important;}

figure.wp-block-table {margin:30px auto 10px;}
figure.wp-block-table table tr{background:#f7f7f7;}
figure.wp-block-table table tr:nth-child(even){background:#fff;}
figure.wp-block-table table tr td{padding:5px;}






/*
TOC WP目次プラグイン
---------------------------------*/
#toc_container { width:100%;background-color: white;    border: 1px solid rgba(0,0,0,0.15); margin: 0 0 30px; padding:15px 10px; box-sizing: border-box;font-size: 95%; }
#toc_container > ul {padding:5px 0;}
#toc_container li{padding: 5px;}
#toc_container > ul > li > ul {padding: 0 0 0 1em;}





/*---------------------------------
Aside
---------------------------------*/
aside {background-color: rgba(239,239,239,1.00);padding: 60px 10px 60px;border-bottom: rgba(225,225,225,1.00) 1px solid; }
aside h4 {text-align: center;margin: 0 0 30px;color: #9EB0B7;}
aside .sns-box ul li {display: block; width: 270px; box-sizing: border-box;text-align: center;margin:0 auto 30px;}
aside .sns-box ul li a {font-size:85%;height: 90px;box-sizing: border-box;padding: 15px;line-height: 30px; display: block; color: white;text-decoration: none;}
aside .sns-box ul li a.tw {background-color: rgba(29,161,242,1.00);}
aside .sns-box ul li a.fb {background-color: rgba(66,103,178,1.00);}
aside .sns-box ul li a.ig {background-color: white;color: black;border: 1px rgba(0,0,0,1.00) solid;}
aside .sns-box ul li a:hover {opacity:0.7;}



/*---------------------------------
Footer
---------------------------------*/
footer {
    padding: 30px 3.2vw 250px;
    color: var(--color-wh);
    background-color: var(--color-bk);
}
footer .footer-logo {
    width: 160px;
    margin: 0 0 32px;
    display: block;
}
footer .info {
    margin: 0 0 30px;
}
footer > p {
    margin: 0 0 40px;
    font-size: 1.4rem;
}
footer .info table {
    width: 100%;
    margin: 0 auto 30px;
    box-sizing: border-box;
    padding: 0px 0px;
    border-collapse: collapse;
    font-size: 85%;
    line-height: 1.7em;
}
footer .info table a {
    color: rgba(148,148,148,1.00);
    text-decoration: none;
}
footer .info table th,
footer .info table td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--color-dark);
    text-align: left;
}
footer .info table th {
    font-weight: 400;
}
footer .info table td {
    vertical-align: top;
}
footer .info table tr:last-child th, footer .info table tr:last-child td {
    border: none;
}
footer .info ul.g-menu {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}
footer .info ul.g-menu li {
    display: block;
    width: 48%;
    margin: 0 0 12px;
}
footer .info ul.g-menu li a {
    font-size: 1.4rem;
    color: var(--color-wh);
    text-decoration: none;
    display: block;
    padding: 8px;
    background: var(--color-dark);
    box-shadow: 0px 4px 0px #555555;
    text-align: left;
    border-radius: 4px;
    line-height: 1.2;
}
footer .info ul.g-menu li a span {
    font-size: 1rem;
    color: var(--color-medium);
}
footer a.footer-btn {
    background: var(--color-wh);
    color: var(--color-bk);
    display: inline-block;
    padding: 12px 16px;
    font-size: 1.3rem;
    max-width: 240px;
    width: 100%;
    text-decoration: none;
    border-radius: 25px;
    position: relative;
}
footer a.footer-btn::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f105";
    top: 50%;
    right: 16px;
    color: var(--color-primary-shade);
    font-size: 2rem;
    margin-top: -10px;
    transition: color .3s;
}
footer .footer-note {
    font-size: 1.3rem;
}
footer .copyright {
    text-align: center;
}
ul.fixed-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    display: -webkit-flex;
    z-index: 10;
}
ul.fixed-btn li {
    margin: 0 5px 5px 0;
    line-height: 60px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
ul.fixed-btn li a {
    letter-spacing: 0.5px;
    box-sizing: border-box;
    font-size: 1.2rem;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #FB2248;
    position: relative;
    padding-top: 10px;
    transition: opacity .3s;
}
ul.fixed-btn li:nth-child(2) a {
    background-color: var(--color-marine);
}
ul.fixed-btn li:nth-child(3) a {
    background-color: #06C755;
    padding: 0;
}
ul.fixed-btn li a:hover {
    opacity: .7;
}
ul.fixed-btn li:nth-child(1) a::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f015";
    left: calc( 50% - 12px );
    top: 8px;
    color: var(--color-primary-shade);
    font-size: 2rem;
    transition: color .3s;
}
ul.fixed-btn li:nth-child(2) a::after {
    position: absolute;
    font: var(--fa-font-solid);
    content: "\f062";
    left: calc( 50% - 8px );
    top: 8px;
    color: var(--color-primary-shade);
    font-size: 2rem;
    transition: color .3s;
}


@media (min-width: 768px) {
    footer .info ul.g-menu li a {
        transition: opacity .3s;
    }
    footer .info ul.g-menu li a:hover {
        opacity: .7;
    }
    footer a.footer-btn {
        transition: .3s;
    }
    footer a.footer-btn:hover {
        opacity: .7;
    }
}

@media (min-width: 1200px) {
    footer {
        padding: 112px 0 80px;
    }
    footer .footer-inner {
        max-width: 1280px;
        padding: 0 40px;
        margin: 0 auto;
    }
    footer .info {
        display: flex;
        justify-content: center;
        margin: 0 0 64px;
    }
    footer .info .info-left {
        width: 32%;
    }
    footer .info ul.g-menu {
        width: 40%;
        display: block;
        margin-left: 10%;
    }
    footer .info table {
        font-size: 1.6rem;
    }
    footer .info ul.g-menu li {
        width: 100%;
    }
    footer .info ul.g-menu li a {
        background: none;
        box-shadow: none;
        font-size: 1.6rem;
    }
    footer .info ul.g-menu li a span {
        font-size: 1.2rem;
    }
    footer .footer-note {
        font-size: 1.4rem;
        text-align: center;
    }
    ul.fixed-btn li {
        margin: 0 12px 16px 0;
        line-height: 80px;
    }
    ul.fixed-btn li:last-child {
        margin-right: 16px;
    }
    ul.fixed-btn li a {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }
    ul.fixed-btn li:nth-child(1) a::after {
        left: calc( 50% - 14px );
        top: 10px;
        font-size: 2.4rem;
    }
    ul.fixed-btn li:nth-child(2) a::after {
        left: calc( 50% - 10px );
        top: 12px;
        font-size: 2.4rem;
    }
}

/**アニメ********************
*************************************/
@-webkit-keyframes PRanime {
    0% {
		opacity:0;
		}
    25% {
		}
    50% {
		}
    75% {
		}
    100% {
		opacity:1;
		}

}

/*---------------------------------
Login お仕事ログインページのみ
---------------------------------*/
main {
    position: relative;
}
h1.login-title {
    font-size: 2.4rem;
    background-color: var(--color-bk);
    color: white;
    text-align: center;
    padding: 15px;
    margin: 0;
}
.login-page ul.foot-menu {
    display: flex;
    display: -webkit-flex;
    position: fixed;
    bottom: 0;
    background: var(--color-bk);
    width: 100%;
    height: 70px;
    justify-content: space-around;
    -wenkit-justify-content: space-around;
    z-index: 99;
}
.login-page ul.foot-menu li {
    display: block;
    width: auto;
    font-size: 75%;
    width: calc( 100% / 3 );
    text-align: center;
    border-left: 1px solid #ffffff33;
    border-right: 1px solid #ffffff66;
}
.login-page ul.foot-menu li a {
    color: white;
    text-decoration: none;
    padding: 45px 10px 0;
    display: block;
    box-sizing: border-box;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 10px;
}
.login-page ul.foot-menu li a.start {
    background-image: url(https://babyrockets.com/wp-content/uploads/2021/10/start.png);
}
.login-page ul.foot-menu li a.entry-bank {
    background-image: url(https://babyrockets.com/wp-content/uploads/2021/10/bank.png);
}
.login-page ul.foot-menu li a.hibarai {
    background-image: url(https://babyrockets.com/wp-content/uploads/2021/10/hibarai.png);
}
.login-page ul.foot-menu li a {
    color: white;
    text-decoration: none;
    padding: 45px 10px 0;
    display: block;
    box-sizing: border-box;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 10px;
}
ul.login-menu {
    border-bottom:1px solid #EAEAEA;
    background-color: #666;
    display: block;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
ul.login-menu li {
    text-align:center;
    font-size:90%;
    width:50%;
    line-height:35px;
}
ul.login-menu li a{
    display:block;
    padding:10px 0px;
    text-decoration:none;
    color:#fff;
    background-color:#333;
}
ul.login-menu li a:hover{
    background-color:white;
    color:black;
}
ul.rules {
    width: 90%;
    height: 200px;
    overflow: auto;
    margin: 30px auto;
    background-color: #eaeaea;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #00000022;
    line-height: 1.9;
}
ul.rules li {
    font-size: 90%;
}

/* invoice */
.section_invoice {
    padding: 0;
    margin: 0 0 40px;
}

.section_invoice .container {
    box-shadow: 4px 4px 0px var(--color-marine), -4px -4px 0 var(--color-red);
    padding: 12px;
    background: var(--color-wh);
    border-radius: 4px;
    margin: 24px 0 0;
    filter: drop-shadow(0 0 4px rgba(var(--color-bk-rgb) ,.2));
}
.section_invoice .container h3 {
    margin: 0 0 24px;
    color: var(--color-red);
    border-bottom: 3px solid var(--color-red);
    padding-bottom: 8px;
}
.section_invoice .table {
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 1.3rem;
    margin: 24px 0 0;
}
.section_invoice .table th, .table td {
    padding: 10px 5px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #FAF1EA;
}
.section_invoice .table th {
    width: 120px;
    background: #FAF1EA;
    white-space: nowrap;
}
.section_invoice .table td {
    background: #FFF;
}

@media (min-width: 768px) {
    .login-page ul.foot-menu {
        display: none;
    }
}

@media (min-width: 1200px) {
    .section_invoice .container {
        padding: 24px;
    }
    .section_invoice .container h3 {
        font-size: 2.2rem;
        padding-bottom: 16px;
    }
    .section_invoice .table {
        font-size: 1.5rem;
    }
    .section_invoice .table th,
    .section_invoice .table td {
        padding: 12px 8px;
    }
    .section_invoice .table th {
        width: 240px;
    }
}




/* 日払い請求(前半・後半)切り分け表示 */
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#f_half + label,
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#l_half + label {
    margin: 10px 0 100px 0px;
    display:inline-block;
}
form.wpcf7-form dl.mail-form dd.h-manth{
    position:relative;
}
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#f_half + label + div,
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#l_half + label + div {
    opacity:0;
    transition: 1s;
    -webkit-transition: 1s;
    position: absolute;
    top: 40px;
    height: 100px;
    z-index: 0;

}
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#f_half:checked + label + div,
form.wpcf7-form dl.mail-form dd.h-manth input[type="radio"]#l_half:checked + label + div {
    opacity:1;
    z-index: 10;
    margin: 20px 0;
}
form.wpcf7-form dl.mail-form dd  input[type="file"] {
    margin:0 0 20px;
}
span.wpcf7-not-valid-tip {
    padding:10px;
    font-size:90%;
    color:var(--color-red);
    display:block;
}
div.wpcf7-validation-errors {
    background-color:#B21C3F;
    padding:10px;
    text-align:center;
    color:white;
    margin: -50px 0 0 0;
}
div.wpcf7-mail-sent-ok {
    background-color:#209FCC;
    padding:15px;
    text-align:center;
    color:white;
    position:relative;
    top:-150px;
}
div.screen-reader-response {
    display:none;
}
.wpcf7-response-output{
    border: none !important;
    background: #cc2d56;
    position: fixed;
    color: white;
    top: 0%;
    left: 0;
    right: 0;
    margin: auto !important;
    width: 100%;
    padding: 30px !important;
    text-align: center;
    box-shadow: 5px 5px 0 0 rgba(0,0,0,0.3);
    z-index:11111111;
    box-sizing: border-box;
}


/* ログイントップ計算フォーム */
form.point-simulation {
    margin: 30px auto;
    width: 95%;
    box-sizing: border-box;
    padding: 15px;
    background-color: beige;
    border-radius: 8px;
    border: 1px solid #0002;
    border-bottom-width: 3px;
    max-width: 500px;
}
input.cal {
    width: 64%;
    text-align: center;
    margin: 24px 0 0;
    display: inline-block;
    padding: 12px;
    box-sizing: border-box;
    font-size: 1.6rem;
    border: none;
    border-bottom: 1px solid #0002;
}
input.pay1 {
    width: 80%;
    text-align: center;
    margin: 16px 0 0;
    display: inline-block;
    padding: 12px;
    box-sizing: border-box;
    font-size: 1.6rem;
}
input.sim-btn {
    width: 31%;
    text-align: center;
    margin: 0 0 0 3%;
    display: inline-block;
    background-color: #7e7e65;
    border: 1px solid rgba(0,0,0,0.2);
    color: white;
    border-radius: 2px;
    padding: 12px;
    border-radius: 30px;
}
.fs_large {
font-size: 1.4rem !important;
    text-align: center;
    font-weight: 600;
}
.reward_cal_area {
    display: inline-block;
    margin: 0;
    padding: 20px 10px;
    text-align: left;
    width: 100%;
    margin-top: 20px;
    background-color: #0001;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #0001;
    border-top-color: #0005;
    border-left-color: #0005;
    color: #7e7e65;
font-size: 12px;
}
.reward_cal_area input[type="text"], .reward_cal_area input[type="number"] {
    position: relative;
    width: calc(100% - 3em);
    height: 50px;
    line-height: 48px;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0 5px 0 0;
    padding: 0 12px;
    display: inline-block;
    background: #fff;
    border: 2px solid #0003;
    outline: none;
    -webkit-appearance: none;
    font-size: 24px;
    font-weight: 400;
    color: #1292CF;
}
.rate-box{width:80%;margin:15px auto 0;}
.calctext{text-align:center;}
#pay2_rate,#pay1_rate{font-size:140%;font-size: 180%; color: #229947; padding: 0 5px;}
.bold {
    font-weight: bold;
}
.mt_15 {
    margin-top: 15px !important;
}
@media (min-width: 769px) {
    .reward_cal_area {
        padding: 20px;
        width: auto;
		  margin-top: 25px;
		   width: 100%;
    }
}
/*
ログインTOP トピックス
---------------------------------*/
.login-page .sec-topix {
    padding: 40px 0;
    border-bottom: rgba(225,225,225,1.00) 1px solid;
}
.login-page .sec-topix-title {
    position: relative;
    color: #666;
    padding: 0 1.6vw;
}
.login-page .sec-topix-title::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(img/icon-ro.png);
    position: absolute;
    left: 20px;
    background-size: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.login-page .topix-list {
    display: flex;
    overflow-x: auto;
    margin-top: 20px;
    padding: 0 20px 16px;
}
.login-page .topix-list li {
    width: 30%;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    border: none;
    box-shadow: none;
    margin: 0;
}
.login-page .topix-list li + li {
    margin-left: 16px;
}
.login-page .topix-list li a {
    border: 1px solid #ccc;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    flex-grow: 1;
}
.login-page .topix-list li .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 5/3;
}
.login-page .topix-list li .title {
    padding: 12px;
    font-size: 16px;
    color: #111;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .login-page .sec-topix-title {
        padding: 0 3.2vw;
    }
    .login-page .topix-list {
        padding: 20px 3.2vw;
    }
    .login-page .topix-list li {
        width: 48%;
    }
    .login-page .topix-list li + li {
        margin-left: 4%;
    }
    .login-page .topix-list li:nth-of-type(n+3) {
        margin-top: 4%;
    }
    .login-page .topix-list li:nth-of-type(2n+1) {
        margin-left: 0;
    }
    
}
@media (min-width: 768px) {
    .login-page .topix-list li a {
        transition: box-shadow .3s,transform .3s;
    }
    .login-page .topix-list li a:hover {
        box-shadow: 4px 4px 0px 0px #00000033;
        transform: translate(-4px, -4px);
    }
}
@media (min-width: 1200px) {
    .login-page .sec-topix-title {
        padding: 0 calc((100% - 890px)/2);
    }
    .login-page .topix-list {
        padding: 20px 20px;
        max-width: 910px;
    }
    .login-page .topix-list li + li {
        margin-left: 5%;
    }
    .login-page .topix-list li:nth-of-type(n+4) {
        margin-top: 5%;
    }
    .login-page .topix-list li:nth-of-type(3n+1) {
        margin-left: 0;
    }
}





/*---------------------------------
404
---------------------------------*/
.p404{
    width: 90%;
    margin: 30px auto;
    text-align: center;
    background-color: #eaeaea;
    padding: 20px 15px;
    border: 1px solid #00000022;
    box-sizing:border-box;
    max-width: 890px;
}
.p404 p{
    margin:20px auto;
    color:#444;
}
.p404 form div label {
    display:none;
}
.p404 form div input[type="text"] {
    height: 40px;
    line-height: 40px;
    width: 100%;
}
.p404 form div input[type="submit"] {
    height: 40px;
    width: 90px;
    letter-spacing: 2px;
    background-color: #bfff00;
    border: 1px solid #00000022;
    border-bottom-width: 2px;
    margin: 30px 0 0 0px;
    border-radius: 3px;
}
@media (min-width: 768px) {
    .p404{
        margin: 60px auto;
    }
    .p404 form div {
        display: flex;
        justify-content: space-between;
    }
    .p404 form div input[type="submit"] {
        margin: 0 0 0 32px;
        height: auto;
    }
}






/*
Wherego Related
---------------------------------*/
.wherego_related h3{position:relative;color:var(--color-wh);line-height:1.6;margin:0 3.2vw 40px;text-align:center;background:var(--color-bk);padding:8px;box-sizing:border-box;z-index:9;border-radius:4px;font-weight:700;box-shadow:4px 4px 0 var(--color-marine),inset 4px 4px 0 var(--color-red);filter:drop-shadow(0 0 4px rgba(var(--color-bk-rgb),.2))}
.wherego_related h3::before{content:"";position:absolute;left:0;right:0;bottom:-18px;height:32px;width:32px;border-radius:4px;margin:auto;background:var(--color-marine);transform:rotate(45deg)}
.wherego_related h3::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:32px;width:32px;border-radius:4px;margin:auto;background:var(--color-bk);transform:rotate(45deg)}
.wherego_related h3 span{margin:0;z-index:2;position:relative}
.wherego_related ul{padding:0 1.6vw;display:flex;overflow-x:auto}
.wherego_related ul li{background-color:var(--color-wh);border:2px solid var(--color-marine);margin:0 2.4vw 4px;width:56%;min-width:56%;max-width:56%;box-shadow:0 4px 0 var(--color-marine);box-sizing:border-box}
.wherego_related ul li a{color:var(--color-bk);text-decoration:none;transition:opacity .3s}
.wherego_related ul li a:hover{opacity:.7}
.wherego_related ul li img{object-fit:cover;width:100%;aspect-ratio:16/9}
.wherego_title{display:block;margin:8px;font-size:1.4rem}
.wherego_excerpt{font-size:1.2rem;margin:8px;color:var(--color-dark);display:block}
@media (min-width: 768px) {
.wherego_related h3{max-width:810px;margin-bottom:64px;font-size:3rem}
.wherego_related ul{padding:0 40px;flex-wrap:wrap;overflow:visible}
.wherego_related ul li{width:48%;max-width:none;min-width:auto;margin:0}
.wherego_related ul li + li{margin-left:4%}
.wherego_title{font-size:1.6rem;margin:8px 16px}
.wherego_excerpt{font-size:1.4rem;margin:8px 16px 16px}
}
@media (min-width: 768px) and (max-width: 999px) {
.wherego_related ul li:nth-of-type(2n+1){margin-left:0}
.wherego_related ul li:nth-of-type(n+3){margin-top:4%}
}
@media (min-width: 1000px) {
.wherego_related ul{max-width:1280px;margin:0 auto}
.wherego_related ul li{width:calc(91%/4)}
.wherego_related ul li + li{margin-left:3%}
}
@media (min-width: 1120px) {
.wherego_related h3{margin:0 auto 64px}
}


/*
チャットレディJP関連サイト
---------------------------------*/
aside.cljp-service {background:#f5f5f5;border-top:1px solid #00000005;border-bottom:1px solid #00000005;padding:50px 0;width:100%;}
aside.cljp-service h2 {background:none !important;text-align:center;font-size:140%;}
aside.cljp-service ul {width:100%;padding:0;margin:0 auto;display:flex;display:-webkit-flex;justify-content:space-evenly;-webkit-justify-content:space-evenly;flex-wrap:wrap;-webkit-flex-wrap:wrap;}
aside.cljp-service ul li {display:block;background:white;border:1px solid #00000033;border-radius:3px;box-sizing:border-box;width: 260px; padding: 10px 15px 15px;margin: 0 0 30px;transition:0.3s;}
aside.cljp-service ul li:hover{box-shadow:5px 5px 0 0 #00000044;transition:0.3s;}
aside.cljp-service ul li a {font-size:85%;text-decoration:none;text-align:center;color:#777;display:block;}
aside.cljp-service ul li img,aside.cljp-service ul li span {display:block;}
aside.cljp-service ul li img{width:100%;height:auto;}
@media (min-width: 768px) {
    aside.cljp-service ul {
        max-width: 890px;
    }
}


/*---------------------------------
Add Class
---------------------------------*/

/*
Text Align
---------------------------------*/
.-ta-right {
    text-align: right;
}
.-ta-center {
    text-align: center;
}
.-ta-left {
    text-align: left;
}


/*
Font Color
---------------------------------*/
.-fc-green{color:var(--color-green)}
.-fc-red{color:var(--color-red)}
.-fc-marine{color:var(--color-marine)}
.-fc-yellow{color:var(--color-yellow)}
.-fc-blue{color:var(--color-blue)}
.-fc-pink{color:var(--color-pink)}


/*
Max Width
---------------------------------*/
.-max-160{max-width:160px}
.-max-240{max-width:240px}
.-max-320{max-width:320px}
.-max-400{max-width:400px}
.-max-480{max-width:480px}

/*
Margin
---------------------------------*/
.-m-auto{margin-left:auto;margin-right:auto}
.-mt-auto{margin-top:auto}
.-mt0{margin-top:0!important}
.-mt-xs{margin-top:var(--size-xs)}
.-mt-s{margin-top:var(--size-s)}
.-mt-m{margin-top:var(--size-m)}
.-mt-l{margin-top:var(--size-l)}
.-mt-xl{margin-top:var(--size-xl)}
.-mb-auto{margin-bottom:auto}
.-mb0{margin-bottom:0!important}
.-mb-xs{margin-bottom:var(--size-xs)}
.-mb-s{margin-bottom:var(--size-s)}
.-mb-m{margin-bottom:var(--size-m)}
.-mb-l{margin-bottom:var(--size-l)}
.-mb-xl{margin-bottom:var(--size-xl)}
.-mr-auto{margin-right:auto}
.-mr0{margin-right:0!important}
.-mr-xs{margin-right:var(--size-xs)}
.-mr-s{margin-right:var(--size-s)}
.-mr-m{margin-right:var(--size-m)}
.-mr-l{margin-right:var(--size-l)}
.-mr-xl{margin-right:var(--size-xl)}
.-ml-auto{margin-left:auto}
.-ml0{margin-left:0!important}
.-ml-xs{margin-left:var(--size-xs)}
.-ml-s{margin-left:var(--size-s)}
.-ml-m{margin-left:var(--size-m)}
.-ml-l{margin-left:var(--size-l)}
.-ml-xl{margin-left:var(--size-xl)}

/*
Padding
---------------------------------*/
.-pt0{padding-top:0!important}
.-pt-xs{padding-top:var(--size-xs)}
.-pt-s{padding-top:var(--size-s)}
.-pt-m{padding-top:var(--size-m)}
.-pt-l{padding-top:var(--size-l)}
.-pt-xl{padding-top:var(--size-xl)}
.-pb0{padding-bottom:0!important}
.-pb-xs{padding-bottom:var(--size-xs)}
.-pb-s{padding-bottom:var(--size-s)}
.-pb-m{padding-bottom:var(--size-m)}
.-pb-l{padding-bottom:var(--size-l)}
.-pb-xl{padding-bottom:var(--size-xl)}
.-pr0{padding-right:0!important}
.-pr-xs{padding-right:var(--size-xs)}
.-pr-s{padding-right:var(--size-s)}
.-pr-m{padding-right:var(--size-m)}
.-pr-l{padding-right:var(--size-l)}
.-pr-xl{padding-right:var(--size-xl)}
.-pl0{padding-left:0!important}
.-pl-xs{padding-left:var(--size-xs)}
.-pl-s{padding-left:var(--size-s)}
.-pl-m{padding-left:var(--size-m)}
.-pl-l{padding-left:var(--size-l)}
.-pl-xl{padding-left:var(--size-xl)}

/*重要なおお知らせ*/
.section.alert{}
.section.alert .container {
    border: 4px solid red;
    box-shadow: 3px 3px 1px #666;
    margin: 0;
    padding: 10px 40px 40px;
}
.section.alert .container > h3 {  color: red;  font-size: 24px;  font-weight: bold;}
.section.alert .container > h3::after {
  background: inherit;
}

.section.alert .container > p {
    margin: 20px auto 40px;
}




/*
初心者ガイド
---------------------------------*/
.single_table_of_contents{background:#fff;box-shadow:3px 3px 15px 0 rgba(0,0,0,.1);padding:56px 16px 8px!important;position:relative;border:none;margin:40px 0!important;counter-reset:item;border-radius:8px;overflow:hidden}
.single_table_of_contents::before{content:"目次";position:absolute;top:0;left:0;height:40px;width:100%;background-image:url(img/bg-18.png);background-size:40px;padding:8px 8px 8px 64px;color:#333;box-sizing:border-box;font-size:1.6rem;font-weight:700;line-height:normal}
.single_table_of_contents::after{content:"";position:absolute;left:16px;top:10px;background:url(img/icon_toc_bk.png);width:32px;height:20px;background-repeat:no-repeat;background-size:100%;background-position:center}
ul.single_table_of_contents li{list-style:none;position:relative;padding:0 0 0 32px!important;margin:0 0 8px;background-color:transparent!important;text-shadow:none}
ul.single_table_of_contents li::before{position:absolute;left:0;top:0;bottom:0;margin:auto;counter-increment:item;content:counter(item)'';background-image:url(img/bg-18.png);background-size:40px;color:#333;font-weight:700;border-radius:50%;height:24px;width:24px;display:flex;align-items:center;justify-content:center;text-shadow:none}
ul.single_table_of_contents li.count_reset{counter-reset:item}
ul.single_table_of_contents li.count_reset2{counter-reset:item 1}
ul.single_table_of_contents li.count_reset3{counter-reset:item 2}
ul.single_table_of_contents li.count_reset4{counter-reset:item 3}
ul.single_table_of_contents li.count_reset5{counter-reset:item 4}
.beginner_guide_txt{color:#333;font-weight:700;box-sizing:border-box;width:100%;padding:8px 0 8px 40px;margin:0 0 20px;position:relative;border-radius:4px;z-index:0;display:inline-block;box-shadow:4px 4px 0 var(--color-blue),-4px -4px 0 var(--color-yellow)}
.beginner_guide_txt.pc{padding:8px 0 8px 44px;margin-top:24px}
.beginner_guide_txt.sp::before{content:'';background:url(img/mobile-screen-button-solid.svg) no-repeat;position:absolute;top:50%;left:10px;transform:translate(0,-50%);height:24px;width:18px}
.beginner_guide_txt.pc::before{content:'';background:url(img/laptop-solid.svg) no-repeat;position:absolute;top:50%;left:7px;transform:translate(0,-50%);height:22px;width:30px}
.text-area h2.smart_phone,.text-area h2.computer{padding-left:48px;position:relative;font-weight:700}
.text-area h2.smart_phone::before{content:"";position:absolute;background:url(img/mobile-screen-button-solid.svg) no-repeat;top:50%;left:16px;transform:translate(0,-50%);height:30px;width:20px}
.text-area h2.computer::before{content:"";position:absolute;background:url(img/laptop-solid.svg) no-repeat;top:50%;left:0;transform:translate(8px,-50%);height:24px;width:30px}
.postid-120103 .wp-element-caption strong{color:#0CD0C8}
@media (min-width: 769px) {
.single_table_of_contents{margin:40px auto}
.beginner_guide_txt{width:fit-content;padding-right:40px!important}
.beginner_guide_txt::after{right:-40%}
}
@media (min-width: 1200px) {
.text-area h2.smart_phone,.text-area h2.computer{padding-left:72px}
.text-area h2.smart_phone::before{left:26px;height:38px;width:30px}
.text-area h2.computer::before{left:12px;height:30px;width:38px}
}

/*---------------------------------
カスタムブロック(Lazy Blocks) デザイン CSS
---------------------------------*/
.wp-block-lazyblock-block-simple-box{margin:40px 0;border:2px solid #06C755;border-radius:3px;padding:24px;background:#fff}
.wp-block-lazyblock-block-simple-box .title{font-size:20px;position:relative;font-weight:700}
.wp-block-lazyblock-block-simple-box p{padding:0;margin:16px 0 0}
.wp-block-lazyblock-block-simple-box-point{margin:40px 0;border-radius:8px;padding:16px;background-image:url(img/bg-15.png);background-size:40px;border-radius:4px}
.wp-block-lazyblock-block-simple-box-point .title{color:#00698C;font-size:16px;position:relative;padding:16px 0 16px 40px;font-weight:700}
.wp-block-lazyblock-block-simple-box-point .title::before{content:"";position:absolute;left:0;top:0;bottom:0;height:55px;width:27px;background:url(img/icon_point_b.png);background-repeat:no-repeat;background-size:100%;background-position:center}
.wp-block-lazyblock-block-simple-box-point p{padding:0;margin:16px 0 0}
.wp-block-lazyblock-block-chat-balloon{margin:40px 0}
.wp-block-lazyblock-block-chat-balloon .chat_balloon_item + .chat_balloon_item{margin-top:20px}
.wp-block-lazyblock-block-chat-balloon .left{display:flex;justify-content:space-between}
.wp-block-lazyblock-block-chat-balloon .right{display:flex;flex-direction:row-reverse;justify-content:space-between}
.wp-block-lazyblock-block-chat-balloon .icon img{width:80px;height:80px;border-radius:50%;border:solid 2px var(--color-light);overflow:hidden;object-fit:cover;box-sizing:border-box}
.wp-block-lazyblock-block-chat-balloon p{position:relative;border:solid 2px var(--color-light);margin:0;padding:16px;width:calc(100% - 96px);border-radius:4px;box-sizing:border-box;background:#fff;box-shadow:3px 3px 15px 0 rgba(0,0,0,.1)}
.wp-block-lazyblock-block-chat-balloon p::before,.wp-block-lazyblock-block-chat-balloon p::after{content:"";position:absolute;width:0;height:0;border-style:solid;top:30px;border-width:8px 8px 8px 0;border-color:transparent #fff transparent transparent}
.wp-block-lazyblock-block-chat-balloon .left p::before{left:-11px;border-width:9px 9px 9px 0;border-color:transparent var(--color-light) transparent transparent}
.wp-block-lazyblock-block-chat-balloon .left p::after{top:31px;left:-8px;border-width:8px 8px 8px 0;border-color:transparent #fff transparent transparent}
.wp-block-lazyblock-block-chat-balloon .right p::before{right:-11px;border-width:9px 0 9px 9px;border-color:transparent transparent transparent var(--color-light)}
.wp-block-lazyblock-block-chat-balloon .right p::after{top:31px;right:-8px;border-width:8px 0 8px 8px;border-color:transparent transparent transparent #fff}
.wp-block-lazyblock-block-recommend-post{position:relative;padding:32px 24px 24px;border:solid 2px var(--color-red);border-radius:6px;margin:56px auto 40px;box-sizing:border-box}
.wp-block-lazyblock-block-recommend-post span{position:absolute;top:-16px;left:24px;background:var(--color-red);display:block;padding:4px 8px;color:#fff;border-radius:4px}
@media (min-width: 769px) {
.wp-block-lazyblock-block-simple-box{padding:24px}
.wp-block-lazyblock-block-simple-box-point{padding:24px}
.wp-block-lazyblock-block-simple-box-point .title{font-size:18px}
.wp-block-lazyblock-block-simple-box-point .title::before{height:60px;width:30px}
.wp-block-lazyblock-block-chat-balloon .left,.wp-block-lazyblock-block-chat-balloon .right{align-items:center}
.wp-block-lazyblock-block-chat-balloon .icon img{width:140px;height:140px}
.wp-block-lazyblock-block-chat-balloon p{padding:24px;width:calc(100% - 170px)}
.wp-block-lazyblock-block-chat-balloon p::before,.wp-block-lazyblock-block-chat-balloon p::after{top:0;bottom:0;margin:auto}
.wp-block-lazyblock-block-chat-balloon .right p::before{right:-18px;border-width:18px 0 18px 18px}
.wp-block-lazyblock-block-chat-balloon .right p::after{top:0;right:-15px;border-width:15px 0 15px 15px;border-color:transparent transparent transparent #fff}
.wp-block-lazyblock-block-chat-balloon .left p::before{left:-18px;border-width:18px 18px 18px 0}
.wp-block-lazyblock-block-chat-balloon .left p::after{top:0;left:-15px;border-width:15px 15px 15px 0}
}
/* お仕事ログインページ */
#js-slider-1 {
    width: 100%;
    margin: 0 auto !important;
}
#js-slider-1 img {
    width: 100%;
}

#js-slider-1 li {
	margin: 0;
}

#js-slider-1 .slick-prev {
	left: 10px;
	top: 50%;
	z-index: 1;
}

#js-slider-1 .slick-next {
	right: 10px;
	top: 50%;
	z-index: 1;
}

#js-slider-1 .slick-dots {
	bottom: 10px;
}

/* 投稿記事タイトル部分 */
.single-head{background-color:var(--color-bk)}
.single-head .thumbnail2{height:auto;max-height:none;aspect-ratio:9 / 4}
.single-head .thumbnail2 img{width:100%;height:100%;max-height:none}
.single-head h1{display:block;margin:-30px auto 0;position:relative;top:0;left:0}

/* 関連記事　初心者ガイド */
#related_article_wrapper *{box-sizing:border-box}
#related_article_wrapper .related_article_list{background-color:var(--color-wh);border:2px solid var(--color-blue);box-shadow:0 4px 0 var(--color-blue);margin:0 2.4vw 4px;padding:16px;display:flex;flex-direction:column;gap:16px}
#related_article_wrapper .related_article_pc{display:none}
#related_article_wrapper .related_article_list li{background-color:#fff!important;border-bottom:solid rgba(12,208,200,0.2) 2px}
#related_article_wrapper .related_article_list li:last-child{border-bottom:none}
#related_article_wrapper .related_article_list li a{position:relative;text-decoration:none}
#related_article_wrapper .topics_inner{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
#related_article_wrapper .topics_cat{background:var(--color-light);padding:4px 8px;color:var(--color-bk);font-size:1.2rem;width:auto}
#related_article_wrapper .topics_date{width:auto;color:var(--color-bk)}
#related_article_wrapper .topics_title{color:var(--color-bk);margin:10px 0 16px;font-size:1.8rem;line-height:1.5em;width:100%}
#related_article_wrapper .topics_btn{width:100%;text-align:center;margin:0 auto 16px}
#related_article_wrapper .topics_btn p{font-size:1.3rem;color:var(--color-wh);display:inline-block;padding:4px 32px 4px 14px;background:var(--color-blue);box-shadow:0 4px 0 #08b7b0;position:relative;border-radius:9999px;margin:0;transition:transform .3s,box-shadow .3s}
#related_article_wrapper .topics_btn p::before{position:absolute;font:var(--fa-font-solid);content:"\f105";top:50%;right:12px;color:var(--color-wh);font-size:2rem;margin-top:-10px;transition:color .3s}
@media screen and (min-width: 768px) {
#related_article_wrapper .related_article_pc{display:flex;flex-wrap:wrap;justify-content:flex-start;list-style:none;padding:0;gap:16px}
#related_article_wrapper .related_article_list.sp{display:none}
#related_article_wrapper .related_article_pc li{width:calc((100% - 16px) / 2);background-color:var(--color-wh);border:2px solid var(--color-blue);box-shadow:0 4px 0 var(--color-blue);margin:0}
#related_article_wrapper .related_article_pc li a{position:relative;text-decoration:none;height:100%;display:flex;flex-direction:column}
#related_article_wrapper .topics_thumb{margin-bottom:8px}
#related_article_wrapper .topics_thumb img{width:100%;object-fit:cover;height:auto;aspect-ratio:16 / 9}
#related_article_wrapper .topics_inner{padding:0 16px}
#related_article_wrapper .topics_btn{margin:auto auto 16px}
#related_article_wrapper .related_article_pc li:hover .topics_btn p{box-shadow:0 0x 0 var(--color-bk);transform:translateY(4px)}
}
@media screen and (min-width: 1000px) {
#related_article_wrapper .related_article_pc li{width:calc((100% - 16px * 2) / 3)}
}


/*TOPキャンペーンフッターエリア*/
#campaign_box {    position: fixed;    bottom: 0px;    left: 5px;    box-sizing: border-box;    z-index: 100;}
#campaign_box p.btn-link-fukidashi,#campaign_box01 p.btn-link-fukidashi {text-align: center;margin: 0;}
#campaign_box p.btn-link-fukidashi a,#campaign_box01 p.btn-link-fukidashi a {position: relative;width: 150px;height: auto;display: block;color: #fb2248;}
#campaign_box p.btn-link-fukidashi a:before {    display: block;    content: "現在申請受付中！";    font-size: 80%;    background: white;    padding: 0px 5px;    line-height: 25px;    width: 80%;    position: absolute;    height: 25px;    overflow: hidden;    top: -27px;    right: 0px;    border-radius: 16px;    animation: float 3s ease-in-out infinite;    border: 1px solid #fb2248;}
#campaign_box01 p.btn-link-fukidashi a:before {display: block;content: "現在申請受付中！";font-size: 80%;background: white;padding: 0px 5px;line-height: 25px;width: auto;position: absolute;height: 25px;overflow: hidden;top: -27px;right: -10px;border-radius: 16px;animation: float 3s ease-in-out infinite;border: 1px solid #fb2248;}
@keyframes float {0% {transform: translateY(0);}50% {transform: translateY(-10px);}100% {transform: translateY(0);}}
#campaign_box p.btn-link-fukidashi a:after,#campaign_box01 p.btn-link-fukidashi a:after {    display: block;    content: "";    position: absolute;    top: 0px;    right: 15px;    width: 0;    height: 0;    border-style: solid;    border-width: 8px 6px 0 6px;    border-color: #fb2248 transparent transparent transparent;    animation: float 3s ease-in-out infinite;    z-index: 100;}
#campaign_box p.btn-link-fukidashi a img,#campaign_box01 p.btn-link-fukidashi a img {    width: 100%;    height: auto;    border-radius: 8px;    border: 6px solid #f8bc18;}
#campaign_box01 {    position: fixed;    bottom: 65px;    left: 5px;    box-sizing: border-box;    z-index: 100;}
@media (min-width: 769px) {
#campaign_box,#campaign_box01 {position: fixed;box-sizing: border-box;z-index: 100;bottom: 16px;left: 256px;}
#campaign_box p.btn-link-fukidashi,#campaign_box01 p.btn-link-fukidashi {  text-align: center;  margin: 0;}
#campaign_box p.btn-link-fukidashi a,#campaign_box01 p.btn-link-fukidashi a {position: relative;width: 240px;height: auto;display: block;color: #fb2248;}
#campaign_box p.btn-link-fukidashi a:before{display: block;content: "現在申請受付中！";font-size: 80%;background: white;padding: 0px 5px;line-height: 30px;width: 80%;position: absolute;height: 30px;overflow: hidden;top: -27px;right: 15px;border-radius: 16px;animation: float 3s ease-in-out infinite;border: 2px solid #fb2248;text-decoration: none;}
#campaign_box01 p.btn-link-fukidashi a:before{display: block;content: "現在申請受付中！";font-size: 80%;background: white;padding: 0px 5px;line-height: 30px;width: 80%;position: absolute;height: 30px;overflow: hidden;top: -27px;right: 15px;border-radius: 16px;        animation: float 3s ease-in-out infinite;        border: 2px solid #fb2248;        text-decoration: none;}
	@keyframes float {0% {transform: translateY(0);  }  50% {transform: translateY(-10px);  }  100% {transform: translateY(0);}
	}
    #campaign_box p.btn-link-fukidashi a:after,#campaign_box01 p.btn-link-fukidashi a:after {display: block;        content: "";        position: absolute;        top: 6px;        right: 30px;        width: 0;        height: 0;        border-style: solid;        border-width: 8px 6px 0 6px;        border-color: #fb2248 transparent transparent transparent;        animation: float 3s ease-in-out infinite;        z-index: 100;    }
	#campaign_box p.btn-link-fukidashi a img,#campaign_box01 p.btn-link-fukidashi a img {  width: 100%;  height: auto;}
}

/*ログインページ　キャンペーンフッターエリア*/

/*
Banner
---------------------------------*/
section.banner {padding: 1em 0 1em;}
@media (max-width: 768px) {
ul.pr-box{ scroll-snap-type: x mandatory;list-style:none;display:flex;overflow-x:scroll;width:100%;padding: 0 1em 0 0;margin:0;}
ul.pr-box li {color: black;scroll-snap-align: center;scroll-snap-stop:always; width: 300px;height:150px;flex-shrink: 0;margin: 0 0.5em;}
	ul.pr-box li a{display:block;width: 100%; height: 100%;}
ul.pr-box li img{width: 100%; height:auto; object-fit: cover; border-radius: 8px; margin: 0 0.5em; display: block; filter: drop-shadow(0px 1px 2px #0006);}
}
@media (min-width: 769px) {
ul.pr-box{ background-color:transparent; list-style: none;display: flex; width:100%;padding: 0.5em; margin: 0; box-sizing: border-box;scrollbar-width: none;scroll-snap-type: x mandatory;overflow-x:scroll;}
	ul.pr-box li a{display:block;width: 100%; height: 100%;}
ul.pr-box li {color: black; width: 300px; padding: 5px; box-sizing: border-box;margin: 0;scroll-snap-align: center; scroll-snap-stop:always;}
ul.pr-box li img{width: calc(100%); height: 100%; object-fit: cover; border-radius: 8px; margin: 0; display: block; filter: drop-shadow(0px 1px 2px #0006);}
}
/*
Section
---------------------------------*/