@charset "UTF-8";
/* CSS Document */


/*-------------------------------------------
Base
-------------------------------------------*/

br.pc-none,
#app .sp,
#app .tablet{
    display: none !important;
}
#app ul, #app p, #app dl{ margin-bottom: 0;}
#app dd{ margin-left: 0;}

#app {
	width: 100%;
    overflow: hidden;
	position: relative;
	color: #000;
	font-size: 16px;
	letter-spacing: 0.04em;
    background: #e50012;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-feature-settings: "palt";    
    padding-bottom: 120px;
}
#app a{
    outline: none;
}
#app a:hover{
    text-decoration: none;
}
#app img{ 
    width: 100%; 
    vertical-align: bottom; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}

#app h3{
    margin: 0;
}

#app .deco{
    position: absolute;
    transition: .5s;
}

#app .nowrap{
    display: inline-block;
    white-space: nowrap;
}
#app .red {
    color: #e50012;
}


/*-------------------------------------------
PC
-------------------------------------------*/

/*--- appMain ---*/
#app .appMain{
    position: relative;
    padding: 70px 0;
}
#app .appMain .appMainInr{
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}
#app .appMain .titleBox{
    max-width: 960px;
    width: 70.5%;
    margin: 0 auto;
    position: relative;
}
#app .appMain .titleBox .mainTitle{
    padding-top: 9.5%;    
}
#app .appMain .titleBox .subTitle{
    max-width: 460px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
}
#app .appMain .titleBox .phone{
    width: 26.04%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0);
    margin-bottom: 14.1%;
}
#app .appMain .titleBox .point{
    width: 56.25%;
    margin: -.7% auto 0;
    position: relative;
    z-index: 1;
}
#app .appMain .date{
    width: min(270px,19.8%);
    position: absolute;
    left: 0;
    top: 0;
}
#app .appMain .deco{
    position: absolute;
    top: 0;
}
#app .appMain .deco01{
    width: calc((262 / 1360) * 100%);
    left: 0;
    margin: calc((83 / 1360) * 100%) 0 0 -1%;
}
#app .appMain .deco02{
    width: calc((283 / 1360) * 100%);
    right: 0;
    margin: -8% -5.3% 0 0;
}
#app .appMain .deco03{
    width: calc((330 / 1360) * 100%);
    right: 0;
    margin: calc((80 / 1360) * 100%) -2.2% 0 0;
}
#app .appMain .deco04{
    width: calc((122 / 1360) * 100%);
    left: 0;
    margin: calc((330 / 1360) * 100%) 0 0 20%;
}

/*--- appCouponAndPuni ---*/
#app .appCouponAndPuni{
    width: 85%;
    max-width: 1080px;
    margin: 0 auto;
}
#app .appCouponAndPuni > .title{
    font-size: min(4vw,30px);
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0 auto 40px;
}
#app .appCouponAndPuni .inr{
    display: flex;
    justify-content: space-between;
}
#app .appCouponAndPuni .inr dl{
    border-radius: 10px;
    position: relative;
    background: #fff;
    display: flex;
    justify-content: space-between;
    width: 49%;
    align-items: flex-end;
}
#app .appCouponAndPuni .inr dl dt{
    width: 27%;
    border-radius: 0 0 0 10px;
}
#app .appCouponAndPuni .inr dl dt img{
    transform: scale(1.23);
    transform-origin: left bottom;
}
#app .appCouponAndPuni .inr dl dd{
    width: 63%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 20px 20px 20px 0;
}
#app .appCouponAndPuni .inr dl dd .title{
    margin: 0 0 5px 0;
    font-size: min(24px,2.4vw);
    color: #e50012;
}
#app .appCouponAndPuni .inr dl dd .text{
    font-weight: bold;
    font-size: 15px;
    line-height: 1.3;
}

/*--- transfer ---*/
#app .transfer{
    max-width: 1110px;
    width: 85%;
    margin: 50px auto 0;
}

/*--- registration ---*/
#app .registration{
    max-width: 640px;
    width: 85%;
    margin: 70px auto 0;
}
#appRegistration #app .registration{
    display: none;
}
#app .registration .caption{
    max-width: 309px;
    margin: 0 auto 12px;
}
#app .btn01 a {
	font-size: 26px;
	padding: 25px 10px;
    max-width: 640px;
    width: 85%;
    display: table;
    margin: 0 auto;
    background-color: #fff000;
    color: #e50012;
    font-weight: bold;
    letter-spacing: .05em;
    border-radius: 45px;
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, .2);
    position: relative;
    text-align: center;
    transition: .4s;
}

#app .btn01 a .arrow,
#app .btn01 a .window {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
    background: url(/images/app/newapp_arrow_red2.svg) right center / contain no-repeat;
    width: 8px;
    height: 14px;
    transition: .4s;
}
#app .btn01 a .window{
    width: 1em;
    height: 1em;
    background: url(/images/app/icon-link-red.svg) center center / contain no-repeat;
}

#app .btn01 a:hover {
    background-color: #900000;
    color: #fff;
}

#app .btn01 a:hover .arrow {
    background: url(/images/app/newapp_arrow_wt.svg) right center / contain no-repeat;
}
#app .btn01 a:hover .window {
    background: url(/images/app/icon-link-wt.svg) right center / contain no-repeat;
}


#app .appContents .section .btn01 a {
    font-size: 20px;
    padding: 15px 10px;
    max-width: 320px;
}


#app .appContents.appRegistration .section .btn01 a{
    max-width: 480px;
}

/*--- head ---*/

#app .head01 {
	width: 80%;
	position: relative;
	background: #e50012;
	border-radius: 38px;
	font-size: clamp(18px,2.7vw,27px);
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 15px;
	margin: 0 auto;
}


#app .head01:before{
	content: "";
	display: block;
	width: 140px;
	height: 105px;
	position: absolute;
	top:-105px;
	left:0;
	right: 0;
	margin: 0 auto;
}

#app .appContents.dennysPoint .head01::before {
	background: url(/images/app/icon_head_gu.png) top center / 100% auto no-repeat;
}
#app .appContents.puniPoint .head01::before {
	background: url(/images/app/icon_head_ru.png) top center / 100% auto no-repeat;
}
#app .appContents.appInfo .head01::before {
	background: url(/images/app/icon_head_me.png) top center / 100% auto no-repeat;
}
#app .appContents.appRegistration .head01::before {
	background: url(/images/app/icon_head_gu02.png) top center / 100% auto no-repeat;
}

#app .appContents .head02{
    font-size: 24px;
    margin: 0 auto 20px;
    line-height: 1.3;
    font-weight: bold;
    color: #e50012;
    text-align: center;
}

#app .appContents .head03{
    font-size: 1.08em;
    font-weight: bold;
    margin-bottom: 0.4em;
    text-align: center;
}

#app .appContents * + .head03{
    margin-top: 30px;
}

/*--- lead ---*/
#app .appContents .lead01{
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}

/*--- appTab ---*/
#app #tabLink {
	padding-top: 80px;
}

#app ul.appTab {
	max-width: 840px;
	width: 90%;
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	z-index: 1;
}
#app ul.appTab.bottom{
    position: relative;
    z-index: 0;
}

#app ul.appTab li {
	width: 30.9%;
	position: relative;
	margin-right: 3.8%;
}

#app ul.appTab li .fukidashi {
	position: absolute;
    top: -11%;
    right: 13%;
}

#app ul.appTab li:last-child {
	margin-right: 0;
}

#app ul.appTab li a {
	width: 100%;
	display: block;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

#app ul.appTab li .point {
	width: 80%;
	text-align: center;
	margin: 0 auto;
    max-width: 150px;
    position: relative;
    z-index: 2;
}

#app ul.appTab li a .tab {
	background: #900000;
	border-radius: 15px 15px 0 0;
	text-align: center;
	box-shadow: 0 3px 8px 3px rgba(0,0,0,.1);
	-webkit-transition: .3s ease;
	transition: .3s ease;
	padding: 15% 10% 10%;
	margin-top: -20px;
    position: relative;
}
#app ul.appTab.notTabStyle li a .tab {
	background: #fff;
	border-radius: 15px;
}

#app ul.appTab li a.current .tab {
	cursor: default;
	background: #fff;
}

#app ul.appTab.bottom li a .tab {
    margin-bottom: -20px;
    margin-top: 0;
    border-radius: 0 0 15px 15px;
	padding: 10% 10% 15%;
}

#app ul.appTab li a .tab .on{
    transition: .4s;
}
#app ul.appTab li a .tab .off{
    opacity: 0;
    transition: .4s;
    position: absolute;
    left: 10%;
    top: 0;
    width: 80%;
    margin-top: 15%;
}
#app ul.appTab.bottom li a .tab .off{
    margin-top: 10%;
}

#app ul.appTab li a:not(.current).hover .tab {
	background: #fff;
	box-shadow: 0 4px 9px 4px rgba(0,0,0,.2);
}

#app ul.appTab:not(.bottom) li a:not(.current).hover {
	transform: translate(0, 4px);
}
#app ul.appTab.bottom li a:not(.current).hover {
	transform: translate(0, -4px);
}

#app ul.appTab li a:not(.current) .tab .on{
    opacity: 0;
}
#app ul.appTab li a:not(.current) .tab .off{
    opacity: 1;
}

#app ul.appTab li a:not(.current).hover .tab .off{
    opacity: 0;
}
#app ul.appTab li a:not(.current).hover .tab .on{
    opacity: 1;
}


/*--- notTabStyle ---*/
#app ul.appTab.notTabStyle li a .tab .off{
    opacity: 0;
}
#app ul.appTab.notTabStyle li a .tab .on{
    opacity: 1;
}
#app ul.appTab.notTabStyle li a.hover .tab {
	background: #900000;
}
#app ul.appTab.notTabStyle li a.hover .tab .on{
    opacity: 0;
}
#app ul.appTab.notTabStyle li a.hover .tab .off{
    opacity: 1;
}



/*--- appContents ---*/
#app .appContents{
    background: #fff;
    border-radius: 30px;
    max-width: 1200px;
    width: 85%;
    margin: 0 auto;
    padding: 100px 60px;
    position: relative;
    z-index: 2;
}
#app .appContents.appRegistration{
    margin: 60px auto;
}

/*--- contentsHead ---*/
#app .appContents .contentsHead{
    position: relative;
    max-width: 1080px;
    margin: 0 auto 60px;
    z-index: 1;
}
#app .appContents .contentsHead .deco{
    max-width: 150px;
    width: 16%;
    bottom: 0;
}
#app .appContents .contentsHead .deco01{
    left: 10%;
}
#app .appContents .contentsHead .deco02{
    right: 10%;
}

#app .appContents.appInfo .contentsHead .deco01{
    left: 5%;
}
#app .appContents.appInfo .contentsHead .deco02{
    right: 5%;
}

#app .appContents.appRegistration .contentsHead .deco01{
    left: 0%;
}
#app .appContents.appRegistration .contentsHead .deco02{
    right: 0%;
}



/*--- dpList ---*/
#app .appContents .dpList{
    display: flex;
    flex-wrap: wrap;
    max-width: 980px;
    width: 100%;
    margin: 60px auto 0;
}
#app .appContents .dpList li{
    width: 23%;
    margin: 1%;
    border-radius: 10px;
}
#app .appContents .dpList .image{
    position: relative;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
#app .appContents .dpList .image figcaption{
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 8px 0 0 0;
    background: #f29600;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 8px 15px;
    display: inline-block;
    line-height: 1;
}
#app .appContents .dpList .image figcaption span{
    font-size: 0.7em;
}

#app .appContents .dpList .info{
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    background: #f29600;
    color: #fff;
    padding: 20px;
    position: relative;
}
#app .appContents .dpList .info *{
    line-height: 1.25;
}
#app .appContents .dpList li.dt .info .text::before{
    display: block;
    width: 3em;
    aspect-ratio: 43 / 26;
    content: "";
    background: url("../images/app/logo_dt.svg");
    margin: 0 auto 3px;
}
#app .appContents .dpList .info .text .small{
    display: block;
    font-size: .7em;
    margin: 5px 0;
}
#app .appContents .dpList li:last-child .info::after{
    content: "";
    display: block;
    width: 87px;
    aspect-ratio: 87 / 131;
    background: url("../images/app/deco_dp_03.svg") center center / contain no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(70%,30%);
}

/*--- 色の管理 ---*/
#app .appContents .dpList .pt100-499 .info,
#app .appContents .dpList .pt100-499 .image figcaption{
    background: #ed7600;
}
#app .appContents .dpList .pt500-999 .info,
#app .appContents .dpList .pt500-999 .image figcaption{
    background: #e84b08;
}
#app .appContents .dpList .pt1000over .info,
#app .appContents .dpList .pt1000over .image figcaption{
    background: #e50012;
}


/*--- noticeList ---*/
#app .appContents .noticeList {
    max-width: 980px;
    width: 100%;
    margin: 20px auto 0;
    padding-left: 1em;
}
#app .appContents .noticeList li{
    list-style: disc;
    font-weight: bold;
    font-size: 12px;
}

/*--- strongNotice ---*/

#app .strongNotice{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #e50012;
    margin-bottom: 30px;
}


/*--- section ---*/

#app .appContents .section:has(.head01){
    margin-top: 140px; 
}
#app .appContents .section > .inr{
    background: #f9f5ea;
    border-radius: 30px;
    padding: 60px;
    max-width: 1080px;
    margin: 0 auto;
}
#app .appContents .section:has(.head01) > .inr{
    margin-top: -30px;
    padding-top: 90px;
}

/*--- list ---*/
#app .indList{
    max-width: 640px;
    margin: 0 auto;
}
#app .indList li{
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 10px;
    line-height: 1.45;
    font-size: 13px;
    text-align: left;
}
#app .indList li.strong{
    color: #e50012;
    font-weight: bold;
    font-size: 1em;
}

/*--- dp_and_puni ---*/
#app .dp_and_puni,
#app .dp_and_puni table{
    width: 100%;
}
#app .dp_and_puni table th{
    font-size: 22px;
    font-weight: bold;
    position: relative;
}
#app .dp_and_puni table th .inr{
    position: relative;
    z-index: 1;
}
#app .dp_and_puni table th .inr::before{
    content: "";
    display: block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 auto 3px;
}
#app .dp_and_puni table th.dpHead .inr::before,
#app .dp_and_puni table td .text .dp::after{
    background: url("../images/app/small_icon_point.svg") center center / contain no-repeat;
}
#app .dp_and_puni table th.puniHead .inr::before,
#app .dp_and_puni table td .text .puni::after{
    background: url("../images/app/small_icon_puni.svg") center center / contain no-repeat;
}
#app .dp_and_puni table tr:first-of-type th:first-of-type{
    width: 20%;
}
#app .dp_and_puni table tr:first-of-type th:nth-child(2),
#app .dp_and_puni table tr:first-of-type th:last-of-type{
    width: 40%;
    border: 1px solid transparent;
    padding: 20px;
    color: #fff;
}
#app .dp_and_puni table tr:first-of-type th:nth-child(2)::after{
    content: "";
    display: block;
    border-left: 1px solid #c4c4c4;
    border-top: 1px solid #c4c4c4;
    border-radius: 15px 0 0 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #e63c0e;
}
#app .dp_and_puni table tr:first-of-type th:last-of-type::after,
#app .dp_and_puni table tr:not(:first-of-type) th::after{
    content: "";
    display: block;
    border-radius: 0 15px 0 0;
    border-right: 1px solid #c4c4c4;
    border-top: 1px solid #c4c4c4;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #dd9600;
}

#app .dp_and_puni table tr:not(:first-of-type) th{
    border: 1px solid transparent;
    padding: 20px;
}
#app .dp_and_puni table tr:not(:first-of-type) th::after{
    background: #f5f3ed;
}
#app .dp_and_puni table tr:nth-child(2) th::after{
    border-radius: 15px 0 0 0;  
    border-left: 1px solid #c4c4c4;
    border-right: none;
}
#app .dp_and_puni table tr:last-of-type th::after{
    border-radius: 0 0 0 15px;  
    border-left: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    border-right: none;
}
#app .dp_and_puni table tr:not(:first-of-type) th > p{
    z-index: 1;
    position: relative;
}

#app .dp_and_puni table td{
    border: 1px solid transparent;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}
#app .dp_and_puni table td::after{
    content: "";
    display: block;
    border-left: 1px solid #c4c4c4;
    border-top: 1px solid #c4c4c4;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    z-index: 0;
}
#app .dp_and_puni table td:last-of-type::after{
    border-right: 1px solid #c4c4c4;
}
#app .dp_and_puni table tr:last-of-type td:last-of-type::after{
    border-bottom: 1px solid #c4c4c4;
    border-radius: 0 0 15px 0;
}

#app .dp_and_puni table td p,
#app .dp_and_puni table td div,
#app .dp_and_puni table td ul{
    position: relative;
    z-index: 1;
}

#app .dp_and_puni table td .image01{
    max-width: 206px;
    margin: 0 auto;
}
#app .dp_and_puni table td .imageBox{
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
}
#app .dp_and_puni table td .imageBox .image02{
    width: 42%;
}
#app .dp_and_puni table td .imageBox .image03{
    width: 52%;
}
#app .dp_and_puni table td .imageBox figcaption{
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
}
#app .dp_and_puni table td .indList {
    width: 100%;
    max-width: none;
}
#app .dp_and_puni table td .indList li{
    font-size: 11px;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
#app .dp_and_puni table td .text{
    font-weight: bold;
    margin-bottom: 1em;
    font-size: 14px;
}
#app .dp_and_puni table td .text strong{
    background-image: linear-gradient(90deg, #fff200, #fff200);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 8px;
}
#app .dp_and_puni table td .text .large{
    font-size: 1.45em;
}
#app .dp_and_puni table td .text .dp,
#app .dp_and_puni table td .text .puni{
    display: inline-block;
    padding: 7px 18px 10px;
    border-radius: 100px;
    background: #e63c0e;
    font-size: 18px;
    color: #fff;
    line-height: 1;
    margin: 0 8px;
}
#app .dp_and_puni table td .text .puni{
    background: #dd9600;
}
#app .dp_and_puni table td .text .dp::after,
#app .dp_and_puni table td .text .puni::after{
    display: inline-block;
    content: "";
    width: 1.1em;
    height: 1.1em;
    margin: 1px 0 -2px 2px;
}


/*--- stageup ---*/
#app .stageup{
    position: relative;
}
#app .stageup .stageupHead{
    position: absolute;
    left: 0;
    top: 0;
    width: 42%;
    margin-bottom: 0;
}
#app .stageup .image01 {
    width: calc(100% + 100px);
    margin-left: -50px;
    padding-top: 6%;
}
#app .stageupBox .image02{
    margin-top: 60px;
}


/*--- appInfo ---*/
#app .appContents.appInfo .section .pointImg {    
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-radius: 10px;
    overflow: hidden;
}
#app .appContents  .annotation{
    display: table;
    margin: 0 auto;
}
#app .appContents  .annotation li{
    padding-left: 1em;
    position: relative;
    line-height: 1.25;
    font-size: 12px;
    text-align: left;
    margin-bottom: 3px;
}
#app .appContents  .annotation li::before{
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}

#app .appContents.appInfo .list01 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px 0;
}
#app .appContents.appInfo .list01 > li{
    width: 46%;
    margin: 0 2%;
}
#app .appContents.appInfo .list01 > li .annotation{
    margin-top: 15px;
}
#app .appContents .subTit {
    text-align: center;
	margin-bottom: 15px;
	white-space: pre;
}

#app .appContents.appInfo .couponImg{
    border-radius: 10px;
    overflow: hidden;
}

#app .appContents .subTit span {
	position: relative;
	font-size: 17px;
	font-weight: bold;
	padding: 0 40px;
}

#app .appContents .subTit span:before,
#app .appContents .subTit span:after {
	content: "";
    display: block;
    background: #222;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#app .appContents .subTit span:before {
    left: 0;
}
#app .appContents .subTit span:after  {
	right: 0;
}

#app .appContents .borderTop{
    border-top: 1px solid #dfd7b9;
    padding-top: 30px;
    margin-top: 30px;
}

#app .appContents.appInfo .questionImg {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
}

#app .appContents.appInfo .inforImg {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#app .appContents.appInfo .inforImg img {
	width: 100%;
    max-width: 280px;
	display: block;
	margin: auto;
}


/*--- appRegistration ---*/
#app .appContents.appRegistration ul.download {
	max-width: 505px;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 0 auto 60px;
}

#app .appContents.appRegistration ul.download li {
	width: 45%;
    margin: 0 1%;
}

#app .appContents.appRegistration ul.download li:first-child {
	margin-right: 4.6%;
}

#app .appContents.appRegistration ul.download li img {
	-webkit-transition: .3s ease;
	transition: .3s ease;
}


#app .appContents.appRegistration .fukidashi {
	text-align: center;
	margin: 60px auto 25px;
	}

#app .appContents.appRegistration .fukidashi span {
	position: relative;
	display: inline-block;
	background: #e50012;
    color: #fff;
	border-radius: 30px;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	padding: 15px 40px;
	}

#app .appContents.appRegistration .fukidashi span:before {
	content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #e50012 transparent transparent transparent;
    border-width: 8px 8px 0 8px;
}

/*--- modal ---*/
#app .modalLogin .txt {
	font-size: clamp(14px,4vw,18px);
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 25px;
	}

#app .modalLogin .img {
	width: 100%;
    max-width: 280px;
	margin:0 auto;
	}

#app .modalLogin .logoImg {
	width: 100%;
	margin:0 auto;
	}

#app .modalLogin .subTxt {
	text-align: center;
	border-top: 1px solid rgba(0,0,0,.15);
	padding-top: 30px;
	margin-top: 30px;
	}

#app .modalLogin .subTxt span {
	position: relative;
    font-size: 17px;
    font-weight: bold;
    padding: 0 40px;
	margin-bottom: 20px;
	}

#app .modalLogin .subTxt span:before,
#app .modalLogin .subTxt span:after {
	content: "";
    display: block;
    background: #222;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
	}

#app .modalLogin .subTxt span:before {
	left: 0;
	}

#app .modalLogin .subTxt span:after {
	right: 0;
	}

#app .modalLogin ul.modalAnnotation li {
	font-size: 14px;
	text-indent: 0px;
    margin-left: 14px;
    line-height: 1.8;
	}

#app .modalLogin ul.modalAnnotation li:before {
    content: '■';
	}

/*-------------------------------------------
Animation
-------------------------------------------*/

.appMain .slidein,
.out.slidein,
.out .slidein{
    opacity: 0;
}

.appMain .slidein,
.in.slidein,
.in .slidein{
    animation: slidein 0.8s ease forwards;
}

@keyframes slidein{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

.fadein{
    opacity: 0;
}
.in.fadein,
.in .fadein,
.appMain .fadein,
.appMain.fadein,
#mainTitle .fadein{
    animation: fadein 1s ease forwards;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1; }
}

.appMain .clipAnimationLtoR,
.clipAnimationLtoR {
    clip-path: inset(0 100% 0 0);
}

.appMain .clipAnimationLtoR,
.in .clipAnimationLtoR,
.in.clipAnimationLtoR{
    animation: clipAnimationLtoR .5s ease-in-out forwards;
}

@keyframes clipAnimationLtoR {
	0% { clip-path: inset(0 100% 0 0);}
	100% { clip-path: inset(0 0 0 0); }
}

.delay01{ animation-delay: 0.1s!important;}
.delay02{ animation-delay: 0.2s!important;}
.delay03{ animation-delay: 0.3s!important;}
.delay04{ animation-delay: 0.4s!important;}
.delay05{ animation-delay: 0.5s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay07{ animation-delay: 0.7s!important;}
.delay08{ animation-delay: 0.8s!important;}
.delay09{ animation-delay: 0.9s!important;}
.delay10{ animation-delay: 1.0s!important;}
.delay11{ animation-delay: 1.1s!important;}
.delay12{ animation-delay: 1.2s!important;}
.delay13{ animation-delay: 1.3s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay15{ animation-delay: 1.5s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay17{ animation-delay: 1.7s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay19{ animation-delay: 1.9s!important;}
.delay20{ animation-delay: 2.0s!important;}
.delay21{ animation-delay: 2.1s!important;}
.delay22{ animation-delay: 2.2s!important;}
.delay23{ animation-delay: 2.3s!important;}
.delay24{ animation-delay: 2.4s!important;}
.delay25{ animation-delay: 2.5s!important;}
.delay26{ animation-delay: 2.6s!important;}
.delay27{ animation-delay: 2.7s!important;}
.delay28{ animation-delay: 2.8s!important;}
.delay29{ animation-delay: 2.9s!important;}
.delay30{ animation-delay: 2.0s!important;}


/*-------------------------------------------
ONLY PC & HOVER
-------------------------------------------*/
@media only screen and (min-width: 769px){
	#app img,
	#app .appMain .inr{
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}
}

/*-------------------------------------------
UNDER 1200
-------------------------------------------*/
@media only screen and (max-width: 1200px){
    
    /*--- dpList ---*/    
    #app .appContents .dpList li {
        width: 31%;
    }
}

/*-------------------------------------------
UNDER 1000
-------------------------------------------*/
@media only screen and (max-width: 1000px){
    
    #app .appContents {
        border-radius: 0 ;
        width: 90%;
        max-width: 840px;
        padding: 60px 30px;
    }
    #app .appContents.appRegistration{
        border-radius: 30px;
    }
        
    /*--- contentsHead ---*/
    #app .appContents .contentsHead{
        margin-bottom: 40px;
    }
    
    /*--- head ---*/
    
    #app .head01{
	    width: 100%;
    }
    
    /*--- dpList ---*/
    #app .appContents .dpList .image figcaption{
        font-size: 15px;
        padding: 6px 10px;
    }
    #app .appContents .dpList .info{
        font-size: 14px;
        padding: 10px;
    }
    #app .appContents .dpList li:last-child .info::after {
        width: min(60px,14vw);
        transform: translate(70%, 20%);
    }
        
    /*--- stageup ---*/
    #app .stageup .stageupHead {
        width: max(280px,60%);
    }    
    #app .stageup .image01 {
        padding-top: max(34%, 155px);
    }
}

/*-------------------------------------------
UNDER 900
-------------------------------------------*/
@media only screen and (max-width: 900px){
    
    #app .tablet{ display: block !important;}
    
    #app .head01:before {
        width: 110px;
        height: 82px;
        top: -82px;
    }
    
    #app .appContents .section:has(.head01) {
        margin-top: 100px;
    }
    
    #app .appContents.appInfo .list01{
        flex-direction: column;
        max-width: 360px;
        margin: 0 auto;
    }
    #app .appContents.appInfo .list01 > li{
        width: 100%;
        margin: 0;
    }
    
    
    /*--- dp_and_puni ---*/
    #app .dp_and_puni table tr:first-of-type th:nth-child(2),
    #app .dp_and_puni table tr:first-of-type th:last-of-type {
        padding: 10px;
    }
    #app .dp_and_puni table th {
        font-size: clamp(10px,2vw,16px);
    }
    
    #app .dp_and_puni table td {
        padding: 20px 6px;
    }
    #app .dp_and_puni table tr:not(:first-of-type) th {
        padding: 0px;
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
    }
    #app .dp_and_puni table tr:not(:first-of-type) th > p {
        line-height: 1;
        margin: 0 auto;
    }
    #app .dp_and_puni table tr:not(:first-of-type) th > p br{
        display: none;
    }
    
    #app .dp_and_puni table tr:first-of-type th:nth-child(2)::after,
    #app .dp_and_puni table tr:nth-child(2) th::after,
    #app .dp_and_puni table tr:not(:first-of-type) th::after{
        border-radius: 10px 0 0 0;
    }
    
    #app .dp_and_puni table tr:first-of-type th:last-of-type::after{
            border-radius: 0 10px 0 0;
    }
    #app .dp_and_puni table tr:last-of-type th::after {
        border-radius: 0 0 0 10px;
    }
    #app .dp_and_puni table tr:last-of-type td:last-of-type::after {
        border-radius: 0 0 10px 0;
    }
    
    #app .dp_and_puni table td .text{
        font-size: 12px;
    }
    
    #app .dp_and_puni table td .text .large {
        font-size: 1.2em;
    }
    #app .dp_and_puni table td .text .dp, #app .dp_and_puni table td .text .puni {
        padding: 5px 14px 8px;
        font-size: 1.2em;
        margin: 2px 8px;
    }
    #app .dp_and_puni table td .imageBox{
        flex-direction: column;
    }
    #app .dp_and_puni table td .imageBox{
        margin: 10px auto;
        width: 85%;
        max-width: 250px;
    }
    #app .dp_and_puni table td .image01 {
        max-width: 130px;
    }
    #app .dp_and_puni table td .imageBox .image02,
    #app .dp_and_puni table td .imageBox .image03{
        width: 100%;
        margin: 10px 0;
    }
    
}

/*-------------------------------------------
UNDER 700
-------------------------------------------*/
@media only screen and (max-width: 700px){
    
    #app{
        padding-bottom: 60px;
    }
    
    /*--- appMain ---*/
    #app .appMain {
        padding: min(18%,70px) 0 min(10%,50px);
    }
    #app .appMain .appMainInr {
        max-width: 480px;
    }
    #app .appMain .date {
        width: min(150px, 30%);
    }
    #app .appMain .titleBox {
        width: 64%;
    }
    #app .appMain .titleBox .mainTitle {
        padding-top: 17%;
    }
    #app .appMain .titleBox .subTitle {
        width: 83%;
        max-width: none;
    }
    #app .appMain .titleBox .phone {
        width: 49%;
        left: 52%;
        margin-bottom: 30%;
    }
    #app .appMain .titleBox .point {
        width: 120%;
        margin: 0 -10%;
    }
    
    #app .appMain .deco01 {
        width: 30%;
        margin: 16% 0 0 -7%;
    }
    #app .appMain .deco02 {
        width: 35%;
        margin: -17% -11% 0 0;
    }
    #app .appMain .deco03 {
        width: 30%;
        margin: 8% -10% 0 0;
    }
    #app .appMain .deco04 {
        width: 17.5%;
        left: 0;
        margin: 51% 0 0 -0.3%;
    }
    
    
    /*--- appCouponAndPuni ---*/
    #app .appCouponAndPuni > .title {
        font-size: min(5vw, 24px);
        margin-bottom: .5em;
    }
    #app .appCouponAndPuni .inr{
        flex-direction: column;
        max-width: 420px;
        margin: 0 auto;
    }
    #app .appCouponAndPuni .inr dl{
        width: 100%;
        margin-top: 30px;
        justify-content: flex-start;
    }
    #app .appCouponAndPuni .inr dl dt {
        max-width: 100px;
    }
    #app .appCouponAndPuni .inr dl dd{
        width: auto;
        margin-left: 5%;
    }
    #app .appCouponAndPuni .inr dl dd .title {
        font-size: min(24px, 3.2vw);
    }
    
    /*--- registration ---*/
    #app .registration {
        margin: 50px auto 0;
    }
    #app .registration .caption {
        width: 70%;
    }
    
    /*--- btn01 ---*/
    #app .btn01 a {
        width: 100%;
        font-size: clamp(16px, 5vw, 26px);
        padding: 20px 10px;
    }
    #app .btn01 a .arrow {
        right: 14px;
    }
    
    
    /*--- tabLink ---*/
    #app #tabLink {
        padding-top: 50px;
    }
    #app ul.appTab {
        justify-content: space-between;
    }
    #app ul.appTab li {
        width: 32%;
        margin-right: 0;
    }

    #app ul.appTab li a .tab {
        border-radius: 10px 10px 0 0;
        padding: 22% 0% 15%;
        margin-top: -15%;
    }
    #app ul.appTab li a .tab .off {
        left: 0%;
        top: 0;
        width: 100%;
        margin-top: 22%;
    }
    #app ul.appTab.bottom li a .tab {
        margin-bottom: -10%;
        margin-top: 0;
        border-radius: 0 0 10px 10px;
        padding: 10% 0 15%;
    }
        
    /*--- appContents ---*/
    #app .appContents {
        border-radius: 0 ;
        padding: 50px 5%;
    }
    #app .appContents.appRegistration{
        border-radius: 25px;
    }
    
    #app .appContents .contentsHead .deco{
        width: 25%;
        max-width: 115px;
    }
    #app .appContents .contentsHead .deco01 {
        left: -13%;
    }
    #app .appContents .contentsHead .deco02{
        right: -13%;
    }
    #app .appContents .contentsHead{
        margin-bottom: 30px;
    }
    #app .appContents .head02 {
        font-size: 17px;
    }
    
    #app .appContents.puniPoint .contentsHead .deco01 {
        left: 6%;
        bottom: -45px;
    }
    #app .appContents.puniPoint .contentsHead .deco02 {
        right: 6%;
        bottom: -45px;
    }
    #app .appContents.appInfo .contentsHead .deco01 {
        left: -15%;
        top: -45px;
    }
    #app .appContents.appInfo .contentsHead .deco02 {
        right: -15%;
        top: -45px;
    }
    
    /*--- dpList ---*/
    #app .appContents .dpList{
        margin-top: 30px;
    }
    
    /*--- head ---*/
    #app .head01 {
        width: 100%;
        font-size: 18px;
        padding: 15px;
    }
    #app .head01:before {
        width: 80px;
        height: 59px;
        top: -59px;
    }
    
    /*--- section ---*/
    #app .appContents .section:has(.head01) {
        margin-top: 80px;
    }
    #app .appContents .section > .inr {
        border-radius: 20px;
        padding: 30px;
    }
    #app .appContents .section:has(.head01) > .inr {
        margin-top: -30px;
        padding-top: 60px;
    }
    
    /*-- stageup --*/
    #app .appContents .section.stageupBox > .inr{
        padding-left: 0;
        padding-right: 0;
    }
    #app .stageup .stageupHead {
        left: 30px;
        width: calc(100% - 60px);
        max-width: 340px;
    }
    #app .stageup .image01 {
        width: 100%;
        margin: 0;
        padding: min(53%,220px) 30px 0 0;
    }
    
    #app .stageupBox .image02 {
        margin-top: 40px;
        width: 85%;
    }
    
    /*-- spOverflow --*/
    .spOverflow{
		overflow-x: scroll;
		width: 100% !important;
		padding: 0 9% 20px;
    }
    .spOverflow .image{
		width: 580px !important;
        max-width: none !important;
        opacity: 0.3;
        transition: .4s;
        position: relative;
	}
    .spOverflow .inr{
        opacity: 0.3;
        position: relative;
    }
    .spOverflow .deco img{
        width: 100%;
    }
    .spOverflow.touched .inr,
    .spOverflow.touched .image{
        opacity: 1;
    }
    .howToScroll.is-ua-sp{
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.howToScroll.is-ua-sp .howToScrollInr::after{
		content: "";
		display: block;
		width: 70%;
		height: 100%;
		position: absolute;
		left: 15%;
		top: 0;
		z-index: 2;
		background: url("../images/common/icon_swipe.svg")center center / 60% auto no-repeat;
		animation: slideLr 1500ms linear infinite;
		transition: all 300ms;
	}
    .howToScroll.is-ua-sp.delete,
	.howToScroll.is-ua-sp .howToScrollInr.delete {
		animation: none;
		transition: .3s;
		opacity: 0;
		visibility: hidden;
	}
    
    #app .stageupBox .spOverflow .sp{
        width: 200px;
        position: absolute;
        left: 30px;
        top: 0;
    }
    
}
    

@keyframes slideLr {
	0% { transform: translateX(10px); opacity: 0;}
	3% { transform: translateX(10px); opacity: 1;}
	100% { transform: translateX(-10px); opacity: 0; }
}


/*-------------------------------------------
UNDER 600
-------------------------------------------*/
@media only screen and (max-width: 600px){
	
    #app {
        font-size: 14px;
    }
	br.pc-none {
        display: inline;
    }
	#app .sp { display: block !important;}
	#app .pc { display: none;}
    
    /*--- dpList ---*/
    #app .appContents .dpList li {
        width: 48%;
    }
    
    /*--- head ---*/
    #app .appContents .head03 {
        font-size: .9em;
    }    
    
    /*--- lead ---*/
    #app .appContents .lead01{
        text-align: justify;
        font-size: 14px;
    }
    
    /*--- indList ---*/
    #app .indList li.strong {
        font-size: 0.9em;
    }
    
    /*--- btn ---*/
    #app .btn01 a .arrow{
        height: .6em;
    }
    #app .appContents .section .btn01 a {
        font-size: 16px;
        padding: 10px 10px;
    }
    #app .appContents.appRegistration .section .btn01 a {
        font-size: 14px;
        padding: 10px 30px;
    }
    #app .btn01 a .arrow, #app .btn01 a .window {
        right: 15px;
    }
    
    /*--- list ---*/    
    #app .appContents.appInfo .list01{
        gap: 20px 0;
    }
    
    /*--- subTit ---*/  
    #app .appContents .subTit span {
        font-size: 14px;
        padding: 0 34px;
    }
    
    /*--- appRegistration ---*/  
    #app .appContents.appRegistration {
        margin: 50px auto 20px;
    }
    #app .appContents.appRegistration .contentsHead .deco01 {
        left: -3%;
        top: -75%;
        bottom: auto;
    }     
    #app .appContents.appRegistration .contentsHead .deco02 {
        right: -3%;
        top: -75%;
        bottom: auto;
    }
    #app .appContents.appRegistration ul.download{
        flex-direction: column;
        justify-content: center;
        margin: 0 auto 30px;
        max-width: 200px;
        gap: 10px;
    }
    #app .appContents.appRegistration ul.download li{
        width: 100%;
    }
    
}

/*-------------------------------------------
UNDER 480
-------------------------------------------*/
@media only screen and (max-width: 480px){
    
    #app .appCouponAndPuni .inr dl {
        margin-top: 15px;
    }
    #app .appCouponAndPuni .inr dl dd .title {
        font-size: 18px;
    }
    #app .appCouponAndPuni .inr dl dd .text {
        font-size: clamp(2vw,2vw,14px);
    }
    
    #app .appContents .section > .inr.spWide{
        padding-left: 10px;
        padding-right: 10px;
    }
    
}