@charset "UTF-8";


input[type=radio], input[type=checkbox] {
display: none;
}

.radio, .checkbox {
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
width: 340px;
padding: 16px 12px 16px 42px;
border-radius: 3px;
background-color: #ffffff;
vertical-align: middle;
cursor: pointer;
border: 1px solid #cccccc;
}
.radio:hover, .checkbox:hover {
border: 1px solid #c2a915;
background-color: #ffffff;
}
.radio:hover:after, .checkbox:hover:after {
border-color: #c2a915;
}
.radio:after,
.checkbox:after {
-webkit-transition: border-color 0.2s linear;
transition: border-color 0.2s linear;
position: absolute;
top: 50%;
left: 15px;
display: block;
margin-top: -10px;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
border-radius: 10px;
content: '';
}
.radio:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 18px;
display: block;
margin-top: -7px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #c2a915;
content: '';
opacity: 0;
}
input[type=radio]:checked + .radio {
border: 1px solid #c2a915;
}
input[type=radio]:checked + .radio:before {
opacity: 1;
}
.checkbox:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 21px;
display: block;
margin-top: -7px;
width: 5px;
height: 9px;
border-right: 3px solid #c2a915;
border-bottom: 3px solid #c2a915;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
opacity: 1;
}




.select-wrap {
position: relative;
width: 160px;
float: left;
}
.select-wrap:before {
z-index: 1;
position: absolute;
right: 15px;
top: 21px;
content: "";
background-image: url(/assets/images/new/account/icon-arrow.png);
width: 10px;
height: 7px;
background-repeat: no-repeat;
background-size: cover;
}
select{
outline:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
height: 50px;
padding: 8px 12px;
border:1px solid #ddd;
color:#333333;
width:100%;
border-radius:3px;
}
select option{
background-color: #ffffff;
color: #333333;
}
select::-ms-expand {
display: none;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #828c9a;
}

/* ================================================================= */
/* ======================== 0 〜 824px以上 =========================== */
/* ============================================================== */

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

.radio, .checkbox {
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
width: 100%;
padding: 16px 12px 16px 42px;
border-radius: 3px;
background-color: #ffffff;
vertical-align: middle;
cursor: pointer;
border: 1px solid #cccccc;
}


/* account共通 */
#account {
margin-top: 60px;
}

/* accountarea */
#account .accountarea {
background-color: #ffffff;
padding: 40px 0 0;
text-align: center;
}
#account .accountarea h2 {
font-size: 30px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin-bottom: 40px;
}
#account .accountarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#account .accountarea .couponarea {
width: 86.667%;
margin: 40px auto;
padding: 40px 30px;
border: 1px solid #cccccc;
}
#account .accountarea .couponarea h3 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
text-align: center;
margin-bottom: 30px;
}
#account .accountarea .couponarea h3 span {
color: #c2a915;
}
#account .accountarea .couponarea h3 span .price {
}
#account .accountarea .couponarea p {
font-size: 16px;
line-height: 2;
}



#account .accountarea .locationarea {
width: 100%;
margin: 0 auto;
padding: 40px 0;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#account .accountarea .locationarea ul {
width: 284px;
margin: 0 auto;
position: relative;
background-image: url(/assets/images/new/account/line-normal-sp.png);
background-position:9px 14px;
background-repeat: no-repeat;
background-size: 268px 2px;
}
#account.second .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-02.png);
}
#account.third .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-03.png);
}
#account.fourth .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-04.png);
}
#account .accountarea .locationarea ul li {
float: left;
text-align: center;
}
#account .accountarea .locationarea ul li:nth-child(1) {
width: 49px;
margin-right: 23px;
}
#account .accountarea .locationarea ul li:nth-child(2) {
width: 67px;
margin-right: 32px;
}
#account .accountarea .locationarea ul li:nth-child(3) {
width: 30px;
margin-right: 40px;
}
#account .accountarea .locationarea ul li:nth-child(4) {
width: 42px;
}
#account .accountarea .locationarea ul li img {
width: 30px;
height: auto;
}
#account .accountarea .locationarea ul li span {
display: block;
font-size: 10px;
margin-top: 5px;
}
#account .accountarea .locationarea ul li.active span {
font-weight: bold;
}


#account .accountarea .inputarea {
padding: 75px 0;
}
#account .accountarea .inputarea ul {
width: 86.667%;
margin: 0 auto 30px;
}
#account .accountarea .inputarea ul.tel {
margin-bottom: 50px;
}
#account .accountarea .inputarea ul li {
margin-bottom: 30px;
}
#account .accountarea .inputarea ul li ul {
margin-top: 10px;
}
#account .accountarea .inputarea ul li ul li {
margin-top: 10px;
margin-bottom: 15px;
}
#account .accountarea .inputarea ul.gender li ul,
#account .accountarea .inputarea ul.birthday li ul {
margin-top: 10px;
width: 100%;
}
#account .accountarea .inputarea ul.birthday li ul {
margin-bottom: 0;
}
#account .accountarea .inputarea ul.name li:last-child,
#account .accountarea .inputarea ul.gender li:last-child {
margin-bottom: 0;
}
#account .accountarea .inputarea ul.name li,
#account .accountarea .inputarea ul.gender li {
width: 100%;
margin-right: 20px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.birthday li {
 margin-right: 0;
}
#account .accountarea .inputarea ul.birthday li ul li {
font-weight: bold;
text-align: left;
margin: 0 5px 0 0;
}
#account .accountarea .inputarea ul.anniversaryday li {
 text-align: left;
 font-weight: bold;
}
#account .accountarea .inputarea ul.anniversaryday li ul {
margin: 10px 0 0 0;
width: 100%;
font-weight: bold;
}
#account .accountarea .inputarea ul.anniversaryday li ul li {
font-weight: bold;
text-align: left;
margin: 0 5px 0 0;
}
#account .accountarea .inputarea ul.birthday li.year .select-wrap,
#account .accountarea .inputarea ul.anniversaryday li.year .select-wrap {
width: 88px;
}
#account .accountarea .inputarea ul.birthday li.month .select-wrap,
#account .accountarea .inputarea ul.anniversaryday li.month .select-wrap,
#account .accountarea .inputarea ul.birthday li.day .select-wrap,
#account .accountarea .inputarea ul.anniversaryday li.day .select-wrap {
width: 65px;
}
#account .accountarea .inputarea ul.birthday li ul li,
#account .accountarea .inputarea ul.anniversaryday li ul li {
float: left;
}
#account .accountarea .inputarea ul.anniversaryday li ul li.whatday {
width: 100%;
margin-top: 20px;
}
#account .accountarea .inputarea ul.birthday li span,
#account .accountarea .inputarea ul.anniversaryday li span {
line-height: 50px;
padding-left: 5px;
}
#account .accountarea .inputarea ul.postalcode li,
#account .accountarea .inputarea ul.tel li {
width: 200px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.address li {
width: 100%;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.name li span,
#account .accountarea .inputarea ul.postalcode li span,
#account .accountarea .inputarea ul.address li span,
#account .accountarea .inputarea ul.tel li span {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 13px;
color: #ffffff;
background-color: #c2a915;
border-radius: 3px;
margin-left: 10px;
}
#account .accountarea .inputarea ul.name li input,
#account .accountarea .inputarea ul.postalcode li input,
#account .accountarea .inputarea ul.address li input,
#account .accountarea .inputarea ul.tel li input,
#account .accountarea .inputarea ul.anniversaryday li input {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 16px;
font-weight: normal;
margin-top: 10px;
padding: 0 10px;
outline: none;

}
#account input[type="text"]{
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#account .accountarea .inputarea ul.anniversaryday li input {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 16px;
font-weight: normal;
margin-top: 0;
padding: 0 10px;
outline: none;
}
#account .accountarea .inputarea ul.accountnavi {
width: 84%;
margin: 60px auto 30px;
}
#account.first .accountarea .inputarea ul.accountnavi {
width: 200px;
margin: 0 auto;
}
#account .accountarea .inputarea ul.accountnavi li:last-child {
margin: 0;
}
#account .accountarea .inputarea ul.accountnavi li {
font-size: 16px;
font-weight: bold;
text-align: center;
width: 80%;
height: 70px;
line-height: 50px;
margin-right: 4.76%;
margin-bottom: 0;
float: left;
}
#account.first .accountarea .inputarea ul.accountnavi li {
width: 100%;
}
#account .accountarea .inputarea ul.accountnavi li a {
color: #ffffff;
background-color: #c2a915;
display: block;
font-size: 16px;
border-radius: 3px;
}
#account .accountarea .inputarea ul.accountnavi li.prev a {
background-color: #333855;
}

#account .accountarea .inputarea .btn.pastbuy {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #c2a915;
text-align: center;
width: 300px;
height: 60px;
line-height: 60px;
border-radius: 3px;
margin: 30px auto 0;
}
#account .accountarea .inputarea .btn.pastbuy a {
color: #c2a915;
display: block;
font-size: 16px;
}
#account .accountarea .inputarea .addaniversary {
width: 180px;
height: 40px;
line-height: 40px;
color: #666666;
border: 1px solid #cccccc;
border-radius: 5px;
margin: 0 auto;
}


#account .accountarea .inputarea h3 {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
#account .accountarea .inputarea p {
font-size: 16px;
line-height: 2;
}
#account .accountarea .inputarea .totop {
width: 220px;
height: 50px;
line-height: 50px;
margin: 40px auto 0;
}
#account .accountarea .inputarea .totop a {
display: block;
font-weight: bold;
color: #ffffff;
background-color: #c2a915;
border-radius: 3px;
}





}

/* ================================================================= */
/* ======================== SP END =========================== */
/* ============================================================== */


/* ================================================================= */
/* ======================== 825px以上 =========================== */
/* ============================================================== */

@media screen and (min-width:825px) {

/* account共通 */
#account {
margin-top: 140px;
}

/* accountarea */
#account .accountarea {
padding: 0;
text-align: center;
}
#account .accountarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin-bottom: 70px;
}
#account .accountarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}


#account .accountarea .couponarea {
width: 700px;
margin: 70px auto;
padding: 43px 70px;
border: 1px solid #cccccc;
}
#account .accountarea .couponarea h3 {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
#account .accountarea .couponarea h3 span {
color: #c2a915;
}
#account .accountarea .couponarea h3 span .price {
font-size: 36px;
}
#account .accountarea .couponarea p {
font-size: 15px;
line-height: 2;
}



#account .accountarea .locationarea {
padding: 32px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#account .accountarea .locationarea ul {
width: 456px;
margin: 0 auto;
position: relative;
background-image: url(/assets/images/new/account/line-normal.png);
background-position: 20px 13px;
background-repeat: no-repeat;
}
#account.second .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-02.png);
}
#account.third .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-03.png);
}
#account.fourth .accountarea .locationarea ul {
background-image: url(/assets/images/new/account/line-normal-04.png);
}
#account .accountarea .locationarea ul li {
float: left;
text-align: center;
}
#account .accountarea .locationarea ul li:nth-child(1) {
width: 68px;
margin-right: 49px;
}
#account .accountarea .locationarea ul li:nth-child(2) {
width: 95px;
margin-right: 63px;
}
#account .accountarea .locationarea ul li:nth-child(3) {
width: 43px;
margin-right: 80px;
}
#account .accountarea .locationarea ul li:nth-child(4) {
width: 58px;
}
#account .accountarea .locationarea ul li img {
width: 30px;
height: auto;
}
#account .accountarea .locationarea ul li span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#account .accountarea .locationarea ul li.active span {
font-weight: bold;
}

#account .accountarea .inputarea {
padding: 150px 0;
}
#account.first .accountarea .inputarea ul,
#account.second .accountarea .inputarea ul {
width: 700px;
margin: 0 auto 50px;
}

#account .accountarea .inputarea ul {
width: 860px;
margin: 0 auto 50px;
}
#account .accountarea .inputarea ul.anniversaryday {

}
#account .accountarea .inputarea ul li ul {
margin-top: 10px;
}
#account .accountarea .inputarea ul.name li:last-child,
#account .accountarea .inputarea ul.gender li:last-child {
margin-right: 0;
}
#account .accountarea .inputarea ul.name li,
#account .accountarea .inputarea ul.gender li ul li {
float: left;
width: 340px;
margin-right: 20px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.birthday li ul li,
#account .accountarea .inputarea ul.anniversaryday li ul li {
float: left;
width: 185px;
margin-right: 20px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.anniversaryday li.whatday {
width: 245px;
margin-right: 0;
}
#account .accountarea .inputarea ul.birthday li span,
#account .accountarea .inputarea ul.anniversaryday li span {
line-height: 50px;
padding-left: 5px;
}
#account .accountarea .inputarea ul.postalcode li,
#account .accountarea .inputarea ul.tel li {
float: left;
width: 340px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.address li,
#account .accountarea .inputarea ul.gender li,
#account .accountarea .inputarea ul.birthday li {
float: left;
width: 700px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.anniversaryday li {
float: left;
width: 860px;
font-weight: bold;
text-align: left;
}
#account .accountarea .inputarea ul.gender li ul,
#account .accountarea .inputarea ul.birthday li ul {
margin-top: 10px;
}
#account .accountarea .inputarea ul.name li span,
#account .accountarea .inputarea ul.postalcode li span,
#account .accountarea .inputarea ul.address li span,
#account .accountarea .inputarea ul.tel li span {
display: inline-block;
width: 60px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
color: #ffffff;
background-color: #c2a915;
border-radius: 3px;
margin-left: 16px;
}
#account .accountarea .inputarea ul.name li input,
#account .accountarea .inputarea ul.postalcode li input,
#account .accountarea .inputarea ul.address li input,
#account .accountarea .inputarea ul.tel li input,
#account .accountarea .inputarea ul.anniversaryday li input {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 16px;
font-weight: normal;
margin-top: 10px;
padding: 0 10px;
outline: none;
}
#account .accountarea .inputarea ul.anniversaryday li input {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 16px;
font-weight: normal;
margin-top: 0;
padding: 0 10px;
outline: none;
}
#account .accountarea .inputarea ul.accountnavi {
width: 420px;
margin: 90px auto 40px;
}
#account.first .accountarea .inputarea ul.accountnavi {
width: 200px;
margin: 0 auto;
}
#account .accountarea .inputarea ul.accountnavi li:last-child {
margin-right: 0;
}
#account .accountarea .inputarea ul.accountnavi li {
font-size: 16px;
font-weight: bold;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
margin-right: 20px;
float: left;
}
#account .accountarea .inputarea ul.accountnavi li a {
color: #ffffff;
background-color: #c2a915;
display: block;
font-size: 16px;
border-radius: 3px;
}
#account .accountarea .inputarea ul.accountnavi li.prev a {
background-color: #333855;

}

#account .accountarea .inputarea .btn.pastbuy {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #c2a915;
text-align: center;
width: 300px;
height: 60px;
line-height: 60px;
border-radius: 3px;
margin: 30px auto 0;
}
#account .accountarea .inputarea .btn.pastbuy a {
color: #c2a915;
display: block;
font-size: 16px;
}

#account .accountarea .inputarea .addaniversary {
width: 180px;
height: 40px;
line-height: 40px;
color: #666666;
border: 1px solid #cccccc;
border-radius: 5px;
margin: 0 auto;
}


#account .accountarea .inputarea h3 {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
#account .accountarea .inputarea p {
font-size: 16px;
line-height: 2;
}
#account .accountarea .inputarea .totop {
width: 250px;
height: 50px;
line-height: 50px;
margin: 90px auto 0;
}
#account .accountarea .inputarea .totop a {
display: block;
font-weight: bold;
color: #ffffff;
background-color: #c2a915;
border-radius: 3px;
}

}

/* ================================================================= */
/* ======================== PC END =========================== */
/* ============================================================== */