@charset "utf-8";
/* 
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;
}

ul,
ol {
    list-style: none;
}

html {
    font-size: 16px;
    font-feature-settings: "palt";
}

body {
    line-height: 1.4;
    font-family: serif;
    background: #fff;
    overflow-x: hidden;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    min-height: 100vh;
    position: relative;
}


@media screen and (min-width: 769px) {
    body {
        /* min-width: 1000px; */
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
        font-size: 2.5vw;
    }

    body {
        min-width: 0;
    }
}

@media screen and (max-width: 500px) {
    html {
        font-size: 14px;
    }
}

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%;
    background: transparent;
    text-decoration: none;
    color: #000;
}
a.link {
    color: #0000ff;
    text-decoration: underline;
}
a:focus {
    outline: none
}

a:hover img {
    /* opacity: .85 */
}

/* 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,
textarea {
    vertical-align: middle;
    -webkit-appearance: none;
    padding: 0;
    /* border: 1px solid #006934; */
    background-color: #fff;
    /* height: 1.25em; */
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    outline: none;
    border: none;
    border-radius: 2px;
    font-family: 'Noto Sans JP';
    color: #333;
}

select {
    background: #fff url(/images/common/select_icon.svg) no-repeat center right 0.5em;
    background-size: auto 0.5em;
    padding-right: 2em!important;
}

input:focus,
select:focus {box-shadow: 0 0 2px 0px #c4ac6d;}
::placeholder,
option:disabled {
    color: #cacaca;
}
* {
    box-sizing: border-box;
}
sup {
    vertical-align: super;
    font-size: 70%;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    transition: .25s opacity;
    height: auto;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

a:hover img {
    /* opacity: .8; */
}

/* STYLE */
#header {
    background: #000;
    height: 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 9999;
    top: 0;
    left: 0;
    padding: 0 3%;
    /* overflow: hidden; */
    position: sticky;
}
#header.login {
    background: #c4ac6d;
}
#logo {
    width: 170px;
    line-height: 1;
}
.login #logo .d {
    fill: #000
}

#headRight {
    display: flex;
    align-items: center;
    word-break: keep-all;
    white-space: nowrap;
}
@media screen and (min-width: 961px) {
    #headRight {
        display: flex!important;
    }
}
#headMenu {
    display: flex;
    align-items: stretch;
}
@media screen and (min-width: 961px) {
    .login #headMenu > * {
        border-right: 1px solid;
    }
    #headMenu .cartArea a .text {
        display: none
    }
}
#headMenu .mainMenu {
    display: flex;
    align-items: center;
}
#headMenu .mainMenu li {
    margin: 0 0.5rem;
    line-height: 1;
}
#headMenu .mainMenu a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    height: 3.125rem;
}
#headMenu .mainMenu a span {
    display: block;
}
#headMenu .mainMenu a .jp {
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 0.25rem;
}
#headMenu .mainMenu a .en {
    font-size: 0.75rem;
    color: #c4ac6d;
}
.login #headMenu .mainMenu a .jp {
    color: #231815;
}
.login #headMenu .mainMenu a .en {
    color: #fff;
}
#headMenu .mainMenu .login a {
    background: #c4ac6d;
    padding: 0.5rem 1.5rem;
    width: 7.5rem;
}
#headMenu .mainMenu .register a {
    border: 1px solid #c4ac6d;
    padding: 0.5rem 1.5rem;
    width: 7.5rem;
    background-color:#AA0000;
}
#headMenu .mainMenu .logout a {
    background: #808080;
    width: 7.5rem;
}

#headMenu .mainMenu .login a .jp {
    color: #000
}
#headMenu .mainMenu .login a .en {
    color: #fff
}
#headMenu .mainMenu .register a .jp {
    color: #c4ac6d;
    color: #fff
}
#headMenu .mainMenu .register a .en {
    color: #fff
}
#headMenu .mainMenu .logout a .jp {
    color: #fff
}
#headMenu .mainMenu .logout a .en {
    color: #fff
}
#headMenu .memberMenu {
    position: relative;
    font-size: 0.875rem;
    cursor: default;
    /* border-right: 1px solid #000; */
    /* border-width: 0 1px 0 1px; */
    padding: 0 1.5rem;
}
#headMenu .memberMenu .inner {
    display: flex;
    align-items: center;
    position: relative;
}
#headMenu .memberMenu .inner > .icon {
    width: 3.125rem;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background: #ccc;
    overflow: hidden;
    position: relative;
}
#headMenu .memberMenu .inner > .icon img {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#headMenu .memberMenu .inner .textArea {
    padding-left: 1rem
}
#headMenu .memberMenu .inner .textArea a:hover .pointText {
    text-decoration: underline;
}
#headMenu .memberMenu .textArea .userName {
    display: flex;
    margin-bottom: 0.25em;
    font-size: 105%;
}
#headMenu .memberMenu .textArea .userName .nameText {
    font-weight: 500;
}
#headMenu .memberMenu .textArea .point {
    display: flex;
    align-items: center;
}
#headMenu .memberMenu .textArea .point .icon {
    width: 1.35em;
    height: 1.35em;
    background: #fff;
    color: #c5aa6f;
    text-align: center;
    display: block;
    line-height: 1;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 0.4em;
}
#headMenu .memberMenu .subMenu .textArea .point .icon {
    color: #f7f8fa;
    background: #c5aa6f;
}
#headMenu .memberMenu .inner .textArea .id {
    display: block;
    width: 7em;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
}
#headMenu .memberMenu .subMenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: 0.25s;
    font-size: 1rem;
    min-width: 30rem;
}
#headMenu .memberMenu .subMenu .colWrap a {
    text-decoration: underline; /* 下線を引く */
}
#headMenu .memberMenu .inner:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1.5rem 1.5rem 1.5rem;
    border-color: transparent transparent #f7f8fa transparent;
    position: absolute;
    top: calc(100% - 1rem);
    left: 1.5625rem;
    transform: translate(-50%,-5px);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s;
}
#headMenu .memberMenu:hover .subMenu {
    opacity: 1;
    pointer-events: all;
    /* font-size: 1rem; */
    padding: 1rem 0 0 0;
}
#headMenu .memberMenu:hover .inner:after {
    opacity: 1;
    top: 100%
}
#headMenu .subMenu .subMenuInner {
    background: #f7f8fa;
    padding: 1.5rem 2rem;
    border-radius: 0.1875rem;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.5);
}
#headMenu .subMenuInner .profArea {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}
#headMenu .subMenuInner .profArea .img {
    width: 5.625rem;
}
#headMenu .subMenuInner .profArea .textArea {
    padding-left: 1rem;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}
#headMenu .subMenuInner .profArea .textArea a:hover .userName,#headMenu .subMenuInner .profArea .textArea a:hover .pointText {
    
    text-decoration: underline;
    }
#headMenu .subMenu .subMenuInner .userName {word-break: break-all;flex-wrap: wrap;white-space: pre-wrap;}
#headMenu .subMenuInner .menuArea {
    padding: 0 0.125rem 1.25rem;
    border-bottom: 2px solid #ceced0
}
#headMenu .subMenuInner .menuArea .colWrap {
    width: 100%;
    flex-direction: column;
}
#headMenu .subMenuInner .menuArea .colWrap .col {
    /* width: 50%; */
    width: 100%;
}
#headMenu .subMenuInner .menuArea .colWrap .col p.ttl {
    font-size: 112.5%;
    font-weight: bold;
    margin-bottom: .75rem
}
#headMenu .subMenuInner .menuArea .colWrap .col ul {display: flex;}
#headMenu .subMenuInner .menuArea .colWrap .col ul li {
    width: 33%;
    margin-bottom: 0.5rem;
}
#headMenu .subMenuInner .menuArea .colWrap .col ul li a:hover {
    text-decoration: underline;
}
#headMenu .subMenuInner .menuArea .colWrap .col ul li:not(:first-child) {
    /* margin-top: 0.5rem; */
}
#headMenu .subMenuInner .logoutArea {
    padding: 1.25rem 0.125rem 0;
    font-size: 1rem;
    text-align: right;
}
#headMenu .cartArea {
    display: flex;
    /* height: 100%; */
    padding: 0 .25rem;
}
#headMenu .cartArea a {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
}
#headMenu .cartArea a .img {
    width: 1.75rem;
    position: relative;
}
#headMenu .cartArea a .img .num {
    position: absolute;
    display: flex;
    font-size: 50%;
    color: #fff;
    background: #eb1c24;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    padding: 0.25em;
    width: 2.5em;
    justify-content: center;
    align-items: center;
    right: -15%;
    bottom: 0%;
}
#headMenu .cartArea a svg {
    width: 100%;
    height: auto;
}
#headSns {
    margin-left: 2rem;
    /* margin-left: 1%; */
}
#headSns ul {
    display: flex;
    align-items: center;
    line-height: 1;
    flex-wrap: wrap;
    min-width: 6rem;
}
#headSns ul li {
    margin: 0.3rem 0.5rem;
}
#headSns ul li.yt {
    width: 2rem
}
#headSns ul li.tw {
    width: 1.9675rem
}
#headSns ul li.fb {
    width: 1.875rem
}
#headSns ul li.ig {
    width: 1.8125rem
}
.login #headSns ul li .d {
    fill: #000
}

@media screen and (max-width: 960px) {
    #header {
        height: 3.5rem;
        /* height: auto; */
        padding: 0 1rem;
    }
    #logo {
        width: 7.5rem;
    }
    #headRight {
        /* display: none; */
        position: absolute;
        top: 100%;
        background: #000;
    }
    #spMenuArea {
        display: block;
    }
    #spMenuBtn {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        overflow: hidden;
        background: #fff;
        /* background: #c4ac6d; */
        background: #525252;
        border-radius: 2px;
    }
    .login #spMenuBtn {
        
background: #181818;
    }
    #spMenuBtn span {
        display: block;
        position: absolute;
        width: 64%;
        height: 2px;
        background: #c4ac6d;
        background: #fff;
        /* background: #000; */
        left: 18%;
        transition: .25s;
    }
    .login #spMenuBtn span {
        /* background: #c4ac6d; */
    }
    #spMenuBtn span:nth-child(1) {
        top: 0.7rem;
    }
    #spMenuBtn span:nth-child(2) {
        top: 50%;
        margin-top: -1px;
    }
    #spMenuBtn span:nth-child(3) {
        bottom: 0.7rem;
    }
    #spMenuBtn.active span:nth-child(1) {
        top: 50%;
        margin-top: -1px;
        transform: rotate(-45deg);
    }
    #spMenuBtn.active span:nth-child(2) {
        left: 100%;
        opacity: 0;
    }
    #spMenuBtn.active span:nth-child(3) {
        bottom: 50%;
        margin-bottom: -1px;
        transform: rotate(45deg);
    }
    #headRight {
        display: none;
        position: absolute;
        top: 100%;
        background: #000;
        right: 0;
        flex-direction: column;
        right: 0;
        /* border-top: 1px solid #fff; */
        /* padding-top: 1rem; */
        max-width: 100%;
    }
    .login #headRight {
        background: #c4ac6d;
    }
    #headMenu {
        flex-wrap: wrap;
        border-top: 1px solid #fff;
    }
    #headMenu .mainMenu {
        flex-wrap: wrap;
        width: 100%;
        order: 3;
    }
    #headMenu .mainMenu li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #fff
    }
    #headMenu .mainMenu li:first-child {
        border-top: 1px solid #fff
    }
    #headMenu .mainMenu li {
        
    }
    #headMenu .mainMenu .login,
    #headMenu .mainMenu .register {
        /* border: none; */
        width: 50%;
        padding: 1rem 0.5rem
    }
    #headMenu .mainMenu .login a,
    #headMenu .mainMenu .register a {
        max-width: 100%;
        width: 100%;
    }
    #headMenu .memberMenu {
        width: 100%;
        order: 1;
        border: none;
        padding: 1rem;
        border-bottom: 1px solid #fff;
    }
    #headMenu .memberMenu .inner {
        display: none;
    }
    #headMenu .memberMenu .subMenu {
        position: static;
        opacity: 1;
        transform: none;
        padding: 0!important;
        /* font-size: 0.875rem; */
        min-width: 0;
        max-width: 100%;
    }
    #headMenu .subMenu .subMenuInner {
        /* background: transparent; */
        box-shadow: none;
        padding: 1rem;
        background: rgba(247,248,250,0.25);
    }
    .subMenuInner a {
        cursor: pointer;
        pointer-events: auto
    }
    #headMenu .cartArea {
        order: 2;
        padding: 0 0.5rem;
        border-bottom: 1px solid #fff;
        width: 100%;
        margin-bottom: 2rem;
    }
    #headMenu .cartArea a {
        padding: 0.75rem 1rem;
        width: 100%;
        justify-content: center;
        font-size: 1rem;
    }
    #headMenu .cartArea a .img {
        margin-right: 0.125rem;
        margin-right: 1rem;
    }
    #headMenu .cartArea a .img .num {
        right: auto;
        left: 75%;
    }
    #headSns {
        margin-left: 0;
        padding: 1rem;
    }
    #headSns ul {
        width: 100%;
        justify-content: center;
    }
}


/* フッター */
#footer {
    background: #000 url(/images/common/foot_logo.svg) no-repeat center left;
    background-size: 13.75rem;
    /* height: 13.75rem; */
    padding: 4.5rem 10rem 0 14rem;
    display: flex;
    position: sticky;
    top: 100vh;
}
#footInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    flex-wrap: wrap;
}
#footInner #copy {
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 1rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: normal;
}
#footLeft {
    width: 16.875rem;
}
#footLeft .evp {
    margin-bottom: 1.875rem
}
#footContact a {
    display: flex;
    background: #c4ac6d;
    font-size: 0.875rem;
    justify-content: center;
    align-items: center;
    height: 3rem;
    font-weight: 500;
}

#footRight {
    text-align: right;
}
#footRight ul li:not(:last-child) {
    margin-bottom: 0.75rem
}
#footRight a {
    color: #fff
}
#footRight a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 1000px) {
    #footer {
        padding: 3.5rem 0 0 14rem;
    }
}
@media screen and (max-width: 768px) {
    #footer {
        height: auto;
        background: #000;
        padding: 1.5rem 0.5rem 1rem;
    }
    #footInner {
        /* flex-direction: column-reverse; */
        flex-direction: column;
        padding: 0;
    }
    #footRight {
        text-align: left;
        width: 100%;
        padding: 1.5rem 0;
        order: 1;
    }
    #footRight ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #footRight ul li {
        padding: 0.5rem 1rem;
        margin-bottom: 0!important;
    }
    #footLeft {
        width: 100%;
        padding-left: 25%;
        aspect-ratio: 4/1;
        padding: 0 10% 0 35%;
        background: #000 url(/images/common/foot_logo.svg) no-repeat center left;
        background-size: 25%;
        order: 2;
    }
    #footLeft .evp {
        margin-bottom: 1rem;
        /* padding-left: 1rem; */
    }
    #footLeft .evp img {
        /* width: 60%; */
    }
    #footContact {
        /* padding-left: 1rem; */
    }
    #copy {
        order: 3;
    }
}

.sec {
    padding: 2rem 0;
    overflow-x: hidden;
    width: 100%;
}
.sec.ovfl-v {
    overflow: visible;
    position: relative;
    z-index: 10;
}
.sec .breadcrumb {
    max-width: 1080px;
    width: 95%;
    margin: -1rem auto 0;
    padding: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
}
.sec .breadcrumb li {
    margin-bottom: 0.25rem
}
.sec .breadcrumb li:not(:first-child):before {
    content: ">";
    padding: 0 0.5rem
}
.sec .inner {
    max-width: 1000px;
    max-width: 1080px;
    width: 95%;
    margin: 0 auto 1.5rem;
    margin: 0 auto;
    padding: 1rem 0;
}
.sec .inner + .inner {
    margin-top: 1rem;
}
.sec .inner.bgInner {
    background: rgba(255,255,255,0.8);
}
#topMain .sec .inner {
    margin: 0 auto 3rem;
}

.sec .inner .innerSec .innerSecTtl {
    background: #f6f8fa;
    text-align: center;
    border: 1px solid #000;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}
.innerSec .block {
    margin-top: 2rem;
    line-height: 1.6
}
.innerSec .block .blockTtl {
    margin-bottom: 0.5rem
}
.innerSec .block .blockText {
    font-size: 0.875rem;
    padding-left: 1rem;
    line-height: 1.75;
}
.indtList dt {
    float: left;
    width: 2em;
    /* clear: both; */
    margin-bottom: 0.25em;
}
.indtList dd {
    margin-left: 2em;
    margin-bottom: 0.25em;
}
.indtList dd > .indtList dd:last-child {
    margin-bottom: 0;
}
.indtList.ptn2 > dt {
    width: 1em;
    margin-bottom: 0.25em
}
.indtList.ptn2 > dd {
    margin-left: 1em;
    margin-bottom: 0.25em
}
.indtList:after {
    content: "";
    display: block;
    clear: both;
}
/* -------
 TOPページ
----------------- */
#topMain {
    background: url(/images/top/top_bg.jpg) center top
}
#topNewsArea {
    padding-top: 2rem;
    max-width: 1000px;
    width: 90%;
    margin: auto;
}
#topMainVisualArea #topNewsArea {
    padding-top: 0;
    width: 100%;
}
#topNewsArea a {
    color: #eb1c24;
}
#topNewsArea .newsWrap {
    display: flex;
    align-items: center;
    /* align-items: stretch; */
    background: #fff;
    border: 2px solid #ff0000;
    margin: auto;
    color: #eb1c24;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
}
#topNewsArea .newsWrap > dt {
    width: 7rem;
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem;
    justify-content: center;
}
#topNewsArea .newsWrap > dt .ttl {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem
}
#topNewsArea .newsWrap > dt .more {
    margin-top: auto;
    font-size: 0.625rem;
}
#topNewsArea .newsWrap > dt .more a {
    display: flex;
    border: 1px solid;
    justify-content: center;
    height: 1.5rem;
    align-items: center;
    font-weight: bold;
    transition: .25s;
    transition-property: color,background,border
}
#topNewsArea .newsWrap > dt .more a:hover {
    color: #fff;
    background: #eb1c24;
    border-color: #eb1c24
}
#topNewsArea .newsWrap > dd {
    width: calc(100% - 5rem);
    padding-left: 1rem;
    border-left: 1px solid;
}
@media screen and (max-width: 640px) {
    #topNewsArea .newsWrap {
        flex-direction: column;
    }
    #topNewsArea .newsWrap > dt {
        width: 100%;
        padding: 0 0 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #topNewsArea .newsWrap > dt .ttl {
        margin-bottom: 0;
    }
    #topNewsArea .newsWrap > dt .more {
        margin-top: 0;
    }
    #topNewsArea .newsWrap > dt .more a {
        padding: 0 1em
    }
    #topNewsArea .newsWrap > dd {
        width: 100%;
        border-left: none;
        border-top: 1px solid;
        padding: 1rem 0 0;
    }
}
.newsLabel {
    width: 4.5em;
    text-align: center;
    background: #eb1c24;
    color: #fff;
}
.newsItem {
    display: flex;
    width: calc(100% - 5em);
    margin-left: auto;
    position: relative;
    padding-left: 1em;
}
.newsItem:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0 0.4em 0.7em;
    border-color: transparent transparent transparent #eb1c24;
    top: 0.25em;
    left: 0;
}
.newsItem .date {
    width: 6.5em;
}
.newsItem .text {
    width: calc(100% - 6.5em);
}
.newsList {
    text-align: left;
    font-size: 87.5%;
}
.newsList > li:not(:last-child) {
    margin-bottom: 0.5rem
}
.newsList > li > * {
    display: flex;
    align-items: flex-start;
} 
#topMainVisualArea {
    background: url(/images/top/main_img.jpg) no-repeat center top;
    background-size: cover;
    background-size: 1920px auto;
    padding: 1.2rem 5% 10rem;
}
#topMainVisualArea .mainVisualInner {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}
#topMainVisualArea .leadText {
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    margin-top: 1rem;
}

#topMainVisualArea .subLead {
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    text-shadow: 0px 0px 5px rgba(255,255,255,1);
}
@media screen and (max-width: 500px) {
    #topMainVisualArea .leadText {
        font-size: 1.85rem
    }
}
#topIntroArea {
    background: #000
}
#topIntroArea.login {
    background: none;
    padding-top: 6.4375rem;
}
#topIntroArea .introInner {
    background: #000;
    max-width: 1000px;
    margin: 0 auto 0rem;
    padding: 0 2rem 2rem;
    color: #fff;
    text-align: center;
    position: relative;
}
#topIntroArea .introInner:before  {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3.4375rem 3.4375rem 3.4375rem;
    border-color: transparent transparent #000000 transparent;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -3.4375rem;
}
#topIntroArea .introInner:after {
    content: "";
    display: block;
    position: absolute;
    width: 3.75rem;
    /*     height: 3.875rem; */
    aspect-ratio: 1 / 1;
    border: 1px solid #c4ac6d;
    border-width: 2px 2px 0 0;
    transform: translate(-50%,-50%) rotate(-45deg);
    top: 0;
    left: 50%;
}
#topIntroArea .introInner .closeIntro {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}
#topIntroArea .introInner .closeIntro span {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
#topIntroArea .introInner .closeIntro span:after,
#topIntroArea .introInner .closeIntro span:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    top: 50%;
    left: 0;
    margin-top: -1px;
}
#topIntroArea .introInner .closeIntro span:after {
    transform: rotate(45deg);
}
#topIntroArea .introInner .closeIntro span:before {
    transform: rotate(-45deg);
}
#topIntroArea .introInner .icon {
    width: 1.875rem;
    margin: 0 auto 0.5rem;
    transform: translateY(-0.75rem);
}
#topIntroArea .introInner .introTtl {
    font-size: 1.75rem;
    color: #c4ac6d;
    margin-bottom: 1rem
}
#topIntroArea .introInner .introText {
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 1rem
}

#topIntroArea .introInner .inputSet {
    font-size: 0.875rem;
    margin-top: 1.25rem
}
#topIntroArea .introInner .inputSet .inputWrap {
    justify-content: center;
}
#topIntroArea .introInner .input {
    color: #000000;
}

.secHead {
    margin-bottom: 2.5rem;
    /* margin-bottom: 2rem; */
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.secHead.row {
    flex-direction: column;
}
.secHead.row .lead {
    margin-top: 1rem
}
.secHead h2 {
    width: 100%;
    font-size: 1.75rem;
    text-align: center;
    /* margin-bottom: 1.5rem; */
}
.secHead .more {
    position: absolute;
    right: 0;
}
.secHead .more a {
    display: flex;
    width: 8.375rem;
    height: 1.875rem;
    border: 1px solid #000;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    position: relative;
    background: #fff;
}
.secHead .more a:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.75rem;
    height: 1px;
    background: #000
}
.secHead .more a.color2 {
    color: #cc0000;
    border-color: #cc0000;
}
.secHead .more a.color2:after {
    background: #cc0000;
}
@media screen and (max-width: 500px) {
    .secHead {
        flex-wrap: wrap;
    }
    .secHead .more {
        position: static;
        margin-top: 0.25rem;
        margin-left: auto
    }
}
.compText {
    text-align: center;
    color: #eb1c24;
    font-size: 0.875rem;
    margin-bottom: 2.5rem;
    margin-top: -1rem;
}
.compText p {
    text-align: left;
    display: inline-block;
}
#topProjectArea .bgGray h2 {
    color: #fff
} 
#topProjectArea .sortMenuWrap {
    display: flex;
    border: 1px solid #000;
    border-width: 1px 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5046296296296297) 50%, rgba(255,255,255,0) 100%);
    font-size: 0.875rem;
    align-items: center;
    padding: 0.25rem 0rem;
    /* flex-wrap: wrap; */
    margin-bottom: 2.5rem;
    white-space: nowrap;
    word-break: keep-all;
    justify-content: center;
}
#topProjectArea .sortMenuWrap > div {
    padding: 0.5rem 1.75rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
}
#topProjectArea .sortMenuWrap > div:not(:last-child) {
    border-right: 1px solid #000;
}
#topProjectArea .sortMenuWrap dl {
    display: flex;
    align-items: center;
}
#topProjectArea .sortMenuWrap dl dt {
    display: flex;
    margin-right: 1.25rem;
    align-items: center;
    width: 5.5rem;
}
#topProjectArea .sortMenuWrap dl dd {
    max-width: calc(100% - 5.5rem)
}
#topProjectArea .sortMenuWrap dl dt .icon {
    margin-right: 0.5rem;
}
#topProjectArea .sortMenuWrap dl dt .icon img {
    height: 1.5rem;
    width: auto;
    max-width: 100px;
}
#topProjectArea .sortMenuWrap .sortMenu {
    display: flex;
    flex-wrap: wrap;
}
#topProjectArea .sortMenuWrap .sortMenu li {
    padding: 0 .5rem
}
#topProjectArea .sortMenuWrap .sortMenu li a {
    display: flex;
    padding: 0 0.5em;
    line-height: 1;
    height: 1.875rem;
    align-items: center;
    transition: .25s;
    transition-property: background,color;
    border-radius: 4px;
    vertical-align: middle;
}
#topProjectArea .sortMenuWrap .sortMenu li.current a,
#topProjectArea .sortMenuWrap .sortMenu li:hover a {
    background: #000;
    color: #fff;
}

#topProjectArea .sortMenuWrap .area button {
    height: auto;
    background: #000;
    color: #fff;
    outline: none;
    border: none;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}
#topProjectArea .sortMenuWrap dl dd .inputCol {
    width: calc(100% - 3.5rem);
}
#topProjectArea .sortMenuWrap dl dd .inputCol input {
    width: 100%
}
#topProjectArea .sortMenuWrap dl dd .btnCol {
    width: 3.5rem;
}
@media screen and (max-width: 1000px) {
    #topProjectArea .sortMenuWrap {
            flex-wrap: wrap;
            width: auto;
            justify-content: center;
            padding: 0.25rem 1rem;
    }
    #topProjectArea .sortMenuWrap .area {
        order: 1;
    }
    #topProjectArea .sortMenuWrap .sort {
        order: 2;
        border-left: none;
    }
    #topProjectArea .sortMenuWrap .more {
        order: 3;
    }
    #topProjectArea .sortMenuWrap > div {
        width: 100%;
        justify-content: center;
    }
    #topProjectArea .sortMenuWrap > div:not(:last-child) {
        border-bottom: 1px solid #555;
        border-right: none;
    }
    #topProjectArea .sortMenuWrap dl {
        justify-content: flex-start;
        /* width: 80%; */
    }
}
@media screen and (max-width: 768px) {
    #topProjectArea .sortMenuWrap dl {
        
/* flex-wrap: wrap; */
    }
}


/*　----- 
EVP4Uについて 
--------------- */
#aboutWrap {
    color: #fff;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(35,42,50,1) 100%);
}
#aboutWrap .sec {
    background:  url(/images/about/bg.svg) no-repeat center bottom;
    background-size: 100% auto;
}
@media screen and (min-width: 769px) and (max-width: 1366px) {
    #aboutWrap .sec {
        background-size: 1366px auto;
    }
}
#aboutWrap .inner {
    max-width: 1000px
}
#aboutMainVisual {
    color: #000;
    position: relative;
}
#aboutMainVisual .textArea {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    font-weight: bold;
    left: 10%;
    width: 90%;
    text-shadow: 0 0 3px rgba(255,255,255,1);
}
#aboutMainVisual .textArea .lead {
    font-size: 156.25%;
    /* max-width: 1080px; */
    margin: auto;
}
#aboutMainVisual .textArea h1 {
    font-size: 550%;
    line-height: 1;
    text-align: left;
    /* max-width: 1080px; */
    margin: auto;
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
    #aboutMainVisual {
        height: 484px;
    }
    #aboutMainVisual .img {
        width: 1366px;
        position: absolute;
        left: 50%;
        margin-left: -683px
    }
}
@media screen and (max-width: 768px) {
    #aboutMainVisual {
        /* height: 484px; */
        width: 100%;
        overflow: hidden;
    }
    #aboutMainVisual .img {
        width: 250%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    #aboutMainVisual .textArea {
        top: 50%;
        left: 0;
        width: 100%;
        padding-left: 2rem;
        font-size: 0.8rem;
    }
}
#aboutWrap .leadArea {
    text-align: center;
}
#aboutWrap .leadArea h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5em;
}
#aboutWrap .leadArea .lead {
    line-height: 1.875
}
#aboutWrap .aboutBoxArea {
    position: relative;
    padding: 4rem 0 7rem;
    margin: 4rem 0 2rem;
    z-index: 0;
}
#aboutWrap .aboutBoxArea:after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #fff;
    left: 50%;
    top: 0;
    position: absolute;
    z-index: -1;
}
#aboutWrap .aboutBoxArea .aboutBox {
    display: flex;
    justify-content: space-between;
}
#aboutWrap .aboutBoxArea .aboutBoxList > li:nth-child(even) {
    flex-direction: row-reverse;
}
#aboutWrap .aboutBoxArea .aboutBoxList > li:not(:first-child) {
    margin-top: 6rem;
}
#aboutWrap .aboutBoxArea .aboutBox > * {
    width: 43%;
}
#aboutWrap .aboutBoxArea .aboutBox .textArea h3 {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem
}

#aboutWrap .aboutBoxArea .aboutBoxList > li:nth-child(odd) .textArea h3 {
    text-align: right
}
#aboutWrap .aboutBoxArea .aboutBox .textArea h3:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 1px;
    background: #fff;
    left: 0;
    bottom: 0;
}
#aboutWrap .aboutBoxArea .aboutBoxList > li:nth-child(even) .textArea h3:after {
    right: 0;
    left: auto;
}
#aboutWrap .aboutBoxArea .aboutBox .textArea .leadText {
    line-height: 1.875
}
#aboutWrap .aboutBoxArea .aboutBox .textArea .leadText .anno {
    background: #c4ac6d;
    color: #000;
    padding: 1em;
    margin-top: 1em
}
#aboutWrap .aboutBoxArea .aboutBox .imgArea {
    position: relative;
    z-index: 10
}
#aboutWrap .optionArea h2 {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 2em;
    line-height: 1.8;
}
#aboutWrap .optionArea h2 span {
    display: inline-block;
    border-bottom: 3px solid #c4ac6d;
}
#aboutWrap .optionArea .optionList {
    display: flex;
    justify-content: space-between;
}
#aboutWrap .optionArea .optionList li {
    width: 32%;
    max-width: 320px;
    /* background: #fff; */
    color: #000;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-bottom: 2rem;
}
#aboutWrap .optionArea .optionList li .text {
    font-size: 1.375rem;
    font-weight: bold;
    min-height: 4.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    position: relative;
    overflow: hidden;
}
#aboutWrap .optionArea .optionList li:after {
    content: "";
    display: block;
    position:absolute;
    right: 2.75rem;
    bottom: 0;
    width: 200%;
    height: 100%;
    background: #fff;
    transform: skew(-45deg);
    transform-origin: right bottom;
    z-index: -1;
}
@media screen and (max-width: 1000px) {
    #aboutWrap .optionArea .optionList li:after {
        right: 1.75rem;
    }
}
#aboutWrap .optionArea .opText {
    text-align: center;
    padding: 3rem 0 1.25rem;
}
.aboutTicketStepWrap h2 {
    text-align: center;
    font-size: 1.75rem;
    padding: 2.5rem 0 2.5rem;
}
.aboutTicketStepWrap .addText {
    text-align: center;
}
.aboutTicketStep {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.aboutTicketStep li {
    width: calc(100% / 3);
    position: relative;
    display: flex;
    /* align-items: stretch; */
}
.aboutTicketStep li .ttlArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.aboutTicketStep li .stepTtl {
    text-align: center;
    position: relative;
}
.aboutTicketStep li .stepTtl:before,
.aboutTicketStep li .stepTtl:after {
    content: "";
    width: 100%;
    height: 2px;
    background: #c4ac6d;
    display: block;
    position: absolute;
    top: 50%
}
.aboutTicketStep li .stepTtl:before {
    right: 50%
}
.aboutTicketStep li .stepTtl:after {
    left: 50%
}
.aboutTicketStep li:first-child .stepTtl:before,
.aboutTicketStep li:last-child .stepTtl:after {
    display: none
}
.aboutTicketStep li .stepTtl img {
    width: 5.875rem;
    position: relative;
    z-index: 10;
}
.aboutTicketStep .stepBox {
    padding: 4rem 4% 0;
    width: 100%;
    display: flex;
}
.aboutTicketStep .stepBoxInner {
    background: #f5f7f9;
    padding: 3rem 1.6rem 2rem;
    /* margin-top: -1.5rem; */
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.aboutTicketStep .stepBoxInner .ttl {
    text-align: center;
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.aboutTicketStep .stepBoxInner .img {
    margin-bottom: 2rem;
}
.aboutTicketStep .stepBoxInner .text {
    line-height: 1.875;
    display: inline-block;
    text-align: left;
}
@media screen and (max-width: 768px) {
    #aboutWrap .aboutBoxArea:after {
        left: 1rem;
    }
    #aboutWrap .aboutBoxArea .aboutBox {
        flex-direction: column!important;
        padding-left: 2rem;
    }
    #aboutWrap .aboutBoxArea .aboutBox > * {
        width: 100%
    }
    #aboutWrap .aboutBoxArea .aboutBoxList > li:nth-child(odd) .textArea h3 {
        text-align: left
    }
    #aboutWrap .aboutBoxArea .aboutBox .textArea {
        margin-bottom: 2rem;
        /* padding-left: 2rem; */
    }
    #aboutWrap .aboutBoxArea .aboutBox .textArea h3:after {
        left: -3rem;
    }
    #aboutWrap .aboutBoxArea .aboutBox .imgArea {
        text-align: center;
    }
    #aboutWrap .aboutBoxList li:nth-child(2) .imgArea img {
        width: 70%;
    }
    #aboutWrap .optionArea .optionList {
        flex-wrap: wrap;
    }
    #aboutWrap .optionArea .optionList li {
        width: 49%;
    }
    #aboutWrap .optionArea .optionList li:last-child {
        margin: 0 auto 0rem;
    }
    .aboutTicketStep {
        flex-direction: column;
        max-width: 500px;
        margin: 0 auto 2rem;
    }
    .aboutTicketStep li {
        width: 100%;
        display: block;
    }
    .aboutTicketStep li:not(:first-child) {
        margin-top: 3rem
    }
    .aboutTicketStep li .ttlArea {
        position: static
    }
    .aboutTicketStep li .stepTtl img {
        width: 4rem
    }
    .aboutTicketStep li .stepTtl {
        text-align: left;
        position: static;
    }
    .aboutTicketStep li .stepTtl:after {
        width: 2px;
        height: calc(100% + 3rem);
        top: 2.9375rem;
        top: 0;
        left: 2.9375rem;
        left: 2rem;
    }
    .aboutTicketStep li .stepTtl:before {
        display: none;
    }
    
    .aboutTicketStep li:last-child .stepTtl:after {
        display: block;
        height: 100%;
    }
    .aboutTicketStep .stepBox {
        padding-top: 0;
        margin-top: -2rem;
        display: block;
        padding: 0 0 0 3rem;
        /* max-width: 400px; */
    }
    .aboutTicketStep .stepBoxInner {
        display: block;
        /* margin-top: -1rem; */
    }
    .aboutTicketStep .stepBoxInner .img {
        text-align: center;
    }
    .aboutTicketStep .stepBoxInner .img img {
        max-width: 300px
    }
}
@media screen and (max-width: 500px) {
    #aboutWrap .optionArea .optionList li {
        width: 100%;
        margin: 0 auto 2rem;
    }
}

/*　----- 
プロジェクト 
--------------- */
.projectList > li {
    display: flex;
    box-shadow: 2px 2px 1rem -0.3rem rgba(0,0,0,0.5);
    justify-content: space-between;
    position: relative;
    /* background: #fff; */
    overflow: hidden;
}
.projectList.ptn2 > li {
    background: #ccc
}
.projectList > li.off {
    position: relative;
}
.projectList > li:not(:first-child) {
    margin-top: 2.5rem
}
.projectList.ptn2 > li .cancelBtn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    z-index: 10;
    background: #c3ab6d;
    width: 2.8125rem;
    height: 3.4375rem;
    display: flex;
    font-size: 0.75rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.projectList.ptn2 > li .cancelBtn svg {
    width: 1.6325rem
}
.projectList.ptn2 > li .cancelBtn g {
    fill: #fff;
}
.projectList.ptn2 > li.finish:after {
}
@media screen and (max-width: 768px) {
    .projectList.ptn2 > li .cancelBtn {
        right: auto;
        left: 0;
    }
    .projectList.ptn2 > li.finish:after {
        left: 2.8125rem;
    }
}
.projectList > li .mainArea:after {
    content: "";
    display: block;
    /* border-left: 5px dotted transparent; */
    width: 5px;
    height: 100%;
    right: 14.375rem;
    left: 100%;
    position: absolute;
    background: url(/images/common/dotted.svg) repeat-y 
center top;
    background-size: contain;
}
.projectList > li .mainArea {
    display: flex;
    width: calc(100% - 14.375rem - 5px);
    width: calc(75% - 5px);
    background: #fff;
    position: relative;
    align-items: center;
}
.projectList > li .mainArea .imgArea {
    width: 37.5%;
    width: 15rem;
}
.projectList > li .mainArea .textArea {
    width: 62.5%;
    width: calc(100% - 15rem);
    padding: 0.5rem 2rem;
}
.projectList > li .mainArea .textArea .projectName {
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.75;
    margin-bottom: 1rem;
}
.projectDate {
    display: flex;
    margin-bottom: 1.5rem;
}
.detailArea {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
}
.projectDate dt {
    width: 4em;
    padding-bottom: 0.25rem
}
.projectDate dd {
    padding-bottom: 0.25rem
}
.detailArea > div {
    width: 50%;
    padding-right: 2rem;
}
.detailArea .ttl {
    display: flex;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.detailArea .ttl .icon {
    width: 1.25rem;
    margin-right: 0.5rem;
}
.detailArea .data {
    display: flex;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    align-items: center;
}
.detailArea .data .small {
    font-size: 1rem;
    margin: 0 .25em;
}
.grafArea {
    padding-right: 2rem;
    margin-top: 1.5rem;
}
.grafArea .grafWrap {
    background: #dbdbdb;
    width: 100%;
    height: 1.25rem;
    border-radius: 10000px;
    overflow: hidden;
    display: flex;
}
.grafArea .grafWrap li {
    width: 100%;
}
.grafArea .grafWrap li[class*="step"] {
    width: 25%;
}
.grafArea .grafWrap li span.grafBar {
    display: block;
    height: 100%;
    background: #eb1c24;
    width: 0;
    border-radius: 0 100px 100px 0;
}
.grafArea .grafWrap.step1 li:nth-child(-n+1) span {
    width: 100%;
    border-radius: 0;
}
.grafArea .grafWrap.step2 li:nth-child(-n+2) span {
    width: 100%;
    border-radius: 0;
}
.grafArea .grafWrap.step3 li:nth-child(-n+3) span {
    width: 100%;
    border-radius: 0;
}
.grafArea .grafWrap.step4 li:nth-child(-n+4) span {
    width: 100%;
    border-radius: 0;
}
.projectList > li .ticketArea {
    width: 14.375rem;
    width: 25%;
    background: #fff;
    position: relative;
    font-size: 0.875rem;
    padding: 2rem 2rem;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.projectList > li .ticketArea:after {
    content: "";
    display: block;
    position: absolute;
    width: 10rem;
    height: 2.25rem;
    background: #000;
    left: 100%;
    top: 0;
    transform: translate(-50%,0) rotate(45deg);
    transform-origin: center top;
}
.projectList.ptn2 > li .ticketArea:after {
    content: none;
}
.projectList > li .ticketArea .detailArea {
    width: 100%;
}
.projectList > li .ticketArea .detailArea li:not(:first-child) {
    margin-top: .75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #000;
}
.projectList > li .ticketArea p.ttl {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.projectList > li .ticketArea p.ttl .icon {
    width: 1rem;
    margin-right: .75rem
}

.projectList > li .ticketArea .btnArea {
    width: 100%;
    margin-top: auto;
}
.projectList.ptn2 > li.finish .ticketArea .btnArea {
    position: relative;
    z-index: 11;
}
.projectList.ptn2 > li.finish .ticketArea .btn {
    pointer-events: all;
}
.projectList > li .ticketArea .btnArea .btn {
    background: #000;
    color: #c4ac6d;
    justify-content: flex-start;
    padding: 0 1rem;
    height: 3.125rem;
}
.grafArea .grafText {
    display: flex;
    position: relative;
    margin-top: 0.175rem;
    height: 2rem;
}
.grafArea .grafText li {
    /* width: 25%; */
    /* width: 20%; */
    position: relative;
    /* padding-top: 1.25rem; */
    font-size: 0.875rem;
    padding-left: 0.5rem;
    position: absolute;
    /* transform: translateX(-50%); */
    /* padding-top: 1rem; */
    height: 2rem;
}
.grafArea .grafText li.start {
    left: 0;
}
.grafArea .grafText li.step1 {
    left: 25%;
}
.grafArea .grafText li.step2 {
    color: #eb1c24;
    left: 50%
}
.grafArea .grafText li.step3 {
    left: 75%;
}
.grafArea .grafText li.step4 {
    left: 50%
}
.grafArea .grafText li:last-child {
    position: absolute;
    left: 98%;
}
.grafArea .grafText li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1rem;
    background: #000;
    /* left: 50%; */
}
.grafArea .grafText li.step2:before {
    background: #000
}
.grafArea .grafText li.step2.special:before {
    background: #eb1c24
}
@media screen and (max-width: 960px) {
    .projectList > li {
        flex-wrap: wrap;
    }
    .projectList > li .mainArea {
        width: 100%;
        padding: 1rem;
    }
    .projectList > li .ticketArea {
        width: 100%;
        margin-top: 5px;
        justify-content: space-between;
        align-items: center;
    }
    .projectList > li .mainArea:after {
        height: 100vw;
        top: auto;
        bottom: 0px;
        transform: rotate(90deg);
        left: 0;
        transform-origin: left bottom;
        /* background: #000; */
    }
    .projectList > li .ticketArea:after {
        top: auto;
        bottom: 0;
        transform: translate(-50%,0) rotate(-45deg);
        transform-origin: center bottom;
    }
    .projectList > li .ticketArea .detailArea {
        width: calc(100% - 18rem);
    }
    .projectList > li .ticketArea .btnArea {
        width: 16rem;
        margin-top: 0;
    }
}
@media screen and (max-width: 768px) {
    .projectList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
    .projectList > li {
        flex-wrap: wrap;
        /* width: 49%; */
        margin-top: 0!important;
        margin-bottom: 2rem;
        max-width: 550px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    .projectList > li .mainArea {
        flex-wrap: wrap;
        display: block;
    }
    .projectList > li .mainArea .imgArea {
        width: 45%;
        text-align: center;
        float: left;
        margin-bottom: 2rem;
    }
    .projectList > li .mainArea .textArea {
        width: 100%;
        padding: 1.75rem 0rem 1.75rem;
        padding: 0.75rem 0rem 1.75rem;
    }
    .projectList > li .mainArea .textArea .projectName {
        margin-left: 48%;
    }
    .projectDate {
        margin-left: 48%
    }
    .detailArea {
        margin-left: 48%
    }
    .detailArea > div {
        width: 100%;
        padding-right: 0;
    }
    .detailArea > div:not(:first-child) {
        margin-top: 1.5rem
    }
    .grafArea {
        padding: 0 0.5rem;
        clear: both;
        margin-top: 2rem;
    }
    .grafArea .grafText li {
        font-size: 0.75rem;
        transform: translateX(-50%);
        padding-top: 1rem;
        padding-left: 0;
    }
    .grafArea .grafText li.start {
        padding-left: 1em;
        left: 1%;
    }
    .grafArea .grafText li.step4 {
        padding-right: 1em;
        left: 99%;
    }
    .grafArea .grafText li:before {
        left: 50%;
    }
    .projectList > li .ticketArea {
        flex-direction: column;
    }
    .projectList > li .mainArea:after {
        height: 100vw;
        top: auto;
        bottom: 0px;
        transform: rotate(90deg);
        left: 0;
        transform-origin: left bottom;
        /* background: #000; */
    }
    .projectList > li .ticketArea:after {
        top: auto;
        bottom: 0;
        transform: translate(-50%,0) rotate(-45deg);
        transform-origin: center bottom;
    }
    .projectList > li .ticketArea .detailArea {
        width: 100%;
        margin-left: 0;
    }
    .projectList > li .ticketArea .btnArea {
        width: 100%;
        margin-top: 1rem;
    }
}
@media screen and (max-width: 640px) {
    .projectList > li {
        width: 100%;
        /* max-width: 500px; */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    .grafArea .grafWrap {
        height: 1rem
    }
}
@media screen and (max-width: 500px) {
    .projectList > li .mainArea .imgArea {
        width: 100%;
        float: none;
    }
    .projectList > li .mainArea .textArea .projectName {
        width: 100%;
        margin-left: 0;
    }
    .projectDate {
        margin-left: 0;
    }
    .detailArea {
        margin-left: 0;
    }
}

.sliderWrap {
    padding: 0 0.5rem;
}
.sliderWrap .projectSlider {
    /* width: 100%; */
}
.sliderWrap .artistSlider .sliderItem {
    padding: 1.5rem 0 0.5rem;
    max-width: 500px;
}
.sliderWrap .sliderItem {
    background: #fff;
    /* margin: 0 0.5rem; */
    max-width: 230px;
    height: 100%;
}
.sliderWrap .sliderItem a {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sliderWrap .sliderItem a.finish .img {
    position: relative;
}
.sliderWrap .sliderItem a.finish .img:after {
    content: "終了したプロジェクト";
    position: absolute;
    background: #cc0000;
    color: #fff;
    font-size: 0.875rem;
    left: 0;
    top: 0;
    padding: 0.7rem;
}
.bgWhite .sliderWrap .sliderItem {
    background: #f5f7f9
}
.sliderWrap .sliderItem p.img {
    /* margin-bottom: 0.5rem; */
}
.sliderWrap .sliderItem .textArea {
    padding: 0.5rem;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.sliderWrap .sliderItem p.projectTtl {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: bold;
}
.sliderWrap .sliderItem .projectDetail {
    position: relative;
    padding-top: 1rem;
    font-size: 0.875rem;
}
.sliderWrap .sliderItem .projectDetail:before {
    content: "";
    display: block;
    position: absolute;
    width: 30%;
    left: 35%;
    top: 0;
    height: 2px;
    background: #c4ac6d;
}
.sliderWrap .sliderItem .projectDetail p.ttl {
    margin-bottom: 0.5em
}
.sliderWrap .sliderItem .projectDetail p.artistName {
    line-height: 1.8
}
.sliderWrap .sliderItem .projectDetail p.artistName span {
    word-break: break-word
}
.sliderWrap .sliderItem .priceArea {
    margin-bottom: 0.5rem
}
.sliderWrap .sliderItem .priceArea .head {
    display: flex;
    font-size: 0.875rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sliderWrap .sliderItem .priceArea .price {
    font-size: 1.375rem;
    font-weight: bold;
}
.sliderWrap .sliderItem .priceArea .head .icon {
    width: 0.9em;
    margin-right: 0.25em;
    margin-bottom: 0.125em;
}
.sliderWrap .sliderItem .labelArea {
    color: #fff;
    background: #000;
    line-height: 1;
    font-size: 0.875rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
.bgInner .sliderWrap .sliderItem .labelArea {
    background: #c4ac6d;
}
.sliderWrap .sliderItem .labelArea .textWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sliderWrap .sliderItem .labelArea .large {
    font-size: 1.375rem;
    font-weight: bold;
    margin-left: 0.25rem;
}


/* -------
 下層ページ
----------------- */
.underMain h1 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
}
.underMain h1.favorite {
    padding: 0 5rem;
}
.underMain .headWrap .newsLabel {
    font-size: 1.375rem;
    margin: 0 auto 0.75rem
}
.underMain #favoriteArea + h1 {
    padding: 0 2.25rem;
}
.underMain .headWrap {
    margin-bottom: 0rem;
    text-align: center;
    position: relative;
}
.underMain .headWrap .catchCopy {
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    color: #c4ac6d;
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.1); */
    background: #000;
    display: inline-block;
    max-width: calc(100% - 3rem);
}
.underMain .headWrap .leadText {
    padding-top: 1.25rem;
    line-height: 1.75;
    font-size: 1.125rem;
}
#favoriteArea {
    position: absolute;
    right: -2.5%;
    top: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
#favoriteArea.on .text {
    color: #000    
}
#favoriteArea .img svg {
    width: 2.25rem
}
#favoriteArea .text {
    font-size: 0.875rem;
    color: #555;
}
#favoriteArea svg path {
    fill: #f5f7f9;
    stroke: #555;
    transition: .25s;
}
#favoriteArea.on svg path {
    fill: #c3ab6d;
    stroke: #000;
}
@media screen and (max-width: 1200px) {
    #favoriteArea {
        right: 0;
    }
    .underMain #favoriteArea + h1 {
        padding: 0 4.4rem 0 0;
    }
}
@media screen and (max-width: 500px) {
    #favoriteArea {
        right: 5%;
        transform: none;
        top: 100%;
        top: 0;
        margin-top: -2rem;
    }
    .underMain #favoriteArea + h1 {
        padding: 2rem 0 0rem;
    }
}
.underMain .headWrap .headLeadArea {
    margin-top: 1rem
}
.underMain .headWrap .headLeadArea .ttl {
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.125rem;
}
.underMain .stepArea {
    /* text-align: center; */
}
.underMain .stepArea ul {
    display: flex;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    /* display: inline-flex; */
    /* justify-content: space-between; */
    flex-wrap: wrap;
}

.underMain .stepArea ul li {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.625rem;
    /* height: 5.625rem; */
    border: 1px solid;
    border-radius: 100%;
    color: #b1b1b1;
    margin: 0 3rem 1rem;
    /* margin: 0 5%; */
    background: #fff;
    position: relative;
    line-height: 1.4;
}
.underMain .stepArea ul li.active {
    border-width: 2px;
    color: #c4ac6d;
}
.underMain .stepArea ul li.active span {
    color: #000;
}
.underMain .stepArea ul li:not(:first-child):after {
    content: "";
    display: block;
    position: absolute;
    /* width: 6.5rem; */
    width: 125%;
    height: 1px;
    border-top: 1px solid;
    right: 100%;
    z-index: -1;
}
@media screen and (max-width: 500px) {
    .underMain .stepArea ul {
        font-size: 0.75rem;
        flex-wrap: nowrap;
    }
    .underMain .stepArea ul li {
        margin: 0 1.5rem 1rem;
        width: 4.5rem;
        /* height: 4.5rem; */
    }
}
.underMain .headWrap .errText {
    color: #eb1c24;
    font-size: 0.875rem;
}
.underMain h3 {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.8;
}
.underMain .ttlWrap {
    padding: 0 4%;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
.underMain .ttlWrap.btnType {
    align-items: center;
}
.underMain .ttlWrap h3 {
    margin-right: 1rem
}
.underMain .ttlWrap.btnType h3 {
    margin-right: 2rem;
    min-width: 10rem
}
.underMain .ttlWrap .anno {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0;
}

.underMain .headAnnoArea {
    max-width: 800px;
    margin: auto;
}
.underMain .headAnnoArea p.ttl {
    color: #eb1c24;
    font-size: 1.125rem;
    margin-bottom: 1rem
}
.underMain .headAnnoArea ul {
    font-size: 0.875rem;
    padding-left: 0.5em;
    text-indent: -0.5em;
    line-height: 1.8;
    padding-bottom: 1rem
}


.underMain .formBox {
    padding: 0 4%;
}
.underMain .formBox.bgGray {
    background: #f6f8fa;
    padding: 1.25rem 4%
}
.underMain .formBox.login.bgGray {
    padding: 3rem 4% 2.5rem;
}
.underMain .formList dd {
    /* max-width: 830px; */
}
.underMain .formList .customForm {
    background: #fff;
    padding: 0 4% 1rem;
    margin-top: 0.5rem;
    display: none;
}
.underMain .login .formList {
    max-width: 600px;
    margin: auto
}
.underMain .formList > div {
    padding: 1.25rem 0 2.5rem;
}
.underMain .formList > div.btnType {
    position: relative;
    padding-right: 13.75rem;
}
.underMain .formList > div:last-child {
    padding-bottom: 1.25rem;
}
.underMain .formList > div + div {
    border-top: 1px solid #cacaca;
}
.underMain .formList dt {
    margin-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-items: baseline;
    line-height: 1.7;
}
.underMain .formList dt.repeat {
    font-size: 87.5%;
}
.underMain .formList dt + dt {
    margin-top: 1rem;
}
.underMain .formList dd + dt {
    margin-top: 1.25rem;
}
.underMain .formList dt .ttlArea {
    display: flex;
    margin-right: 1.25rem;
    align-items: center;
    /* line-height: 1; */
}

.underMain .formList dt .ttlArea.required .ttl {
    min-width: 8em;
}
.underMain .formList dt .ttlArea .requiredIcon {
    background: #eb1c24;
    color: #fff;
    font-weight: 500;
    height: 1.25rem;
    width: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    margin-left: 0.5em;
}
.underMain .formList dt .anno {
    font-size: 87.5%;
}
.underMain .formList > div.btnType .btnWrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
.underMain .smallBtnWrap.btnWrap {
    margin: 0
}
.underMain .formList > div.btnType .btnWrap .btns,
.underMain .smallBtnWrap.btnWrap .btns {
    width: 13.75rem;
    max-width: 13.75rem;
    margin: 0;
    min-width: 0;
}
.input {
    max-width: 830px;
}
.input input,
.input select,
.input textarea {
    border: 1px solid #cacaca;
    height: 3.125rem;
    font-size: 1rem;
    padding: 0.25rem 1rem;
    width: 100%;
    max-width: 830px;
}
.input textarea {
    height: 15.625rem;
}
.input.err input,
.input.err select,
.input.err textarea {
    border-color: #cc0000;
}

.input.password {
    position: relative;
}
.input.password a {
    display: block;
    position: absolute;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: url(/images/common/icon_pw_view.svg) no-repeat center;
    background-size: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
}
.input.password a:after {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 120%;
    background: #979797;
    border: 1px solid #fff;
    border-width: 0 1px;
    left: 50%;
    top: 50%;
    transform: translate(-2px,-50%) rotate(45deg);
    opacity: 0
}

.input.password a.on:after {
    opacity: 1;
}
.input.password input {
    padding-right: 4rem;
}
.input .confirmText {
    min-height: 2.125rem;
    display: flex;
    align-items: center;
    word-break: break-all;
}
.underMain .formList .inputColWrap {
    display: flex;
    align-items: center;
}
.underMain .formList .inputColWrap .inputCol {
    /* width: 40%; */
    max-width: 15.625rem;
    margin-right: 1rem;
}
.underMain .formList .input.sizeS {
    max-width: 15.625rem;
}

.underMain .formList dd .errText {
    color: #eb1c24;
    font-size: 87.5%;
    margin-bottom: -1em;
    margin-top: 0.25rem;
}
.underMain .btnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2rem;
    flex-wrap: wrap;
}
.underMain .formBox .btnWrap {
    margin-top: 2rem
}
.underMain .btnWrap .btns {
    max-width: 23.75rem;
    margin: 0 1.5rem 1rem;
    width: 100%;
    min-width: 15rem;
}
#requestAddBtn {
    background: #f6f8fa;
    border: 1px dotted #000;
}
#requestAddBtn:before,
#requestAddBtn:after {
    content: none;
}
#requestAddBtn span:before {
    content: "";
    width: 2rem;
    height: 2rem;
    display: inline-block;
    background: url(/images/common/icon_add.svg) center;
    vertical-align: middle;
    margin-bottom: 0.25rem;
    margin-right: 0.5rem;
    margin-left: -0.5rem;
}
.underMain .btnWrap .btn {
    width: 100%;
    max-width: 100%;
    font-size: 1.125rem;
    font-weight: bold;
    height: 4.375rem;
}
.underMain .btnWrap .btn.smallBtn {
    height: 3.125rem;
}
.underMain .thanksArea {
    text-align: center;
}
.underMain .thanksArea .thanksText {
    margin-top: 2rem;
    line-height: 1.75;
}
@media screen and (max-width: 500px) {
    .underMain .formList dd .errText {
        font-size: 75%
    }
}

.underMain .caseArea {
    max-width: 800px;
    margin: auto;
    line-height: 1.5;
}
.underMain .caseArea .ttl {
    color: #eb1c24;
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem
}
.underMain .caseArea .caseList li:not(:first-child) {
    margin-top: 1.5rem;
}
.underMain .caseArea .caseList li .caseTtl {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}
.underMain .caseArea .caseList li .text {
    font-size: 0.875rem
}

@media screen and (max-width: 500px) {
    .underMain .formList > div.btnType {
        padding-right: 11rem;
        padding-right: 0;
    }
    .underMain .formList > div.btnType .btnWrap {
        position: static;
        transform: none;
        margin-top: 1rem;
    }
    .underMain .formList > div.btnType .btnWrap .btns, .underMain .smallBtnWrap.btnWrap .btns {
        /* width: 10rem; */
    }
}

/* --------
プロジェクトページ
----------------- */
.underMain .headWrap .projectLabel {
    display: flex;
    font-size: 0.875rem;
    justify-content: center;
    flex-wrap: wrap;
}
.underMain .headWrap .projectLabel li {
    padding: 0 1.75rem 0.5rem;
    align-items: center;
}
.underMain .headWrap .projectLabel li p {
    display: flex;
}
.underMain .headWrap .projectLabel li p .icon {
    margin-right: 0.75em
}
.underMain .headWrap .projectLabel li p .icon img {
    height: 1.25em;
}
.bankSelectArea {
    padding-top: 0.5rem
}
.bankSelectArea ul {
    display: flex;
    flex-wrap: wrap
}
.bankSelectArea ul li {
    /* margin-bottom: 0.5rem; */
}
.bankSelectArea ul li label {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}
.bankSelectArea ul li.other {
    width: 100%;
    /* display: flex; */
    align-items: center;
    padding-top: 1.5rem;
    flex-wrap: wrap;
}
.bankSelectArea ul li.other .inputColWrap {
    margin-bottom: 0.5rem
}
.bankSelectArea ul li.other .inputColWrap.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}
.bankSelectArea ul li.other .inputColWrap.disabled input {
    background: #ccc;
}
.bankSelectArea .inputBtnSelect .inputBtn {
    background: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    width: 10.025rem;
    height: 3.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}
.bankSelectArea .inputBtnSelect input:checked + .inputBtn {
    background: #c4ac6d;
    color: #000
}
.bankSelectArea .inputBtnSelect input {
    display: none;
}



.projectMainArea {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}
.projectMainArea .projectImgSliderArea {
    /* width: 55%; */
    width: calc(100% - 26.5625rem);
    width: 45%;
}
.projectMainArea .projectImgSliderArea .slider {
    margin-left: 0;
    margin-right: 0;
}
.projectMainArea .projectImgSliderArea .thumbSlide {
    margin-top: 1rem
}
.projectMainArea .projectDetailArea {
    /* width: 45%; */
    width: 26.5625rem;
    width: 55%;
    /* padding-left: 2.5rem; */
    width: calc(55% - 2.5rem);
    margin-left: 2.5rem;
}
.projectMainArea .projectDetailArea.off {
    position: relative;
}
.projectMainArea .projectItemArea {
    margin-bottom: 2rem
}
.projectMainArea .projectItemArea .projectItem > li:not(:first-child) {
    margin-top: 1.25rem;
}
.itemTtl {
    background: #000;
    color: #fff;
    line-height: 1.6;
    font-size: 1.375rem;
    position: relative;
    /* margin-bottom: 0.5rem; */
    /* z-index: 10; */
}
.projectMainArea .itemTtl:after {
    content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: -1;
    max-width: 700px;
}
.itemTtl .ttlInner {
    padding: 1.3725rem 1rem 1.3725rem 3.5rem;
    padding: 0.7rem 1rem 0.7rem 3.5rem;
    overflow: hidden;
    position: relative;
}
.itemTtl .ttlInner:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 2.5rem;
    left: 0;
    top: 0;
    transform-origin: left top;
    transform: skewX(-20deg);
    background: #c3ab6d;
}
.buyTicketList .ticketDetailArea .detailArea,.buyTicketList .ticketDetailArea .grafArea {
    padding: 1.5rem 2rem 0;
    margin: 0;
    display: flex;
}
.buyTicketList .ticketDetailArea .grafArea {
    display: flex;
    align-items: center;
}
.buyTicketList .ticketDetailArea .grafArea .perText {
    height: 2rem;
    display: block;
    line-height: 1.8;
    text-align: right;
    padding: 0 0.4rem 0 3rem;
    text-indent: -3rem;
    /* width: 100%; */
    /* filter: invert(100%) grayscale(70%) contrast(100); */
    font-weight: bold;
    color: #fff;
}
.buyTicketList .ticketDetailArea .grafArea .perText:first-line {
/*     color: #fff; */
}
.buyTicketList .ticketDetailArea .grafArea .grafWrap {
    height: 2rem;
    width: calc(100% - 7rem);
}
.buyTicketList .ticketDetailArea .grafArea .text {
    color: #eb1c24;
    font-size: 1.125rem;
    font-weight: 600;
    padding-left: 1rem;
    width: 7rem;
}
.projectMainArea .projectItemArea .projectItem li.off {
    
position: relative;
}
.projectMainArea .projectItemArea .projectItem .itemDetail {
    padding: 1rem 0 1rem 3rem;
}

.projectMainArea .projectItemArea .projectItem .itemDetail .detail {
    line-height: 1.4;
}
.projectMainArea .projectItemArea .projectItem .itemDetail .detail dt {
    /* float: left; */
    /* padding-right: 1rem; */
    margin-bottom: 0.25rem;
}
.projectMainArea .projectItemArea .projectItem .itemDetail .detail > div + div {
    margin-top: 1.25rem;
}
.projectMainArea .projectItemArea .addText {
    margin-top: 1.25rem;
}
.projectMainArea .projectItemArea .addText .option {
    color: #eb1c24;
    border: 1px solid;
    text-align: center;
    padding: 1.25rem 0.5rem
}
.projectMainArea .projectTicketArea {
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
    padding: 1.5rem 
}

.projectMainArea .projectTicketArea:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 1.5rem;
    left: 0;
    top: 0;
    transform-origin: left top;
    transform: skewX(-20deg);
    background: #c3ab6d;
}
.projectMainArea .projectTicketArea > .ttl {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}
.projectMainArea .projectTicketArea .detailArea {
    margin-left: 0;
    display: flex;
}
.projectMainArea .projectTicketArea .detailArea > div {
    margin-top: 0;
}
.projectMainArea .projectTicketArea .detailArea .ttl {
    padding-left: 1.25rem;
}
.projectMainArea .projectTicketArea .detailArea .ttl .icon {
}
.projectMainArea .projectTicketArea .detailArea .data {
}
@media screen and (max-width: 960px) {
    .projectMainArea .projectTicketArea .grafArea .grafText li {
        font-size: 0.75rem
    }
}
.projectMainArea .projectDetailArea .grafArea {
    padding-right: 4.5rem;
}
.projectMainArea .projectDetailArea .detailTop .btnWrap {
    margin: 2rem auto 0;
    max-width: 600px;
}
.buyTicketList > li:not(:first-child) {
    margin-top: 2rem
}
.ticketListInner {
    display: flex;
    justify-content: space-between;
    position: relative;
    box-shadow: 3px 3px 10px -5px rgba(0,0,0,0.3);
    overflow: hidden;
}
.off:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}
.off .offText {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7em;
    height: 1.4em;
    display: flex;
    transform: translate(-50%,-50%) rotate(-15deg);
    z-index: 10;
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
}
.off .offText.cancel {
    background: #eb1c24;
}
.off .offText.postpone {
    background: #4d4d4d;
}
.off.finish .finish {
    position: absolute;
    background: #cc0000;
    color: #fff;
    font-size: 0.875rem;
    left: 0;
    top: 0;
    padding: 0.7rem;
    z-index: 1;
}
.off .btn {
    pointer-events: none;
}
.buyTicketList .ticketDetailArea:after {
    content: "";
    width: 1rem;
    height: 100%;
    left: 100%;
    top: 0;
    content: "";
    display: block;
    /* border-left: 5px dotted transparent; */
    height: 100%;
    position: absolute;
    background: url(/images/common/dotted_2.svg) repeat-y 
center top -0.5rem;
    background-size: 100% auto;
}
.buyTicketList .ticketDetailArea {
    padding-right: 1.25rem;
    width: 55%;
    background: #fff;
    position: relative;
}
.buyTicketList .ticketDetailArea .btnArea {
    margin-top: 2rem;
}
.buyTicketList .ticketDetailArea .btn {
    max-width: 100%;
    background: #000;
    color: #c3ab6d;
    font-size: 1.125rem;
    justify-content: flex-end;
    padding-right: 2.5rem;
    border: none;
}
.buyTicketList .ticketOptionArea {
    /* margin-top: 3rem; */
    background: #fff;
    padding: 0 1.25rem 1rem;
    width: calc(45% - 1rem);
}
.buyTicketList .ticketOptionArea .ttlWrap {
    padding: 0;
    align-items: center;
    flex-wrap: nowrap;
    line-height: 1;
    margin-bottom: 1.25rem;
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel {
    width: 3.4rem;
    background: #c4ac6d;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 3.5rem;
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel span {
    
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel:before {
    content: "";
    display: block;
    width: 100%;
    height: 0.5rem;
    top: 100%;
    left: 0;
    background: #c5aa6f;
    position: absolute;
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1.7rem 0.5rem 1.7rem;
    border-color: transparent transparent #f6f8fa transparent;
    position: absolute;
    /* top: 100%; */
    left: 0;
    bottom: -0.5rem;
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel span {
    padding: 0.5rem 0 0.5rem;
}
.buyTicketList .ticketOptionArea .ttlWrap .text {
    padding: 0 0 0 0.75rem;
}
.buyTicketList .ticketOptionArea .ttlWrap .iconLabel img {
    width: 1.125rem;
}
.buyTicketList .ticketOptionArea .anno {
    color: #eb1c24;
    margin-bottom: 1rem;
}
.buyTicketBtns {
    margin-top: 2rem;
}
.buyTicketBtns .btnWrap {
    justify-content: space-between;
    margin: 0;
}
.buyTicketBtns .btnWrap .btns {
    max-width: calc(50% - 0.75rem);
    margin: 0 0 0.5rem;
    min-width: 0;
}
@media screen and (max-width: 768px) {
    .optionTable {
        font-size: 0.9rem
    }
    .ticketListInner {
        flex-direction: column;
    }
    .buyTicketList .ticketDetailArea {
        width: 100%;
        padding: 0 0 0.5rem;
    }
    .buyTicketList .ticketOptionArea {
        width: 100%;
        margin-top: 1rem;
        padding-top: 0.5rem;
    }
    .buyTicketList .ticketDetailArea:after {
        height: 100vw;
        top: auto;
        bottom: 0px;
        transform: rotate(90deg);
        left: 0;
        transform-origin: left bottom;
        margin-left: -0.5rem;
    }
}

.projectPurchaseDetail h2 {
    font-size: 1.375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.projectPurchaseDetail table {
    width: 100%;
}
.projectPurchaseDetail table tr:not(:last-child) {
    border-bottom: 1px dotted #000;
}
.projectPurchaseDetail table tr:first-child {
    border-top: 1px solid #000;
}
.projectPurchaseDetail table tr:last-child {
    border-bottom: 1px solid #000;
}
.projectPurchaseDetail table th {
    text-align: left;
}
.projectPurchaseDetail table th ,
.projectPurchaseDetail table td {
    padding: 0.75rem 1rem;
}

.optionTable {
    text-align: left;
    width: 100%;
    /* margin: 0.75rem 0; */
}
.optionTable th,
.optionTable td {
    padding: 0.3725em 0.5em;
    /* text-align: left; */
    font-weight: 500;
}
.optionTable thead tr {
    border-bottom: 1px solid;
}
.optionTable thead th {
    /* text-align: center; */
}
.optionTable tbody tr:not(:first-child) {
    border-top: 1px dotted #999;
}
.projectMainArea .buyTicketList .ticketOptionArea .btnWrap {
    margin: 0;
}
.projectMainArea .buyTicketList .ticketOptionArea .btn {
    height: 3.125rem;
}

@media screen and (max-width: 768px) {
    .projectMainArea {
        flex-wrap: wrap;
    }
    .projectMainArea .projectImgSliderArea {
        width: 100%;
        margin: 0 auto 3rem;
        max-width: 500px;
        padding: 0 1rem;
    }
    .projectMainArea .projectDetailArea {
        width: 100%;
        padding-left: 0;
        margin-left: 0;
    }
    .projectMainArea .projectDetailArea .grafArea {
        padding: 0 0.75rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

.projectDetailBottom {
    margin-top: 3rem;
    width: 100%;
}
.projectDetailBottom h2 {
    background: #c3ab6d;
    font-size: 1.375rem;
    padding: 0.5rem 1rem 0.5rem 4rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    line-height: 1.4;
    min-height: 4rem;
}
.projectDetailBottom h2:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 3rem;
    left: 0;
    top: 0;
    transform-origin: left top;
    transform: skewX(-35deg);
    background: #000;
}
.projectDetailBottom h2.type2 {
    background: #000;
    color: #c3ab6d;
}
.projectDetailBottom h2.type2:before {
    background: #c3ab6d;
}
.projectDetailBottom h2.label span.labelText {
    background: #eb1c24;
    font-size: 0.875rem;
    color: #fff;
    display: inline-flex;
    height: 2rem;
    align-items: center;
    padding: 0 1rem;
    /* line-height: 1; */
    margin-top: 0.25rem;
    margin-right: 0;
}
.projectDetailBottom h2 span {
    display: inline-flex;
    /* line-height: 1; */
    margin-right: 1rem;
}
.projectDetailBottom .colWrap {
    justify-content: space-between;
    align-items: flex-start;
}
.projectDetailBottom .colWrap .tableArea {
    width: 45%
}
.projectDetailBottom .colWrap .aboutTicket {
    width: 50%;
}
.projectDetailBottom .colWrap .ttl {
    margin-bottom: 1rem;
    font-weight: 600;
}
.projectDetailBottom .colWrap .ttl span {
    color: #c3ab6d;
    margin-right: 0.25em
}
.notesArea {
    margin-top: 2.5rem;
    border: 1px solid;
    padding: 1.5rem 0;
}
.notesArea dl {
    display: flex;
    align-items: center;
}
.notesArea dl dt {
    width: 10rem;
    text-align: center;
}
.notesArea dl dt .img {
    margin-bottom: .75rem
}
.notesArea dl dt .img img {
    width: 2.5rem
}
.notesArea dl dd {
    width: calc(100% - 10rem);
    padding: 0 2rem 0 0;
    font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
    .projectDetailBottom .colWrap {
        flex-direction: column;
    }
    .projectDetailBottom .colWrap .tableArea {
        width: 100%;
        margin-bottom: 3rem
    }
    .projectDetailBottom .colWrap .aboutTicket {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
    
    .notesArea dl {
        flex-direction: column;
    }
    .notesArea dl dt {
        width: 100%;
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.125rem;
    }
    .notesArea dl dt .img {
        margin-bottom: 0.25rem;
        margin-bottom: 0;
        margin-right: 0.3rem;
    }
    .notesArea dl dt .img img {
    }
    .notesArea dl dd {
        width: 100%;
        padding: 0 2rem;
    }
}
.projectDetailBottom .ticketSelectArea {
    margin-top: 2rem;
}
.totalPrice {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    font-weight: 600;
}
.totalPrice .ttl {
    margin-right: 1.5rem
}
.totalPrice .ttl.point:before {
    content: "P";
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    aspect-ratio: 1 / 1;
    background: #c3ab6d;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin-right: 0.25rem;
    font-size: 1rem;
}
.projectDetailBottom .ticketSelectArea .ticketSelect li {
    background: #f6f8fa;
    border: 1px solid #cacaca;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    min-height: 6.25rem;
    flex-wrap: wrap;
}
.projectDetailBottom .ticketSelectArea .ticketSelect li:not(:first-child) {
    margin-top: 1rem
}
.projectDetailBottom .ticketSelectArea .ticketSelect li .ttl {
    width: 30%;
    padding-right: 0.5rem;
}
.projectDetailBottom .ticketSelectArea .ticketSelect li .detail {
    display: flex;
    align-items: center;
    width: 70%;
}
.projectDetailBottom .ticketSelectArea .ticketSelect li .detail 
> .price {
    padding-right: 2rem
}
.projectDetailBottom .ticketSelectArea .ticketSelect li.vip .detail > .price input {
    height: 2.375rem;
    /* width: 7.5rem; */
    width: 100%;
    border: 1px solid #cacaca;
    font-size: 1rem;
    /* padding-left: 1.25em; */
    margin-right: 0.5rem;
    max-width: 130px;
}

.projectDetailBottom .ticketSelectArea .ticketSelect li.vip .detail > .price span {
    
}
.projectDetailBottom .ticketSelectArea .ticketSelect li .detail > .price span {
    padding-left: 0.5rem
}
.selectWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.selectWrap .select {
    width: calc(100% - 1.5rem);
}
.selectWrap select {
    height: 2.375rem;
    /* width: 7.5rem; */
    width: 100%;
    text-align: center;
    border: 1px solid #cacaca;
    font-size: 1rem;
    /* padding-left: 1.25em; */
    margin-right: 0.5rem;
    min-width: 4rem;
}
.projectDetailBottom .ticketSelectArea .ticketSelect select {
    /* font-size: 1rem; */
}

.projectDetailBottom .ticketSelectTable {
    background: #f6f8fa;
    border: 1px solid #cacaca;
    border-width: 1px 0 1px 0;
    padding: 0 1.5rem;
}
.projectDetailBottom .ticketSelectTable table {
    width: 100%;
    table-layout: fixed;
}
.projectDetailBottom .ticketSelectTable table tbody tr {
    border-top: 1px solid #cacaca;
}
.projectDetailBottom .ticketSelectTable table tbody tr.detailTr {
    background: #e9ebed;
    font-size: 85%;
}
.projectDetailBottom .ticketSelectTable thead th {
    padding: 1rem 
}
.projectDetailBottom .ticketSelectTable thead th:nth-child(1) {
    width: 25%;
}
.projectDetailBottom .ticketSelectTable thead th:nth-child(2) {
    width: 15%;
}
.projectDetailBottom .ticketSelectTable thead th:nth-child(3) {
    width: 14%;
}
.projectDetailBottom .ticketSelectTable thead th:nth-child(4) {
    width: 23%;
}
.projectDetailBottom .ticketSelectTable thead th:nth-child(5) {
    width: 23%;
}
.projectDetailBottom .ticketSelectTable th ,
.projectDetailBottom .ticketSelectTable td {
    /* min-height: 5rem; */
    vertical-align: middle;
    padding: 0.5rem 0.5rem;
}
.projectDetailBottom .ticketSelectTable td.priceCell p:not(.s) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.projectDetailBottom .ticketSelectTable td .s {
    font-size: 75%;
}
.projectDetailBottom .ticketSelectTable td.priceCell .price {
    width: calc(100% - 1.5rem)
}
.projectDetailBottom .ticketSelectTable td.priceCell input {
    width: 100%;
    border: 1px solid #cacaca;
    height: 2.375rem;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .projectDetailBottom .ticketSelectArea .ticketSelect li {
        padding: 0.5rem 0.5rem;
    }
    .projectDetailBottom .ticketSelectArea .ticketSelect li .detail > .price {
    padding-right: 0.5rem
    }
    .projectDetailBottom .ticketSelectArea .ticketSelect li.vip .detail > .price input {
        width: 7.5rem;
    }
    .projectDetailBottom .ticketSelectTable table {
        font-size: 90%;
    }
    .projectDetailBottom .ticketSelectTable thead {
    }
    .projectDetailBottom .ticketSelectTable table ,
    .projectDetailBottom .ticketSelectTable thead,
    .projectDetailBottom .ticketSelectTable tbody {
        display: block;
    }
    .projectDetailBottom .ticketSelectTable table tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: stretch;
        padding: 0.25rem 0;
    }
    .projectDetailBottom .ticketSelectTable table thead tr th {
        padding: 0.5rem!important;
        width: calc(100% / 3)!important;
    }
    .projectDetailBottom .ticketSelectTable table tbody tr td {
        display: flex;
        align-items: center;
    }
    .projectDetailBottom .ticketSelectTable table tbody tr td > * {
        width: 100%;
    }
    .projectDetailBottom .ticketSelectTable td .s {
        /* text-align: center */
    }
    .projectDetailBottom .ticketSelectTable table tr > *:nth-child(-n+3) {
        width: calc(100% / 3);
        border-bottom: 1px dotted #cacaca;
        padding: 1rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        /* justify-content: flex-start; */
    }
    .projectDetailBottom .ticketSelectTable table tbody tr.detailTr td:nth-child(2) {
        
width: calc(100% / 3 * 2);
        
text-align: left;
        
display: block;
    }
    .projectDetailBottom .ticketSelectTable table tbody tr > *:nth-child(4) {
        width: 30%;
        margin-right: 1rem;
        width: 45%;
        width: 7rem;
    }
    .projectDetailBottom .ticketSelectTable table tr > *:last-child {
        width: 20%;
        width: 45%;
        width: 12rem;
    }
    .projectDetailBottom .ticketSelectTable table tbody tr > *:last-child {
        border-bottom: 1px solid
    }
}

.arrowSec {
    position: relative;
    overflow: visible;
    padding-top: 0;
    margin-top: 2rem;
}
.arrowSec .inner {padding-top: 0;}

.arrowSec .inner:before  {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3.4375rem 3.4375rem 3.4375rem;
    border-color: transparent transparent #f6f8fa transparent;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -3.4375rem;
}
.arrowSec.performingArtist .inner:before {
    border-color: transparent transparent #fff transparent;
}
.arrowSec .inner:after {
    content: "";
    display: block;
    position: absolute;
    width: 3.75rem;
    /*     height: 3.875rem; */
    aspect-ratio: 1 / 1;
    border: 1px solid #c4ac6d;
    border-width: 2px 2px 0 0;
    transform: translate(-50%,-50%) rotate(-45deg);
    top: 0;
    left: 50%;
}
.arrowSec .inner > .icon {
    margin: 0 auto;
}
.arrowSec.buyTicket .inner > .icon {
    width: 2.3275rem;
    transform: translateY(-0.5rem);
    margin-bottom: 0;
}
.arrowSec.performingArtist .icon {
    width: 1.3725rem;
    transform: translateY(-1rem);
    margin-bottom: -0.5rem;
}
.buyTicket {
    background: #f6f8fa;
    padding-bottom: 4rem;
}
.performingArtist {
    background: #fff;
    margin-top: 10px;
    border-top: 1px solid #c4ac6d;
}
.performingArtistInner {
    /* display: flex; */
}
.performingArtistInner .artistArea {
     width: 100%;
     background: #fff;
     padding: 0 1.5rem 1.5rem;
     font-size: 0.875rem;
     box-shadow: 3px 3px 10px -5px rgba(0,0,0,0.3);
}

.performingArtistInner .artistArea .ttl {
    max-width: 13.75rem;
    width: 100%;
    height: 3.125rem;
    background: #c4ac6d;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    transform: translate(-1.5rem,-1.5rem);
    padding: 0 1rem;
}
.performingArtistInner .artistArea .artistImg {
    
margin-bottom: 1rem;
}
.performingArtistInner .artistArea .artistText {
    line-height: 1.25rem;
    text-align: left;
}
.performingArtistInner .artistArea .snsLinks {
    display: flex;
    justify-content: space-between;
    margin: 1.25rem auto 0;
    max-width: 360px;
}
.performingArtistInner .artistArea .snsLinks li {
    width: calc((100% - 20px)/6);
}
.performingArtistInner .artistArea .snsLinks li a {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    background: #dbdbdb;
    cursor: default;
    pointer-events: none;
}
.performingArtistInner .artistArea .snsLinks li.active a {
    background: #000;
    cursor: pointer;
    pointer-events: all;
} 
.performingArtistInner .artistArea .snsLinks li a img {
    width: 70%;
}
.performingArtistInner .artistArea .snsLinks li.btn_other a img {
    width: 35%;
}
@media screen and (max-width: 768px) {
    .performingArtistInner {
        flex-direction: column;
    }
    .performingArtistInner .liveArea {
        width: 100%;
    }
    .performingArtistInner .artistArea {
        width: 100%;
        margin: 3rem auto 0;
        max-width: 640px;
    }
}

.purchaseSecTtl {
    font-size: 1.375rem;
    padding-left: 2rem;
    margin-bottom: 1rem
}
.purchaseSec {
    background: #f6f8fa;
    padding: 2rem 4%;
    position: relative;
}

.purchaseSec.conditional {
    border: 4px solid #eb1c24;
    padding-top: 2.8rem;
}
.purchaseSec.conditional .conditionalText {
    position: absolute;
    right: 0;
    top: 0;
    /* width: 17rem; *//* 2023/09/23 yamasaki commentout */
    height: 2.5rem;
    display: flex;
    z-index: 10;
    color: #fff;
    font-weight: bold;
    /* font-size: 1.7rem; *//* 2023/09/23 yamasaki commentout */
    justify-content: center;
    align-items: center;
    background: #eb1c24;
    line-height: 1;
    padding-bottom: 5px;
    padding: 5px;/* 2023/09/23 yamasaki addition*/
}
.purchaseSec.off:after {
    pointer-events: none
}
.purchaseSec .btnWrap {
    position: relative;
}
.purchaseSec .btnWrap .on {
    z-index: 10;
    border: 1px solid #fff
}
.purchaseSec .btnWrap .on .btn {pointer-events: all;}
.purchaseSec h3 {
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.purchaseSec.noItem h3 {
    margin-bottom: 0
}
.purchaseSec .detail {
    margin-bottom: 3rem
}
.purchaseSec .detail > div {
    display: flex;
}
.purchaseSec .detail > div:not(:first-child) {
    margin-top: 0.5rem
}
.purchaseSec .detail > div dt {
    width: 8rem;
}
.purchaseSec .ticketBox {
    margin-bottom: 3rem
}
.purchaseSec .ticketBox h4 {
    font-size: 1.375rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.purchaseSec .ticketBox h4:before {
    content: "■";
    margin-right: 0.25rem;
}
.purchaseSec .ticketBox h4.color2:before {
    color: #c3ab6d;
}
.purchaseSec .ticketBox .tableWrap {
    background: #fff;
    border: 1px solid #cacaca;
    border-radius: 2px;
    padding: 0 0.5rem
}
.purchaseSec .ticketArea .tableWrap table {
    width: 100%;
}
.purchaseSec .ticketArea .tableWrap tbody tr {
    border-top: 1px dotted #cacaca
}
.purchaseSec .ticketArea .tableWrap th ,
.purchaseSec .ticketArea .tableWrap td {
    padding: 0.75rem 0.5rem;
    width: 25%;
}
.purchaseSec .ticketArea .tableWrap th:first-child {
    width: auto;
    /* width: 50%; */
}
.purchaseSec .ticketArea .tableWrap th:not(.tac) {
    text-align: left;
}

.totalPriceWrap {
    padding-top: 0.5rem;
    border-top: 1px solid #cacaca;
}

.purchaseTotalArea {
    width: 96%;
    margin: auto;
    border: 1px solid #cacaca;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.9rem;
    flex-wrap: wrap;
}
.purchaseTotalArea.typeAll {
    background: #f6f8fa;
    font-size: 1.125rem;
    font-weight: bold;
}
.purchaseTotalArea .ttl {
    padding: 0.5rem 4rem;
}
.purchaseTotalArea .text {
    font-size: 112.5%;
    padding: 0.5rem 4rem;
}

.attentionArea {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}
.attentionArea .head {
    margin-bottom: 1.75rem;
}
.attentionArea .head img {
    width: 3rem;
    margin-bottom: 1rem;
}
.attentionArea .head .ttl {
    font-size: 1.125rem;
    font-weight: bold;
}
.attentionArea .detail .ttl {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.purchaseConfirmArea > ul > li:not(:first-child) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dotted #000;
}
.purchaseConfirm > dt {
    margin-bottom: 1.25rem;
}
.purchaseConfirm dd h4 {
    margin-bottom: 0.75rem;
    font-size: 1.375rem;
    font-weight: 500;
}
.purchaseConfirm dd h4 span:before {
    content: "";
    display: inline-block;
    width: 0.75em;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 100%;
    margin-right: 0.25em
}
.purchaseConfirm dd .textArea {
    padding-left: 1.25rem
}
.purchaseConfirm dd .textArea .detail > div {
    display: flex;
    flex-wrap: wrap;
}
.purchaseConfirm dd .textArea .detail > div:not(:first-child) {
    margin-top: 0.25rem;
}
.purchaseConfirm dd .textArea .detail dt {
    width: 10rem;
    margin-bottom: 0.5rem;
}
.purchaseConfirm dd .textArea .detail dd {
    width: calc(100% - 11rem);
    padding-left: 1rem;
    word-break: break-all;
}
.pointArea .ttl {
    text-align: center;
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.pointArea .pointBox {
    background: #f3eee2;
}
.pointArea .pointBox dl.pointInner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 6rem;
    padding: 1.5rem 1rem;
    flex-wrap: wrap;
}
.pointArea .pointBox dl.pointInner dt {
    padding: 0.25rem 1rem;
}
.pointArea .pointBox dl.pointInner dt:before {
    content: "P";
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    aspect-ratio: 1 / 1;
    background: #c3ab6d;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin-right: 0.25rem;
    font-size: 1.25rem;
}
.pointArea .pointBox dl.pointInner dd {
    font-size: 1.75rem;
    font-weight: bold;
    padding: 0.25rem 1rem;
}
.pointArea .addPoint {
    padding-bottom: 2.25rem;
}
.pointArea .addPoint dl {
    background: #fff;
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.pointArea .addPoint dl dt {
    padding: 0.25rem 1rem;
}
.pointArea .addPoint dl dd {
    font-size: 1.75rem;
    padding: 0.25rem 1rem;
    font-weight: bold;
}
/* --------
ニュースページ
----------------- */
.newsPageList li:nth-child(odd) a {
    background: #f6f8fa
}
.newsPageList li a {
    display: flex;
    padding: 1.5rem 3rem 1.5rem 1rem;
    /* min-height: 4.25rem; */
    align-items: center;
    position: relative;
}
.newsPageList li a:hover dd {
    text-decoration: underline
}
.newsPageList li a.no-underline:hover dd {
    text-decoration: none;
}
.newsPageList li a.no-arrow:after {
    content: none;
}
.newsPageList li a:after {
    content: "＞";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 1.8rem;
    height: 1.8rem;
    /*     border-radius: 100%;
    background: #000;
    color: #fff;
    font-size: 0.875rem;
    align-items: center;
    justify-content: center; */
    background: url(/images/common/news_arrow.svg) no-repeat center;
    background-size: contain;
    background-size: 95%;
    transform: translate(0,-50%);
    transition: .25s transform
}
.newsPageList li a:hover:after {
    transform: translate(0.25rem,-50%);
}
.newsPageList li a dl {
    display: flex;
}
.newsPageList li a dt {
    display: flex;
    width: 12rem;
    align-items: center;
    line-height: 1;
}
.newsPageList li a dt .date {
    display: flex;
    height: 1.25rem;
    align-items: center;
}
.newsPageList li a dt .label {
    display: flex;
    align-items: center;
    /* line-height: 1; */
    background: #eb1c24;
    color: #fff;
    height: 1.25rem;
    width: 3.75rem;
    justify-content: center;
    margin-left: 0.5rem;
}
.newsPageList li a dt .label span {
    font-size: 0.875rem;
}
.newsPageList li a dd {
    width: calc(100% - 12rem);
}
.pagerList {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.375rem;
    line-height: 1;
    padding-bottom: 2rem;
    flex-wrap: wrap;
}
.pagerList li {
    margin-bottom: 0.5rem
}
.pagerList li:not(:last-child) {
    margin-right: 0.75rem;
}
.pagerList a {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: .25s;
}
.pagerList a:hover {
    color: #fff;
    background: #000
}

.newsTextArea {
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* --------
マイページ
----------------- */
#mypageHead {
    
}
#userNameArea {
    background: #f6f8fa;
}
#userNameArea #userName {
    max-width: 1080px;
    width: 95%;
    margin: 0 auto;
    padding: 0.75rem 0;
}
#mypageMsgArea {
    max-width: 1080px;
    width: 95%;
    margin: 0 auto;
    padding: 0.75rem 0 1.5rem;
    color: #cc0000;
    font-size: 0.875rem
}
#mypageMsgArea li:not(:last-child) {
    margin-bottom: 0.5rem
}
#mypageMenu {
    max-width: 1080px;
    width: 95%;
    margin: 0 auto;
    padding: 0.75rem 0;
    display: flex;
}
#mypageMenu > li {
    width: 20%;
    border-bottom: 1px solid;
    position: relative;
}
#mypageMenu > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    padding-top: 6px;
    height: 100%;
    min-height: 3.75rem;
    transition: .25s;
    position: relative;
    font-weight: 600;
    padding: 0.5rem 0.25rem;
    line-height: 1.2;
}

#mypageMenu > li > a:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 6px;
    left: 50%;
    transition: 0.25s;
    background: #000;
    top: 100%;
}
#mypageMenu > li.current a, 
#mypageMenu > li a:hover {
/*     border-bottom-color: #000; */
}
#mypageMenu > li.current a:after, #mypageMenu > li:hover > a:after {
    width: 100%;
    left: 0%;
}
@media screen and (max-width: 768px) {
    #mypageMenu > li.subMenuWrap:hover > a:after {
        content: none
    }
}
#mypageMenu > li.subMenuWrap .subMenu {
    display: none;
    position: absolute;
    width: 250%;
    left: -75%;
    padding-top: 1rem;
    z-index: 10;
}
#mypageMenu > li .subMenu:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1rem 1rem 1rem;
    border-color: transparent transparent rgba(0,0,0,0.8) transparent;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    margin-left: -1rem;
}
#mypageMenu > li .subMenu ul {
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    min-height: 6.875rem;
    align-items: center;
}
#mypageMenu > li .subMenu ul li {
    padding: 0 2rem;
    width: 50%;
    text-align: center;
}
@media screen and (min-width: 769px) {
    #mypageMenu > li:hover .subMenu {
        display: block
    }
}
#mypageMenu > li .subMenu ul a {
    color: #fff
}
@media screen and (max-width: 500px) {
    .newsPageList li a dl {
        flex-direction: column;
    }
    .newsPageList li a dt {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    .newsPageList li a dd {
        width: 100%
    }
}

.requestList li {
    display: flex;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    /* align-items: center; */
    min-height: 3.75rem;
    align-items: stretch;
}
.requestList li:nth-child(odd) {
    background: #f6f8fa;
}
.requestList li > div {
    padding: 0 0rem;
    display: flex;
    /* height: 100%; */
    align-items: center;
}
.requestList li > div:not(:first-child) {
    border-left: 1px solid;
}
.requestList li > div dl {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.5rem;
}
.requestList li > div dl dt,
.requestList li > div dl dd {
    padding: 0.2rem 0.5rem;
}
.requestList .date {
    width: 25%;
}
.requestList .artist {
    width: 50%;
}
.requestList .price {
    width: 25%;
}
.requestList .del {
    width: 10%;
}
.requestList .del span {
    text-decoration:underline;
    text-decoration-color: blue;
    color: blue;
    cursor: pointer;
}
.purchaseHistoryArea .item {
    background: #f6f8fa;
    max-width: 1000px;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    position: relative;
}
.purchaseHistoryArea .item.off:after {
    pointer-events: none;
}
.purchaseHistoryArea .item .btnWrap {
    position: relative;
    /* z-index: 10 */
}
.purchaseHistoryArea .item h3 {
    background: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.purchaseHistoryArea .item h3 > span {
    word-break: break-all
}
.purchaseHistoryArea .item h3:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 2rem;
    left: 0;
    top: 0;
    transform-origin: left top;
    transform: skewX(-30deg);
    background: #c3ab6d;
}
.purchaseHistoryArea h3 .ticketBtn {
    background: #dccda7;
    display: flex;
    font-size: 0.875rem;
    height: 2.25rem;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    padding: 0 1.5rem;
    margin-left: auto;
    transition: .25s background;
}
.purchaseHistoryArea h3 .ticketBtn:hover {
    background: #c4ac6d
}
.purchaseHistoryArea .item .itemMain {
    padding: 0 1.875rem;
    margin-bottom: 2rem;
}
.itemMain .imgColWrap {
    display: flex;
    justify-content: space-between;
}
.itemMain .imgColWrap .img {
    width: 34%;
}
.itemMain .imgColWrap .itemDetail {
    width: 66%;
    max-width: 620px;
    padding-left: 1.25rem;
}
.itemDetailTable {
    width: 100%;
}

.itemDetailTable tr {
    border-bottom: 1px dotted #000
}
.itemDetailTable th {
    text-align: left;
}

.itemDetailTable th,
.itemDetailTable td {
    padding: 0.75rem 1rem;
    font-weight: 600;
}
.itemInnerTable {
    width: 100%
}
.itemInnerTable tr {
    border-bottom: none;
}
.itemInnerTable tr:not(:first-child) {
    border-top: 1px dotted #000;
}
.itemInnerTable tr.total {
    border-top-style: solid;
}
.itemInnerTable tr.bdNone {
    border-top: none;
}
.itemInnerTable th, .itemInnerTable td {
    padding: 0.7rem 0.5rem;
}
.itemInnerTable tr:first-child th, .itemInnerTable tr:first-child td {
    padding-top: 0
}
.itemInnerTable tr:last-child th, .itemInnerTable tr:last-child td {
    padding-bottom: 0
}
.itemInnerTable .bdNone th, .itemInnerTable .bdNone td {
    padding: 0 0.5rem 0.5rem;
}
.itemInnerTable .indnt th {
    text-indent: 1rem
}
.itemDetailTable .color1 {
    color: #0071ba
}
.itemDetailTable .color2 {
    color: #cc0000;
}
.itemDetailTable .colWrap > * {
    width: 50%;
    padding-right: 0.5rem
}
/* デジタルチケット */
.modalInner {
    background: #fff;
    text-align: center;
    padding: 2rem 5%;
    overflow: hidden;
    position: relative;
}
.modalInner .headArea .modalTtl {
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}
.modalInner .headArea .projectDetail {
    line-height: 1.6
}
.modalInner .ticketArea {
    background: #f6f8fa;
    margin-top: 1rem;
    padding: 2rem 5%;
}
.modalInner .ticketArea .text {
    font-size: 0.875rem
}
.modalInner .ticketArea .ticketNumber {
    font-size: 2.25rem;
    font-weight: bold
}
.modalInner .annoArea {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.8
}
.modalInner .closeBtn {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    background: #c4ac6d;
    width: 5rem;
    height: 5rem;
    transform: skewX(45deg);
    transform-origin: right top;
    overflow: hidden;
    transition: .25s opacity;
}
.modalInner .closeBtn:hover {
    opacity: 0.8
}
.modalInner .closeBtn span {
    transform: skewX(-45deg);
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    transform-origin: right top;
}
.modalInner .closeBtn span:after,
.modalInner .closeBtn span:before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: #000;
    position: absolute;
    display: block;
    right: 0.9rem;
    top: 1.5rem;
}
.modalInner .closeBtn span:before {
    transform: rotate(-45deg);
}
.modalInner .closeBtn span:after {
    transform: rotate(45deg);
}
.modalInner .withdrawalInner {
    background: #f6f8fa;
    margin: 1rem auto 0;
    padding: 2rem 5%;
    max-width: 480px;
}
.modalInner .withdrawalInner ul {
    display: inline-block;
}
.modalInner .withdrawalInner li {
    text-align: left
}
.modalInner .btnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 2rem 0;
    flex-wrap: wrap;
}


.modalInner .btnWrap .btns {
    max-width: 18.75rem;
    margin: 0 1.5rem 1rem;
    width: 100%;
    min-width: 15rem;
}
.delete {
    text-align: center;
    font-weight: bold
}

.newsSettingWrap .mail {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.newsSettingWrap .mail dt {
    padding: 1rem 3rem;
}
.newsSettingWrap .mail dd {
    padding: 1rem 3rem;
}
.settingTableWrap {
    background: #fff;
    border: 1px solid #cacaca;
    border-radius: 2px;
    padding: 0 2rem;
}
.settingTable {
    width: 100%
}
.settingTable tr:not(:last-child) {
    border-bottom: 1px solid #cacaca;
}
.settingTable th,
.settingTable td {
    font-weight: 500;
    padding: 1.3rem 0.5rem;
    text-align: left
}
.settingTable th {
    width: 50%
}
.settingTable td {
    width: 25%
}
.pointHistoryTable {
    width: 100%;
    table-layout: fixed;
}
.pointHistoryTable tr:nth-child(odd) {
    background: #f6f8fa;
}
.pointHistoryTable th {
    font-weight: 500;
    padding: 1rem 0.5rem;
}
.pointHistoryTable td {
    /* vertical-align: middle; */
}
.pointHistoryTable th.status {
    width: 5rem;
}
.pointHistoryTable th.status .label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.75rem;
    height: 1.25rem;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
}
.pointHistoryTable th.status .label.get {
    background: #c4ac6d;
    color: #000;
}
.pointHistoryTable th.status .label.use {
    background: #000;
    color: #c4ac6d;
}
.pointHistoryTable .point {
    width: 7rem;
}
.pointHistoryTable .date {
    width: 7rem;
    text-align: left;
    padding: 1.3rem 1rem;
}
.pointHistoryTable .detail {
    padding: 0.5rem 0
}
.pointHistoryTable .useDetail {
    border-left: 1px solid #000;
    padding: 0.5rem 1rem;
    word-break: break-all;
}
#requestMainVisual {
    position: relative
}
#requestMainVisual {
    color: #000;
    position: relative;
}
#requestMainVisual .textArea {
    position: absolute;
    top: 0;
    /* transform: translateY(-50%); */
    width: 100%;
    height: 100%;
    left: 0;
    font-weight: bold;
    left: 0;
    /* width: 100%; */
    text-shadow: 0 0 3px rgb(0 0 0);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#requestMainVisual .textArea .lead {
    /* font-size: 156.25%; */
    /* max-width: 1080px; */
    /* margin: auto; */
}
#requestMainVisual .textArea h1 {
    font-size: 175%;
    line-height: 1;
    /* text-align: left; */
    /* max-width: 1080px; */
    /* margin: auto; */
    /* font-weight: 500; */
    border-bottom: 1px solid;
    padding-bottom: 2.25rem;
    margin-bottom: 1rem;
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
    #requestMainVisual {
        height: 384px;
    }
    #requestMainVisual .img {
        width: 1366px;
        position: absolute;
        left: 50%;
        margin-left: -683px
    }
}
@media screen and (max-width: 768px) {
    #requestMainVisual {
        /* height: 484px; */
        overflow: hidden;
        width: 100%;
    }
    #requestMainVisual .img {
        width: 250%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    #requestMainVisual .textArea {
        /* top: 50%; */
        left: 0;
        width: 100%;
        padding-left: 2rem;
        font-size: 0.8rem;
    }
}

#requestFormList .formBox {
    border-left: 6px solid;
    /* position: relative; */
    padding-top: 3rem;
}

#requestFormList {
  counter-reset: item;
  list-style-type: none;
}
#requestFormList[data-item="1"] li .btnWrap {
    display: none;
}
#requestFormList li .btnWrap {
    position: absolute;
    right: 1rem;
    top: 1rem
}
#requestFormList li {
    position: relative;
}
#requestFormList li:not(:last-child) {
    margin-bottom: 3rem
}
#requestFormList li:before {
  counter-increment: item;
  content: counter(item);
  /* 以下は自由に装飾... */
  font-weight: bold;
  color: #000;
  display: block;
  position: absolute;
  left: 4%;
  top: 1rem;
  font-size: 2rem;
  line-height: 1;
}

.withdrawalArea {
    text-align: center;
}
.withdrawalArea .lead {
    color: #eb1c24;
    font-size: 1.375rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2rem;
    /* display: inline-block; */
    /* text-align: left; */
}
.withdrawalArea ul {
    display: inline-block;
    text-align: left;
    margin-bottom: 2rem
}

.withdrawalArea .checkArea {
    margin-top: 3rem
}
.withdrawalArea .checkArea .inputSet {justify-content: center;}
@media screen and (max-width: 768px) {
    #mypageMenuArea {
        display: none
    }
    #mypageMenu {
        flex-wrap: wrap
    }
    #mypageMenu li {
        width: 50%;
    }
    #mypageMenu > li .subMenu:before {
        left: auto;
        right: 25%;
        margin-left: 0;
        margin-right: -1rem;
        border-color: transparent transparent rgba(0,0,0,1) transparent;
        border-width: 0 0.7rem 0.7rem 0.7rem;
    }
    #mypageMenu li.spSubmenuWrap {
        width: 100%;
        padding-top: 0.5rem;
    }
    #mypageMenu > li .subMenu ul {
        background: #000;
        min-height: 4rem;
    }
    .requestList li {
        flex-direction: column;
        padding: 0.5rem 1rem;
    }
    .requestList li > div {
        width: 100%!important;
    }
    .requestList li > div:not(:first-child) {
        border-left: none;
        border-top: 1px solid;
    }
    .requestList li > div dl dt, .requestList li > div dl dd {
        padding: 0.5rem 0;
    }
    .requestList li > div dl dt {
        padding-right: 1rem;
    }
    .itemMain .imgColWrap {
        flex-direction: column;
    }
    .itemMain .imgColWrap .img {
        width: 100%;
        margin-bottom: 1rem
    }
    .itemMain .imgColWrap .itemDetail {
        width: 100%;
        padding-left: 0;
        font-size: 0.875rem;
    }
    .itemDetailTable,
    .itemDetailTable > tbody,
    .itemDetailTable > tbody > tr,
    .itemDetailTable > tbody > tr > th,
    .itemDetailTable > tbody > tr > td {
        display: block;
    }
    .itemDetailTable > tbody > tr > th {
        padding: 0.5rem 1rem 0 0.25rem;
        font-size: 110%;
    }
    .settingTableWrap {
        padding: 0 1rem;
    }
    .settingTable,
    .settingTable thead ,
    .settingTable tbody ,
    .settingTable tr ,
    .settingTable th ,
    .settingTable td {
        display: block;
    }
    .settingTable tr {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    .settingTable tr:not(:last-child) {
        margin-bottom: 0.5rem;
    }
    .settingTable th {
        width: 100%;
        padding: 0.7rem 0.5rem;
        border-bottom: 1px dotted #cacaca;
        font-weight: bold;
    }
    .settingTable td {
        width: 50%;
        padding: 0.7rem 0.75rem 0.7rem;
    }
}
@media screen and (max-width: 500px) {
    .pointHistoryTable,
    .pointHistoryTable tbody ,
    .pointHistoryTable thead {
        display: block;
    }
    .pointHistoryTable tr {
        display: flex;
        flex-wrap: wrap;
        padding: 0.25rem 0;
    }
    .pointHistoryTable th ,
    .pointHistoryTable td {
        display: block;
        padding: 0.5rem 0.75rem!important;
    }
    .pointHistoryTable .detail {
        width: 100%;
        padding: 0 0.5rem!important;
    }
    .pointHistoryTable .useDetail {
        border-top: 1px solid #000;
        border-left: none;
        padding: 0.5rem 0.25rem;
        /* width: 95%; */
        margin: auto;
    }
}

.tableLead {
    margin-bottom: 2rem;
    text-align: center;
}
.tableWrap {max-width: 880px;margin: auto;}

.tableWrap table {
    width: 100%;
    margin: auto;
    line-height: 1.55;
}
.tableStyle1 {
    font-size: 0.875rem
}
.tableStyle1 tr:last-child {
    border-bottom: 1px solid #cacaca;
}
.tableStyle1 th,
.tableStyle1 td {
    position: relative;
    padding: .75rem 1rem;
    text-align: left;
    font-weight: 500
}
.tableStyle1 th {
}
.tableStyle1 th:before,
.tableStyle1 td:before {
    content: "";
    display: block;
    position: absolute;
    /* border-top: 3px solid #c4ac6d; */
    height: 3px;
    background: #c4ac6d;
    width: 100%;
    top: 0;
    left: 0;
}
.tableStyle1 td {
    padding-left: 10%
}
.tableStyle1 td:before {
    height: 1px;
    background: #cacaca;
}
@media screen and (max-width: 500px) {
    .tableWrap table,
    .tableWrap table tr,
    .tableWrap table tbody,
    .tableWrap table thead {
        display: block;
    }
    .tableWrap table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .tableWrap table th {
        display: block;
        width: 100%;
        font-weight: 600
    }
    .tableWrap.ticket table tr {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }
    .tableWrap.ticket table tr > *:first-child {
        width: 50%!important;
    }
    .tableWrap.ticket table th,
    .tableWrap.ticket table td {
        width: 33%!important;
    }
    .tableWrap table td {
        width: 100%;
        padding-left: 2rem
    }
    .tableWrap table td:before {
        background: none;
        border-top: 1px dotted #cacaca
    }
    .tableWrap.point table thead tr > * {
        width: 33%!important;
        text-align: center!important;
    }
    .tableWrap.point table thead tr > *:nth-child(4) {
        display: none;
    }
    .tableWrap.point table tbody tr > *:nth-child(-n+3) {
        width: 33%!important;
        padding-bottom: 0;
    }
    .tableWrap.point table tbody tr > *:nth-child(4) {
        width: 100%!important;
    }
}

.sitemapArea .block {
    margin-bottom: 3rem
}
.sitemapArea .block + .block{
    /* margin-top: 5rem */
}
.sitemapArea h2  {
    padding: 1rem 1rem 1rem 3rem;
    overflow: hidden;
    position: relative;
    background: #000;
    color: #c3ab6d;
    font-size: 1.375rem;
    margin-bottom: 1.5rem;
}
.sitemapArea h2:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 12.5rem;
    right: 100%;
    top: 0;
    transform-origin: right bottom;
    transform: skewX(-30deg);
    background: #c3ab6d;
}
.sitemapArea .sitemapLinks {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5%
}
.sitemapArea .sitemapLinks li {
    margin-right: 2rem;
    margin-bottom: 0.5rem
}
.sitemapArea .sitemapLinks a:before {
    content: "≫";
    color: #c3ab6d;
    margin-right: 0.3725rem;
    display: inline-block;
    transition: .25s;
}
.sitemapArea .sitemapLinks a:hover {
    text-decoration: underline
}
.sitemapArea .sitemapLinks a:hover:before {
    transform: translateX(.25rem);
}

/* ガイドライン */
#guidelineMenuArea {
    position: sticky;
    top: 6.25rem;
    background: #fff;
    z-index: 50;
    margin-bottom: 2.5rem;
}
@media screen and (max-width: 960px) {
    #guidelineMenuArea {
        top: 3.5rem
    }
}
#guidelineMenu {
    max-width: 1080px;
    width: 95%;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0.75rem;
    display: flex;
}
#guidelineMenu > li {
    width: calc(100% / 6);
    border-bottom: 1px solid;
    position: relative;
    text-align: center;
}
#guidelineMenu > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    padding-top: 6px;
    height: 100%;
    min-height: 3.25rem;
    transition: .25s;
    position: relative;
    font-weight: 600;
    padding: 0.5rem 0.125rem 0.5rem;
    line-height: 1.4;
}

#guidelineMenu > li > a:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 6px;
    left: 50%;
    transition: 0.25s;
    background: #000;
    top: 100%;
}
#guidelineMenu > li.current a, 
#guidelineMenu > li a:hover {
/*     border-bottom-color: #000; */
}
#guidelineMenu > li.current a:after, #guidelineMenu > li:hover > a:after {
    width: 100%;
    left: 0%;
}
@media screen and (max-width: 768px) {
    #guidelineMenu > li.subMenuWrap:hover > a:after {
        content: none
    }
}
#guidelineMenu > li.subMenuWrap .subMenu {
    display: none;
    position: absolute;
    width: 250%;
    left: -75%;
    padding-top: 1rem;
    z-index: 10;
}
#guidelineMenu > li .subMenu:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1rem 1rem 1rem;
    border-color: transparent transparent rgba(0,0,0,0.8) transparent;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    margin-left: -1rem;
}
#guidelineMenu > li .subMenu ul {
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    min-height: 6.875rem;
    align-items: center;
}
#guidelineMenu > li .subMenu ul li {
    padding: 0 2rem;
    width: 50%;
    text-align: center;
}
@media screen and (min-width: 769px) {
    #guidelineMenu > li:hover .subMenu {
        display: block
    }
}
#guidelineMenu > li .subMenu ul a {
    color: #fff
}

.guidelineHead {
    margin-bottom: 3rem
}
.guidelineHead h2 {
    text-align: center;
    font-size: 1.375rem;
}
.guidelineHead h2 span {
    display: inline-block;
    position: relative;
    padding-bottom: 0.75rem
}
.guidelineHead h2 span:after {
    content: "";
    display: block;
    position: absolute;
    width: 70%;
    height: 0.25rem;
    background: #c3ab6d;
    left: 15%;
    bottom: 0;
}

.guidelineHead .anno {
    color: #cc0000;
    font-size: 1.375rem;
    text-align: center;
    font-weight: bold
}
.guidelineBoxWrap .box {
    padding-bottom: 1rem;
    overflow-x: clip;
    /* overflow-y: visible; */
}
.guidelineBoxWrap .box + .box {
    margin-top: 3rem;
}
.guidelineBoxWrap .box .btnWrap {
    margin-bottom: 1.5rem;
}
.guidelineBoxWrap .box h3 {
    background: #000;
    color: #fff;
    font-size: 1.375rem;
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    position: relative;
    font-weight: bold;
    margin-bottom: 2rem;
    padding-right: 1rem;
}
.guidelineBoxWrap .box h3.type2 {
    padding: 0.5rem 1rem 0.5rem 3rem;
    overflow: hidden;
    position: relative;
    font-size: 1.375rem;
    margin-bottom: 2.5rem;
}
.guidelineBoxWrap .box h3.type2 span {
    position: relative;
}
.guidelineBoxWrap .box h3.type2:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 12.5rem;
    right: 100%;
    top: 0;
    transform-origin: right bottom;
    transform: skewX(-30deg);
    background: #c3ab6d;
}
.guidelineBoxWrap .box h3.typeNum {
    /* transform: skewX(-34deg); */
    /* transform-origin: left bottom; */
}
.guidelineBoxWrap .box h3.typeNum:before {
    content: "";
    /* width: 2.5rem; */
    aspect-ratio: 2/3;
    height: 110%;
    background: #fff;
    display: block;
    position: absolute;
    left: 0;
    top: -5%;
    transform: skewX(-35deg);
    transform-origin: left top;
}
.guidelineBoxWrap .box h3.typeNum span.num {
    /* transform: skew(34deg); */
    display: block;
    position: absolute;
    bottom: 0;
    left: 0.3rem;
    width: 3.875rem;
    text-align: center;
}
.guidelineBoxWrap .box h3.typeNum span.text {
    /* transform: skewX(34deg); */
    display: block;
    transform-origin: left top;
    padding-left: 5rem;
}
.guidelineBoxWrap .imgTextCol {
    display: flex;
    padding: 0 0 2rem 4rem;
    align-items: center;
}
.guidelineBoxWrap .imgTextCol .img {
    width: 15rem;
    text-align: center;
}
.guidelineBoxWrap .imgTextCol .textArea {
    width: calc(100% - 15rem);
    padding-left: 1.5rem;
    line-height: 2;
}

#guidelineTabMenu .tab {
    display: none;
}
.capTextArea {
    display: flex;
    justify-content: space-between
}
.capTextArea .captcha {
    width: 48%;
}
.capTextArea .textArea {
    width: 48%;
}
.guidelineBoxWrap .textArea {
    line-height: 1.75;
    font-size: 0.875rem;
}
.textInnerList li:not(:last-child) {
    margin-bottom: 2.25rem;
}
.textInnerList li .ttl {
    display: flex;
    font-size: 1.125rem;
    font-weight: bold;
    align-items: center;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.textInnerList li .ttl .num {
    width: 1.5rem;
    height: 1.5rem;
    background: #cc0000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    margin-right: 0.25rem;
    line-height: 1.1;
}
.textInnerList li .ttl .text {
    width: calc(100% - 2rem)
}
.boxStep .step + .step {
    margin-top: 3rem
}
.boxStep .step.bdt {
    border-top: 1px solid #cacaca;
    padding-top: 2rem
}
.boxStep .step .stepTtl {
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 1.5rem
}
.box .redTextWrap {
    font-size: 1.375rem;
    font-weight: bold;
    color: #cc0000;
    padding: 1rem;
    text-align: center;
    border: 2px solid;
    margin-bottom: 2.5rem
}
.guidelineBoxWrap .noteArea {
    padding-top: 3rem
}
.guidelineBoxWrap .noteArea .ttl {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.guidelineBoxWrap .noteArea .ttl .img img {
    width: 3rem;
}
.guidelineBoxWrap .noteArea .ttl .text {
    width: calc(100% - 3rem);
    padding-left: 1rem;
    font-size: 1.125rem;
    font-weight: bold
}
.guidelineBoxWrap .noteArea ul li {
    padding-left: 0.5em;
    text-indent: -0.5em
}
.guidelineBoxWrap .stepNumList > div {
    display: flex;
    justify-content: space-between;
    padding-bottom: 3rem;
    position: relative;
}
.guidelineBoxWrap .stepNumList > div:not(:last-child):after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    background: #cc0000;
    left: 1.1rem
}
.guidelineBoxWrap .stepNumList > div dt {
    width: 2.2rem;
    position: relative;
    z-index: 10
}
.guidelineBoxWrap .stepNumList > div dd {
    width: calc(100% - 3.5rem);
    margin-top: -0.125rem;
}
#toTop {
    position: sticky;
    bottom: 1rem;
    right: 1rem;
    width: 6.25rem;
    margin-left: auto;
    margin-bottom: -2.5rem;
    max-width: 100px;
    z-index:666;
}
#toTop a {
    display: block;
    opacity: 1;
    transition: .25s opacity
}
#toTop a:hover {
    opacity: 0.75
}
@media screen and (max-width: 960px) {
    #guidelineMenu {
        flex-wrap: wrap
    }
    #guidelineMenu li {
        width: calc(100% / 3);
    }
}
@media screen and (max-width: 768px) {
     #guidelineMenuArea {
        /* display: none; */
        font-size: 90%;
    }
    #guidelineMenu {
        flex-wrap: wrap
    }
    #guidelineMenu li {
        width: calc(100% / 3);
    }
    #guidelineMenu > li > a {
        padding: 0.25rem;
        min-height: 3rem;
    }
    #guidelineMenu > li .subMenu:before {
        left: auto;
        right: 25%;
        margin-left: 0;
        margin-right: -1rem;
        border-color: transparent transparent rgba(0,0,0,1) transparent;
        border-width: 0 0.7rem 0.7rem 0.7rem;
    }
    #guidelineMenu li.spSubmenuWrap {
        width: 100%;
        padding-top: 0.5rem;
    }
    #guidelineMenu > li .subMenu ul {
        background: #000;
        min-height: 4rem;
    }
    .guidelineBoxWrap .imgTextCol {
        padding: 0 0 2rem 2rem;
    }
    .guidelineBoxWrap .imgTextCol .img {
        width: 10rem;
    }
    .guidelineBoxWrap .imgTextCol .textArea {
        width: calc(100% - 10rem);
    }
}
@media screen and (max-width: 500px) {
    #guidelineMenuArea {
        position: static;
    }
    .guidelineBoxWrap .box h3 {
        font-size: 1.25rem;
    }
    .guidelineBoxWrap .imgTextCol {
        display: block;
        padding: 0 0 2rem 1rem;
    }
    .guidelineBoxWrap .imgTextCol .img {
        float: right;
        float: left;
        width: 40%;
        max-width: 10rem;
        min-width: 8rem;
        padding: 1rem 1rem 0 0rem;
        margin-bottom: 1rem;
    }
    .guidelineBoxWrap .imgTextCol .textArea {
        width: 100%;
        padding-left: 0;
    }
    
    .capTextArea {
        flex-direction: column;
    }
    .capTextArea .captcha {
        width: 100%;
    }
    .capTextArea .textArea {
        width: 100%;
        margin-top: 2rem;
    }
    
    #toTop {
         width: 4rem   
    }
}

/* maintenance */
#maintenancePage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    background: url(/images/common/maintenance_bg.jpg) no-repeat center top;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20vh 0 0;
    padding: 1rem 1rem 2.5rem;
    flex-direction: column;
}
#topMain.maintenance {
    background: #000;
    min-height: 100vh; 
}
#maintenancePage #copy {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #000;
    color: #fff;
    left: 0;
    margin: 0;
    text-align: center;
    line-height: 1;
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 1rem 0 1rem;
    font-size: 0.875rem;
    font-weight: normal;
}
#maintenancePage .leadText {
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    /* margin-top: 1rem; */
}

#maintenancePage .subLead {
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    text-shadow: 0px 0px 1px rgba(255,255,255,1);
}
#maintenancePAgeLogoArea {
    width: 15rem;
    margin-top: 4rem;
}
@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 1080px) {
    .o1080 {
        display: none !important;
    }
}

@media screen and (min-width: 1081px) {
    .u1080 {
        display: none !important;
    }
}


@media screen and (max-width: 640px) {
    .o640 {
        display: none !important;
    }
}

@media screen and (min-width: 641px) {
    .u640 {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .o480 {
        display: none !important;
    }
}

@media screen and (min-width: 481px) {
    .u480 {
        display: none !important;
    }
}
/* 共通class */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
    font-size: 0.875rem;
    height: 3.75rem;
    max-width: 18.75rem;
    margin: auto;
    border: 1px solid #c4ac6d;
    cursor: pointer;
    transition: 0.25s opacity
}
.btn:hover {
    opacity: 0.8;
}
.btn:before,
.btn:after {
    content: "";
    position: absolute;
    display: block;
    background: #c4ac6d
}
.btn:before {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 100%;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.btn:after {
    width: 1rem;
    height: 1px;
    right: 0;
    top: 50%;
    margin-top: -1px;
}
.btn.iconLeft:before {
    left: 1rem;
}
.btn.iconLeft:after {
    left: 0;
}

.btn.type1 {
    background: #c4ac6d;
    border: none;
    color: #000; /* 2023/09/29 yamasaki addition */
}
.btn.type1:before,
.btn.type1:after {
    background: #000;
}
.btn.type2 {
    background: #555;
    border: none;
    color: #fff;
}
.btn.type2:before,
.btn.type2:after {
    background: #fff;
}
.btn.type3 {
    background: #eb1c24;
    border: none;
    color: #fff;
    padding: 0 1.5rem;
}
.btn.type3:before,
.btn.type3:after {
    background: #fff;
}

.btn.type4 {
    background: #e3e3e3;
    border-color: #555;
    color: #555
}
.btn.type4:before,
.btn.type4:after {
    background: #555;
}
.btn.type5:before,
.btn.type5:after {
    background: #000;
}

.btn.type5 {
    /* background: #c4ac6d; */
    /* border: none; */
}
.btn.disabled {
    opacity: 0.3;
    background: #999;
    pointer-events: none;
}
.inputSet input {
    display: none
}

.inputSet {
    display: flex;
    align-items: center;
    line-height: 1.2;
    flex-wrap: wrap;
}
.inputSet > label {
    margin-bottom: 0.25rem;
    cursor: pointer;
}
.inputSet > .text {
    margin-left: 1rem;
    padding: 0.2rem 0;
}
.inputSet > .text.row {
    width: 100%;
    margin-left: 0;
    padding-left: 1.7rem;
    font-size: 0.875rem;
}
.inputSet label .inputWrap {
    display: flex;
    /* line-height: 1; */
    /* display: inline-flex; */
    /* align-items: center; */
}
.inputSet label .inputWrap .text {
    display: flex;
}
.inputSet label span.input {
    display: block;
    width: 1.2em;
    height: 1.2em;
    aspect-ratio: 1 / 1;
    background: #fff;
    position: relative;
    margin-right: 0.5em;
    border: 1px solid;
}
.inputSet label span.input.radio {
    border-radius: 100%;
    border: 1px solid;
}
.inputSet label span.input:after {
    content: "";
    display: block;
    position:absolute;
    left: 16%;
    top: 18%;
    transform: rotate(-45deg);
    opacity: 0;
}
.inputSet label span.input.check:after {
    width: 60%;
    aspect-ratio: 2/1;
    border: 2px solid;
    border-width: 0 0 0.125rem 0.125rem;
}
.inputSet label span.input.radio:after {
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background: #000;
    left: 25%;
    top: 25%;
}
.inputSet label input:checked + .inputWrap span.input:after {
    opacity: 1
}
ul.list {
    text-indent: -0.5em;
    padding-left: 0.5em;
    line-height: 1.6;
}
.colWrap {
    display: flex;
    align-items: center;
}
.bgWhite {
    background: #fff;
}
.bgGray {
    background: #808080;
}
.bgType3 {
    background: #f3eee2;
}
.dilb {
    display: inline-block;
}

.fll {
    float: left;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.small {
    /* font-size: 90% */
}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 0.625rem !important;}
.mt20 {margin-top: 1.25rem !important;}
.mt30 {margin-top: 1.875rem !important;}
.mt40 {margin-top: 2.5rem !important;}
.mt50 {margin-top: 3.125rem !important;}
.mt60 {margin-top: 3.75rem !important;}
.mt70 {margin-top: 4.375rem !important;}
.mt80 {margin-top: 5rem !important;}
.mt90 {margin-top: 5.625rem !important;}
.mt100 {margin-top: 6.25rem !important;}

.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 0.625rem !important;}
.mb20 {margin-bottom: 1.25rem !important;}
.mb30 {margin-bottom: 1.875rem !important;}
.mb40 {margin-bottom: 2.5rem !important;}
.mb50 {margin-bottom: 3.125rem !important;}
.mb60 {margin-bottom: 3.75rem !important;}
.mb70 {margin-bottom: 4.375rem !important;}
.mb80 {margin-bottom: 5rem !important;}
.mb90 {margin-bottom: 5.625rem !important;}
.mb100 {margin-bottom: 6.25rem !important;}

.w1p {width: 1%!important;}
.w2p {width: 2%!important;}
.w3p {width: 3%!important;}
.w4p {width: 4%!important;}
.w5p {width: 5%!important;}
.w6p {width: 6%!important;}
.w7p {width: 7%!important;}
.w8p {width: 8%!important;}
.w9p {width: 9%!important;}
.w10p {width: 10%!important;}
.w11p {width: 11%!important;}
.w12p {width: 12%!important;}
.w13p {width: 13%!important;}
.w14p {width: 14%!important;}
.w15p {width: 15%!important;}
.w16p {width: 16%!important;}
.w17p {width: 17%!important;}
.w18p {width: 18%!important;}
.w19p {width: 19%!important;}
.w20p {width: 20%!important;}
.w21p {width: 21%!important;}
.w22p {width: 22%!important;}
.w23p {width: 23%!important;}
.w24p {width: 24%!important;}
.w25p {width: 25%!important;}
.w26p {width: 26%!important;}
.w27p {width: 27%!important;}
.w28p {width: 28%!important;}
.w29p {width: 29%!important;}
.w30p {width: 30%!important;}
.w31p {width: 31%!important;}
.w32p {width: 32%!important;}
.w33p {width: 33%!important;}
.w34p {width: 34%!important;}
.w35p {width: 35%!important;}
.w36p {width: 36%!important;}
.w37p {width: 37%!important;}
.w38p {width: 38%!important;}
.w39p {width: 39%!important;}
.w40p {width: 40%!important;}
.w41p {width: 41%!important;}
.w42p {width: 42%!important;}
.w43p {width: 43%!important;}
.w44p {width: 44%!important;}
.w45p {width: 45%!important;}
.w46p {width: 46%!important;}
.w47p {width: 47%!important;}
.w48p {width: 48%!important;}
.w49p {width: 49%!important;}
.w50p {width: 50%!important;}
.w51p {width: 51%!important;}
.w52p {width: 52%!important;}
.w53p {width: 53%!important;}
.w54p {width: 54%!important;}
.w55p {width: 55%!important;}
.w56p {width: 56%!important;}
.w57p {width: 57%!important;}
.w58p {width: 58%!important;}
.w59p {width: 59%!important;}
.w60p {width: 60%!important;}
.w61p {width: 61%!important;}
.w62p {width: 62%!important;}
.w63p {width: 63%!important;}
.w64p {width: 64%!important;}
.w65p {width: 65%!important;}
.w66p {width: 66%!important;}
.w67p {width: 67%!important;}
.w68p {width: 68%!important;}
.w69p {width: 69%!important;}
.w70p {width: 70%!important;}
.w71p {width: 71%!important;}
.w72p {width: 72%!important;}
.w73p {width: 73%!important;}
.w74p {width: 74%!important;}
.w75p {width: 75%!important;}
.w76p {width: 76%!important;}
.w77p {width: 77%!important;}
.w78p {width: 78%!important;}
.w79p {width: 79%!important;}
.w80p {width: 80%!important;}
.w81p {width: 81%!important;}
.w82p {width: 82%!important;}
.w83p {width: 83%!important;}
.w84p {width: 84%!important;}
.w85p {width: 85%!important;}
.w86p {width: 86%!important;}
.w87p {width: 87%!important;}
.w88p {width: 88%!important;}
.w89p {width: 89%!important;}
.w90p {width: 90%!important;}
.w91p {width: 91%!important;}
.w92p {width: 92%!important;}
.w93p {width: 93%!important;}
.w94p {width: 94%!important;}
.w95p {width: 95%!important;}
.w96p {width: 96%!important;}
.w97p {width: 97%!important;}
.w98p {width: 98%!important;}
.w99p {width: 99%!important;}
.w100p {width: 100%!important;}

.fc-red { color: #eb1c24}
#faq_list li { padding-bottom:20px; }
.guidelineBoxWrap strong { color: #ff0000; }

.btn-list-create {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-list-create:hover {
    background-color: #0056b3;
}

.appArea {
    margin: 3rem auto 0;
    padding: 3rem 1rem 0;
    border-top: 1px solid #cacaca;
    max-width: 820px;
}
.appArea p.ttl {
    text-align: center;
    font-weight: bold;
    font-size: 1.375rem;
    margin-bottom: 2rem;
}
.appArea .appList {
    display: flex;
}
.appArea .appList li {
    width: 50%;
    padding: 0 2rem;
}
.appArea .appList li:first-child {
    border-right: 1px solid #cacaca;
}
.appArea .appList li dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.appArea .appList li dl dt {
    font-size: 1.375rem;
    font-weight: bold;
    width: 7rem;
}
.appArea .appList li dl dd {
    width: calc(100% - 7rem);
}
.appArea .appList li.ios dl dd {
    width: 50%;
}
.appArea .appList li.android dl dd {
    width: 62%;
}
@media screen and (max-width: 768px) {
    .appArea {
        padding: 3rem 0.5rem 0;
    }
    .appArea .appList {
        flex-direction: column;
        max-width: 300px;
        margin: auto;
    }
    .appArea .appList li {
        width: 100%;
        padding: 0 0.5rem;
    }
    .appArea .appList li:first-child {
        border: none;
        margin-bottom: 1.5rem;
    }
}
@media screen and (max-width: 420px) {
    .appArea .appList li dl {
        flex-direction: column;
        text-align: center;
    }
    .appArea .appList li.ios dl dd,
    .appArea .appList li.android dl dd {
        width: 100%;
    }
    .appArea .appList li.ios dl dd img,
    .appArea .appList li.android dl dd img {
        width: auto;
        height: 60px;
    }
}