@charset "UTF-8";

/*------------------------

header

------------------------*/
.header {
    width: 100%;
    height: 44px;
    background-color: var(--bg-color);
    position: fixed;
    font-size: 14px;
    z-index: 9;
}

.header-inner {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.header-inner .main-nav {
    width: 100%;
}

.header-inner .logo {
    margin-left: 16px;
    display: flex;
    align-items: center;
}

.header-inner .logo a {
    display: block;
}

.header-inner .logo img {
    width: calc(169px / 1.8);
    height: calc(29px / 1.8);
}

.header .main-nav__list.left {
    display: flex;
    align-items: center;
}

.header .main-nav__list.left .main-nav__item,
.header .main-nav__list.right {
    display: none;
}

/*------------------------

グローバルナビ

------------------------*/
.menu-wrap {
    width: 44px;
    height: 44px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
}

.toggle-menu {
    width: 24px;
    height: 16px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
}

.menu__line {
    width: 100%;
    height: 2px;
    background: var(--nav-color);
    position: absolute;
    display: block;
    transition: transform .3s;
}

.menu__line--center {
    top: 7px;
}

.menu__line--bottom {
    bottom: 0;
}

.menu__line--top.active {
    top: 7px;
    transform: rotate(45deg);
}

.menu__line--center.active {
    transform: scaleX(0);
}

.menu__line--bottom.active {
    bottom: 7px;
    transform: rotate(135deg);
}

.gnav {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 98;
}

.gnav-inner {
    height: 100%;
    max-height: 100%;
    overflow: visible;
    overflow-y: auto;
}

.gnav-contents {
    width: 100%;
    padding: 54px 0;
}

.gnav .main-nav__list:last-child:after {
    display: none;
}

.gnav .main-nav__list {
    width: calc(100% - 24vw);
    margin: auto;
}

.gnav .main-nav__list .main-nav__item {
    cursor: pointer;
    display: block;
    font-size: 14px;
    color: var(--nav-color);
}

.gnav .main-nav__list .main-nav__item .main-nav__link {
    display: block;
    -webkit-transition: color .3s;
    -o-transition: color .3s;
    transition: color .3s;
}

.gnav .main-nav__list .main-nav__item .main-nav__link span {
    margin-right: 16px;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: #f63;
}

.gnav .main-nav__list.second-list {
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
}

.gnav .main-nav__list.second-list .main-nav__item {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.gnav .main-nav__list.second-list .main-nav__item .main-nav__link {
    padding: 13px 0;
    color: #787878;
}

.main-nav__list.third-list {
    margin-top: 24px;
    display: flex;
}

.mypage__item,
.logout__item {
    width: 50%;
}

.gnav .mypage__btn {
    padding: 16px 16px 16px 32px;
    border-right: 1px solid #868686;
    position: relative;
    display: block;
    color: var(--nav-color);
}

.gnav .mypage__btn:before {
    width: 18px;
    height: 18px;
    margin: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M2.213 14.06a9.945 9.945 0 0 1 0-4.12c1.11.13 2.08-.237 2.396-1.001.317-.765-.108-1.71-.986-2.403a9.945 9.945 0 0 1 2.913-2.913c.692.877 1.638 1.303 2.403.986.765-.317 1.132-1.286 1.001-2.396a9.945 9.945 0 0 1 4.12 0c-.13 1.11.237 2.08 1.001 2.396.765.317 1.71-.108 2.403-.986a9.945 9.945 0 0 1 2.913 2.913c-.877.692-1.303 1.638-.986 2.403.317.765 1.286 1.132 2.396 1.001a9.945 9.945 0 0 1 0 4.12c-1.11-.13-2.08.237-2.396 1.001-.317.765.108 1.71.986 2.403a9.945 9.945 0 0 1-2.913 2.913c-.692-.877-1.638-1.303-2.403-.986-.765.317-1.132 1.286-1.001 2.396a9.945 9.945 0 0 1-4.12 0c.13-1.11-.237-2.08-1.001-2.396-.765-.317-1.71.108-2.403.986a9.945 9.945 0 0 1-2.913-2.913c.877-.692 1.303-1.638.986-2.403-.317-.765-1.286-1.132-2.396-1.001zM4 12.21c1.1.305 2.007 1.002 2.457 2.086.449 1.085.3 2.22-.262 3.212.096.102.195.201.297.297.993-.562 2.127-.71 3.212-.262 1.084.45 1.781 1.357 2.086 2.457.14.004.28.004.42 0 .305-1.1 1.002-2.007 2.086-2.457 1.085-.449 2.22-.3 3.212.262.102-.096.201-.195.297-.297-.562-.993-.71-2.127-.262-3.212.45-1.084 1.357-1.781 2.457-2.086.004-.14.004-.28 0-.42-1.1-.305-2.007-1.002-2.457-2.086-.449-1.085-.3-2.22.262-3.212a7.935 7.935 0 0 0-.297-.297c-.993.562-2.127.71-3.212.262C13.212 6.007 12.515 5.1 12.21 4a7.935 7.935 0 0 0-.42 0c-.305 1.1-1.002 2.007-2.086 2.457-1.085.449-2.22.3-3.212-.262-.102.096-.201.195-.297.297.562.993.71 2.127.262 3.212C6.007 10.788 5.1 11.485 4 11.79c-.004.14-.004.28 0 .42zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' fill='rgba(193,193,193,1)'/%3E%3C/svg%3E");
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 1px;
    left: 8px;
}

.gnav .logout__btn {
    padding: 16px 16px 16px 32px;
    border-left: 0;
    position: relative;
    display: block;
    color: var(--nav-color);
    text-align: right;
}

.gnav .logout__btn:before {
    width: 18px;
    height: 18px;
    margin: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 18h2v2h12V4H6v2H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3zm2-7h7v2H6v3l-5-4 5-4v3z' fill='rgba(193,193,193,1)'/%3E%3C/svg%3E");
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 1px;
    left: 40px;
}

.gnav .login__item {
    width: 100%;
}

.gnav .login__btn {
    padding: 20px;
    background: linear-gradient(90deg, #f63 10%, #f99d24 40%, #f99d24 70%, #f63 90%);
    background-size: 200% auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    transition: .4s cubic-bezier(.6, 0, .3, 1) 25ms;
}

.gnav .login__btn:before {
    width: 24px;
    height: 24px;
    margin: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 15h2v5h12V4H6v5H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6zm6-4V8l5 4-5 4v-3H2v-2h8z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    bottom: 1px;
    left: 40px;
}

/*------------------------

inner mv

------------------------*/
.mv {
    height: 16vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.mv:after {
    width: 100%;
    height: 16vh;
    content: "";
    background: linear-gradient(transparent 0, rgba(0, 0, 0, .5) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.mv:before {
    content: "";
    filter: blur(5px);
    -ms-filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    background: inherit;
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    z-index: -1;
}

.mv .wrap {
    height: 100%;
    position: relative;
}

.mv .mv__inner {
    height: 100%;
}

.mv .mv-contents {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv .title {
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    z-index: 1;
}

/*------------------------

パンくず

------------------------*/
.module__breadcrumbs {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.module__breadcrumbs li {
    margin-right: 32px;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #010101;
}

.module__breadcrumbs li::after {
    width: 7px;
    height: 7px;
    content: "";
    border-top: 1px solid #010101;
    border-right: 1px solid #010101;
    position: absolute;
    top: calc(50% + 2px);
    right: -16px;
    display: block;
    transform: translateY(-50%) rotate(45deg);
}

.module__breadcrumbs li:last-child {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.module__breadcrumbs li:last-child::after {
    content: "";
    display: none;
}

.module__breadcrumbs li a {
    position: relative;
    display: block;
    font-size: 12px;
    color: #010101;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.module__breadcrumbs li a::before {
    width: 100%;
    height: 1px;
    content: "";
    background-color: #010101;
    position: absolute;
    bottom: -4px;
    left: 0;
    transition: transform .3s;
    transform: scale(1, 1);
    transform-origin: right top;
}

/*------------------------

main-contents

------------------------*/
.main-contents {
    padding-top: 44px;
}

/*------------------------

共通コンテンツ

------------------------*/
.section-wrap {
    padding: 8vw 0;
    background-color: #fff;
}

.section-wrap__inner {
    padding: 8vw 4vw;
}

/*------------------------

ページャー

------------------------*/
.section_pager {
    margin: 0 calc(50% - 50vw) -8vw;
    padding: 40px 0 64px;
    background-color: var(--section-bg-color);
    position: relative;
    z-index: 0;
}

.section_pager .pages-items {
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 0;
}

.section_pager .pages-items .item:not(.number) {
    padding: 0 8px;
}

.section_pager .pages-items .number a,
.section_pager .pages-items .current span {
    padding: 16px;
}

.section_pager .pages-items .text-pager {
    display: none;
}

.section_pager .pages-items a {
    padding: 4px 0;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--link-color);
}

.section_pager .pages-items .item:not(.number) a::before {
    width: 0;
    height: 1px;
    margin: auto;
    content: "";
    background-color: var(--link-color);
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.section_pager .pages-items .current span {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--light-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--theme-color);
}

.pages-items .previous svg,
.pages-items .next svg {
    width: 20px;
    height: 20px;
}

.pages-items .previous svg {
    margin: 0 8px 0 0;
}

.pages-items .next svg {
    margin: 0 0 0 8px;
}

/*------------------------

footer

------------------------*/
.footer {
    padding: 80px 0;
    background-color: var(--footerbg-color);
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .1em;
}

.footer .footer-top .main-nav {
    width: 100%;
}

.footer .footer-top .main-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer .footer-top .main-nav__list .logo {
    margin-bottom: 40px;
}

.footer .footer-top .main-nav__list .main-nav__item {
    width: 100%;
}

.footer .footer-top .main-nav__list .main-nav__link {
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid var(--footer-color);
    position: relative;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-color);
}

.footer .footer-top .main-nav__list .main-nav__link:before {
    width: 24px;
    height: 24px;
    margin: auto;
    content: "";
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23747886' d='M10.6 15.8l-.7-.7 3.2-3.2-3.2-3.2.7-.7 3.9 3.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.footer .footer-middle {
    width: calc(100% - 48px);
    margin: 40px auto;
}

.footer .footer-middle .main-nav {
    width: 100%;
}

.footer .footer-middle .main-nav__list {
    display: flex;
    flex-wrap: wrap;
}

.footer .footer-middle .main-nav__list .main-nav__item {
    width: 100%;
}

.footer .footer-middle .main-nav__list .main-nav__link {
    width: 100%;
    padding: 16px 0;
    display: block;
    color: var(--nav-color);
}

.footer .footer-bottom {
    margin-top: 80px;
    align-items: flex-end;
    font-size: 14px;
    color: #595c65;
}

.copyrights {
    margin-left: auto;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
}

/*------------------------

headlines

------------------------*/
.headlines01 {
    margin-top: 48px;
    margin-bottom: 32px;
    padding: 1em 1em 1em 1.6em;
    background: var(--light-theme-color);
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
}

.headlines01:before {
    width: 32px;
    height: 2px;
    margin: auto;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
}

.headlines01:first-child {
    margin-top: 0;
}

.headlines02 {
    margin-top: 40px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.headlines02::before,
.headlines02::after {
    width: 100%;
    height: 1px;
    content: "";
    background-color: #eaeaea;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    vertical-align: middle;
}

.headlines02::after {
    width: 100px;
    background: -webkit-gradient(linear, left top, right top, color-stop(20%, #f93), color-stop(80%, #ff7166));
    background: linear-gradient(90deg, #f93 20%, #ff7166 80%);
}

/*------------------------

アーティストサイト用_template

------------------------*/
.template .section {
    padding: 4vw;
    background-color: #fff;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

.template .is-row>.is-col+.is-col {
    margin-top: 24px;
}

.template .section .is-outset-y-80 {
    margin-top: 70px;
}

.template .section .is-outset-y-70 {
    margin-top: 60px;
}

.template .section .is-outset-y-60 {
    margin-top: 50px;
}

.template .section .is-outset-y-50 {
    margin-top: 40px;
}

.template .section .is-outset-y-40 {
    margin-top: 30px;
}

.template .section .is-outset-y-30 {
    margin-top: 20px;
}

.template .section .is-outset-y-20 {
    margin-top: 10px;
}

.template .section .is-outset-y-10 {
    margin-top: 0;
}

.template .section h1 {
    margin-top: 48px;
    margin-bottom: 24px;
    padding: .8em .8em .8em 1.2em;
    background: var(--light-theme-color);
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
}

.template .section h1:before {
    width: 24px;
    height: 2px;
    margin: auto;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
}

.template .section h1:first-child {
    margin-top: 0;
}

.template .section h2 {
    margin-top: 32px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.template .section h2::before,
.template .section h2::after {
    width: 100%;
    height: 1px;
    content: "";
    background-color: #eaeaea;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    vertical-align: middle;
}

.template .section h2::after {
    width: 100px;
    background: var(--theme-color);
}

.template .section h3 {
    margin-top: 32px;
    margin-bottom: 24px;
    padding: .5em 1em .4em 1em;
    background-color: var(--light-theme-color);
    font-size: 16px;
}

.template .section .box {
    padding: 24px;
    border: 1px solid rgba(17, 17, 19, .1);
    background: #fff;
    box-shadow: none;
    position: relative;
    font-size: .9375em;
    font-weight: 500;
    color: #111113;
}

.template .section .box.is-red {
    border-color: rgba(238, 36, 85, .3);
    background: rgba(238, 36, 85, .07);
    color: #ee2455;
}

.template .section .box.is-green {
    border-color: rgba(32, 188, 113, .3);
    background: rgba(32, 188, 113, .07);
    color: #20bc71;
}

.template .section .box.is-blue {
    border-color: rgba(21, 141, 247, .3);
    background: rgba(21, 141, 247, .07);
    color: #158df7;
}

.template .section .box.is-inverted {
    padding: 24px;
    border: 5px solid #eee;
    position: relative;
    z-index: 0;
}

.template .section .box.is-inverted:before {
    width: 20px;
    height: 20px;
    content: "";
    border-top: 5px solid var(--theme-color);
    border-left: 5px solid var(--theme-color);
    position: absolute;
    top: -5px;
    left: -5px;
    display: block;
    z-index: 1;
}

.template .section .box.is-inverted .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color);
    text-align: left;
}

.template .section .btn-wrap .button,
.template .section .btn-wrap .button:active,
.template .section .btn-wrap .button:focus {
    min-height: 2.66667em;
    padding: .5em 1.6em;
    cursor: pointer;
    border: 0 solid transparent;
    border-radius: 0;
    background: var(--theme-color);
    box-shadow: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .9375em;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, .95);
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;
    -webkit-appearance: none;
}

.template .section .btn-wrap .button.is-secondary,
.template .section .btn-wrap .button.is-tertiary {
    min-height: 2.66667em;
    box-shadow: none;
    font-size: .9375em;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
}

.template .section .btn-wrap .button:disabled {
    cursor: default;
    opacity: .55;
    background-color: rgba(17, 17, 19, .5);
    font-style: normal;
    color: #fff;
}

.template .section .btn-wrap .button.is-secondary {
    padding: .5em 1.6em;
    border: 2px solid var(--theme-color);
    background: 0 0;
    color: var(--theme-color);
}

.template .section .btn-wrap .button.is-secondary:disabled {
    border-color: rgba(17, 17, 19, .3);
    background: 0 0;
    color: rgba(17, 17, 19, .5);
}

.template .section .btn-wrap .button.is-tertiary {
    padding: .5em 0;
    border: 0 solid transparent;
    background: 0 0;
    color: var(--theme-color);
}

.template .section .btn-wrap .button.is-tertiary:disabled {
    color: rgba(17, 17, 19, .5);
    text-decoration: none;
}

.template .section .btn-wrap .button.is-big {
    min-height: 2.44444em;
    padding: .45em 1.45em;
    font-size: 1.125em;
}

.template .section .btn-wrap .button.is-big {
    min-width: 100%;
    height: 60px;
    padding: 16px 40px;
    background-color: var(--theme-color);
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.618;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.template .section .btn-wrap .button.is-big::after {
    width: 70px;
    height: 1px;
    content: "";
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: -35px;
    transform: translateY(-50%);
}

.template .section .btn-wrap .button.is-secondary.is-big {
    background-color: transparent;
    color: var(--theme-color);
}

.template .section .btn-wrap .button.is-secondary.is-big::after {
    height: 2px;
    background-color: var(--theme-color);
}

.template .section .btn-wrap .button.is-tertiary.is-big {
    padding: 16px 0;
    background-color: transparent;
    color: var(--theme-color);
}

.template .section .btn-wrap .button.is-tertiary.is-big::after {
    display: none;
}

.template .section form ul li {
    padding: 0;
    line-height: 1.618;
}

.template .section form ul li:before {
    display: none;
}

.template .section table .text-center {
    text-align: center;
}

.template .section table .text-right {
    text-align: right;
}

.template .section table.is-bordered td,
.template .section table.is-bordered th {
    border: 1px solid #eee;
}

.template .section table.is-bordered tbody td,
.template .section table.is-bordered tbody th {
    border-bottom-width: 1px;
    border-bottom-color: #eee;
}

.template .section table.is-bordered td:first-child,
.template .section table.is-bordered th:first-child {
    padding-left: 16px;
}

.template .section table.is-bordered th {
    background-color: var(--light-theme-color);
    vertical-align: middle;
}

.template .section table.is-bordered td:last-child,
.template .section table.is-bordered th:last-child {
    padding-right: 16px;
}

.template .section .is-big {
    font-size: 20px;
}

.template .section .is-small {
    font-size: 12px;
}

.template .section ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: none;
}

.template .section ul li {
    padding: 0 0 0 1.6em;
    position: relative;
    line-height: 1.618;
}

.template ul li+li {
    margin-top: 12px;
}

.template .section ul li:before {
    width: 6px;
    height: 6px;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 7px;
    left: 6px;
}

.template ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: my-counter;
}

.template ol li {
    padding-left: 24px;
    position: relative;
    line-height: 1.618;
}

.template ol li+li {
    margin-top: 12px;
}

.template ol li:before {
    width: 18px;
    height: 18px;
    content: counter(my-counter);
    counter-increment: my-counter;
    border: 1px solid;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 85%;
    line-height: 1.618;
    color: var(--theme-color);
    letter-spacing: -.05em;
    box-sizing: border-box;
}

.template .movies-box {
    display: block;
    transition: .3s;
}

.template .movies-box .youtube-thumbnail {
    background-color: #000;
    position: relative;
    overflow: hidden;
    transition: .3s;
}

.template .movies-box .youtube-thumbnail .icon {
    width: 48px;
    height: 48px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.template .movies-box .youtube-thumbnail img {
    width: 100%;
    opacity: .8;
    object-fit: cover;
    transition-duration: .6s;
    aspect-ratio: 16 / 9;
}

.template .movies-box .title {
    margin-top: 16px;
    font-weight: 600;
}

.template .movies-box .description {
    margin-top: 8px;
    font-size: 12px;
    color: #8f8f8f;
}

.template .inline-modal__inner {
    padding-top: 32px;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

/*------------------------

メインサイト用_template

------------------------*/
.main-template__mv {
    height: 16vh;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.main-template__mv:after {
    width: 72vw;
    height: 16vh;
    content: "";
    background-image: url(../img/main-template__mv.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.main-template__mv .mv__inner {
    height: 16vh;
    display: flex;
    align-items: center;
}

.main-template__mv .title {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--theme-color);
    text-align: left;
}

.main-template__mv .title-en {
    margin-top: auto;
    margin-bottom: 16px;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #282828;
    text-align: left;
    z-index: 1;
}

.main-template .section-wrap {
    padding: 40px 0;
    background-color: #fff;
    background-image: none;
}

.main-template .section {
    margin: auto;
    background-color: #fff;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

.main-template .is-row>.is-col+.is-col {
    margin-top: 24px;
}

.main-template .section .is-outset-y-80 {
    margin-top: 70px;
}

.main-template .section .is-outset-y-70 {
    margin-top: 60px;
}

.main-template .section .is-outset-y-60 {
    margin-top: 50px;
}

.main-template .section .is-outset-y-50 {
    margin-top: 40px;
}

.main-template .section .is-outset-y-40 {
    margin-top: 30px;
}

.main-template .section .is-outset-y-30 {
    margin-top: 20px;
}

.main-template .section .is-outset-y-20 {
    margin-top: 10px;
}

.main-template .section .is-outset-y-10 {
    margin-top: 0;
}

.main-template .section h1 {
    margin-top: 48px;
    margin-bottom: 24px;
    padding: .8em .8em .8em 1.2em;
    background: var(--light-theme-color);
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
}

.main-template .section h1:before {
    width: 24px;
    height: 2px;
    margin: auto;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
}

.main-template .section h1:first-child {
    margin-top: 0;
}

.main-template .section h2 {
    margin-top: 32px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.main-template .section h2::before,
.main-template .section h2::after {
    width: 100%;
    height: 1px;
    content: "";
    background-color: #eaeaea;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    vertical-align: middle;
}

.main-template .section h2::after {
    width: 100px;
    background: var(--theme-color);
}

.main-template .section h3 {
    margin-top: 32px;
    margin-bottom: 24px;
    padding: .5em 1em .4em 1em;
    background-color: var(--light-theme-color);
    font-size: 16px;
}

.main-template .section .box {
    padding: 24px;
    border: 1px solid rgba(17, 17, 19, .1);
    background: #fff;
    box-shadow: none;
    position: relative;
    font-size: .9375em;
    font-weight: 500;
    color: #111113;
}

.main-template .section .box.is-red {
    border-color: rgba(238, 36, 85, .3);
    background: rgba(238, 36, 85, .07);
    color: #ee2455;
}

.main-template .section .box.is-green {
    border-color: rgba(32, 188, 113, .3);
    background: rgba(32, 188, 113, .07);
    color: #20bc71;
}

.main-template .section .box.is-blue {
    border-color: rgba(21, 141, 247, .3);
    background: rgba(21, 141, 247, .07);
    color: #158df7;
}

.main-template .section .box.is-inverted {
    padding: 24px;
    border: 5px solid #eee;
    position: relative;
    z-index: 0;
}

.main-template .section .box.is-inverted:before {
    width: 20px;
    height: 20px;
    content: "";
    border-top: 5px solid var(--theme-color);
    border-left: 5px solid var(--theme-color);
    position: absolute;
    top: -5px;
    left: -5px;
    display: block;
    z-index: 1;
}

.main-template .section .box.is-inverted .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color);
    text-align: left;
}

.main-template .section .btn-wrap .button,
.main-template .section .btn-wrap .button:active,
.main-template .section .btn-wrap .button:focus {
    min-height: 2.66667em;
    padding: .5em 1.6em;
    cursor: pointer;
    border: 0 solid transparent;
    border-radius: 0;
    background: var(--theme-color);
    box-shadow: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .9375em;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, .95);
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;
    -webkit-appearance: none;
}

.main-template .section .btn-wrap .button.is-secondary,
.main-template .section .btn-wrap .button.is-tertiary {
    min-height: 2.66667em;
    box-shadow: none;
    font-size: .9375em;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
}

.main-template .section .btn-wrap .button:disabled {
    cursor: default;
    opacity: .55;
    background-color: rgba(17, 17, 19, .5);
    font-style: normal;
    color: #fff;
}

.main-template .section .btn-wrap .button.is-secondary {
    padding: .5em 1.6em;
    border: 2px solid var(--theme-color);
    background: 0 0;
    color: var(--theme-color);
}

.main-template .section .btn-wrap .button.is-secondary:disabled {
    border-color: rgba(17, 17, 19, .3);
    background: 0 0;
    color: rgba(17, 17, 19, .5);
}

.main-template .section .btn-wrap .button.is-tertiary {
    padding: .5em 0;
    border: 0 solid transparent;
    background: 0 0;
    color: var(--theme-color);
}

.main-template .section .btn-wrap .button.is-tertiary:disabled {
    color: rgba(17, 17, 19, .5);
    text-decoration: none;
}

.main-template .section .btn-wrap .button.is-big {
    min-height: 2.44444em;
    padding: .45em 1.45em;
    font-size: 1.125em;
}

.main-template .section .btn-wrap .button.is-big {
    min-width: 100%;
    height: 60px;
    padding: 16px 40px;
    background-color: var(--theme-color);
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.618;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.main-template .section .btn-wrap .button.is-big::after {
    width: 70px;
    height: 1px;
    content: "";
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: -35px;
    transform: translateY(-50%);
}

.main-template .section .btn-wrap .button.is-secondary.is-big {
    background-color: transparent;
    color: var(--theme-color);
}

.main-template .section .btn-wrap .button.is-secondary.is-big::after {
    height: 2px;
    background-color: var(--theme-color);
}

.main-template .section .btn-wrap .button.is-tertiary.is-big {
    padding: 16px 0;
    background-color: transparent;
    color: var(--theme-color);
}

.main-template .section .btn-wrap .button.is-tertiary.is-big::after {
    display: none;
}

.main-template .section form ul li {
    padding: 0;
    line-height: 1.618;
}

.main-template .section form ul li:before {
    display: none;
}

.main-template .section table .text-center {
    text-align: center;
}

.main-template .section table .text-right {
    text-align: right;
}

.main-template .section table.is-bordered td,
.main-template .section table.is-bordered th {
    border: 1px solid #eee;
}

.main-template .section table.is-bordered tbody td,
.main-template .section table.is-bordered tbody th {
    border-bottom-width: 1px;
    border-bottom-color: #eee;
}

.main-template .section table.is-bordered td:first-child,
.main-template .section table.is-bordered th:first-child {
    padding-left: 16px;
}

.main-template .section table.is-bordered th {
    background-color: var(--light-theme-color);
    vertical-align: middle;
}

.main-template .section table.is-bordered td:last-child,
.main-template .section table.is-bordered th:last-child {
    padding-right: 16px;
}

.main-template .section .is-big {
    font-size: 20px;
}

.main-template .section .is-small {
    font-size: 12px;
}

.main-template .section ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: none;
}

.main-template .section ul li {
    padding: 0 0 0 1.6em;
    position: relative;
    line-height: 1.618;
}

.main-template ul li+li:not(.main-nav__item):not(.menu):not(.news-page-number) {
    margin-top: 12px;
}

.main-template .section ul li:before {
    width: 6px;
    height: 6px;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 7px;
    left: 6px;
}

.main-template ol {
    margin: 1em 0;
    padding-left: 40px;
    list-style-type: decimal;
}

/* .main-template ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: my-counter;
}

.main-template ol li {
    padding-left: 24px;
    position: relative;
    line-height: 1.618;
}

.main-template ol li+li {
    margin-top: 12px;
}

.main-template ol li:before {
    width: 18px;
    height: 18px;
    content: counter(my-counter);
    counter-increment: my-counter;
    border: 1px solid;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 85%;
    line-height: 1.618;
    color: var(--theme-color);
    letter-spacing: -.05em;
    box-sizing: border-box;
}

*/
.main-template .movies-box {
    display: block;
    transition: .3s;
}

.main-template .movies-box .youtube-thumbnail {
    background-color: #000;
    position: relative;
    overflow: hidden;
    transition: .3s;
}

.main-template .movies-box .youtube-thumbnail .icon {
    width: 48px;
    height: 48px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.main-template .movies-box .youtube-thumbnail img {
    width: 100%;
    opacity: .8;
    object-fit: cover;
    transition-duration: .6s;
    aspect-ratio: 16 / 9;
}

.main-template .movies-box .title {
    margin-top: 16px;
    font-weight: 600;
}

.main-template .movies-box .description {
    margin-top: 8px;
    font-size: 12px;
    color: #8f8f8f;
}

.main-template .inline-modal__inner {
    padding-top: 32px;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

/*------------------------

main-form-template

------------------------*/
.main-form-template .section-wrap__inner {
    margin: auto;
    padding: 0;
    background-color: #fff;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

.main-form-template.page-form .section-text {
    padding-top: 0;
}

.main-form-template.page-form .section_step {
    margin-top: 16px;
}

.main-form-template .section_step {
    padding-top: 0;
}

.main-form-template .main-template .section_step ol li:before {
    display: none;
}

.main-form-template.page-complete .section-text {
    margin-top: 0;
}

/*------------------------

お知らせ

------------------------*/
.page-news .main-template .section {
    width: 100%;
    margin: auto;
    background-color: #fff;
    font-size: 14px;
    line-height: 2;
    color: #3b3b3b;
}

.news-list {
    margin-left: -16px;
    display: flex;
    flex-wrap: wrap;
}

.news-list__item {
    width: calc(50% - 16px);
    margin-left: 16px;
}

.news-list__item:nth-child(n+3) {
    margin-top: 16px;
}

.news-card {
    height: 100%;
    background: #fff;
    position: relative;
}

.news-card__link {
    height: 100%;
    border: 1px solid #e2e2e2;
    display: block;
    color: #333;
    transition: .3s;
}

.news-mark {
    padding: 4px 8px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    z-index: 3;
}

.news-mark--new {
    background-color: var(--theme-color);
}

.news-card .news-thumnail {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;
}

.news-card .news-thumnail .news-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.news-card .news-card-bottom {
    width: 100%;
    height: auto;
    margin-top: auto;
}

.news-card .news-card-detail {
    width: 100%;
    height: calc(100% - 120px);
    padding: 16px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    -webkit-transition: .3s;
    transition: .3s;
}

.news-card-detail__content {
    margin-bottom: 16px;
}

.news-card .news-card-detail__content .news-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    letter-spacing: .04em;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    -webkit-transition: .3s;
    transition: .3s;
}

.news-card .news-card-detail__content .news-title::before,
.news-card .news-card-detail__content .news-title::after {
    width: 0;
    height: 0;
    content: "";
    display: block;
}

.news-card .news-card-detail__content .news-title::before {
    margin-bottom: 0;
}

.news-card .news-card-detail__content .news-title::after {
    margin-top: 0;
}

.news-info {
    margin-top: auto;
    position: relative;
    display: flex;
    align-items: center;
}

.mypage-contents .news-info {
    border-bottom: 1px solid #e6e6e6;
    padding: 0 0 16px;
    margin-top: 0;
    margin-bottom: 32px;
}

.news-info .news-date {
    display: block;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 2.28571;
    color: #777;
    letter-spacing: .044em;
}

.news-info .news-date:before,
.news-info .news-date:after {
    width: 0;
    height: 0;
    content: "";
    display: block;
}

.news-info .news-category {
    margin-left: 8px;
    padding: 4px 8px;
    background-color: #f5f5f5;
    display: inline-block;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 12px;
    color: #333;
}

.news-info .news-category:before,
.news-info .news-category:after {
    width: 0;
    height: 0;
    content: "";
    display: block;
}

.news-listPagenation {
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
}

.pagenation-area {
    margin-top: 48px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
}

.mypage-contents .pagenation-area {
    margin-bottom: 32px;
}

.news-pageList {
    margin: 0 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
}

.news-page-number {
    width: 48px;
    height: 48px;
    margin-right: 2px;
    background: #f5f5f5;
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.news-page-number.is-current {
    background-color: var(--light-theme-color);
}

.message_details .news-page-number {
    width: 100%;
    background-color: #fff;
}

.mypage-contents ul.news-pageList,
.main-template ul.news-pageList {
    margin: 0 16px;
}

.mypage-contents .news-pageList li.news-page-number,
.main-template .news-pageList li.news-page-number {
    margin-top: 0;
    padding: 0;
}

.news-page-number:last-of-type {
    margin-right: 0;
}

.news-page-number:before {
    width: 15px;
    height: 1px;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translate(-50%, 0) scale(0, 1);
    transform: translate(-50%, 0) scale(0, 1);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.news-page-number__link {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 2.8;
    color: #333;
    letter-spacing: .04em;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-transition: .3s;
    transition: .3s;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
}

.page-news .main-template .section ul li:before {
    width: 15px;
    height: 1px;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translate(-50%, 0) scale(0, 1);
    transform: translate(-50%, 0) scale(0, 1);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.page-news .main-template .section ul li.news-page-number.is-current:before {
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    transform: translate(-50%, 0) scale(1, 1);
}

.news-page-number.is-current .news-page-number__link {
    color: var(--theme-color);
}

.main-template .section ul li.a-ellipsisDotted {
    width: 32px;
    height: 48px;
    margin-top: 0;
    margin-right: 2px;
    padding: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-transform: translate(0, -10%);
    transform: translate(0, -10%);
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
}

.news-pagearrow {
    width: 24px;
    height: 24px;
}

.news-pagearrow__link {
    width: 100%;
    height: 100%;
    display: block;
}

.news-pagearrow__link.is-disable {
    pointer-events: none;
    opacity: .3;
}

.news-pagearrow .news-svg-arrow {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.news-pagearrow .news-svg-arrow .st0 {
    -webkit-transition: .1s;
    transition: .1s;
    fill: #fff;
}

.news-pagearrow .news-svg-arrow .st1 {
    -webkit-transition: .1s;
    transition: .1s;
    fill: none;
    stroke: var(--theme-color);
    stroke-miterlimit: 10;
}

.news-pagearrow .news-svg-arrow .st2 {
    fill: var(--theme-color);
}

.news-pagearrow--back {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*------------------------

お知らせ詳細

------------------------*/
.details-inner {
    width: 100%;
    margin: auto;
}

.details__title {
    font-size: 32px;
}

.mypage-contents .details__title {
    font-size: 24px;
}

.details__contents {
    margin-top: 40px;
}

.details__img {
    margin-top: 32px;
}

.details__text {
    margin-top: 32px;
    font-size: 14px;
    line-height: 2;
    color: #424549;
    letter-spacing: .14em;
}

.mypage-contents .details__text {
    margin-bottom: 24px;
}

.page-news.details-page .news-mark {
    margin-right: 0;
    margin-left: 16px;
    position: relative;
    top: 0;
    left: 0;
}

.page-news.details-page .pagenation-area {
    margin-top: 40px;
    padding-bottom: 40px;
}

.page-news.details-page .news-page-number {
    width: auto;
}

.message_details .news-page-number__link,
.page-news.details-page .news-page-number__link {
    padding: 0 40px;
    font-size: 14px;
}

.message_details .news-page-number__link svg,
.page-news.details-page .news-page-number__link svg {
    width: 16px;
    margin-right: 8px;
    color: var(--theme-color);
}

/*------------------------

マイページ

------------------------*/
.mypage .main-template__mv:after {
    background-image: url(../img/mypage__mv.png);
    background-position: center left;
}

.mypage-contents__inner {
    background-color: #fff;
    padding: 40px;
    font-size: 14px;
}

.mypage-top {
    text-align: center;
}

.mypage .btn-area .btn {
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #2f3135;
    border-radius: 39px;
    background-color: #2f3135;
    position: relative;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    transition: .3s;
}

/*------------------------

受信箱

------------------------*/
.main-template .section-wrap {
    padding: 32px 0;
    background-color: #fff;
    background-image: none;
}

.mypage .main-template .section-wrap {
    background-color: #f4f4f4;
}

.section-message__left {
    border-radius: 8px;
    background-color: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

.section-message__right {
    background-color: #f4f4f4;
}

.side-wrapper {
    padding: 24px;
    border-radius: 8px;
}

.side-wrapper:last-child {
    border-bottom: none;
}

.section-mypage .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #a6a6a6;
    object-fit: cover;
}

.user-profile {
    display: flex;
    align-items: center;
}

.user-name {
    margin: 0 0 0 16px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-mail {
    margin-left: 16px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    color: #a6a6a6;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.notify {
    width: 50%;
    position: relative;
}

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

.notify a {
    padding: 16px;
    border-radius: 4px;
    background-color: #f4f4f4;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #6c6c6c;
    text-align: center;
    transition: .3s;
}

.user-notification {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-notification svg {
    width: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    overflow: visible;
    color: #6c6c6c;
}

.inbox,
.sendbox {
    padding: 16px;
    background-color: #fff;
}

.message-menu-list {
    display: flex;
}

.message-menu-list li {
    width: 50%;
}

.message-menu-list li a {
    padding: 16px 32px 16px 24px;
    border-top: 4px solid #f4f4f4;
    background-color: #fff;
    display: block;
    transition: .3s;
    font-size: 14px;
    text-align: center;
}

.message-menu-list li a:not(.selected) {
    background-color: #f4f4f4;
    color: #6c6c6c;
}

.message-menu-list li a.selected {
    border-top: 4px solid var(--theme-color);
    background-color: #fff;
    pointer-events: none;
}

.message-menu-list li+li {
    border-left: 1px solid #f4f4f4;
}

.message-menu-list li a svg {
    width: 24px;
    margin-right: 12px;
}

.message-menu-list li a.selected svg {
    color: var(--theme-color);
}

/*
.message-menu-list li a {
    padding: 16px 32px;
    border-bottom: 1px solid #f4f4f4;
    display: block;
    color: #6c6c6c;
    transition: .3s;
}

.message-menu-list li a svg {
    width: 24px;
    color: #6c6c6c;
    margin-right: 12px;
} */
.msg-content+.msg-content {
    margin-top: 8px;
}

.msg-link {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    background-color: #f4f4f4;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    will-change: box-shadow, transform;
    transition: box-shadow .4s ease-out, transform .4s ease-out;
}

.msg-link::before {
    width: 3px;
    height: 16px;
    margin: auto;
    content: "";
    background-color: #dbdbdb;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: .3s;
}

.msg-destination {
    width: 100%;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.mypage-contents .msg-destination {
    width: calc(100% - 100px - 16px);
    margin-bottom: 0;
}

.msg-title {
    width: calc(100% - 100px - 16px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.msg-date {
    width: 100px;
    margin-left: 16px;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 14px;
    color: #828282;
    text-align: right;
}

.mypage .section-mypage h1 {
    margin-top: 64px;
    padding: 1em 1em 1em 1.6em;
    border-radius: 8px;
    background: var(--light-theme-color);
    position: relative;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 20px;
}

.mypage .section-mypage h1:before {
    width: 32px;
    height: 2px;
    margin: auto;
    content: "";
    background-color: var(--theme-color);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    z-index: 1;
}

.mypage .section-mypage h1:first-child {
    margin-top: 0;
}

.mypage .sendbox {
    display: none;
}

.pagenation-area {
    margin: 32px calc(50% - 50vw) 16px;
}

/*------------------------

アーティスト一覧

------------------------*/
.section_artist .title-en {
    font-family: "Quicksand", sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--theme-color);
}

.section_artist .title-jp {
    margin-top: 8px;
    font-weight: bold;
    color: #0a0a0a;
}

.section_artist .container {
    margin-left: -16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section_artist .artist-box {
    width: calc(100% / 2 - 16px);
    margin-left: 16px;
}

.section_artist .artist-box:nth-child(n+3) {
    margin-top: 32px;
}

.section_artist .artist-box__link {
    display: block;
    transition-duration: .3s;
}

.section_artist .artist-avatar {
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid #fff;
}

.section_artist .artist-avatar:before {
    display: block;
    content: '';
    padding-top: 100%;
}

.section_artist .artist-avatar img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition-duration: .3s;
}

.section_artist .artist-name {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition-duration: .3s;
}

.section_artist .artist-name-en {
    margin-top: 4px;
    font-family: "Quicksand", "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #888;
    text-align: center;
}