@charset "UTF-8";
/* ==========================================================================
  基本utilityで組む。作りが複雑なものはcomponentで作成。p（project）は汎用性を保つため出来るだけ避ける
  ========================================================================== */
/* ==========================================================================
  reset
  ========================================================================== */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

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

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

/* フォームの初期化を追加 */
/* テキスト */
input[type=text],
input[type=email] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    width: 100%;
    box-shadow: none;
}

input[type=text]:focus,
input[type=email]:focus {
    box-shadow: none;
    outline: none;
}

/* テキストエリア */
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    height: 100px;
    width: 100%;
}

textarea:focus {
    box-shadow: none;
    outline: none;
}

/* セレクト */
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    background: white;
}

select::-ms-expand {
    display: none;
}

select:focus {
    box-shadow: none;
    outline: none;
}

input[type=text],
input[type=email],
input[type=tel] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: 1em;
    width: 100%;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus {
    outline: none;
}

textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: 1em;
    height: 100px;
    padding: 0.4em 0.8em;
    width: 100%;
}

textarea:focus {
    box-shadow: none;
}

input[type=submit], input[type=reset] {
    -webkit-appearance: none;
    background-image: none;
    border-color: transparent;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
}

input[type=submit], input[type=reset]:hover,
input[type=submit], input[type=reset]:focus {
    outline: none;
}

input[type=submit], input[type=reset]::-moz-foucus-inner {
    border: none;
    padding: 0;
}

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
    display: inline-block;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.302);
    border: 1px solid #CCCCCC;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=search],
textarea {
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    box-shadow: none;
    font-size: 16px !important;
    background: #fff;
    border: none;
    outline: none;
    margin: 0;
}

input[type=submit],
input[type=reset] {
    outline: none;
    padding: 0;
    margin: 0;
}

input[type=submit]:active, input[type=submit]:focus,
input[type=reset]:active,
input[type=reset]:focus {
    border: none;
    outline: none;
}

/* ==========================================================================
  Foundation
  ========================================================================== */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 551px) and (max-width: 959px) {
    html {
        font-size: 78.125%;
    }
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    color: #333;
    font-size: 1.5rem;
    line-height: 1.6;
}

@media (max-width: 550px) {
    body {
        font-size: 4vw;
    }
}

body.is-fixed {
    height: 100%;
    left: 0;
    position: fixed;
    width: 100%;
}

main {
    display: block;
    margin-top: 152px;
}

@media (max-width: 959px) {
    main {
        margin-top: 130px;
    }
}

body main {
    margin-top: 152px;
}

@media (max-width: 959px) {
    body main {
        margin-top: 130px;
    }
}

#top main {
    padding-top: 29px;
}

.wrapper {
    overflow: hidden;
}

.inner {
    max-width: calc(1100px + 10%);
    padding: 0 5%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 959px) {
    .inner {
        max-width: 650px;
    }
}

.inner.is-sm {
    max-width: calc(710px + 10%);
}

@media (min-width: 960px) {
    a[href*="tel:"] {
        cursor: default;
        pointer-events: none;
        text-decoration: none;
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease-in-out;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

li {
    list-style: none;
}

.accent {
    color: #F9752E;
}

.warning {
    color: #E5362B;
}

.elipsis {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.indent {
    padding-left: 0.85em;
    text-indent: -0.85em;
}

a:focus {
    outline: none;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500;
    line-height: 1.5;
}

section,
.section {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 959px) {
    section,
    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (min-width: 960px) {
    .show.is-sp {
        display: none;
    }
}

@media (max-width: 959px) {
    .show.is-pc {
        display: none;
    }
}

.dib {
    display: inline-block;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

@media (max-width: 959px) {
    .center-sp {
        text-align: center;
    }
}

@media (max-width: 959px) {
    .right-sp {
        text-align: right;
    }
}

@media (max-width: 959px) {
    .left-sp {
        text-align: left;
    }
}

.bold {
    font-weight: bold;
}

/* ==========================================================================
  pages
  ========================================================================== */
/* ==========================================================================
  header
  ========================================================================== */
.hr {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    color: #57483A;
}

.hr__upper {
    height: 86px;
}

@media (max-width: 959px) {
    .hr__upper {
        height: 64px;
    }
}

.hr__upper .inner {
    max-width: initial;
    padding: 0 30px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 959px) {
    .hr__upper .inner {
        padding: 0 12px;
    }
}

.hr__logo > a {
    display: block;
}

@media (min-width: 960px) {
    .hr__logo > a:hover {
        opacity: 0.7;
    }
}

.hr__logo > a img {
    width: auto;
}
@media (max-width: 959px) {
    .hr__logo > a img {
        width: 100%;
    }
}

.hr__contents {
    display: flex;
    align-items: center;
}

.hr__tools {
    display: flex;
}

.hr__tool {
    text-align: center;
}

.hr__tool > a {
    display: block;
}

@media (min-width: 960px) {
    .hr__tool > a:hover {
        opacity: 0.7;
    }
}

.hr__tool:not(:last-child) {
    margin-right: 15px;
}

.hr__tool img {
    width: auto;
}

.hr__tool span {
    display: block;
}

.hr__login {
    height: 44px;
    margin: 0 20px 0 31px;
    background: #F9752E;
    border: 1px solid #F9752E;
    color: #fff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
}

@media (min-width: 960px) {
    .hr__login {
        width: 210px;
    }
}

@media (max-width: 959px) {
    .hr__login {
        height: 30px;
        margin: 0 8px 0 23px;
        font-size: 1.1rem;
        padding: 0 10px;
    }

    .hr__login::before {
        margin-right: 4px;
    }
}

@media (max-width: 374px) {
    .hr__login {
        margin: 0 8px 0 12px;
    }
}

@media (max-width: 550px) {
    .hr__login {
        padding: 0;
        min-width: 172px;
    }
}

@media (max-width: 374px) {
    .hr__login {
        min-width: 160px;
    }
}

@media (min-width: 960px) {
    .hr__login:hover {
        color: #F9752E;
        background: #fff;
        cursor: pointer;
    }

    .hr__login:hover::before {
        background: url(../img/common/icon-mypage.svg) no-repeat top center/20px 20px;
    }
}

.hr__login::before {
    transition: 0.3s ease-in-out;
    content: "";
    margin-right: 10px;
    background: url(../img/common/icon-mypage-white.svg) no-repeat top center/20px 20px;
    width: 20px;
    height: 20px;
}

@media (max-width: 959px) {
    .hr__login::before {
        background: url(../img/common/icon-mypage-white.svg) no-repeat top center/15px 15px;
        width: 15px;
        height: 15px;
    }
}

.hr__below {
    background: #FFEBC3;
    height: 66px;
    color: #333333;
}

@media (max-width: 959px) {
    .hr__below {
        background: #fff;
    }
}

.hr__below .inner {
    height: 100%;
}

@media (max-width: 959px) {
    .hr__below .inner {
        max-width: initial;
        padding: 0 2%;
    }
}

.hr__list {
    display: flex;
    height: 100%;
    position: relative;
    border-left: 1px solid #FFB187;
}

@media (min-width: 960px) {
    .hr__list {
        border-left: 1px solid #FFB187;
    }
}

@media (max-width: 959px) {
    .hr__list {
        border-top: 1px solid #FFB187;
    }
}

@media (max-width: 959px) {
    .hr__list {
        flex-wrap: wrap;
    }
}

.hr__list::before, .hr__list::after {
    content: "";
    background: #FFEBC3;
    width: 10px;
    height: 20px;
    position: absolute;
    left: -5px;
}

@media (max-width: 959px) {
    .hr__list::before, .hr__list::after {
        display: none;
    }
}

.hr__list::before {
    top: 0;
}

.hr__list::after {
    bottom: 0;
}

.hr__item {
    cursor: pointer;
}

@media (min-width: 960px) {
    .hr__item {
        flex: 1;
    }
    .hr__item.is-all {
        max-width: 210px;
    }
    .hr__item.is-union {
        max-width: 230px;
    }
    .hr__item.is-mypro {
        max-width: 220px;
    }
    .hr__item.is-cafeteria {
        min-width: 310px;
    }
    .hr__item.is-support {
        max-width: 240px;
    }
    .hr__item.is-aid {
        max-width: 240px;
    }
    .hr__item.is-consultation {
        max-width: 305px;
    }
    .hr__item.is-library {
        min-width: 360px;
    }
    .hr__item.is-unionhall {
        min-width: 360px;
    }
}



/* @media (min-width: 960px) {
    .hr__item {
        width: 33.3333333333%;
    }
} */

@media (max-width: 959px) {
    .hr__item {
        width: 50%;
        height: 30px;
        border-bottom: 1px solid #FFB187;
    }

    .hr__item:nth-child(2n) {
        border-left: 1px solid #FFB187;
    }
}

.hr__item.is-cafeteria .mega__pointer {
    left: 38%;
    transform: translateX(-50%);
}

@media (max-width: 959px) {
    .hr__item.is-cafeteria .mega__pointer {
        left: 24%;
    }
}

.hr__item.is-mypro .mega__pointer {
    left: 69%;
}

@media (max-width: 959px) {
    .hr__item.is-mypro .mega__pointer {
        left: 76%;
    }
}

@media (max-width: 959px) {
    .hr__item.is-item .hr__icon {
        width: 16px;
    }
}

@media (min-width: 960px) {
    .hr__item.is-cafeteria .hr__icon {
        width: 320px;
    }

    .hr__item.is-cafeteria .mega__ttl img {
        max-width: 330px;
    }
}

@media screen and (min-width: 1150px) and (max-width: 1200px) {
    .hr__item.is-cafeteria .hr__icon {
        width: 290px;
    }
}

@media screen and (min-width: 960px) and (max-width: 1149px) {
    .hr__item.is-cafeteria .hr__icon {
        width: 250px;
    }
}

@media (max-width: 959px) {
    .hr__item.is-cafeteria .mega__ttl {
        max-width: 300px;
    }

    .hr__item.is-cafeteria .hr__icon {
        width: 148px;
        position: relative;
        right: -2vw;
    }
}

@media (min-width: 960px) {
    .hr__item.is-mypro .hr__icon {
        width: 134px;
    }
}

@media (max-width: 959px) {
    .hr__item.is-mypro .mega__ttl {
        max-width: 300px;
    }

    .hr__item.is-mypro .hr__icon {
        width: 130px;
    }
}

@media (min-width: 960px) {
    .hr__item.is-mypro .mega__ttl {
        padding-top: 20px;
    }
}

@media (max-width: 959px) {
    .hr__item.is-mypro .mega__ttl {
        max-width: 150px;
    }

    .hr__item.is-mypro .hr__icon {
        width: 72px;
    }
}

@media (min-width: 960px) {
    .hr__item.is-union .hr__icon {
        width: 180px;
    }
}
@media (max-width: 959px) {
    .hr__item.is-union .hr__icon {
        width: 100px;
        position: relative;
        top: -1vw;
    }
}

@media (min-width: 960px) {
    .hr__item.is-megaTrigger.is-active .hr__wrap > span > span {
        opacity: 0.8;
    }
}

.hr__item.is-megaTrigger.is-active .hr__wrap > span {
    position: relative;
}

.hr__item.is-megaTrigger.is-active .hr__wrap > span::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 40px;
}


.hr__item.is-megaTrigger.is-active .hr__wrap>span>span::after {
    border-bottom: none;
    border-right: none;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
}


@media (min-width: 960px) {
    .hr__item.is-megaTrigger.is-active .hr__wrap>span>span::after {
        margin-top: 8px;
    }
}

@media (max-width: 959px) {
    .hr__item.is-megaTrigger.is-active .hr__wrap>span>span::after {
        margin-top: 5px;
    }
}

.hr__item:not(.is-megaTrigger) {
    transition: 0.3s ease-in-out;
}

@media (min-width: 960px) {
    .hr__item:not(.is-megaTrigger):hover {
        opacity: 0.7;
    }
}

.hr__item img {
    width: auto;
}

.hr__wrap {
    width: 100%;
    height: 100%;
    border-right: 1px solid #FFB187;
    position: relative;
}

@media (min-width: 960px) {
    .hr__wrap {
        border-right: 1px solid #FFB187;
    }
}

.hr__wrap::before, .hr__wrap::after {
    content: "";
    background: #FFEBC3;
    width: 10px;
    height: 20px;
    position: absolute;
    right: -5px;
}

@media (max-width: 959px) {
    .hr__wrap::before, .hr__wrap::after {
        display: none;
    }
}

.hr__wrap::before {
    top: 0;
}

.hr__wrap::after {
    bottom: 0;
}

.hr__wrap>a, .hr__wrap>span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

@media (max-width: 959px) {

    .hr__wrap>a, .hr__wrap>span {
        padding: 0 10px;
    }
}

.hr__wrap>a>span, .hr__wrap>span>span {
    display: flex;
    align-items: center;
}

@media (max-width: 959px) {

    .hr__wrap>a>span,
    .hr__wrap>span>span {
        white-space: nowrap;
        height: 30px;
    }
}

.hr__wrap>a>span>img+span,
.hr__wrap>span>span>img+span {
    margin-left: 10px;
}

@media (max-width: 959px) {

    .hr__wrap>a>span>img+span,
    .hr__wrap>span>span>img+span {
        margin-left: 4px;
    }
}

.hr__wrap>span>span {
    position: relative;
}

.hr__wrap>span>span::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 15px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    transition: 0.2s;
}

@media (max-width: 959px) {
    .hr__wrap>span>span::after {
        margin-left: 25px;
        transition: 0.15s;
    }
}

@media (max-width: 500px) {
    .hr__wrap>span>span::after {
        margin-left: 15px;
    }
}

@media (max-width: 959px) {
    .hr__wrap>span>span::after {
        width: 5px;
        height: 5px;
    }
}

/* ==========================================================================
  mega
  ========================================================================== */
.mega {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100px;
    left: 0;
    border: 3px solid #F9752E;
    background: #FFFDF4;
    border-radius: 15px;
    width: 100%;
    padding: 15px 2.5%;
    transition: 0.2s ease-in-out;
    cursor: auto;
    pointer-events: none;
}

@media (max-width: 959px) {
    .mega {
        max-height: 90vh;
        top: 60px;
        width: 92%;
        left: 50%;
        transform: translateX(-50%);
        padding: 16px 0 0;
    }
}

.mega.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (min-width: 960px) {
    .mega .item__ttl.is-cafeteria img {
        width: 331px;
    }
}

@media (max-width: 959px) {
    .mega .item {
        margin-bottom: 20px;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mega .item .arrowBtn {
        margin-top: 12px;
    }

    .mega .item__ttl.is-cafeteria {
        max-width: 270px;
    }

    .mega .item__ttl.is-mypro {
        max-width: 180px;
    }

    .mega .item__ttl img {
        width: 100%;
    }
}

.mega__pointer {
    position: absolute;
    top: -26px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 26px solid #f9752e;
    border-top: 0;
}

@media (max-width: 959px) {
    .mega__pointer {
        top: -23px;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 22px solid #f9752e;
    }
}

.mega__pointer::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    border-bottom: 23px solid #FFFDF4;
    border-top: 0;
    position: absolute;
    bottom: -27px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 959px) {
    .mega__pointer::after {
        bottom: -26px;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-bottom: 20px solid #FFFDF4;
    }
}

@media (min-width: 960px) {
    .mega__btns {
      display: flex;
      align-items: center;
    }
    .mega__btns .arrowBtn {
      padding: 6px 38px 6px 16px;
    }
    .mega__btns .arrowBtn:not(:last-child) {
      margin-right: 20px;
    }
}

@media (max-width: 959px) {
    .mega__wrap {
        overflow-y: auto;
        max-height: 80svh;
        padding: 0 5%;
    }
}

.mega .cat {
    max-width: initial;
}

@media (max-width: 959px) {
    .mega .cat {
        margin-bottom: 40px;
        max-width: 500px;
    }
}

/* ==========================================================================
  toggle
  ========================================================================== */
.toggle {
    width: 70px;
    height: 70px;
    border: 1px solid #F9752E;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #F9752E;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    z-index: 10000;
    transition: 0.3s ease-in-out;
}

@media (max-width: 959px) {
    .toggle {
        width: 45px;
        height: 45px;
        border-radius: 3px;
    }
}

@media (min-width: 960px) {
    .toggle:hover {
        background: #F9752E;
        color: #fff;
    }

    .toggle:hover span {
        border-color: #fff;
    }
}

.toggle__txt {
    position: absolute;
    bottom: 9px;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 959px) {
    .toggle__txt {
        font-size: 10px;
        display: inline-block;
        transform: scale(0.8) translateX(-50%);
        transform-origin: center center;
        left: 43%;
        bottom: 0;
    }
}

.toggle span {
    -webkit-transition: 0.35s ease-in-out;
    border-bottom: solid 3px #F9752E;
    display: block;
    position: absolute;
    transform: translateX(-50%);
    transition: 0.35s ease-in-out;
    width: 36px;
    left: 50%;
}

@media (max-width: 959px) {
    .toggle span {
        width: 23px;
    }
}

.toggle span:nth-child(1) {
    top: 16px;
}

@media (max-width: 959px) {
    .toggle span:nth-child(1) {
        top: 8px;
    }
}

.toggle span:nth-child(2) {
    top: 26px;
}

@media (max-width: 959px) {
    .toggle span:nth-child(2) {
        top: 16px;
    }
}

.toggle span:nth-child(3) {
    top: 36px;
}

@media (max-width: 959px) {
    .toggle span:nth-child(3) {
        top: 24px;
    }
}

.toggle.active {
    position: fixed;
    top: 0;
    right: 0;
}

.toggle.active::before {
    display: none;
}

.toggle.active span {
    border-bottom: solid 2px #000;
    width: 30px;
    left: 25%;
    border-color: #fff !important;
}

.toggle.active span:nth-child(1) {
    top: 28px;
    transform: rotate(-45deg);
}

.toggle.active span:nth-child(2), .toggle.active span:nth-child(3) {
    top: 28px;
    transform: rotate(45deg);
}

/* ==========================================================================
  font(頻繁に使用するフォントサイズを集めています)
  ========================================================================== */
/* ==========================================================================
  pc/sp両方に反映
  ========================================================================== */
.size10 {
    font-size: 1rem;
}

@media (max-width: 550px) {
    .size10 {
        font-size: 2.7vw;
    }
}

.size11 {
    font-size: 1.1rem;
}

@media (max-width: 550px) {
    .size11 {
        font-size: 3vw;
    }
}

.size12 {
    font-size: 1.2rem;
}

@media (max-width: 550px) {
    .size12 {
        font-size: 3.2vw;
    }
}

.size13 {
    font-size: 1.3rem;
}

@media (max-width: 550px) {
    .size13 {
        font-size: 3.5vw;
    }
}

.size14 {
    font-size: 1.4rem;
}

@media (max-width: 550px) {
    .size14 {
        font-size: 3.75vw;
    }
}

.size15 {
    font-size: 1.5rem;
}

@media (max-width: 550px) {
    .size15 {
        font-size: 4vw;
    }
}

.size16 {
    font-size: 1.6rem;
}

@media (max-width: 550px) {
    .size16 {
        font-size: 4.3vw;
    }
}

.size17 {
    font-size: 1.7rem;
}

@media (max-width: 550px) {
    .size17 {
        font-size: 4.6vw;
    }
}

.size18 {
    font-size: 1.8rem;
}

@media (max-width: 550px) {
    .size18 {
        font-size: 4.8vw;
    }
}

.size20 {
    font-size: 2rem;
}

@media (max-width: 550px) {
    .size20 {
        font-size: 5.4vw;
    }
}

.size22 {
    font-size: 2.2rem;
}

@media (max-width: 550px) {
    .size22 {
        font-size: 5.9vw;
    }
}

.size25 {
    font-size: 2.5rem;
}

@media (max-width: 550px) {
    .size25 {
        font-size: 6.7vw;
    }
}

.size30 {
    font-size: 3rem;
}

@media (max-width: 550px) {
    .size30 {
        font-size: 8vw;
    }
}

/* ==========================================================================
  pcのみ反映
  ========================================================================== */
@media (min-width: 960px) {
    .size10-pc {
        font-size: 1rem;
    }
}

@media (min-width: 960px) {
    .size11-pc {
        font-size: 1.1rem;
    }
}

@media (min-width: 960px) {
    .size12-pc {
        font-size: 1.2rem;
    }
}

@media (min-width: 960px) {
    .size13-pc {
        font-size: 1.3rem;
    }
}

@media (min-width: 960px) {
    .size14-pc {
        font-size: 1.4rem;
    }
}

@media (min-width: 960px) {
    .size15-pc {
        font-size: 1.5rem;
    }
}

@media (min-width: 960px) {
    .size16-pc {
        font-size: 1.6rem;
    }
}

@media (min-width: 960px) {
    .size17-pc {
        font-size: 1.7rem;
    }
}

@media (min-width: 960px) {
    .size18-pc {
        font-size: 1.8rem;
    }
}

@media (min-width: 960px) {
    .size20-pc {
        font-size: 2rem;
    }
}

@media (min-width: 960px) {
    .size23-pc {
        font-size: 2.3rem;
    }
}

/* ==========================================================================
  SPのみ反映
  ========================================================================== */
@media (max-width: 959px) {
    .size10-sp {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    .size10-sp {
        font-size: 2.7vw;
    }
}

@media (max-width: 959px) {
    .size11-sp {
        font-size: 1.1rem;
    }
}

@media (max-width: 550px) {
    .size11-sp {
        font-size: 3vw;
    }
}

@media (max-width: 959px) {
    .size12-sp {
        font-size: 1.2rem;
    }
}

@media (max-width: 550px) {
    .size12-sp {
        font-size: 3.2vw;
    }
}

@media (max-width: 959px) {
    .size13-sp {
        font-size: 1.3rem;
    }
}

@media (max-width: 550px) {
    .size13-sp {
        font-size: 3.5vw;
    }
}

@media (max-width: 959px) {
    .size14-sp {
        font-size: 1.4rem;
    }
}

@media (max-width: 550px) {
    .size14-sp {
        font-size: 3.75vw;
    }
}

@media (max-width: 959px) {
    .size15-sp {
        font-size: 1.5rem;
    }
}

@media (max-width: 550px) {
    .size15-sp {
        font-size: 4vw;
    }
}

@media (max-width: 959px) {
    .size16-sp {
        font-size: 1.6rem;
    }
}

@media (max-width: 550px) {
    .size16-sp {
        font-size: 4.3vw;
    }
}

@media (max-width: 959px) {
    .size17-sp {
        font-size: 1.7rem;
    }
}

@media (max-width: 550px) {
    .size17-sp {
        font-size: 4.6vw;
    }
}

@media (max-width: 959px) {
    .size18-sp {
        font-size: 1.8rem;
    }
}

@media (max-width: 550px) {
    .size18-sp {
        font-size: 4.8vw;
    }
}

@media (max-width: 959px) {
    .size20-sp {
        font-size: 2rem;
    }
}

@media (max-width: 550px) {
    .size20-sp {
        font-size: 5.4vw;
    }
}

/* ==========================================================================
  menu
  ========================================================================== */
.menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    width: 375px;
    padding: 15px 18px 25px;
    color: #57483A;
    height: 100%;
    overflow-y: scroll;
    z-index: 10000;
}

@media (max-width: 959px) {
    .menu {
        width: 100%;
    }
}

.menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu .toggle {
    border-radius: 2px;
    width: 54px;
    height: 54px;
    background: #F9752E;
}

@media (min-width: 960px) {
    .menu .toggle:hover {
        background: #fa9660;
    }
}

.menu .toggle span {
    border-color: #fff;
    left: 17%;
    top: 25px;
}

@media (max-width: 959px) {
    .menu .toggle span {
        left: 28.5%;
    }
}

.menu .toggle span:nth-child(1) {
    transform: rotate(-45deg);
}

.menu .toggle span:nth-child(2), .menu .toggle span:nth-child(3) {
    transform: rotate(45deg);
}

.menu__wrap {
    margin-bottom: 50px;
    padding: 0 20px;
}

.menu .hr__login {
    margin: 47px 0 23px;
    width: 100%;
}

.menu .hr__tools {
    margin-bottom: 35px;
    margin-top: 50px;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 959px) {
    .menu .hr__tools {
        margin-top: 40px;
    }
}

.menu .hr__tools .hr__tool:not(:last-child) {
    margin-right: 5px;
}

.menu .hr__tools .hr__tool span {
    white-space: nowrap;
    position: relative;
    top: 4px;
}

.menu .hr__tools .hr__toolImg {
    min-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 960px) {
    .menu__logo:hover {
        opacity: 0.7;
    }
}

.menu__logo img {
    width: auto;
}

.menu__list {
    margin-top: 17px;
}

.menu__item, .menu__subItem {
    border-bottom: 1px solid #F9752E;
}

.menu__item.double {
    border-bottom: 4px double #F9752E;
}

.menu__item.is-parent > a .accordion, .menu__subItem.is-parent > a .accordion {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.menu__item > a, .menu__subItem > a {
    display: block;
    padding: 11px 32px 11px 0;
    position: relative;
}

@media (min-width: 960px) {
    .menu__item > a:hover, .menu__subItem > a:hover {
        color: #F9752E;
    }
}

.menu__item > a .circle, .menu__subItem > a .circle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.menu__item.is-parent > a.is-active {
    background: #F9752E;
    color: #fff;
    padding-left: 16px;
}

.menu__item.is-parent > a.is-active .accordion::before, .menu__item.is-parent > a.is-active .accordion::after {
    background-color: #fff;
}

.menu__subList {
    display: none;
    padding-bottom: 20px;
    margin-top: 10px;
}

.menu__subList > li > a {
    position: relative;
    padding: 4px 27px 4px 0;
    display: block;
}

@media (min-width: 960px) {
    .menu__subList > li > a:hover {
        opacity: 0.7;
    }
}

.menu__subList > li > a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: 1px;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

.menu__home {
    display: flex;
    align-items: center;
}

@media (min-width: 960px) {
    .menu__home:hover {
        color: #F9752E;
    }
}

.menu__home img {
    width: auto;
    margin-right: 10px;
}

.menu__subItem.is-parent {
    border-bottom: none;
}

.menu__subItem.is-parent > a::before {
    display: none;
}

.menu__subItem.is-parent > a.is-active {
    background: #fff;
    color: #F9752E;
    padding-left: 16px;
}

.menu__subItem.is-parent > a.is-active .accordion::before, .menu__subItem.is-parent > a.is-active .accordion::after {
    background-color: #F9752E;
}

.menu__gSub {
    display: none;
}

.menu__gSub > li > a {
    position: relative;
    padding: 4px 27px 4px 0;
    display: flex;
}

@media (min-width: 960px) {
    .menu__gSub > li > a:hover {
        opacity: 0.7;
    }
}

.menu__gSub > li > a::before {
    content: "―";
    margin-right: 10px;
}

.menu__gSub > li > a::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: 1px;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

.accordion {
    position: relative;
    cursor: pointer;
    height: 15px;
    pointer-events: none;
    top: 12px;
    width: 15px;
}

.accordion.is-active::before {
    transform: rotate(0deg);
}

.accordion.is-active::after {
    background-color: transparent;
}

.accordion::before, .accordion::after {
    background-color: #F9752E;
    bottom: 0;
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    transition: 0.1s;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
}

.accordion::before {
    transform: rotate(90deg);
}

/* ==========================================================================
  footer
  ========================================================================== */
.ft {
    margin-top: 40px;
    padding-top: 76px;
    padding-bottom: 64px;
    color: #fff;
}

@media (max-width: 959px) {
    .ft {
        padding-top: 56px;
        padding-bottom: 34px;
    }
}

@media (max-width: 959px) {
    .ft__wrap {
        text-align: center;
    }
}

@media (min-width: 960px) {
    .ft__wrap {
        display: flex;
        justify-content: space-between;
    }
}

.ft__logo img {
    width: auto;
}

@media (max-width: 1099px) {
    .ft__logo img {
        width: 280px;
    }
}

@media (max-width: 959px) {
    .ft__logo img {
        width: auto;
    }
}

.ft__txt {
    margin-top: 32px;
    margin-bottom: 35px;
}

@media (max-width: 959px) {
    .ft__txt {
        margin-top: 22px;
        margin-bottom: 67px;
    }
}

@media (max-width: 959px) {
    .ft__copy {
        display: block;
        text-align: center;
        margin-top: 14px;
    }
}

@media (max-width: 959px) {
    .ft__list {
        margin-top: 27px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 959px) {
    .ft__list > li {
        width: calc(50% - 5px);
    }

    .ft__list > li:not(:nth-child(2n)) {
        margin-right: 10px;
    }

    .ft__list > li > a {
        display: flex;
    }

    .ft__list > li > a::before {
        content: "－";
    }
}

@media (min-width: 960px) {
    .ft__list > li:not(:last-child) {
        margin-bottom: 17px;
    }
}

@media (max-width: 959px) {
    .ft__list > li {
        margin-bottom: 7px;
    }
}

@media (min-width: 960px) {
    .ft__list > li > a:hover {
        opacity: 0.7;
    }
}

@media (min-width: 960px) {
    .ft__contact {
        margin: 0 3% 0 -5%;
    }
}

@media (max-width: 959px) {
    .ft__contact {
        display: flex;
        flex-direction: row-reverse;
    }

    .ft__contact .contBtn {
        width: calc(50% - 6px);
    }

    .ft__contact .contBtn:nth-child(2n) {
        margin-right: 12px;
    }
}

/* ==========================================================================
  cards
  ========================================================================== */
.cards {
    display: flex;
    flex-wrap: wrap;
}

.cards .card {
    margin-bottom: 40px;
    overflow: hidden;
}

@media (min-width: 960px) {
    .cards .card {
        width: calc(25% - 14.25px);
    }

    .cards .card:not(:nth-child(4n)) {
        margin-right: 19px;
    }
}

@media (max-width: 959px) {
    .cards .card {
        width: calc(50% - 6.5px);
    }

    .cards .card:not(:nth-child(2n)) {
        margin-right: 13px;
    }
}

@media (max-width: 959px) {
    .cards .card {
        margin-bottom: 30px;
    }
}

@media (min-width: 960px) {
    .cards .card:hover .card__img img {
        transform: scale(1.1);
    }
}

.cards .card__img {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

@media (max-width: 959px) {
    .cards .card__img {
        border-radius: 10px;
    }
}

.cards .card__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.cards .card__img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: 0.5s ease-in-out;
}

.cards .card .tag {
    margin: 10px 0px;
}

@media (max-width: 959px) {
    .cards .card .tag {
        margin: 8px 0;
    }
}

.cards .card__wrap {
    position: relative;
}

.cards .card__wrap .period {
    position: absolute;
    bottom: 13px;
    left: 10px;
}

@media (max-width: 959px) {
    .cards .card__wrap .period {
        left: 4px;
        font-size: 1.1rem;
    }
}

@media (max-width: 550px) {
    .cards .card__wrap .period {
        font-size: 3vw;
    }
}

@media (max-width: 959px) {
    .cards .card__ttl {
        font-size: 1.2rem;
    }
}

@media (max-width: 550px) {
    .cards .card__ttl {
        font-size: 3.2vw;
    }
}

.period {
    font-size: 1.3rem;
    text-align: center;
    background: #F5F5F5;
    padding: 2px 6px;
}

@media (max-width: 959px) {
    .period {
        font-size: 1.1rem;
    }
}

@media (max-width: 550px) {
    .period {
        font-size: 3vw;
    }
}

.tag {
    font-size: 0;
}

.tag > li {
    display: inline-block;
    margin: 0 3px 3px;
    display: inline-block;
    padding: 1px 14px;
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: bold;
    border: 1px solid #FA8B4F;
    background: #fff;
    color: #FA8B4F;
}

@media (max-width: 959px) {
    .tag > li {
        font-size: 1.1rem;
        padding: 1px 12px;
    }
}

@media (max-width: 550px) {
    .tag > li {
        font-size: 3vw;
    }
}

.tag > li.is-new {
    background: #FA8B4F;
    color: #fff;
}
.tag > li.is-befor {
    background: #FA8B4F;
    color: #fff;
}
.tag > li.is-now {
    background: #FA8B4F;
    color: #fff;
}

.tag.is-sm > li {
    padding: 1px 10px;
    font-size: 1.1rem;
}

@media (max-width: 959px) {
    .tag.is-sm > li {
        padding: 2px 6px;
        line-height: 1.2;
        margin: 0 2px 4px;
    }
}

@media (max-width: 959px) {
    .tag.is-sm > li > span {
        font-size: 1.1rem;
    }
}

@media (max-width: 550px) {
    .tag.is-sm > li > span {
        font-size: 3vw;
    }
}

.period + .tag {
    margin-top: 17px;
}

@media (max-width: 959px) {
    .period + .tag {
        margin-top: 12px;
    }
}

/* ==========================================================================
  slide
  ========================================================================== */
.fv .slick-slide {
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 959px) {
    .fv .slick-slide {
        padding-left: 3px;
        padding-right: 3px;
    }
}

@media (min-width: 960px) {
    .fv .slick-slide:hover .slide__img img {
        transform: scale(1.1);
    }
}

.fv .slide__img {
    position: relative;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

@media (max-width: 959px) {
    .fv .slide__img {
        border-radius: 9px 9px 0 0;
    }
}

.fv .slide__img::before {
    content: "";
    display: block;
    padding-top: 89%;
}

.fv .slide__img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: 0.4s ease-in-out;
}

.fv .slide__info {
    position: absolute;
    bottom: 28px;
    left: 21px;
    z-index: 10;
}

@media (max-width: 959px) {
    .fv .slide__info {
        bottom: 30px;
        left: 14px;
    }
}

.fv .slide__ttl {
    padding: 6px 28px;
    background: #fff;
    border-radius: 15px 15px 0 0;
    position: relative;
    top: -13px;
    margin-bottom: -13px;
    color: #57483A;
}

.fv .slide__ttl > span {
    background: #fff;
}

@media (max-width: 959px) {
    .fv .slide__ttl {
        padding: 8px;
        top: -17px;
        margin-bottom: -17px;
    }
}

.fv .slick-dots {
    bottom: -37px;
}

@media (max-width: 959px) {
    .fv .slick-dots {
        bottom: -21px;
    }
}

.fv .slick-dots li {
    width: auto;
    height: auto;
    margin: 0 6px;
}

.fv .slick-dots li.slick-active button {
    background: #787878;
}

.fv .slick-dots li button {
    padding: 0;
    width: 7px;
    height: 7px;
    background: #D9D9D9;
    border-radius: 50%;
}

.fv .slick-dots li button::before {
    display: none;
}

.fv .slick-dotted.slick-slider {
    margin-bottom: 63px;
}

@media (max-width: 959px) {
    .fv .slick-dotted.slick-slider {
        margin-bottom: 41px;
    }
}

/* ==========================================================================
  bg
  ========================================================================== */
.bg-dark {
    background: #FFEBC3;
}

.bg-light {
    background: #FFFDF4;
}

.bg-light02 {
    background: #FFF7E8;
}

.bg-bright {
    background: #F9752E;
}

/* ==========================================================================
  search
  ========================================================================== */
.search {
    height: 54px;
    max-width: 858px;
    display: flex;
    margin: 0 auto;
    border: 1px solid #D9D9D9;
    border-radius: 50px;
}

@media (max-width: 959px) {
    .search {
        height: 46px;
    }
}

@media (min-width: 960px) {
    .search.is-sm {
        max-width: 513px;
    }
}

@media (min-width: 960px) {
    .search.is-sm .search__input input {
        font-size: 1.6rem !important;
    }
}

@media (min-width: 960px) {
    .search.is-sm .search__submit {
        width: 124px;
    }

    .search.is-sm .search__submit::before {
        right: 22px;
    }
}

.search.is-right {
    margin-left: auto;
    margin-right: 0;
}

.search__submit {
    width: 180px;
    position: relative;
}

@media (max-width: 959px) {
    .search__submit {
        width: 80px;
    }
}

@media (min-width: 960px) {
    .search__submit:hover input {
        background: #ed5707;
    }
}

.search__submit::before {
    content: "";
    background: url(../img/common/icon-search.svg) no-repeat top center/23px 23px;
    width: 23px;
    height: 23px;
    position: absolute;
    top: 50%;
    right: 53px;
    pointer-events: none;
    transform: translateY(-50%);
}

@media (max-width: 959px) {
    .search__submit::before {
        background: url(../img/common/icon-search.svg) no-repeat top center/12px 12px;
        width: 12px;
        height: 12px;
        right: 17px;
        margin-top: 1px;
    }
}

.search__submit input {
    background: #F9752E;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    width: 100%;
    height: 100%;
    border-radius: 0 50px 50px 0;
    letter-spacing: 0.3em;
    transition: 0.3s ease-in-out;
}

@media (max-width: 959px) {
    .search__submit input {
        font-size: 1.2rem;
        padding-left: 12px;
    }
}

@media (max-width: 550px) {
    .search__submit input {
        font-size: 2.5vw;
    }
}

@media (max-width: 400px) {
    .search__submit input {
        font-size: 3.2vw;
    }
}

.search__input {
    flex: 1 1 0%;
}

.search__input input {
    border-radius: 50px 0 0 50px;
    padding: 0 37px;
}

@media (min-width: 960px) {
    .search__input input {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 959px) {
    .search__input input {
        padding: 0 22px;
        font-size: 1.6rem !important;
    }
}

.search__input input::placeholder {
    color: #57483A;
}

@media (max-width: 959px) {
    .search__input input::placeholder {
        font-size: 1.1rem;
    }
}

@media (max-width: 550px) {
    .search__input input::placeholder {
        font-size: 3vw;
    }
}

.searchSection {
    margin: 20px 0 0;
    padding: 25px 0;
}

@media (max-width: 959px) {
    .searchSection {
        padding: 15px 20px;
    }
}

/* ==========================================================================
  ttl
  ========================================================================== */
.secTtl {
    letter-spacing: 0.1em;
    margin-bottom: 52px;
}

@media (max-width: 959px) {
    .secTtl {
        margin-bottom: 22px;
    }
}

.secTtl > span {
    display: block;
    text-align: center;
}

.secTtl .is-ja {
    color: #57483A;
    font-weight: bold;
    font-size: 3rem;
    margin-bottom: 2px;
}

@media (max-width: 959px) {
    .secTtl .is-ja {
        font-size: 2.5rem;
        margin-bottom: 6px;
    }
}

@media (max-width: 550px) {
    .secTtl .is-ja {
        font-size: 6.5vw;
    }
}

.secTtl .is-en {
    font-size: 1.8rem;
    color: #EB590A;
    font-weight: 600;
    font-family: "Inter", sans-serif;
}

@media (max-width: 959px) {
    .secTtl .is-en {
        font-size: 1.4rem;
    }
}

@media (max-width: 550px) {
    .secTtl .is-en {
        font-size: 3.6vw;
    }
}

.lineTtl {
    font-size: 3rem;
    font-weight: bold;
    display: flex;
    margin-bottom: 40px;
}

@media (max-width: 959px) {
    .lineTtl {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }
}

@media (max-width: 550px) {
    .lineTtl {
        font-size: 6.5vw;
    }
}

.lineTtl.is-accent {
    color: #F9752E;
}

.lineTtl::before {
    content: "";
    width: 26px;
    height: 3px;
    background: #F9752E;
    margin-right: 10px;
    top: 0.75em;
    position: relative;
}

.ttl {
    font-size: 2.6rem;
    font-weight: bold;
    margin-bottom: 24px;
}

@media (max-width: 959px) {
    .ttl {
        font-size: 2.5rem;
    }
}

@media (max-width: 550px) {
    .ttl {
        font-size: 6.5vw;
    }
}

.logoTtl {
    margin-bottom: 25px;
}

@media (max-width: 959px) {
    .logoTtl {
        max-width: 300px;
    }
}

.logoTtl img {
    width: auto;
    max-width: 100%;
}

.primaryTtl {
    font-size: 2.6rem;
    font-weight: bold;
    margin-bottom: 28px;
    color: #fff;
    background: #F9752E;
    padding: 10px 31px;
}

@media (max-width: 959px) {
    .primaryTtl {
        font-size: 2.3rem;
        padding: 10px 16px;
    }
}

@media (max-width: 550px) {
    .primaryTtl {
        font-size: 6.2vw;
    }
}

.secondaryTtl {
    font-size: 2.6rem;
    font-weight: bold;
    margin-bottom: 28px;
    border-left: 6px solid #F9752E;
    padding: 0 0 0 8px;
}

@media (max-width: 959px) {
    .secondaryTtl {
        font-size: 2.1rem;
    }
}

@media (max-width: 550px) {
    .secondaryTtl {
        font-size: 5.7vw;
    }
}

.tertiaryTtl {
    font-size: 2.4rem;
    padding-bottom: 10px;
    margin-bottom: 28px;
    font-weight: bold;
    border-bottom: 1px solid #F9752E;
}

@media (max-width: 959px) {
    .tertiaryTtl {
        font-size: 1.9rem;
    }
}

@media (max-width: 550px) {
    .tertiaryTtl {
        font-size: 5.15vw;
    }
}

/* ==========================================================================
  cat
  ========================================================================== */
.cat {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    color: #57483A;
}

@media (min-width: 960px) {
    .cat.is-4 .cat__item {
        width: calc(25% - 15.75px);
    }

    .cat.is-4 .cat__item:not(:nth-child(4n)) {
        margin-right: 21px;
    }
}

@media (max-width: 959px) {
    .cat.is-4 .cat__item {
        width: calc(50% - 7px);
    }

    .cat.is-4 .cat__item:not(:nth-child(2n)) {
        margin-right: 14px;
    }
}

.cat.is-5 .cat__item {
    margin-bottom: 11px;
    min-height: 52px;
}

@media (max-width: 959px) {
    .cat.is-5 .cat__item {
        min-height: 36px;
        margin-bottom: 8px;
        width: calc(50% - 4px);
    }

    .cat.is-5 .cat__item:not(:nth-child(2n)) {
        margin-right: 8px;
    }
}

@media (min-width: 960px) {
    .cat.is-5 .cat__item {
        width: calc(20% - 11.2px);
    }

    .cat.is-5 .cat__item:not(:nth-child(5n)) {
        margin-right: 14px;
    }
}

.cat__item {
    min-height: 60px;
    border-radius: 100px;
    margin-bottom: 16px;
}

@media (max-width: 959px) {
    .cat__item {
        min-height: 51px;
        margin-bottom: 6px;
    }
}

.cat__item > a {
    border: 1px solid #F9752E;
}

@media (min-width: 960px) {
    .cat__item > a:hover {
        background: #F9752E;
        color: #fff;
    }
}

.cat__item > a::before {
    content: "";
    margin-right: 8px;
    transition: 0.3s ease-in-out;
}

@media (max-width: 959px) {
    .cat__item > a::before {
        zoom: 0.8;
    }
}

.cat__item.themepark > a::before {
    background: url(../img/common/icon-themepark.svg) no-repeat top center/25px 23px;
    width: 25px;
    height: 23px;
}

@media (min-width: 960px) {
    .cat__item.themepark > a:hover::before {
        background: url(../img/common/icon-themepark-white.svg) no-repeat top center/25px 23px;
        width: 25px;
        height: 23px;
    }
}

.cat__item.leisure > a::before {
    background: url(../img/common/icon-leisure.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.leisure > a:hover::before {
        background: url(../img/common/icon-leisure-white.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

.cat__item.gourmet > a:hover::before {
    background: url(../img/common/icon-gourmet-white.svg) no-repeat top center/18px 24px;
    width: 18px;
    height: 24px;
}

.cat__item.gourmet > a::before {
    background: url(../img/common/icon-gourmet.svg) no-repeat top center/18px 24px;
    width: 18px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat__item.movie > a:hover::before {
        background: url(../img/common/icon-movie-white.svg) no-repeat top center/20px 22px;
        width: 20px;
        height: 22px;
    }
}

.cat__item.movie > a::before {
    background: url(../img/common/icon-movie.svg) no-repeat top center/20px 22px;
    width: 20px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.reflesh > a:hover::before {
        background: url(../img/common/icon-reflesh-white.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

.cat__item.reflesh > a::before {
    background: url(../img/common/icon-reflesh.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.study > a:hover::before {
        background: url(../img/common/icon-study-white.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
}

.cat__item.study > a::before {
    background: url(../img/common/icon-study.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
}

@media (min-width: 960px) {
    .cat__item.stay > a:hover::before {
        background: url(../img/common/icon-stay-white.svg) no-repeat top center/24px 18px;
        width: 24px;
        height: 18px;
    }
}

.cat__item.stay > a::before {
    background: url(../img/common/icon-stay.svg) no-repeat top center/24px 18px;
    width: 24px;
    height: 18px;
}

@media (min-width: 960px) {
    .cat__item.rental > a:hover::before {
        background: url(../img/common/icon-rental-white.svg) no-repeat top center/22px 26px;
        width: 22px;
        height: 26px;
        min-width: 22px;
    }
}

.cat__item.rental > a::before {
    background: url(../img/common/icon-rental.svg) no-repeat top center/22px 26px;
    width: 22px;
    height: 26px;
    min-width: 22px;
}

@media (min-width: 960px) {
    .cat__item.outdoor > a:hover::before {
        background: url(../img/common/icon-outdoor-white.svg) no-repeat top center/20px 24px;
        width: 22px;
        height: 24px;
    }
}

.cat__item.outdoor > a::before {
    background: url(../img/common/icon-outdoor.svg) no-repeat top center/20px 24px;
    width: 22px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat__item.skill > a:hover::before {
        background: url(../img/common/icon-skill-white.svg) no-repeat top center/26px 22px;
        width: 26px;
        height: 22px;
    }
}

.cat__item.skill > a::before {
    background: url(../img/common/icon-skill.svg) no-repeat top center/26px 22px;
    width: 26px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.food > a:hover::before {
        background: url(../img/common/icon-food-white.svg) no-repeat top center/18px 24px;
        width: 18px;
        height: 24px;
    }
}

.cat__item.food > a::before {
    background: url(../img/common/icon-food.svg) no-repeat top center/18px 24px;
    width: 18px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat__item.life > a:hover::before {
        background: url(../img/common/icon-life-white.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
}

.cat__item.life > a::before {
    background: url(../img/common/icon-life.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
}

@media (min-width: 960px) {
    .cat__item.sports > a:hover::before {
        background: url(../img/common/icon-sports-white.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

.cat__item.sports > a::before {
    background: url(../img/common/icon-sports.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.volunteer > a:hover::before {
        background: url(../img/common/icon-volunteer-white.svg) no-repeat top center/19px 22px;
        width: 19px;
        height: 22px;
    }
}

.cat__item.volunteer > a::before {
    background: url(../img/common/icon-volunteer.svg) no-repeat top center/19px 22px;
    width: 19px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat__item.others > a:hover::before {
        background: url(../img/common/icon-others-white.svg) no-repeat top center/19px 6px;
        width: 19px;
        height: 6px;
    }
}

.cat__item.others > a::before {
    background: url(../img/common/icon-others.svg) no-repeat top center/19px 6px;
    width: 19px;
    height: 6px;
}

.cat__item > a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
    padding: 10px 10%;
    height: 100%;
    border-radius: 100px;
}

@media (min-width: 960px) {
    .cat__item > a:hover {
        background: #F9752E;
        color: #fff;
    }
}

.cat.is-reverse .cat__item > a {
    background: #F9752E;
    color: #fff;
    border: 1px solid #F9752E;
}

@media (max-width: 959px) {
    .cat.is-reverse .cat__item > a {
        padding: 10px 6%;
    }
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item > a:hover {
        background: #fff;
        color: #F9752E;
    }
}

.cat.is-reverse .cat__item.themepark > a::before {
    background: url(../img/common/icon-themepark-white-sm.svg) no-repeat top center/25px 23px;
    width: 25px;
    height: 23px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.themepark > a:hover::before {
        background: url(../img/common/icon-themepark-sm.svg) no-repeat top center/25px 23px;
        width: 25px;
        height: 23px;
    }
}

.cat.is-reverse .cat__item.leisure > a::before {
    background: url(../img/common/icon-leisure-white-sm.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.leisure > a:hover::before {
        background: url(../img/common/icon-leisure-sm.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.study > a:hover::before {
        background: url(../img/common/icon-study-sm.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
}

.cat.is-reverse .cat__item.study > a::before {
    background: url(../img/common/icon-study-white-sm.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.stay > a:hover::before {
        background: url(../img/common/icon-stay-sm.svg) no-repeat top center/24px 18px;
        width: 24px;
        height: 18px;
    }
}

.cat.is-reverse .cat__item.stay > a::before {
    background: url(../img/common/icon-stay-white-sm.svg) no-repeat top center/24px 18px;
    width: 24px;
    height: 18px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.rental > a:hover::before {
        background: url(../img/common/icon-rental-sm.svg) no-repeat top center/22px 26px;
        width: 22px;
        height: 26px;
    }
}

.cat.is-reverse .cat__item.rental > a::before {
    background: url(../img/common/icon-rental-white-sm.svg) no-repeat top center/22px 26px;
    width: 22px;
    height: 26px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.gourmet > a:hover::before {
        background: url(../img/common/icon-gourmet-sm.svg) no-repeat top center/18px 24px;
        width: 18px;
        height: 24px;
    }
}

.cat.is-reverse .cat__item.gourmet > a::before {
    background: url(../img/common/icon-gourmet-white-sm.svg) no-repeat top center/18px 24px;
    width: 18px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.movie > a:hover::before {
        background: url(../img/common/icon-movie-sm.svg) no-repeat top center/20px 22px;
        width: 20px;
        height: 22px;
    }
}

.cat.is-reverse .cat__item.movie > a::before {
    background: url(../img/common/icon-movie-white-sm.svg) no-repeat top center/20px 22px;
    width: 20px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.reflesh > a:hover::before {
        background: url(../img/common/icon-reflesh-sm.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

.cat.is-reverse .cat__item.reflesh > a::before {
    background: url(../img/common/icon-reflesh-white-sm.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.outdoor > a:hover::before {
        background: url(../img/common/icon-outdoor-sm.svg) no-repeat top center/20px 24px;
        width: 22px;
        height: 24px;
    }
}

.cat.is-reverse .cat__item.outdoor > a::before {
    background: url(../img/common/icon-outdoor-white-sm.svg) no-repeat top center/20px 24px;
    width: 22px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.skill > a:hover::before {
        background: url(../img/common/icon-skill-sm.svg) no-repeat top center/26px 22px;
        width: 26px;
        height: 22px;
    }
}

.cat.is-reverse .cat__item.skill > a::before {
    background: url(../img/common/icon-skill-white-sm.svg) no-repeat top center/26px 22px;
    width: 26px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.food > a:hover::before {
        background: url(../img/common/icon-food-sm.svg) no-repeat top center/18px 24px;
        width: 18px;
        height: 24px;
    }
}

.cat.is-reverse .cat__item.food > a::before {
    background: url(../img/common/icon-food-white-sm.svg) no-repeat top center/18px 24px;
    width: 18px;
    height: 24px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.life > a:hover::before {
        background: url(../img/common/icon-life-sm.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
}

.cat.is-reverse .cat__item.life > a::before {
    background: url(../img/common/icon-life-white-sm.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.sports > a:hover::before {
        background: url(../img/common/icon-sports-sm.svg) no-repeat top center/22px 22px;
        width: 22px;
        height: 22px;
    }
}

.cat.is-reverse .cat__item.sports > a::before {
    background: url(../img/common/icon-sports-white-sm.svg) no-repeat top center/22px 22px;
    width: 22px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.volunteer > a:hover::before {
        background: url(../img/common/icon-volunteer-sm.svg) no-repeat top center/19px 22px;
        width: 19px;
        height: 22px;
    }
}

.cat.is-reverse .cat__item.volunteer > a::before {
    background: url(../img/common/icon-volunteer-white-sm.svg) no-repeat top center/19px 22px;
    width: 19px;
    height: 22px;
}

@media (min-width: 960px) {
    .cat.is-reverse .cat__item.others > a:hover::before {
        background: url(../img/common/icon-others-sm.svg) no-repeat top center/19px 6px;
        width: 19px;
        height: 6px;
    }
}

.cat.is-reverse .cat__item.others > a::before {
    background: url(../img/common/icon-others-white-sm.svg) no-repeat top center/19px 6px;
    width: 19px;
    height: 6px;
}

  .cat.is-reverse .cat__item.money > a::before {
    background: url(../img/common/icon-money-white-sm.svg) no-repeat top center/21px 25px;
    width: 21px;
    height: 25px;
  }
  @media (min-width: 960px) {
    .cat.is-reverse .cat__item.money > a:hover::before {
      background: url(../img/common/icon-money-sm.svg) no-repeat top center/21px 25px;
      width: 21px;
      height: 25px;
    }
  }
  .cat__item.money > a::before {
    background: url(../img/common/icon-money-sm.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
  }
  @media (min-width: 960px) {
    .cat__item.money > a:hover::before {
        background: url(../img/common/icon-money-white-sm.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
  }

  .cat.is-reverse .cat__item.connect > a::before {
    background: url(../img/common/icon-connect-white-sm.svg) no-repeat top center/25px 25px;
    width: 25px;
    height: 25px;
  }
  @media (min-width: 960px) {
    .cat.is-reverse .cat__item.connect > a:hover::before {
      background: url(../img/common/icon-connect-sm.svg) no-repeat top center/25px 25px;
      width: 25px;
      height: 25px;
    }
  }
  .cat__item.connect > a::before {
    background: url(../img/common/icon-connect-sm.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
  }
  @media (min-width: 960px) {
    .cat__item.connect > a:hover::before {
        background: url(../img/common/icon-connect-white-sm.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
  }

  .cat.is-reverse .cat__item.health > a::before {
    background: url(../img/common/icon-health-white-sm.svg) no-repeat top center/18px 25px;
    width: 18px;
    height: 25px;
  }
  @media (min-width: 960px) {
    .cat.is-reverse .cat__item.health > a:hover::before {
      background: url(../img/common/icon-health-sm.svg) no-repeat top center/18px 25px;
      width: 18px;
      height: 25px;
    }
  }
  .cat__item.health > a::before {
    background: url(../img/common/icon-health-sm.svg) no-repeat top center/26px 20px;
    width: 26px;
    height: 20px;
  }
  @media (min-width: 960px) {
    .cat__item.health > a:hover::before {
        background: url(../img/common/icon-health-white-sm.svg) no-repeat top center/26px 20px;
        width: 26px;
        height: 20px;
    }
  }

/* ==========================================================================
  item
  ========================================================================== */
.item {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

@media (max-width: 959px) {
    .item {
        margin-bottom: 31px;
    }
}

@media (min-width: 960px) {
    .item {
        justify-content: space-between;
    }
}

@media (min-width: 960px) {
    .item.is-x-start {
        justify-content: flex-start;
    }
}

@media (max-width: 959px) {
    .item.is-x-start {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 30px;
    }
}

@media (min-width: 960px) {
    .item.is-x-start .logoTtl {
        margin-right: 20px;
    }
}

@media (max-width: 959px) {
    .item {
        justify-content: center;
    }
}

@media (min-width: 960px) {
    .item__ttl.is-cafeteria img {
        width: 457px;
    }

    .item__ttl.is-mypro img {
        width: 161px;
    }
}

@media (max-width: 959px) {
    .item__ttl {
        max-width: 93%;
        margin: 0 auto;
    }

    .item__ttl.is-cafeteria {
        max-width: 400px;
        width: 93%;
    }

    .item__ttl.is-mypro {
        max-width: 250px;
        width: 93%;
    }
}

@media (max-width: 550px) {
    .item__ttl.is-mypro {
        max-width: 157px;
    }
}

.itemBlock {
    display: flex;
}

@media (min-width: 960px) {
    .itemBlock {
        justify-content: space-between;
    }
}

@media (max-width: 959px) {
    .itemBlock {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 959px) {
    .itemBlock__wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 959px) {
    .itemBlock .lineTtl {
        margin-bottom: 0;
    }
}

.itemBlock .search {
    margin-top: 32px;
}

@media (max-width: 959px) {
    .itemBlock .search {
        margin-top: 25px;
        max-width: initial;
        width: 100%;
    }
}

@media (min-width: 960px) {
    .itemBlock .search {
        margin-right: 0;
        width: 520px;
        margin-left: 20px;
    }
}

@media screen and (min-width: 960px) and (max-width: 1080px) {
    .itemBlock .search {
        width: 480px;
    }
}

@media (min-width: 960px) {
    .itemBlock .search__submit {
        width: 120px;
    }

    .itemBlock .search__submit::before {
        right: 23px;
    }
}

/* ==========================================================================
  btn
  ========================================================================== */
.arrowBtn {
    display: inline-block;
    border: 1px solid #EB590A;
    border-radius: 100px;
    padding: 6px 52px 6px 16px;
    position: relative;
    color: #57483A;
}

@media (max-width: 959px) {
    .arrowBtn {
        padding: 8px 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (min-width: 960px) {
    .arrowBtn:hover {
        background: #EB590A;
        color: #fff;
    }

    .arrowBtn:hover > .circle {
        background: #fff;
    }

    .arrowBtn:hover > .circle::before {
        border-color: #EB590A;
    }
}

.arrowBtn > .circle {
    width: 20px;
    height: 20px;
}

.arrowBtn > .circle::before {
    width: 5px;
    height: 5px;
    left: 33%;
    margin-top: 1px;
}

@media (max-width: 959px) {
    .arrowBtn > .circle {
        position: relative;
        transform: none;
        top: 0;
        right: 0;
        margin-left: 10px;
    }
}

@media (min-width: 960px) {
    .arrowBtn > .circle {
        top: 50%;
        right: 14px;
    }
}

.arrowBtn.is-back {
    max-width: 270px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

@media (max-width: 959px) {
    .arrowBtn.is-back > .circle {
        margin-right: 10px;
    }
}

@media (min-width: 960px) {
    .arrowBtn.is-back > .circle {
        right: initial;
        left: initial;
        top: initial;
        transform: none;
        position: relative;
        margin-right: 10px;
    }
}

.arrowBtn.is-back > .circle::before {
    left: 43%;
}

.circle {
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    transform: translateY(-50%);
    background: #EB590A;
    transition: 0.3s ease-in-out;
}

.circle::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 30%;
    margin-top: 1px;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

.circle.is-reverse::before {
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    border-top: none;
    border-right: none;
}

.contBtn {
    width: 300px;
    height: 70px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

@media (min-width: 960px) {
    .contBtn:hover {
        opacity: 0.8;
    }
}

@media (max-width: 959px) {
    .contBtn {
        flex-direction: column;
        justify-content: center;
        min-height: 110px;
        height: auto;
        padding: 10px 0;
    }
}

@media (max-width: 959px) {
    .contBtn__img {
        margin-bottom: 10px;
    }
}

@media (min-width: 960px) {
    .contBtn__img {
        margin-right: 10%;
        height: 40px;
        border-right: 1px solid #F9752E;
        width: 66px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.contBtn__img img {
    width: auto;
}

.contBtn .accent {
    font-weight: bold;
}

.contBtn__wrap {
    color: #333333;
}

.contBtn__num {
    margin: 3px 0 5px;
}

@media (min-width: 960px) {
    .contBtn + .contBtn {
        margin-top: 12px;
    }
}

@media (max-width: 959px) {
    .btns.is-half .borderBtn:not(:last-child),
    .btns.is-half .btn:not(:last-child) {
        margin-bottom: 40px;
    }
}

@media (min-width: 960px) {
    .btns.is-half {
        display: flex;
        align-items: center;
    }

    .btns.is-half .borderBtn,
    .btns.is-half .btn {
        width: calc(50% - 6px);
    }

    .btns.is-half .borderBtn:not(:nth-child(2n)),
    .btns.is-half .btn:not(:nth-child(2n)) {
        margin-right: 12px;
    }
}

.btns:not(.is-half) .btn:not(:last-child) {
    margin-right: 10px;
}

.btn {
    border-radius: 6px;
    color: #fff;
    background: #F9752E;
    text-align: center;
    border: 1px solid #F9752E;
    padding: 7px 45px;
}
.btn2 {
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    background: #F9752E;
    text-align: center;
    border: 1px solid #F9752E;
    padding: 7px 45px;
}

@media (max-width: 959px) {
    .btn {
        padding: 7px 20px;
    }
}

.btn.is-darkDisable {
    border-color: #969696;
    background: #969696;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

@media (max-width: 959px) {
    .btn.is-darkDisable {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

.btn.searchBtn {
    padding: 0;
    position: relative;
}

.btn.searchBtn::before {
    content: "";
    background: url(../img/common/icon-search.svg) no-repeat top center/16px 16px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 26%;
    transform: translateY(-50%);
    transition: 0.3s ease-in-out;
}

.btn.notifyBtn {
    padding: 0;
    position: relative;
}

.btn.notifyBtn::before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 26%;
    transform: translateY(-50%);
    transition: 0.3s ease-in-out;
}

.btn.notifyBtn input[type=submit] {
    border-radius: 6px;
    transition: 0.3s ease-in-out;
    padding: 13px 45px;
    width: 100%;
    height: 100%;
    background: #F9752E;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: inherit;
}

@media (max-width: 959px) {
    .btn.searchBtn::before {
        left: 18%;
    }
    .btn.notifyBtn::before {
        left: 18%;
    }
}

.btn.searchBtn input[type=button],
.btn.searchBtn input[type=submit] {
    border-radius: 6px;
    transition: 0.3s ease-in-out;
    padding: 13px 45px;
    width: 100%;
    height: 100%;
    background: #F9752E;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: inherit;
}

@media (min-width: 960px) {
    .btn.searchBtn:hover::before {
        background: url(../img/common/icon-search-solid.svg) no-repeat top center/16px 16px;
    }

    .btn.searchBtn:hover input[type=submit] {
        background: #fff;
        color: #F9752E;
    }

    .btn.notifyBtn:hover input[type=submit] {
        background: #fff;
        color: #F9752E;
    }
}

.btn.resetBtn {
    background: #D8D8D8;
    border: 1px solid #D8D8D8;
    padding: 0;
}

.btn.resetBtn input[type=reset] {
    transition: 0.3s ease-in-out;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    padding: 13px 45px;
    background: #D8D8D8;
    color: #333333;
    font-family: inherit;
    font-weight: 500;
    font-size: inherit;
}

@media (min-width: 960px) {
    .btn.resetBtn input[type=reset]:hover {
        opacity: 0.7;
    }
}

@media (min-width: 960px) {
    .btn:hover {
        color: #F9752E;
        background: #fff;
    }
}

.btn.is-reverse {
    color: #F9752E;
    background: #fff;
}

@media (min-width: 960px) {
    .btn.is-reverse:hover {
        color: #fff;
        background: #F9752E;
    }
}

.submitBtn {
    padding: 0;
    margin: 0 auto;
    max-width: 611px;
    background: transparent;
    border: none;
    height: 79px;
    letter-spacing: 0.08em;
}

@media (max-width: 959px) {
    .submitBtn {
        max-width: 400px;
        height: 60px;
    }
}

.submitBtn input[type=submit] {
    width: 100%;
    font-weight: bold;
    height: 100%;
    border-radius: 92px;
    background: #F9752E;
    color: #fff;
    transition: 0.3s ease-in-out;
    border: 1px solid #F9752E;
}

@media (min-width: 960px) {
    .submitBtn input[type=submit]:hover {
        background: #fff;
        color: #F9752E;
    }
}

.submitBtn.is-square {
    height: 72px;
}

.submitBtn.is-square input[type=submit] {
    border-radius: 6px;
}

@media (min-width: 960px) {
    .submitBtn.is-dark:hover input[type=submit] {
        background: #fff;
        color: #969696;
    }
}

.submitBtn.is-dark input[type=submit] {
    background: #969696;
    border: 1px solid #969696;
    color: #fff;
}

.submitBtn.is-coupon {
    position: relative;
    font-size: 18px;
}

.submitBtn.is-coupon::before {
    content: "";
    background: url(../img/common/icon-coupon-white.svg) no-repeat top center/32px 32px;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    transition: 0.3s ease-in-out;
}

@media (max-width: 1200px) {
    .submitBtn.is-coupon::before {
        left: 20%;
    }
}

@media (max-width: 959px) {
    .submitBtn.is-coupon::before {
        left: 12%;
    }
}

@media (min-width: 960px) {
    .submitBtn.is-coupon:hover::before {
        background: url(../img/common/icon-coupon-solid.svg) no-repeat top center/32px 32px;
    }

    .submitBtn.is-coupon:hover input[type=submit] {
        background: #fff;
        color: #E5362B;
    }
}

.submitBtn.is-coupon input[type=submit] {
    background: #E5362B;
    border: 1px solid #E5362B;
    color: #fff;
}

.borderBtn {
    width: 100%;
    height: 66px;
    border-radius: 92px;
    border: 1px solid #6D6D6D;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 960px) {
    .borderBtn {
        max-width: 300px;
    }
}

@media (max-width: 959px) {
    .borderBtn {
        height: 60px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 960px) {
    .borderBtn:hover {
        background: #6D6D6D;
        color: #fff;
    }
}

.borderBtn.is-reverse {
    background: #6D6D6D;
    color: #fff;
}

@media (min-width: 960px) {
    .borderBtn.is-reverse:hover {
        background: #fff;
        color: #6D6D6D;
    }
}

p + .borderBtn {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 959px) {
    p + .borderBtn {
        margin-top: 40px;
    }
}

/* ==========================================================================
  section
  ========================================================================== */
.catSection {
    padding-top: 77px;
}

@media (max-width: 959px) {
    .catSection {
        padding-top: 48px;
        padding-bottom: 60px;
    }
}

.recomSection {
    padding-top: 83px;
    padding-bottom: 130px;
}

@media (max-width: 959px) {
    .recomSection {
        padding-top: 47px;
        padding-bottom: 50px;
    }
}

.recomSection .secTtl {
    margin-bottom: 32px;
}

@media (min-width: 960px) {
    .partBlock .card {
        margin-bottom: 30px;
    }
}

@media (max-width: 959px) {
    .partBlock {
        padding-bottom: 59px;
        position: relative;
    }

    .partBlock .arrowBtn {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

.partBlock + .partBlock {
    margin-top: 110px;
}

@media (max-width: 959px) {
    .partBlock + .partBlock {
        margin-top: 60px;
    }
}

/* ==========================================================================
  breadcrumb
  ========================================================================== */
@media (max-width: 959px) {
    .breadcrumb {
        font-size: 10px;
    }
}

@media (min-width: 960px) {
    .breadcrumb a:hover {
        opacity: 0.7;
    }
}

.breadcrumb__home {
    display: inline-block;
    background: url(../img/common/icon-home-thin.svg) no-repeat top center/14px 14px;
    width: 14px;
    height: 14px;
    position: relative;
    top: 1px;
}

@media (max-width: 959px) {
    .breadcrumb__home {
        background: url(../img/common/icon-home-thin.svg) no-repeat top center/12px 12px;
        width: 12px;
        height: 12px;
        top: 0.1em;
    }
}

.breadcrumb__list > li {
    line-height: 1.2;
    display: inline;
    vertical-align: middle;
}

.breadcrumb__list > li:not(:first-child) {
    margin-left: 17px;
}

@media (max-width: 959px) {
    .breadcrumb__list > li:not(:first-child) {
        margin-left: 10x;
    }
}

.breadcrumb__list > li:not(:first-child) {
    position: relative;
}

.breadcrumb__list > li:not(:first-child)::before {
    content: "";
    display: inline;
    width: 6px;
    height: 6px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
    transition: 0.3s ease-in-out;
    position: absolute;
    top: 0.6em;
    left: -15px;
}

@media (max-width: 959px) {
    .breadcrumb__list > li:not(:first-child)::before {
        width: 4px;
        height: 4px;
        left: -13px;
        top: 0.65em;
    }
}

/* ==========================================================================
  contact
  ========================================================================== */
.status {
    display: inline-block;
    margin-bottom: 67px;
}

@media (max-width: 959px) {
    .status {
        margin-bottom: 50px;
    }
}

.status__list {
    display: flex;
    justify-content: center;
    position: relative;
}

.status__list::before {
    content: "";
    width: 80%;
    background: #F9752E;
    height: 1px;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.status__list > li {
    min-width: 90px;
    text-align: center;
}

.status__list > li:not(:last-child) {
    margin-right: 55px;
}

@media (max-width: 959px) {
    .status__list > li:not(:last-child) {
        margin-right: 30px;
    }
}

@media (max-width: 550px) {
    .status__list > li:not(:last-child) {
        margin-right: 20px;
    }
}

.status__list > li.is-current {
    color: #F9752E;
}

.status__list > li.is-current .status__num {
    background: #F9752E;
    color: #fff;
}

.status__num {
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 1px solid #F9752E;
    color: #F9752E;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.status__ttl {
    line-height: 1.4;
    margin-top: 5px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
  list
  ========================================================================== */
.dotList > li {
    display: flex;
}

.dotList > li:not(:last-child) {
    margin-bottom: 8px;
}

.dotList > li::before {
    content: "●";
    color: #F9752E;
    margin-right: 7px;
    font-size: 0.8em;
    position: relative;
    top: 0.2em;
}

p + .dotList {
    margin-top: 32px;
}

@media (max-width: 959px) {
    p + .dotList {
        margin-top: 20px;
    }
}

/* ==========================================================================
  link
  ========================================================================== */
.link {
    color: #1890FF;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

@media (min-width: 960px) {
    .link:hover {
        opacity: 0.7;
    }
}

/* ==========================================================================
  catSearch
  ========================================================================== */
.catSearch {
    border-radius: 8px;
    color: #fff;
    background: #F9752E;
    width: 100%;
    padding: 14px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.catSearch .accordion {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.catSearch .accordion::before, .catSearch .accordion::after {
    background: #fff;
    width: 20px;
}

.catSearch__ttl {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.catSearch__ttl::before {
    content: "";
    background: url(../img/common/icon-tag.svg) no-repeat top center/20px 20px;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    position: relative;
    top: 1px;
}

@media (max-width: 959px) {
    .catSearchTarget {
        padding-top: 35px;
        display: none;
    }
}

@media (min-width: 960px) {
    .catSearchTarget {
        display: block !important;
    }
}

/* ==========================================================================
  divider
  ========================================================================== */
.divider {
    display: flex;
}

@media (max-width: 959px) {
    .divider {
        flex-direction: column-reverse;
    }
}

@media (min-width: 960px) {
    .divider .side {
        width: 127px;
        margin-right: 4%;
    }

    .divider .contents {
        flex: 1 1 0%;
    }
}

.side {
    padding-top: 97px;
}

@media (max-width: 959px) {
    .side {
        padding-top: 51px;
    }
}

.side__ttl {
    color: #F9752E;
    border-bottom: 1px solid #F9752E;
    margin-bottom: 13px;
}

.side__ttl > a {
    display: block;
    padding-bottom: 7px;
}

@media (min-width: 960px) {
    .side__ttl > a:hover {
        opacity: 0.7;
    }
}

.side__list > li > a {
    display: flex;
}

@media (min-width: 960px) {
    .side__list > li > a:hover {
        opacity: 0.7;
    }
}

.side__list > li > a::before {
    content: "－";
    margin-right: 4px;
}

.side__list > li:not(:last-child) {
    margin-bottom: 9px;
}

.side__block + .side__block {
    margin-top: 27px;
}

/* ==========================================================================
  toolBar
  ========================================================================== */
.toolBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

@media (max-width: 959px) {
    .toolBar {
        margin-bottom: 28px;
    }
}

.toolBar__ttl {
    white-space: nowrap;
}

@media (max-width: 959px) {
    .toolBar__ttl {
        margin-bottom: 14px;
    }
}

@media (min-width: 960px) {
    .toolBar .btns {
        min-width: 351px;
    }
}

.toolBar .btns,
.toolBar .toolBar__wrap {
    margin-top: 30px;
}

@media (max-width: 959px) {
    .toolBar .btns,
    .toolBar .toolBar__wrap {
        margin-top: 25px;
    }
}

@media (min-width: 960px) {
    .toolBar__wrap {
        display: flex;
        align-items: center;
        flex: 1 1 0%;
        margin-right: 10px;
    }
}

@media (min-width: 960px) {
    .toolBar .pagi {
        margin-left: 48px;
    }
}

@media (max-width: 959px) {
    .toolBar .pagi {
        justify-content: flex-start;
    }
}
.toolBar__box {
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.toolBar__box .btn {
  margin-right: 10px;
}

/* ==========================================================================
  pagination
  ========================================================================== */
.pagi {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

@media (max-width: 959px) {
    .pagi {
        font-size: 14px;
    }
}

.pagi__part:not(:last-child) {
    margin-right: 8px;
}

.pagi__num {
    line-height: 28px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #F9752E;
    display: block;
    text-align: center;
    color: #F9752E;
}

@media (max-width: 959px) {
    .pagi__num {
        width: 24px;
        height: 24px;
        line-height: 22px;
    }
}

@media (min-width: 960px) {
    .pagi__num:not(.is-current):hover {
        background: #F9752E;
        color: #fff;
    }
}

.pagi__num.is-current {
    background: #F9752E;
    color: #fff;
    pointer-events: none;
}

.pagi__dot {
    color: #999999;
}

.pagi__prev, .pagi__next {
    width: 16px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 960px) {
    .pagi__prev:hover, .pagi__next:hover {
        opacity: 0.7;
    }
}

.pagi__prev::before, .pagi__next::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.pagi__prev::before {
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
}

.pagi__next::before {
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}

.cards + .pagi {
    margin-top: 24px;
}

/* ==========================================================================
  modal
  ========================================================================== */
.modal {
    display: none;
    z-index: 100001;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (max-width: 959px) {
    .modal {
        display: block;
        top: 100vh;
        opacity: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        transition: .5s ease-in-out;
        transform: translate(-50%, 0%);
    }
    .modal.is-on {
        opacity: 1;
        top: 0;
    }
}

.modal__ttl {
    margin-bottom: 17px;
    border: 1px solid #EB590A;
    padding: 6px 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #EB590A;
}

.modal__close {
    background: url(../img/common/icon-close.svg) no-repeat top center/25px 25px;
    width: 25px;
    height: 25px;
    margin-left: auto;
    display: block;
    margin-bottom: 11px;
}
@media (max-width: 959px) {
    .modal__close {
        margin-bottom: 16px;
        margin-top: 16px;
        margin-right: 16px;
    }
}
@media (min-width: 960px) {
    .modal__close:hover {
        opacity: 0.7;
    }
}

.modal__box {
  background: #fff;
  border-radius: 13px;
  padding: 50px 8.2%;
}
@media (min-width: 960px) {
  .modal__box {
    width: 600px;
    max-height: 80vh;
  }
  .modal__box::-webkit-scrollbar {
    background: transparent;
    width: 3px;
  }
  .modal__box::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 5px;
  }
}
@media (max-width: 959px) {
  .modal__box {
    height: calc(100vh - (25px + 32px));
    overflow-y: scroll;
    width: 100%;
    padding: 50px 5% 100px;
    border-radius: 13px 13px 0 0;
  }
}

.modal__wrap {
    overflow-y: auto;
    height: 62vh;
}
@media (max-width: 959px) {
    .modal__wrap {
        height: calc(100vh - 285px);
  }
}

.modal__list > li {
    padding: 15px 0;
    display: flex;
}

@media (max-width: 959px) {
    .modal__list > li {
        flex-direction: column;
    }
}

.modal__list > li:not(:last-child) {
    border-bottom: 1px solid #E3E3E3;
}

.modal__subTtl {
    color: #EB590A;
}

@media (max-width: 959px) {
    .modal__subTtl {
        margin-bottom: 10px;
    }
}

@media (min-width: 960px) {
    .modal__subTtl {
        width: 25%;
        margin-right: 2%;
        padding-left: 4%;
    }
}

.modal__contents {
    flex: 1 1 0%;
}

@media (min-width: 960px) {
    .modal__contents {
        font-size: 1.6rem;
    }
}

@media (max-width: 959px) {
    .modal__contents {
        font-size: 14px;
    }
}

.modal__btns {
    margin-top: 14px;
    display: flex;
    align-items: center;
}
@media (max-width: 959px) {
    .modal__btns {
        justify-content: center;
        gap: 12px;
    }
    .modal__btns .btn.searchBtn input[type=submit] {
        padding: 13px 30px 13px 47px;
    }
    .modal__btns .btn.searchBtn::before {
        left: 12%;
    }
    .modal__btns .btn.resetBtn input[type=reset] {
        padding: 13px 20px;
    }
}

@media (min-width: 960px) {
    .modal__btns .searchBtn {
        flex: 1 1 0%;
    }
}

@media (max-width: 959px) {
    .modal__btns .btn {
        max-width: 280px;
    }
}

@media (min-width: 960px) {
    .modal__btns .resetBtn {
        width: 180px;
        margin-left: 20px;
    }
}

.overlay {
    display: none;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
  form
  ========================================================================== */
.check {
    display: none;
}

.check + span {
    cursor: pointer;
    display: inline-block;
    margin: 0 7% 10px 0;
    padding: 0 0 0 23px;
    position: relative;
    transition: 0.3s ease-in-out;
}

.check + span::before {
    background: #fff;
    border: 1px solid #7D7D7D;
    border-radius: 1px;
    content: "";
    display: block;
    height: 15px;
    left: 0;
    position: absolute;
    top: 0.35em;
    width: 15px;
}

@media (max-width: 959px) {
    .check + span::before {
        top: 0.3em;
    }
}

.check + span::after {
    border-bottom: 2px solid #EB590A;
    border-left: 2px solid #EB590A;
    content: "";
    display: block;
    height: 5px;
    left: 3px;
    opacity: 0;
    position: absolute;
    top: 0.57em;
    transform: rotate(-45deg);
    transition: all 0.3s ease 0s;
    width: 10px;
}

.check:checked + span::after {
    opacity: 1;
}

@media (max-width: 959px) {
    .check.is-dark + span {
        padding: 0 0 0 36px;
    }
}

.check.is-dark + span::before {
    border-color: #000;
}

.check.is-dark + span::after {
    border-color: #000;
}

@media (min-width: 960px) {
    .check.is-dark + span::after {
        margin-top: 1px;
    }
}

.radio .radio__input {
    display: none;
}

.radio .radio__input + span {
    cursor: pointer;
    display: inline-block;
    margin: 0 0.2em 0;
    padding: 0 0 0 1.2em;
    position: relative;
}

.radio .radio__input + span::before {
    -webkit-transform: translateY(-50%);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    content: "";
    display: block;
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}

.radio .radio__input + span::after {
    -webkit-transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid transparent;
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 4px;
    opacity: 0;
    padding: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease 0s;
    width: 8px;
}

.radio .radio__input:checked + span::after {
    opacity: 1;
}

.calender {
    position: relative;
    width: 180px;
    height: 36px;
}

.calender::before {
    content: "";
    background: url(../img/common/icon-calender.svg) no-repeat top center/16px 16px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
}

.calender input {
    width: 100%;
    height: 100%;
    border: 1px solid #D9D9D9;
    padding: 7px 13px;
    font-weight: 500;
}

.notify input {
    width: 100%;
    height: 100%;
    border: 1px solid #D9D9D9;
    padding: 7px 13px;
    font-weight: 500;
}

.form {
    margin-top: 40px;
    font-size: 16px;
}

.form.is-confirm .form__label {
    color: #333;
}

.form.is-confirm .form__item.is-select .form__input::after {
    display: none;
}

.form.is-confirm .form__item.is-txtarea .form__txt {
    height: auto;
    min-height: 130px;
    &.large {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

.form .btns {
    max-width: 611px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.form__bg {
    padding: 63px 10%;
}

@media (max-width: 959px) {
    .form__bg {
        padding: 30px 20px;
    }
}

.form__bg + .submitBtn {
    margin-top: 53px;
}

@media (max-width: 959px) {
    .form__bg + .submitBtn {
        margin-top: 40px;
    }
}

.form__item:not(:last-child) {
    margin-bottom: 16px;
}

.form__item.is-select .form__input {
    max-width: 470px;
    position: relative;
}

.form__item.is-select .form__input::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 15px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 26px;
    margin-top: -3px;
    pointer-events: none;
}

@media (max-width: 959px) {
    .form__item.is-select .form__input::after {
        right: 16px;
        margin-top: -3px;
    }
}

.form__item.is-txt .form__input {
    max-width: 406px;
}

@media (max-width: 550px) {
    .form__item.is-txt .form__input {
        max-width: initial;
    }
}

.form__item.is-tel .form__input {
    max-width: 300px;
}

@media (max-width: 550px) {
    .form__item.is-tel .form__input {
        max-width: initial;
    }
}

@media (max-width: 959px) {
    .form__item {
        -ms-flex-direction: column;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

@media (max-width: 959px) {
    .form__item:not(:last-child) {
        margin-bottom: 25px;
    }
}

@media (max-width: 959px) {
    .form__item.is-check {
        font-size: 1.4rem;
        line-height: 1.4;
        white-space: nowrap;
    }
}

@media (max-width: 959px) {
    .form__item.is-check input[type=checkbox] + span {
        padding: 0 0 0 45px;
    }
}

@media (max-width: 959px) {
    .form__item.is-check input[type=checkbox] + span::before {
        height: 20px;
        width: 20px;
    }
}

@media (max-width: 959px) {
    .form__item.is-check input[type=checkbox] + span::after {
        border-bottom: 3px solid #555;
        border-left: 3px solid #555;
        height: 8px;
        left: 2px;
        line-height: 1.5;
        margin-top: -2px;
        width: 16px;
    }
}

@media (max-width: 959px) {
    .form__item.is-check .wpcf7-form-control-wrap {
        display: inline-block;
        max-width: 26px;
    }
}

.form .form__label {
    align-items: center;
    display: flex;
    color: #F9752E;
    margin-bottom: 7px;
}

@media (max-width: 959px) {
    .form .form__label {
        margin-bottom: 6px;
    }
}

.form .form__input input,
.form .form__input select,
.form .form__input textarea,
.form .form__input .form__txt {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    border: 1px solid #E4E4E4;
    font-weight: 500;
}

.form .form__input input::-webkit-input-placeholder,
.form .form__input select::-webkit-input-placeholder,
.form .form__input textarea::-webkit-input-placeholder,
.form .form__input input::-moz-placeholder,
.form .form__input select::-moz-placeholder,
.form .form__input textarea::-moz-placeholder,
.form .form__input input:-ms-input-placeholder,
.form .form__input select:-ms-input-placeholder,
.form .form__input textarea:-ms-input-placeholder,
.form .form__input input::-ms-input-placeholder,
.form .form__input select::-ms-input-placeholder,
.form .form__input textarea::-ms-input-placeholder,
.form .form__input input::placeholder,
.form .form__input select::placeholder,
.form .form__input textarea::placeholder {
    color: #BDBDBD;
}

.form .form__input input,
.form .form__input textarea,
.form .form__input .form__txt {
    padding: 15px;
    width: 100%;
}

.form .form__input select {
    padding: 12px 42px 12px 12px;
    width: 100%;
    font-family: inherit;
    font-weight: 500;
}

@media (max-width: 959px) {
    .form .form__input select {
        padding: 12px 30px 12px 12px;
    }
}

.form .form__input textarea {
    height: 130px;
}

@media (max-width: 959px) {
    .form .form__input textarea {
        height: 180px;
    }
}

@media (min-width: 960px) {
    .form .form__input {
        -ms-flex: 1 1 0%;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0%;
        flex: 1 1 0%;
    }
}

@media (max-width: 959px) {
    .form .form__input {
        width: 100%;
    }
}

@media (max-width: 959px) {
    .form .form__input input,
    .form .form__input textarea,
    .form .form__input .form__txt {
        padding: 12px;
    }
}

.selectBtn {
  width: 161px;
  border: 1px solid #F9752E;
  background: #fff;
  border-radius: 6px;
  position: relative;
}
@media (max-width: 959px) {
  .selectBtn {
    width: 140px;
  }
}
.selectBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-block;
  width: 6px;
  height: 6px;
  right: 16px;
  margin-top: -2px;
  border-bottom: 1px solid #F9752E;
  border-right: 1px solid #F9752E;
  transform: rotate(45deg) translateY(-50%);
  content: "";
  position: absolute;
  top: 50%;
  pointer-events: none;
}
@media (max-width: 959px) {
  .selectBtn::before {
    right: 10px;
  }
}
.selectBtn select {
  line-height: 1.6;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  color: #F9752E;
  padding: 8px 30px 8px 10px;
  text-align: center;
  box-shadow: none;
  outline: none;
  font-weight: 500;
  border: none;
}
@media (max-width: 959px) {
  .selectBtn select {
    padding: 7px 25px 7px 10px;
  }
}

/* ==========================================================================
  product
  ========================================================================== */
.prd {
    display: flex;
}

@media (max-width: 959px) {
    .prd {
        flex-direction: column;
    }
}

@media (min-width: 960px) {
    .prd__gallery {
        width: 45.5%;
        margin-right: 8%;
    }
}

@media (max-width: 959px) {
    .prd__gallery {
        margin-bottom: 20px;
    }
}

.prd__gallery .slider {
    width: 100%;
}

.prd__gallery .slick-arrow {
    display: none;
}

.prd__gallery .thumbnail {
    margin-top: 10px;
    margin-right: -12px;
    cursor: pointer;
}

@media (max-width: 959px) {
    .prd__gallery .thumbnail {
        margin-right: -8px;
        margin-top: 5px;
    }
}

.prd__gallery .thumbnail .slick-slide {
    padding-right: 12px;
    opacity: 0.6;
}

@media (max-width: 959px) {
    .prd__gallery .thumbnail .slick-slide {
        padding-right: 8px;
    }
}

.prd__gallery .thumbnail .slick-current {
    opacity: 1;
}

.prd__gallery .slider__item,
.prd__gallery .thumbnail__item {
    position: relative;
}

.prd__gallery .slider__item::before,
.prd__gallery .thumbnail__item::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.prd__gallery .slider__item img,
.prd__gallery .thumbnail__item img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

@media (min-width: 960px) {
    .prd__contents {
        flex: 1 1 0%;
    }
}

.prd__ttl {
    margin-bottom: 13px;
    font-weight: bold;
    font-size: 2.7rem;
}

@media (max-width: 959px) {
    .prd__ttl {
        font-size: 2.2rem;
    }
}

.prd__txt {
    margin-bottom: 30px;
}

.prd .tag {
    margin-bottom: 28px;
}

.prd .tbl {
    margin-bottom: 20px;
    font-size: 14px;
}

.prd .tbl .is-sm {
    font-size: 10px;
}

.prd__wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.prd__sum {
    margin-bottom: 27px;
    background: #F3F3F3;
    padding: 14px 30px;
}

.prd__sum + .discount {
    margin-top: -10px;
}

.prd__sum .is-sm {
    margin-right: 10px;
}

.prd__sum .is-lg {
    letter-spacing: 0.02em;
}

.prd__btn {
    margin-bottom: 30px;
}

@media (max-width: 959px) {
    .prd__btn {
        margin-bottom: 20px;
    }
}

.prd__btn .submitBtn {
    margin-bottom: 20px;
}

.prd__num {
    font-weight: bold;
}

.prd__remaining {
    color: #F9752E;
    border: 1px solid #F9752E;
    padding: 2px 18px;
    margin-left: 20px;
}

.prd__check {
    margin-bottom: 20px;
}

.prd .form {
    max-width: 345px;
    margin-top: 0;
    margin-bottom: 36px;
}

@media (max-width: 959px) {
    .prd .form {
        margin-bottom: 21px;
    }
}

.prd .form__label {
    color: #333;
    font-weight: bold;
}

.prd .form__item.is-select .form__input select {
    border-radius: 6px;
    border: 1px solid #333333;
}

.prd .form__number {
    max-width: 70px;
    padding: 3px;
    border-radius: 2px;
    background: #d1e9ff;
}

.prd .form__number input {
    width: 100%;
    height: 28px;
    text-align: center;
    border: 2px solid #1890FF;
    border-radius: 2px;
    box-shadow: none;
}

.prd .form__number input::placeholder {
    color: rgba(0, 0, 0, 0.25);
}

.prd .form__number input:focus {
    outline: none !important;
}

.prd__quantity {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.prd__quantity > span {
    margin-right: 10px;
}

.prd__quantity .form__number {
    margin-left: 10px;
    max-width: 120px;
}

@media (max-width: 959px) {
    .prd__quantity .form__number {
        max-width: 90px;
    }
}

.prd__quantity .form__number input {
    height: 47px;
    font-size: 23px;
}

@media (max-width: 959px) {
    .prd__quantity .form__number input {
        height: 36px;
        font-size: 16px !important;
    }
}

.prd .data {
    margin-bottom: 14px;
}

@media (max-width: 959px) {
    .prd .data {
        margin-bottom: 22px;
    }
}

.article {
    margin-top: 40px;
}

@media (max-width: 959px) {
    .article {
        margin-top: 55px;
    }
}

.article__block {
    margin-bottom: 88px;
}

@media (max-width: 959px) {
    .article__block {
        margin-bottom: 56px;
    }
}

.article p + p {
    margin-top: 30px;
}

.article .primaryTtl,
.article .secondaryTtl,
.article .tertiaryTtl {
    margin-top: 40px;
}

@media (max-width: 959px) {
    .article .primaryTtl,
    .article .secondaryTtl,
    .article .tertiaryTtl {
        margin-top: 30px;
    }
}

.article .tbl02 {
    margin-top: 50px;
    margin-bottom: 148px;
    font-size: 14px;
}

@media (max-width: 959px) {
    .article .tbl02 {
        margin-top: 47px;
        margin-bottom: 66px;
    }
}

.data > div {
    display: flex;
    align-items: center;
    color: #000;
}

.data > div:not(:last-child) {
    margin-bottom: 6px;
}

.data > div > dt {
    min-width: 130px;
    padding: 0 16px;
    height: 36px;
    display: flex;
    justify-content: left;
    align-items: center;
    background: #F3F3F3;
    margin-right: 16px;
}

.data > div > dd {
    flex: 1 1 0%;
}

.tbl {
    table-layout: fixed;
    width: 100%;
    text-align: left;
}

.tbl th {
    padding: 7px 10px;
    font-weight: 500;
    background: #FFEBC3;
}

@media (max-width: 959px) {
    .tbl th {
        line-height: 1.1;
        padding: 4px 7px;
    }
}

.tbl th.is-price {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
    text-align: center;
}

@media (max-width: 959px) {
    .tbl th.is-price {
        width: 67px;
        max-width: 67px;
        min-width: 67px;
    }
}

.tbl th.is-num {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}

@media (max-width: 959px) {
    .tbl th.is-num {
        width: 75px;
        max-width: 75px;
        min-width: 75px;
    }
}

.tbl tr:not(:first-child) {
    border: 1px solid #CCCCCC;
}

.tbl th,
.tbl td {
    vertical-align: middle;
}

.tbl td {
    padding: 10px;
}

@media (max-width: 959px) {
    .tbl td {
        padding: 8px;
    }
}

.tbl td:not(:last-child) {
    border-right: 1px solid #CCCCCC;
}

.tbl td .form__number {
    width: 100%;
}

.tbl td .form__number input {
    width: 100%;
}

@media (max-width: 959px) {
    .tbl td .form__number input {
        font-size: 16px;
    }
}

.tbl02 {
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.tbl02 th,
.tbl02 td {
    vertical-align: middle;
    border: 1px solid #CCCCCC;
    padding: 6px 12px;
}

@media (max-width: 959px) {
    .tbl02 th,
    .tbl02 td {
        padding: 6px 16px;
    }
}

.tbl02 th {
    background: #F1F1F1;
    font-weight: 500;
}

@media (max-width: 959px) {
    .tbl02 th {
        padding: 6px;
    }
}

.tbl02 th:not(:last-child) {
    width: 150px;
}

@media (max-width: 959px) {
    .tbl02 th:not(:last-child) {
        width: 74px;
    }
}

.fav {
    display: flex;
    align-items: center;
}

.fav::before {
    content: "";
    background: url(../img/common/icon-fav-solid.svg) no-repeat top center/24px 24px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

@media (min-width: 960px) {
    .fav:hover {
        opacity: 0.7;
    }
}

.discount {
    margin-bottom: 28px;
    border: 1px solid #E5362B;
    color: #E5362B;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 6px 34px;
}

.discount .is-sm {
    margin-right: 12px;
    position: relative;
    top: 0.13em;
}

.discount .is-md {
    position: relative;
    top: 0.13em;
}

/* ==========================================================================
  pages
  ========================================================================== */
/* ==========================================================================
  product
  ========================================================================== */
#productList .sec01 {
    padding-top: 40px;
}

@media (max-width: 959px) {
    #productList .sec01 {
        padding-top: 30px;
    }
}

@media (min-width: 960px) {
    #productList .logoTtl.is-cafeteria img {
        width: 457px;
    }
}

@media (min-width: 960px) {
    #productList .logoTtl.is-mypro img {
        width: 300px;
    }
}

@media (max-width: 959px) {
    #productList .logoTtl.is-mypro img {
        width: 160px;
    }
}

#productList .divider {
    margin-top: 23px;
}

@media (min-width: 960px) {
    #productList .card .period {
        font-size: 1.2rem;
    }
}


/* develop add */
@media (min-width: 960px) {
  .itemBlock__wrap_all a:nth-child(2) {
    margin-right:20px;
  }
  .login_up_text {
    text-align: center;
    padding-top: 60px;
  }
  .login_up_text a:hover {
    opacity: 0.7;
  }
}
@media (max-width: 959px) {
  .itemBlock__wrap_all a:nth-child(2) {
    margin-bottom:20px;
  }
  .login_up_text {
    text-align: center;
    padding-top: 40px;
  }
  .login_up_text a:hover {
    opacity: 0.7;
  }
}

/* ==========================================================================
  static
  ========================================================================== */
.static__wrap {
    margin-bottom: 40px;
    color: #333333;
}
.static__wrap:last-child {
    margin-bottom: 0;
}

.static__wrap h2 {
    margin-bottom: 12px;
}
.static__wrap h3 {
    margin-bottom: 8px;
}
.static__wrap h4 {
    margin-bottom: 4px;
}

.static__wrap .static__list li {
    margin-left: 20px;
}
.static__wrap .static__list li {
    list-style: square outside;
}
@media (max-width: 959px) {
    .static__wrap .static__list li {
        margin-left: 24px;
    }
}

.static__wrap .borderbox {
    border: solid 1px #cccccc;
    padding: 12px 16px;
}

.static__wrap .tbl02 th {
    text-align: left;
}
.static__wrap .tbl02 th:not(:last-child) {
    width: 30%;
}
@media (max-width: 959px) {
    .static__wrap .tbl02 tr {
        display: flex;
        flex-wrap: wrap;
    }
    .static__wrap .tbl02 th:not(:last-child),
    .static__wrap .tbl02 td {
        width: 100%;
    }
}

.static__wrap .mb8 {
    margin-bottom: 8px;
}
.static__wrap .mb16 {
    margin-bottom: 16px;
}

/* ==========================================================================
  aboutMyPro aboutCafeteriaPlan
  ========================================================================== */
.about__wrap + .about__wrap {
    padding-top: 0;
}
.about__wrap img {
    width: auto;
    max-width: 100%;
}
@media (max-width: 959px) {
    .about__wrap img {
        width: 100%;
    }
}
.about__wrap h2 {
    color: #ffffff;
    background: #f9752e;
    padding: 10px 15px;
    margin-bottom: 32px;
}
.about__wrap h3 {
    color: #f9752e;
    margin-bottom: 8px;
}
.about__wrap .textarea {
    background: #ffebc3;
    padding: 24px;
}
@media (max-width: 959px) {
    .about__wrap .textarea {
        padding: 16px;
    }
}
.about__wrap .about__list li {
    margin-left: 20px;
}
.about__wrap .about__list li {
    list-style: square outside;
}
@media (max-width: 959px) {
    .about__wrap .about__list li {
        margin-left: 24px;
    }
}
.about__wrap .mb24 {
    margin-bottom: 24px;
}
.about__wrap .mb32 {
    margin-bottom: 32px;
}

/* ==========================================================================
  alltop
  ========================================================================== */
#alltop main {
    padding-top: 10px;
}
/* ==========================================================================
  alltop slide
  ========================================================================== */
.fv #js-fvSwiper-alltop .slick-slide {
    line-height: 1;
}
.fv .slide_alltop_img img {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
@media (min-width: 960px) {
    .fv .slick-alltop-slide:hover .slide_alltop_img img {
        transform: scale(1.1);
    }
}
.fv .slick-alltop-slide .slide_alltop_img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 959px) {
    .fv .slick-alltop-slide .slide_alltop_img {
        border-radius: 9px;
    }
}
.fv .slick-alltop-slide .slide_alltop_img img {
    transition: 0.4s ease-in-out;
}

.fv #js-fvSwiper-alltop .slick-dots {
    bottom: 24px;
}
.fv #js-fvSwiper-alltop .slick-dots li {
    width: auto;
    height: auto;
    margin: 0 8px;
}
.fv #js-fvSwiper-alltop .slick-dots li.slick-active button {
    background: #F9752E;
}
.fv #js-fvSwiper-alltop .slick-dots li button {
    padding: 0;
    width: 10px;
    height: 10px;
    background: #9D9D9D;
    border-radius: 50%;
}
.fv #js-fvSwiper-alltop .slick-dotted.slick-slider {
    margin-bottom: 63px;
}
@media (max-width: 959px) {
    .fv #js-fvSwiper-alltop .slick-dotted.slick-slider {
        margin-bottom: 41px;
    }
}
.fv #js-fvSwiper-alltop .slick-prev {
    left: calc(50% - 800px / 2 + 24px);
}
.fv #js-fvSwiper-alltop .slick-next {
    right: calc(50% - 800px / 2 + 24px);
}
@media (max-width: 959px) {
    .fv #js-fvSwiper-alltop .slick-prev {
        left: 24px;
    }
    .fv #js-fvSwiper-alltop .slick-next {
        right: 24px;
    }
}
.fv #js-fvSwiper-alltop .slick-prev,
.fv #js-fvSwiper-alltop .slick-next {
    width: 34px;
    height: 34px;
    z-index: 1;
}
.fv #js-fvSwiper-alltop .slick-prev::before,
.fv #js-fvSwiper-alltop .slick-next::before {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    border-right: 3px solid #F9752E;
    border-top: 3px solid #F9752E;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.fv #js-fvSwiper-alltop .slick-prev::before {
    transform: rotate(-135deg);
}
.fv #js-fvSwiper-alltop .slick-next::before {
    transform: rotate(45deg);
}

/* ==========================================================================
  alltop news
  ========================================================================== */
.news {
    padding-top: 0;
}
.news .news__list {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #CCCCCC;
    margin-bottom: 24px;
}
.news .news__item {
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
}
.news .news__item a {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;
}
.news .news__item a .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFEBC3;
    font-size: 1.3rem;
    min-width: 110px;
    margin: 0 24px 0 16px;
}
.news .news__item a:hover h3 {
    text-decoration: underline;
}
.news .news__item a.important .tag {
    background-color: #F92E2E;
    color: #ffffff;
    font-weight: 700;
}
.news .news__item a.important h3 {
    color: #F92E2E;
    font-weight: 700;
}
@media (max-width: 959px) {
    .news .news__item a h3 {
        margin-top: 6px;
        width: 100%;
    }
}

/* ==========================================================================
  alltop categoryLink
  ========================================================================== */
.categoryLink {
    padding-top: 0;
}
.categoryLink .categoryLink__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.categoryLink .categoryLink__item {
    width: calc(33.3333% - 16px);
    height: 197px;
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 959px) {
    .categoryLink .categoryLink__item {
        width: 100%;
    }
}

.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(1) { order: 0; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(2) { order: 9; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(3) { order: 10; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(4) { order: 11; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(5) { order: 12; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(6) { order: 1; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(7) { order: 2; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(8) { order: 3; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(9) { order: 4; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(10) { order: 5; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(11) { order: 6; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(12) { order: 7; }
.categoryLink .categoryLink__list.login .categoryLink__item:nth-child(13) { order: 8; }

.categoryLink .categoryLink__item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.categoryLink .categoryLink__item a h2 {
    position: relative;
    z-index: 2;
    padding: 32px 0 0 20px;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    text-shadow: #000000 1px 0 10px;
}
@media (max-width: 959px) {
    .categoryLink .categoryLink__item a h2 {
        font-size: 2.0rem;
    }
}
.categoryLink .categoryLink__item a::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: 0;
}
.categoryLink .categoryLink__item a:hover::after {
    transform: scale(1.1);
}
.categoryLink .categoryLink__item a.b03::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.categoryLink .categoryLink__item a.b04::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.categoryLink .categoryLink__item a.toyota::after {
    background-image: url(../img/alltop/category__bg01.jpg);
}
.categoryLink .categoryLink__item a.unionhall::after {
    background-image: url(../img/alltop/category__bg02.jpg);
}
.categoryLink .categoryLink__item a.obog::after {
    background-image: url(../img/alltop/category__bg03.jpg);
}
.categoryLink .categoryLink__item a.volunteer::after {
    background-image: url(../img/alltop/category__bg04.jpg);
}
.categoryLink .categoryLink__item a.calendar::after {
    background-image: url(../img/alltop/category__bg05.png);
}
.categoryLink .categoryLink__item a.mypro::after {
    background-image: url(../img/alltop/category__bg06.jpg);
}
.categoryLink .categoryLink__item a.aid::after {
    background-image: url(../img/alltop/category__bg07.jpg);
}
.categoryLink .categoryLink__item a.library::after {
    background-image: url(../img/alltop/category__bg08.png);
}
.categoryLink .categoryLink__item a.organization::after {
    background-image: url(../img/alltop/category__bg09.jpg);
}
.categoryLink .categoryLink__item a.consultation::after {
    background-image: url(../img/alltop/category__bg10.jpg);
}
.categoryLink .categoryLink__item a.questionnaire::after {
    background-image: url(../img/alltop/category__bg11.jpg);
}
.categoryLink .categoryLink__item a.special::after {
    background-image: url(../img/alltop/category__bg12.jpg);
}

/* ==========================================================================
  aid
  ========================================================================== */
.aid__list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.aid__list .aid__item {
    width: calc(25% - 24px);
}
@media (max-width: 959px) {
    .aid__list .aid__item {
        width: calc(50% - 16px);
    }
}
.aid__list .aid__item a:hover .aid__title {
    color: #EB590A;
}
.aid__list .aid__item .aid__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    line-height: 1;
    gap: 6px;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.aid__list .aid__item .aid__title span {
    width: calc(100% - 26px);
}
.aid__list .aid__item .aid__title::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #EB590A;
    border-radius: 50%;
}
.aid__list .aid__item .aid__title::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 7px;
    margin-top: 1px;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: 0.3s ease-in-out;
}

/* ==========================================================================
  activitypoint
  ========================================================================== */
.point__item {
    margin-bottom: 40px;
    min-height: 85px;
}
.point__item::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 110px;
    height: 85px;
    background-repeat: no-repeat;
}
@media (max-width: 959px) {
    .point__item::before {
        width: 60px;
        height: 46px;
    }
}
.point__item:first-child::before {
    background-image: url(../img/activity/do.svg);
}
.point__item:nth-child(2):before {
    background-image: url(../img/activity/share.svg);
}
.point__item:last-child::before {
    background-image: url(../img/activity/change.svg);
}
.point__item:last-child {
    margin-bottom: 0;
}
.point__item .point__txt {
    padding-left: calc(110px + 12px);
}
@media (max-width: 959px) {
    .point__item .point__txt {
        padding-left: 0;
    }
}
.point__item .point__txt .point__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #F9752E;
}
@media (max-width: 959px) {
    .point__item .point__txt .point__title {
        display: flex;
        align-items: center;
        padding-left: calc(60px + 12px);
        min-height: 46px;
    }
}

.proceed {
    padding-top: 0;
}
.proceed .proceed__list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.proceed .proceed__item {
    width: calc(50% - 40px);
}
@media (max-width: 959px) {
    .proceed .proceed__item {
        width: 100%;
    }
}
.proceed .proceed__item .proceed__title {
    position: relative;
    padding: 40px 20px 0 40px;
}
.proceed .proceed__item .proceed__title::before {
    content: "";
    background-image: url(../img/activity/bg_step_left.png);
    background-repeat: no-repeat;
    background-position: left center;
    height: 97px;
    width: 41px;
    position: absolute;
    left: 0;
    top: 0;
}
.proceed .proceed__item .proceed__title::after {
    content: "";
    background-image: url(../img/activity/bg_step_right.png);
    width: 21px;
    height: 57px;
    position: absolute;
    right: 0;
    top: 40px;
}
.proceed .proceed__item .proceed__title span {
    display: block;
    position: relative;
    font-size: 1.6rem;
    font-weight: 700;
    color: #F9752E;
    padding-top: 20px;
}
.proceed .proceed__item .proceed__title span::before {
    content: "";
    background-color: #161004;
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.proceed .proceed__item .proceed__title span::after {
    counter-increment: number 1;
    content: "step." counter(number);
    font-size: 15px;
    line-height: 1;
    position: absolute;
    top: -22px;
    right: 12px;
    color: #333333;
}
.proceed .proceed__item .proceed__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px 12px 0;
}
.proceed .proceed__item .proceed__inner figure {
    width: 140px;
}
.proceed .proceed__item .proceed__inner .proceed__txt {
    width: calc(100% - 140px - 24px);
}

/* ==========================================================================
  activityfaq
  ========================================================================== */
.faq__item {
    border-bottom: solid 1px #D9D9D9;
    padding-bottom: 24px;
    padding-top: 24px;
}
.faq__item:first-child {
    padding-top: 0;
}
.faq__item dt,
.faq__item dd {
    position: relative;
}
.faq__item dt {
    margin-bottom: 24px;
}
.faq__item dt span {
    display: block;
    padding-left: calc(100px + 12px);
}
@media (max-width: 959px) {
    .faq__item dt span {
        padding-left: 0;
        padding-top: 4px;
    }
}
.faq__item dt::before {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "Question";
    width: 100px;
    height: 24px;
    background-color: #FFEBC3;
}
@media (max-width: 959px) {
    .faq__item dt::before {
        position: static;
    }
}
.faq__item dd::before {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "Answer";
    width: 100px;
    height: 24px;
    background-color: #F9752E;
    color: #ffffff;
}
@media (max-width: 959px) {
    .faq__item dd::before {
        position: static;
    }
}
.faq__item dd .faq__txt {
    padding-left: calc(100px + 12px);
}
@media (max-width: 959px) {
    .faq__item dd .faq__txt {
        padding-left: 0;
        padding-top: 4px;
    }
}
.faq__item dd .faq__txt .faq__txt__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.faq__item dd .faq__txt .faq__txt__list li {
    list-style: square outside;
    width: 100%;
    margin-left: 20px;
    color: #F9752E;
}
.faq__item dd .faq__txt .faq__txt__list li span {
    color: #333333;
}

/* ==========================================================================
  activity
  ========================================================================== */
@media (max-width: 959px) {
    #aid .arrowBtn {
        padding: 8px 12px;
        font-size: 1.5rem;
        letter-spacing: -0.4px;
    }
}
.activity__list {
    margin-bottom: 24px;
}
.activity__item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: solid 1px #D9D9D9;
}
.activity__item:first-child {
    border-top: solid 1px #D9D9D9;
}
.activity__item .activity__img {
    display: block;
    overflow:hidden;
    width: 400px;
}
.activity__item .activity__img img {
    transition: 0.5s ease-in-out;
}
.activity__item .activity__img img:hover {
    transform: scale(1.1,1.1);
    transition: 0.5s ease-in-out;
}
.activity__item .activity__wrap {
    width: calc(100% - 400px - 12px);
}
@media (max-width: 959px) {
    .activity__item .activity__img,
    .activity__item .activity__wrap {
        width: 100%;
    }
}
.activity__item .activity__wrap a:hover time,
.activity__item .activity__wrap a:hover p {
    text-decoration: underline;
    transition: 0.3s ease-in-out;
}
.activity__item .activity__wrap a:hover .activity__title {
    color: #F9752E;
    transition: 0.3s ease-in-out;
}
.activity__item .activity__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 6px;
}
.activity__item .activity__wrap .tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.activity__item .activity__wrap .tag li {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.3rem;
    line-height: 1;
    height: 26px;
    padding: 0 16px;
}
.activity__item .activity__wrap .tag li.selected,
.activity__item .activity__wrap .tag li:hover {
    background-color: #F9752E;
    color: #ffffff;
    cursor: pointer;
}