@charset "shift_jis";

/* ==================================================

   Simple Style 1st Anniversary

================================================== */

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightbeige: #cbc1ae;

	--main-clr-white: #f4f5f0;
	--main-clr-gray: #7f7c7a;
	--main-clr-red: #d07157;

	--clr-ss-black: #48413b;
}

/* コンテンツ幅リセット */
main#wrapper {
	position: relative;
	width: 100%!important;
	max-width: initial!important;
	max-width: auto!important;
	margin: 0 auto!important;
	padding: 0!important;
	overflow: visible!important;
}
article#contents { padding-bottom: 0!important; }
article#contents .inner_content { padding-top: 0!important; }

#appdownload * { box-sizing: border-box; line-height: 1; }
#appdownload img { width: 100%; height: auto; }
#appdownload .pc_none { display: none; }

#appdownload {
	position: relative;
	width: 100%;
	display: flex;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(/IMAGE/appdownload/bg.jpg);
}



/* ==================================================
   メインコンテンツ
================================================== */

#appdownload .contentsarea {
	order: 2;
	position: relative;
	width: 560px;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	box-shadow: 0px 0px 32px 4px rgba(126,124,122,0.15);
	text-align: center;
}

#appdownload .section {
	position: relative;
	width: 100%;
	margin: 0 auto 48px;
	padding: 0;
}


/* 看板
================================================== */

#appdownload #kanban {
	position: relative;
	width: 100%;
	margin-bottom: 64px;
}

#appdownload .heading_ribon {
	position: relative;
	color: var(--main-clr-red);
	margin: 24px auto 1em;
}

#appdownload .heading_ribon > p {
	position: relative;
	color: var(--main-clr-red);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.35em;
}
#appdownload .heading_ribon > p::before,
#appdownload .heading_ribon > p::after {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 2px;
	height: 24px;
	background-color: var(--main-clr-red);
}
#appdownload .heading_ribon > p::before { transform: rotate(-20deg); margin-right: 0.5em;}
#appdownload .heading_ribon > p::after { transform: rotate(20deg); margin-left: 0.5em;}

#appdownload .heading_ribon > h3 {
	position: relative;
	width: 50%;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	background-color: var(--main-clr-red);
	margin: 0 auto;
}
#appdownload .heading_ribon > h3::before,
#appdownload .heading_ribon > h3::after {
	position: absolute;
	top: 0;
	display: inline-block;
	content: "";
	width: 24px;
	height: 48px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 24px 12px;
}
#appdownload .heading_ribon > h3::before {
	left: -24px;
	border-color: var(--main-clr-red) var(--main-clr-red) var(--main-clr-red) transparent;
}
#appdownload .heading_ribon > h3::after {
	right: -24px;
	border-color: var(--main-clr-red) transparent var(--main-clr-red) var(--main-clr-red);
}

#appdownload #kanban > p.time {
	font-size: 18px;
	font-weight: 700;
	margin: 0 auto 1em;
	font-feature-settings: "palt";
}





/* 見出し
================================================== */

#appdownload .heading {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	padding: 0.65em 0;
	color: #fff;
	background-color: var(--main-clr-red);
	margin-bottom: 1em;
}
#appdownload .heading span {
	display: block;
	font-size: 18px;
	margin-top: 1em;
}

#appdownload .heading02 {
	position: relative;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.5em;
}
#appdownload .heading02 strong {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	color: var(--main-clr-red);
	background-color: #fff;
	border: solid 1px var(--main-clr-red);
	padding: 0.15em 0.25em;
	transform: rotate(-5deg);
}

#appdownload .baloon {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 0 auto 24px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	background-color: var(--main-clr-lightbeige);
	padding: 0.75em 1.5em;
	border-radius: 16px;
}
#appdownload .baloon::after {
	position: absolute;
	top: 100%;
	left: 50%;
	display: inline-block;
	content: "";
	width: 0;
	height: 0;
	background-color: transparent;
	border-color: var(--main-clr-lightbeige) transparent transparent transparent;
	border-width: 8px 6px;
	border-style: solid;
	transform: translateX(-50%);
}


/* アプリダウンロード
================================================== */

#appdownload .app_download {
	position: relative;
	width: calc(100% - 20px*2);
	background-color: var(--main-clr-white);
	margin: 0 auto;
	padding: 20px;
}
#appdownload #block03 + .app_download { margin-bottom: 48px;}

#appdownload .app_download > a {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}
#appdownload .app_download > a .box_icon {
	width: 70%;
	padding: 0 24px 0 0;
}
#appdownload .app_download > a .box_icon p {
	position: relative;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0.75em;
}
#appdownload .app_download > a .box_icon p::after {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px var(--clr-ss-black);
	border-right: solid 2px var(--clr-ss-black);
	transform: rotate(45deg);
	transition: all 0.2s;
}
#appdownload .app_download > a:hover .box_icon p::after {
	border-color: var(--main-clr-red);
	transition: all 0.2s;
}
#appdownload .app_download > a .box_icon ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
#appdownload .app_download > a .box_icon ul li img {
	width: auto!important;
	height: 48px!important;
}

#appdownload .app_download > a .box_qr {
	width: 30%;
}







#appdownload .app_download > h3 {
	/* font-size: 18px;
	font-weight: 700; */
	margin-top: 1em;
}
#appdownload .app_download > h3 a {
	position: relative;
	width: 100%;
	display: block;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	background-color: var(--main-clr-lightbeige);
	border: solid 2px var(--main-clr-lightbeige);
	border-radius: 12px;
	padding: 0.75em;
}
#appdownload .app_download > h3 a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 8%;
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	transform: rotate(45deg);
}

#appdownload .app_download > h3:hover a {
	color: var(--main-clr-lightbeige);
	background-color: #fff;
}
#appdownload .app_download > h3:hover a::after {
	right: 6%;
	border-color: var(--main-clr-lightbeige);
}

#appdownload .app_download > dl {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
#appdownload .app_download > dl > dt { width: 96px; }
#appdownload .app_download > dl > dd > img { width: auto!important; height: 48px!important; }




/* 魅力がたくさん！公式アプリ誕生
================================================== */

#appdownload .appeal {
	position: relative;
	width: 100%;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#appdownload .appeal > .img {
	width: 45%;
	text-align: center;
}
#appdownload .appeal > .img img {
	max-width: 182px;
	height: auto;
	filter: drop-shadow(4px 4px 4px rgba(72,65,59,0.25));
}
#appdownload .appeal > dl {
	width: 65%;
	padding-left: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#appdownload .appeal > dl > dt { width: 100px; }
#appdownload .appeal > dl > dt img {
	width: 80px;
	height: auto;
}
#appdownload .appeal > dl > dd {
	width: calc(100% - 100px);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.65;
	text-align: left;
}

#appdownload .appeal > dl > dt,
#appdownload .appeal > dl > dd { margin: 12px auto;}




/* 公式アプリ誕生記念 ダウンロード特典
================================================== */

#appdownload .list_tokuten {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
	padding: 0 20px;
}
#appdownload .list_tokuten > li {
	position: relative;
	display: block;
	box-shadow: 0px 0px 6px 2px rgba(127,115,104,0.2);
	padding: 16px;
}
#appdownload .list_tokuten > li.num01,
#appdownload .list_tokuten > li.num02 { width: calc((100% - 12px)/2);}
#appdownload .list_tokuten > li.num03 { width: 100%; }

#appdownload .list_tokuten > li::before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	content: "";
	width: 20px;
	height: 20px;
	color: #fff;
	background-color: var(--clr-ss-black);
}
#appdownload .list_tokuten > li.num01::before { content: "1";}
#appdownload .list_tokuten > li.num02::before { content: "2";}
#appdownload .list_tokuten > li.num03::before { content: "3";}

#appdownload .list_tokuten > li > h4 {
	font-size: 14px;
	font-weight: 700;
}
#appdownload .list_tokuten.top > li > h4 {
	font-size: 16px;
	margin-bottom: 0.5em;
}
#appdownload .list_tokuten > li > h4 strong {
	display: block;
	color: var(--clr-ss-black);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.75;
}
#appdownload .list_tokuten.top > li > h4 strong {
	font-size: 20px;
}
#appdownload .list_tokuten > li > h4,
#appdownload .list_tokuten > li > h4 span {
	color: var(--main-clr-red);
}
#appdownload .list_tokuten > li > .p_tokuten {
	font-size: 28px;
	font-weight: bold;
	font-feature-settings: "palt";
	letter-spacing: 1px;
	line-height: 1;
}
#appdownload .list_tokuten > li > .p_tokuten strong {
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
}

#appdownload .list_tokuten > li > .att {
	font-size: 12px;
	line-height: 1.5;
	border-top: solid 1px var(--clr-ss-black);
	padding-top: 0.5em;
	margin-top: 0.5em;
}

#appdownload .txt_app {
	position: relative;
	width: 100%;
	margin-top: 20px;
	padding: 0 20px;
	text-align: left;
}
#appdownload .txt_app > h3 {
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 0.5em;
}
#appdownload .txt_app > p {
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
}


#appdownload .txt_coupon {
	width: auto;
	display: inline-block;
	text-align: center;
	margin-left: -6px;
}
#appdownload .txt_coupon span {
	display: block;
	font-weight: bold;
}
#appdownload .txt_coupon span.txt_coupon01 { font-size: 10px; }
#appdownload .txt_coupon span.txt_coupon02 { font-size: 24px; }


#appdownload .tokuten_shohin {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
#appdownload .tokuten_shohin > li {
	position: relative;
	width: calc((100% - 8px*2)/3);
	border-radius: 8px;
}
#appdownload .tokuten_shohin > li > img {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
#appdownload .tokuten_shohin > li > p {
	color: #fff;
	font-size: 14px;
	padding: 0.5em 0;
	background-color: var(--main-clr-lightbeige);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}



/* 共通：商品リスト
================================================== */

#appdownload .list_item {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 12px;
	padding: 0 20px;
}
#appdownload .list_item > li {
    position: relative;
    width: 100%;
    padding: 0 0 40px 0px;
}
#appdownload .list_item > li > a {
    position: relative;
    width: 100%;
    display: flex;
    /* background-color: var(--main-clr-white); */
    /* border: solid 2px var(--main-clr-white); */
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}
#appdownload .list_item > li > a::after {
	position: absolute;
	top: calc(50% - 3px);
	right: 20px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px var(--main-clr-red);
	border-right: solid 2px var(--main-clr-red);
	transform: rotate(45deg);
}
#appdownload .list_item > li > a > div { width: 100%;}

#appdownload .list_item .spec h4 {
    /* color: var(--main-clr-red); */
    font-size: 14px;
    font-weight: 700;
    /* margin-bottom: 0.5em; */
}
#appdownload .list_item .spec h4 strong {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.9;
}

#appdownload .list_item .spec p {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 1em;
}

#appdownload .list_item .list_point {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 4px;
}
#appdownload .list_item .list_point > li {
	position: relative;
	z-index: 2;
	font-size: 18px;
	line-height: 1;
}
#appdownload .list_item .list_point > li:nth-child(1)::before,
#appdownload .list_item .list_point > li:nth-child(3)::before {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: inline-block;
	content: "";
	width: 80px;
	height: 80px;
	background-color: #fff;
	border-radius: 50%;
}
#appdownload .list_item .list_point > li:nth-child(2) {
	font-size: 24px;
	font-weight: 700;
}
#appdownload .list_item .list_point > li > .icon {
	position: relative;
	width: auto;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--main-clr-red);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
}
#appdownload .list_item .list_point > li > strong {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}


#appdownload .list_item .prices {
	color: var(--main-clr-red);
	font-size: 18px;
	font-weight: 700;
	margin: 1em auto 0!important;
}
#appdownload .list_item .prices strong {
	font-size: 32px;
	font-weight: 700;
}



/* キャンペーン概要：アコーディオン
================================================== */

#appdownload details.about {
	position: relative;
	width: 100%;
	margin: 24px auto 0;
}
#appdownload details.about > summary {
	position: relative;
	width: 100%;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border: solid 1px var(--clr-ss-black);
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
}
#appdownload details.about > summary::-webkit-details-marker { display: none; }
#appdownload details.about > summary::before,
#appdownload details.about > summary::after {
	position: absolute;
	top: calc(50% - 1px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 16px;
	height: 1px;
	background-color: var(--clr-ss-black);
}
#appdownload details.about > summary::after {
	transform: rotate(90deg);
	transition: all 0.2s;
}
#appdownload details.about[open] > summary::after {
	transform: rotate(0);
	transition: all 0.2s;
}

#appdownload details.about > table {
	position: relative;
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
}
#appdownload details.about > table th,
#appdownload details.about > table td {
	font-size: 14px;
	line-height: 1.6;
	padding: 1em;
}
#appdownload details.about > table th {
	width: 16%;
	color: #fff;
	font-weight: bold;
	background-color: var(--main-clr-lightbeige);
}
#appdownload details.about > table td {
	width: 84%;
	text-align: left;
	background-color: var(--main-clr-white);
}

#appdownload details.about > table td ul {
	margin-top: 0.25em;
}
#appdownload details.about > table td ul li {
	font-size: 14px;
	line-height: 1.75;
}
#appdownload details.about > table td ul li a {
	text-decoration: underline;
	font-size: 14px;
	line-height: 1.75;
}

#appdownload .btn_entry {
	position: relative;
	width: 90%;
	margin: 24px auto 0;
}
#appdownload .btn_entry > a {
	position: relative;
	display: block;
	width: 100%;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	background-color: var(--main-clr-red);
	border: solid 2px var(--main-clr-red);
	border-radius: 8px;
	padding: 1em 0;
}
#appdownload .btn_entry > a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 8%;
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}

#appdownload .btn_entry > a:hover {
	color: var(--main-clr-red);
	background-color: #fff;
}
#appdownload .btn_entry > a:hover::after {
	right: 5%;
	border-color: var(--main-clr-red);
}

#appdownload .btn_entry > a.disabled {
	color: var(--clr-ss-black);
	background-color: #ccc;
	border-color: #ccc;
}
#appdownload .btn_entry > a.disabled::after,
#appdownload .btn_entry > a.disabled:hover::after {
	right: 8%;
	border-color: var(--clr-ss-black);
}


/* バナーエリア
================================================== */

#appdownload .col_2 {
	position: relative;
	width: 100%;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

#appdownload .col_2 > li { width: calc((100% - 12px*1)/2); }
#appdownload .col_2 > li > a { display: block; }
#appdownload .col_2 > li:hover > a { opacity: 0.8; }


/* スマホ固定ナビ
================================================== */

#appdownload .smp_fixed_nav { display: none!important; }



/* ==================================================
   PC用 左側・右側・背景
================================================== */

#appdownload .pc_left,
#appdownload .pc_right {
	position: sticky;
	/*width: calc((100% - 750px)/2);*/
	width: calc((100% - 640px)/2);
	display: flex;
	justify-content: center;
	align-items: center;
}
#appdownload .pc_left > .inner,
#appdownload .pc_right > .inner {
	text-align: center;
}


/*  PC用 左側
================================================== */

#appdownload .pc_left {
	order: 1;
}

#appdownload .pc_left nav {
	position: relative;
	width: 70%;
	margin: 0 auto;
	text-align: left;
}
#appdownload .pc_left nav h3 {
	font-size: 1.0vw;/*20px*/
	line-height: 1;
	border-bottom: solid 1px var(--clr-ss-black);
	margin: 0 auto 1.5em;
	padding-bottom: 0.75em;
}
#appdownload .pc_left nav ul {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
#appdownload .pc_left nav ul li {
	position: relative;
	width: 100%;
}
#appdownload .pc_left nav ul li a {
	position: relative;
	width: 100%;
	font-size: 0.8vw;/*16px*/
	line-height: 1.5;
	padding-left: 0.8vw;/*16px*/
}
/*#appdownload .pc_left nav ul li a::before {
	position: absolute;
	top: 0.3vw;6px
	left: 0;
	display: inline-block;
	content: "";
	width: 0.3vw;6px
	height: 0.3vw;6px
	border-top: solid 1px var(--clr-ss-black);
	border-right: solid 1px var(--clr-ss-black);
	transform: rotate(45deg);
}*/

#appdownload .pc_left nav ul li:hover a {
	opacity: 0.8;
	text-decoration: underline;
}

@media screen and (max-width: 1024px){
	#appdownload .pc_left nav { display: none!important; }
}


/*  PC用 右側
================================================== */
#appdownload .pc_right {
    order: 3;
    padding: 0 70px 0 40px;
}

#appdownload .pc_right .pc_menu {
	position: relative;
	margin: 0 auto;
}
#appdownload .pc_right .pc_menu ul li {
	position: relative;
	width: 100%;
}
#appdownload .pc_right .pc_menu ul li:nth-child(n+2) { border-top: dotted 1px #aaa; }
#appdownload .pc_right .pc_menu ul li a {
	display: block;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	padding: 1em 2em;
}
#appdownload .pc_right .pc_menu ul li a span {
	color: #d47559;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
}

#appdownload .pc_right .pc_menu ul li:hover a {
	background-color: #fdf8f7;
}


/* 開始前 */
#appdownload .comingsoon,
#appdownload .thanks {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 80px;
}

#appdownload .comingsoon .img_comingsoon {
	width: 100%;
	max-width: 920px;
	height: auto;
}
#appdownload .comingsoon p {
	font-size: 20px;
	font-weight: bold;
	margin-top: 1em;
}
#appdownload .comingsoon p strong {
	color: #d07157;
	font-size: 32px;
	font-weight: bold;
}






/* ダウンロードの誘導 */
.download {
    width: 100%;
    padding: 30px 50px 50px 50px;
}







/* 価格 */
#appdownload .list_item > li > a .wrap_price,
#appdownload .list_item > li > a .wrap_price .buy_price {
	position: relative;
}
#appdownload .list_item > li > a .wrap_price .buy_price > ol, 
#appdownload .list_item > li > a .wrap_price .buy_price > ul { margin: 0 auto; }
#appdownload .list_item > li > a .wrap_price { margin-top: 5px; }
#appdownload .list_item > li > a .wrap_price .buy_price .price,
#appdownload .wrap_price .intax  {
	color: #d07157!important;
	font-family: Futura, 'Century Gothic'!important;
	font-weight: normal!important;
}
#appdownload .list_item > li > a .wrap_price .buy_price .price { font-size: 24px;}
#appdownload .wrap_price .intax { font-size: 14px;}
#appdownload .wrap_price .spesicalprice { display: none; }





#appdownload .list_item > li a .spec {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 30px;
    padding: 20px 0px 10px 0px;
}



/* 購入ボタン */
#appdownload .list_item > li > a > .btn_buy {
    position: relative;
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    background-color: #939797;
    border: solid 1px #939797;
    margin: 15px 25px;
    padding: 12px 0px;
    border-radius: 100px;
}
#appdownload .list_item > li.clm1 > a > .btn_buy { max-width: 294px; }
#appdownload .list_item > li.clm2 > a > .btn_buy { max-width: 256px; }
#appdownload .list_item > li > a > .btn_buy::after {
	position: absolute;
	top: calc(50% - 2px);
	right: 20px;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}
#appdownload .list_item > li > a:hover > .btn_buy {
	color: #48413b;
	background-color: #fff;
}
#appdownload .list_item > li > a:hover > .btn_buy::after {
	right: 16px;
	border-color: #48413b;
}

#appdownload .list_item > li > a > .btn_buy,
#appdownload .list_item > li > a:hover > .btn_buy { transition: all 0.2s; }
#appdownload .list_item > li > a > .btn_buy::after,
#appdownload .list_item > li > a:hover > .btn_buy::after { transition: right 0.2s; }