@charset "UTF-8";
/*----------このエリアは削除すると正しく動作しない可能性があります----------

Theme Name:   LION BLOG Child
Theme URI:    http://fit-jp.com/theme/
Description:  FIT(フィット) が制作するブログ用WordPressTHEME「LION BLOG」の子テーマ
Author:       Kota Naito　@FIT(フィット)
Author URI:   http://fit-jp.com/about/
Template:     lionblog
Version:      1.2
License:      GNU GENERAL PUBLIC LICENSE
License URI:  http://www.gnu.org/licenses/gpl.html

----------このエリアは削除すると正しく動作しない可能性があります----------*/
/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/
/*=============================================================
# header調整
=============================================================*/
.siteTitle {
  box-sizing: content-box !important;
  padding: 10px;
  width: 300px;
  height: 100px;
}

@media screen and (max-width: 767px) {
  .siteTitle {
    height: 60px;
  }
}

.siteTitle .siteTitle__logo img {
  max-width: 440px;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .siteTitle .siteTitle__logo img {
    max-width: 264px;
    height: 60px;
  }
}

.header-address {
  float: right;
  height: 120px;
  text-align: right;
  font-size: 1.6rem;
  line-height: 2.0;
  padding: 18px;
}

@media screen and (max-width: 767px) {
  .header-address {
    float: left;
    padding: 0;
    height: auto;
    text-align: right;
    font-size: 1.6rem;
  }
}

.header-address p {
  letter-spacing: .2rem;
  font-weight: bold;
  font-size: 1.5rem;
}

.header-address a {
  color: #2f8e56;
  text-decoration: underline;
}

/*=============================================================
# mainのお知らせ欄
=============================================================*/
.l-main {
  padding-top: 20px;
}

.l-main-news {
  background-color: #f2f2f2;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.l-main-news .l-main-news-title {
  text-align: center;
  font-size: 1.8rem;
}

.l-main-news-lists {
  margin: 10px 0;
  list-style: none;
}

.l-main-news-list {
  line-height: 1.2;
  letter-spacing: 0.15em;
  position: relative;
}

.l-main-news-list + .l-main-news-list {
  margin-top: 1em;
}

.l-main-news-list a {
  display: flex;
  color: blue;
}

.l-main-news-list a time {
  margin-right: 20px;
}

.l-main-news-list :hover {
  color: #2f8e56;
}

.l-main-news-list::after {
  content: "";
  background: black;
  opacity: 0.1;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
}

/*===================================================

ここからrecruitサイトの追加CSS
募集要項

===================================================*/

/* 追加CSS */
.nowrap {
    white-space: nowrap;
}

/* dl */
.dl-rec22 {
    margin-bottom: 4em;
}
/* 募集要項のサブタイトル */
.dl-rec22 h4 {
    font-size: 20px !important;
    font-weight: bold !important;
    background: #038593 !important;
    cursor: pointer !important;
    position: relative !important;
    color: #fff !important;
    border: 1px solid #ccc !important;
    line-height: 1.5em !important;
    word-wrap: break-word !important;
    padding: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 25px !important;

    /* 募集店舗名 */
    span {
        width: 100% !important;
        color: #fff !important;
        font-weight: 800 !important;
    }

    span::before {
        content: ":";
        padding-right: 0.5em;
    }
}

/* 各求人へのリンク（正社員・パートアルバイト） */
div.btn-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 1em;
    margin-bottom: 4em !important;
}

a.btn-rec22 {
    color: #038593 !important;
    display: inline-block !important;
    padding: 10px 20px !important;
    /* border: 2px solid #038593 !important; */
    border-radius: 5px;
    width: calc(100% / 2 - 0.5em) !important;
    padding: 1.5em 1em !important;
    font-size: clamp(14px, 0.5vw, 18px) !important;
    font-weight: bold !important;
    background: #e7f1f3 !important;
    letter-spacing: 0.1em;
    position: relative;
    transition: 0.2s ease-in-out;
}

/* 外部リンクアイコン */
a.btn-rec22::after {
    content: "";
    display: block;
    position: absolute;
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.80002 8.90002"><g fill="%23038593"><path d="M7.70001,3.20001v4.70001H1V3.20001h6.70001M8.70001,2.20001H0v6.70001h8.70001V2.20001h0Z"/><polygon points="3.10001 0 10.80002 0 10.80002 6.70001 9.80002 6.70001 9.80002 1 3.10001 1 3.10001 0"/></g></svg>') no-repeat center center;
    background-size: contain;
    top: 50%;
    right: 1em;
    transform: translate(0, -50%);
}

/* hover */
a.btn-rec22:hover,
a.btn-rec22:focus{
    background: #e7f1f3c9 !important;
    letter-spacing: 0.2em;
    transition: 0.2s ease-in-out;
}

/* 採用サイトへのリンク */
a.recruit-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    margin-bottom: 6em !important;
    padding: 1em 2em !important;
    background: #e7f1f3 !important;
    transition: 0.3s ease-in-out;
}

/* hover */
a.recruit-link:hover,
a.recruit-link:focus {
    background: #e7f1f3c9 !important;
    transition: 0.3s ease-in-out;
}

div.recruit-link-text {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
    padding: 1em 0 !important;

    p,
    span {
        font-size: clamp(1.2rem, 2vw, 1.6rem)  !important;
        font-weight: normal !important;
        line-height: 1.5 !important;
        color: #038593 !important;
    }

    /* ロゴ（spは非表示） */
    .img-wrap {
        height: 100%;
        padding-right: 1em !important;
        display: grid;
        place-items: center;
        width: fit-content;
		position: relative;
    }
	
	.img-wrap::after {
    position: absolute !important;
    right: 0em;
    display: block;
    content: "";
    border: 1px solid #03859347;
    z-index: 1;
    height: calc(100% + 2.5em);
	}

    img {
        aspect-ratio: 240/147;
        height: clamp(30px, 5vw, 50px) !important;
        object-fit: contain;
    }
}

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

    /* 募集要項のサブタイトル */
    .dl-rec22 h4 {
        font-size: 20px !important;
        font-weight: bold !important;
        background: #038593 !important;
        cursor: pointer !important;
        position: relative !important;
        color: #fff !important;
        border: 1px solid #ccc !important;
        line-height: 1.5em !important;
        word-wrap: break-word !important;
        padding: 10px !important;
        border-radius: 5px !important;
        margin-bottom: 25px !important;

        span {
            display: block !important;
            color: #fff !important;
            font-size: 16px !important;
        }

        span::before {
            content: unset;
            padding-right: 0;
        }
    }

    /* 採用サイトへのリンク */
    a.recruit-link {
        padding: 1em !important;
    }

    div.recruit-link-text p {

        border-left: none !important;
        padding-left: 0 !important;
    }
	
	    a.btn-rec22 {
        width: 100% !important;
        font-size: 1.5rem !important;
    }

    .recruit-link-wrap,
    div.btn-wrap {
        flex-direction: column !important;
        width: 100%;
        gap: 1em !important;
    }

    a.recruit-link {
        width: 100%;
    }

    .recruit-link-wrap {
        display: flex;
        justify-content: space-between;
    }
}


/* テキストが回るアニメーション */
button.button {
    cursor: pointer;
    border: none;
    color: #fff !important;
    width: clamp(70px, 10vw, 100px) !important;
    height: clamp(70px, 10vw, 100px) !important;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    transition:
        background 300ms,
        transform 200ms;
    font-weight: 600;
}

.button__text {
    position: absolute;
    inset: 0;
    animation: text-rotation 8s linear infinite;

    >span {
        position: absolute;
        transform: rotate(calc(19deg * var(--index)));
        inset: 0;
        color: #3a9f97 !important;
        font-size: clamp(10px, 0.8vw, 12px) !important;
    }
}

div.button__circle {
    position: relative;
    width: clamp(10px, 1vw, 20px);
    height: clamp(10px, 1vw, 20px);
    overflow: hidden;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button__icon--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}
/* hover */
a.recruit-link:hover .button,
a.recruit-link:focus .button {
    background: #000;
    transform: scale(1.05);
}

.button:hover .button__icon {
    color: #000;
}

/* hoverで矢印が動く */
a.recruit-link:hover .button__icon:first-child,
a.recruit-link:focus .button__icon:first-child{
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

a.recruit-link:hover .button__icon--copy,
a.recruit-link:focus .button__icon--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}

@keyframes text-rotation {
    to {
        rotate: 360deg;
    }
}

/* ここまで */