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

body { background: #f5f5f5; font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; font-size: 16px; line-height: 1.5; color: #333; word-break: break-all; word-wrap: break-word; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

img { vertical-align: bottom; }

ul { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0; padding: 0; }

a { margin: 0; padding: 0; font-size: 100%; color: #1fa6d3; vertical-align: baseline; background: transparent; text-decoration: none; outline: none; }

a:hover img { opacity: 0.8; filter: alpha(opacity=80); }

input, select, textarea { vertical-align: middle; }

input, textarea::-webkit-input-placeholder { color: #666; }

input, textarea:-moz-placeholder { color: #666; }

input, textarea::-moz-placeholder { color: #666; }

input, textarea:-ms-input-placeholder { color: #666; }

/*----mt----*/
.mt0 { margin-top: 0 !important; }

.mt8 { margin-top: 8px  !important; }

.mt16 { margin-top: 16px !important; }

.mt24 { margin-top: 24px !important; }

.mt32 { margin-top: 32px !important; }

.mt40 { margin-top: 40px !important; }

.mt48 { margin-top: 48px !important; }

.mt56 { margin-top: 56px !important; }

.mt64 { margin-top: 64px !important; }

/*----ml----*/
.ml8 { margin-left: 8px !important; }

.ml16 { margin-left: 16px !important; }

.ml24 { margin-left: 24px !important; }

/*----mr----*/
.mr8 { margin-right: 8px !important; }

.mr16 { margin-right: 16px !important; }

.mr24 { margin-right: 24px !important; }

/*----mlr----*/
.mlr-at { margin-right: auto !important; margin-left: auto !important; }

.mlr8 { margin-right: 8px !important; margin-left: 8px !important; }

.mlr16 { margin-right: 16px !important; margin-left: 16px !important; }

.mlr24 { margin-right: 24px !important; margin-left: 24px !important; }

/*----mb----*/
.mb0 { padding-bottom: 0px !important; }

.mb8 { padding-bottom: 8px !important; }

.mb16 { padding-bottom: 16px !important; }

.mb24 { padding-bottom: 24px !important; }

.mb32 { padding-bottom: 32px !important; }

/*----mtb----*/
.mtb8 { padding-top: 8px !important; padding-bottom: 8px !important; }

.mtb16 { padding-top: 16px !important; padding-bottom: 16px !important; }

.mtb24 { padding-top: 24px !important; padding-bottom: 24px !important; }

/*----pd----*/
.pd8 { padding: 8px !important; }

.pd16 { padding: 16px !important; }

.pd24 { padding: 24px !important; }

.pt8 { padding-top: 8px !important; }

/*-----------------------------------------------------
iconfont
-----------------------------------------------------*/
@font-face { font-family: 'icomoon'; src: url("https://travel.gpoint.co.jp/daredoko/css/fonts/icomoon.eot?28tzkk"); src: url("https://travel.gpoint.co.jp/daredoko/css/fonts/icomoon.eot?28tzkk#iefix") format("embedded-opentype"), url("https://travel.gpoint.co.jp/daredoko/css/fonts/icomoon.ttf?28tzkk") format("truetype"), url("https://travel.gpoint.co.jp/daredoko/css/fonts/icomoon.woff?28tzkk") format("woff"), url("https://travel.gpoint.co.jp/daredoko/css/fonts/icomoon.svg?28tzkk#icomoon") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-hatebu:before { content: "\e900"; }

.icon-line:before { content: "\e901"; }

.icon-pocket:before { content: "\e902"; }

.icon-google-plus:before { content: "\ea8b"; }

.icon-facebook:before { content: "\ea90"; }

.icon-twitter:before { content: "\ea96"; }

/*-----------------------------------------------------
ボタン
-----------------------------------------------------*/
/*-----------------------------------------------------
画像ラベル
-----------------------------------------------------*/
/*-----------------------------------------------------
文字省略
-----------------------------------------------------*/
/*-----------------------------------------------------
タグ
-----------------------------------------------------*/
/*-----------------------------------------------------
QA-パネル
-----------------------------------------------------*/
/*-----------------------------------------------------
QA-リスト
-----------------------------------------------------*/
/*-----------------------------------------------------
item-パネル
-----------------------------------------------------*/
/*-----------------------------------------------------
通報
-----------------------------------------------------*/
/*-----------------------------------------------------
QA-ユーザー名・通報
-----------------------------------------------------*/
/*-----------------------------------------------------
QA-クチコミフキダシ
-----------------------------------------------------*/
/*-----------------------------------------------------
ショップ選択
-----------------------------------------------------*/
/*-----------------------------------------------------
タブメニュー
-----------------------------------------------------*/
/*-----------------------------------------------------
TOP/ガイド 投稿誘導
-----------------------------------------------------*/
/*-----------------------------------------------------
レイアウト
-----------------------------------------------------*/
@media only screen and (min-width: 640px) { header, article, footer { width: 640px !important; margin: 0 auto !important; }
  .nopc { display: none !important; } }
@media only screen and (max-width: 639px) { header, article, footer { width: 100%; }
  .nosp { display: none !important; } }
@media only screen and (min-width: 469px) { .nopc_sub { display: none !important; } }
@media only screen and (max-width: 469px) { .nosp_sub { display: none !important; } }
/*-----------------------------------------------------
nav
-----------------------------------------------------*/
.wrapper { height: 100%; overflow-x: hidden; position: relative; }

.overlay { content: ""; display: block; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity .5s; }

.overlay.open { width: 100%; height: 100%; opacity: 1; }

main { height: 100%; min-height: 100vh; transition: all .5s; display: flex; flex-direction: column; justify-content: center; }
main .menu-trigger { display: inline-block; width: 36px; height: 28px; vertical-align: middle; cursor: pointer; position: fixed; top: 30px; right: 30px; z-index: 100; /*transform: translateX(0);
transition: transform .5s;*/ }
main .menu-trigger span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 4px; background-color: #ddd; }
main .menu-trigger span:nth-of-type(1) { top: 0; }
main .menu-trigger span:nth-of-type(2) { top: 12px; }
main .menu-trigger span:nth-of-type(3) { bottom: 0; }
main .menu-trigger.active { display: none; /*transform: translateX(-280px);*/ }
main .menu-trigger.active span { background-color: #fff; }
main .menu-trigger.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); }
main .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
main .menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); }

nav { width: 280px; height: 100%; /*padding-top: 56px;*/ background-color: #22506e; position: fixed; top: 0; right: 0; z-index: 10; transform: translate(280px); transition: all .5s; }
nav ul li { position: relative; border-top: solid 1px #5a7d93; }
nav ul li:last-child { border-bottom: solid 1px #5a7d93; }
nav ul li a { display: block; color: #fff !important; text-decoration: none; }
@media only screen and (min-width: 470px) { nav ul li a { padding: 16px; } }
@media only screen and (max-width: 469px) { nav ul li a { padding: 12px; } }
nav ul li a:after { position: absolute; top: 48%; right: 20px; width: 8px; height: 8px; margin-top: -3px; border-top: 3px solid #fff; border-right: 3px solid #eee; transform: rotate(45deg); content: ""; -webkit-transform: rotate(45deg); }
nav ul li a i { font-size: 0.8rem; margin-left: 10px; }
nav ul li.bar { background: #ddd; border-top: none; font-size: 0.9rem; color: #333; padding: 10px 8px; }
nav ul li.bar p { border-left: solid 4px #5a7d93; padding-left: 8px; }

nav.open { transform: translateZ(0); }

/*-----------------------------------------------------
header
-----------------------------------------------------*/
header { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; width: 100%; background: #fff; box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.1); margin: 0; padding: 8px 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	li {
		font-size: 1.5rem;
		margin-left: 16px;
		a {
			display: block;
			color: #ddd;
			&:hover {
				color: $color-main;
			}
		}
	}
}*/ }
header img { max-width: 100%; margin-right: 24px; padding-bottom: 8px; }
header .menu-trigger { position: absolute; right: 16px; }
@media only screen and (min-width: 470px) { header .menu-trigger { top: 13px; } }
@media only screen and (max-width: 469px) { header .menu-trigger { top: 10px; } }

@media only screen and (max-width: 470px) { header { padding: 8px 12px; }
  header img { max-width: 80%; padding-bottom: 4px; } }
/*-----------------------------------------------------
footer
-----------------------------------------------------*/
footer { width: 100%; overflow: hidden; background: #525252; font-size: 0.8rem; color: #ddd; margin-top: 40px !important; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 469px) { footer { padding-top: 8px; } }
footer .ft-area { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 470px) { footer .ft-area { padding: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
@media only screen and (max-width: 469px) { footer .ft-area { padding: 0; } }
footer .ft-area .ft-top { font-weight: bold; padding-bottom: 8px; }
@media only screen and (min-width: 470px) { footer .ft-area .ft-top { font-size: 0.8rem; } }
@media only screen and (max-width: 469px) { footer .ft-area .ft-top { background: #525252; font-size: 0.75rem; padding: 8px 10px; } }
footer .ft-area .ft-txt { font-size: 0.7rem; line-height: 1.6; }
@media only screen and (min-width: 470px) { footer .ft-area .ft-txt { padding: 0 8px 16px; } }
@media only screen and (max-width: 469px) { footer .ft-area .ft-txt { padding: 0 12px 8px; } }
footer .ft-area .ft-list { width: 100%; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
@media only screen and (max-width: 469px) { footer .ft-area .ft-list { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
footer .ft-area .ft-list li { background: #525252; border: solid 1px #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: 0.7rem; margin: 4px; }
footer .ft-area .ft-list li a { display: block; color: #ccc; text-decoration: none; padding: 4px 8px; }
footer .ft-area .service-box { display: flex; flex-wrap: wrap; font-size: 0.75rem; margin: 0; padding: 0; }
footer .ft-area .service-box li { border-right: solid 1px #666; margin: 4px 0; padding: 0 8px; }
footer .ft-area .service-box li a { color: #ccc; }
footer .ft-area .comp-box { display: flex; justify-content: center; flex-wrap: wrap; border-top: solid 1px #666; font-size: 0.75rem; margin: 24px 0 0; padding: 16px 8px 16px; }
footer .ft-area .comp-box li { border-right: solid 1px #666; margin: 4px 0; padding: 0 8px; }
footer .ft-area .comp-box li a { color: #ccc; }
footer .ft-area .comp-copy { display: flex; justify-content: center; font-size: 0.55rem; color: #ccc; }
footer .ft-area .comp-copy li { margin: 0 4px; }
footer .ft-area .comp-copy li:first-child { border-right: solid 1px #666; padding-right: 8px; }
footer .ft-area .comp-bottom { display: flex; justify-content: center; align-items: center; background: #fff; margin-top: 24px; }
@media only screen and (min-width: 640px) { footer .ft-area .comp-bottom { padding: 16px 0; } }
@media only screen and (max-width: 639px) { footer .ft-area .comp-bottom { padding: 16px 8px; } }
footer .ft-area .comp-bottom li { margin: 0 8px; }
@media only screen and (min-width: 470px) { footer .ft-area .comp-bottom li:first-child { margin: 0 24px 0 0; } }
@media only screen and (max-width: 469px) { footer .ft-area .comp-bottom li:first-child { margin: 0 8px; } }
footer .ft-area .comp-bottom li:first-child img { max-width: 100%; max-height: 24px; }
footer .ft-area .comp-bottom li img { max-width: 100%; max-height: 50px; }
footer .ft-area .comp-bottom li .logo-area { display: flex; justify-content: center; align-items: center; }
footer .ft-area .comp-bottom li .logo-area div { margin: 0 4px; }

/*-----------------------------------------------------
パンくず&SNS
-----------------------------------------------------*/
.panlist-box { display: flex; justify-content: space-between; align-items: center; }
.panlist-box .breadcrumb { color: #aaa; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.panlist-box .breadcrumb li { display: inline; color: #aaa; }
@media only screen and (min-width: 470px) { .panlist-box .breadcrumb li { font-size: 0.75rem; } }
@media only screen and (max-width: 469px) { .panlist-box .breadcrumb li { font-size: 0.65rem; } }
.panlist-box .breadcrumb li a { color: #aaa; text-decoration: none; }
.panlist-box .breadcrumb li a:hover { text-decoration: underline; }
.panlist-box .breadcrumb li:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; padding: 0 4px; }
.panlist-box .breadcrumb li:last-child:after { content: ''; white-space: pre; }
.panlist-box .breadcrumb li:first-child a:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f07c'; }
@media only screen and (min-width: 470px) { .panlist-box .breadcrumb li:first-child a:before { font-size: 0.85rem; padding-left: 4px; } }
@media only screen and (max-width: 469px) { .panlist-box .breadcrumb li:first-child a:before { font-size: 0.75rem; padding-left: 0; } }

.sns-area { display: flex; justify-content: flex-end; align-items: center; }
.sns-area div a { display: block; color: #aaa; text-align: center; }
@media only screen and (min-width: 470px) { .sns-area div a { width: 40px; font-size: 1.2rem; padding: 4px 0; } }
@media only screen and (max-width: 469px) { .sns-area div a { width: 32px; font-size: 1rem; padding: 2px 0; } }
.sns-area div a:hover { color: #5a7d93; }

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

-----------------------------------------------------*/
.wh-box { width: 100%; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 470px) { .wh-box { padding: 16px 24px; } }
@media only screen and (max-width: 469px) { .wh-box { padding: 16px 16px; } }

.txt-more { font-size: 0.8rem; text-align: right; padding-top: 8px; }
.txt-more a { color: #aaa; text-decoration: none; }
.txt-more a:hover { text-decoration: underline; }
.txt-more i { margin-left: 4px; }

.box-pagenext a { position: relative; display: block; background: #e9e9e9; font-size: 1.2rem; color: #666; text-align: center; }
@media only screen and (min-width: 470px) { .box-pagenext a { padding: 24px 16px; } }
@media only screen and (max-width: 469px) { .box-pagenext a { margin: 0 16px 8px; padding: 16px 8px; } }
.box-pagenext a:after { position: absolute; top: 50%; right: 32px; margin-top: -0.6rem; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f054'; color: #aaa; }

.btn-page { display: table; table-layout: fixed; width: 100%; font-size: 0.9rem; color: #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (max-width: 639px) { .btn-page { padding: 0 16px 0; } }
.btn-page li { display: table-cell; vertical-align: middle; background: #e9e9e9; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn-page li a { display: block; color: #999; }
@media only screen and (min-width: 470px) { .btn-page li a { padding: 20px 16px; } }
@media only screen and (max-width: 469px) { .btn-page li a { padding: 12px 8px; } }
.btn-page .right, .btn-page .left { font-size: 1.3rem; }
@media only screen and (min-width: 470px) { .btn-page .right, .btn-page .left { width: 10%; } }
@media only screen and (max-width: 469px) { .btn-page .right, .btn-page .left { width: 15%; } }
.btn-page .off a { color: #e9e9e9; }

.sub-toptxt { font-weight: bold; color: #666; margin-top: 8px; }
@media only screen and (min-width: 640px) { .sub-toptxt { font-size: 1.1rem; padding: 16px 0 0; } }
@media only screen and (max-width: 639px) { .sub-toptxt { font-size: 1rem; padding: 16px 10px 0; } }
.sub-toptxt i { margin-right: 8px; }
.sub-toptxt h4 { color: #666; margin-top: 8px; }
@media only screen and (min-width: 640px) { .sub-toptxt h4 { font-size: 1.1rem; padding: 16px 0 0; } }
@media only screen and (max-width: 639px) { .sub-toptxt h4 { font-size: 1rem; padding: 16px 10px 0; } }
.sub-toptxt span.must { background: #ea352d; font-size: 0.65rem; font-weight: normal; color: #fff; margin-left: 10px; padding: 1px 5px; }

.message-area { text-align: center; padding: 24px 0 40px; }

/*-----------------------------------------------------
TOP-header-menu
-----------------------------------------------------*/
.top-menu { width: 100%; display: table; table-layout: fixed; }
.top-menu li { display: table-cell; background: #fff; border-bottom: solid 3px #ccc; }
.top-menu li a { display: block; font-weight: bold; color: #aaa; text-align: center; padding: 16px 4px 13px; }
@media only screen and (min-width: 470px) { .top-menu li a { font-size: 0.9rem; } }
@media only screen and (max-width: 469px) { .top-menu li a { font-size: 0.8rem; } }
.top-menu li.on { border-bottom: solid 3px #5a7d93; }
.top-menu li.on a { color: #666; }

/* バナー固定枠　～20190222 */
.top-mainimg { width: 100%; background: url(../images/top_main.jpg) no-repeat; background-size: contain; background-color: #fff; height: 0; /*幅640px高さ240pxの画像の場合： 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 37.5%; }
.top-mainimg span { display: none; }

.top-view { width: 100%; color: #fff; }
@media only screen and (min-width: 470px) { .top-view { padding: 90px 0 82px; } }
@media only screen and (max-width: 469px) { .top-view { padding: 45px 0 32px; } }
.top-view .txt-catch { font-weight: 900; text-align: center; text-shadow: 1px 1px 3px #333; padding-bottom: 8px; }
@media only screen and (min-width: 470px) { .top-view .txt-catch { font-size: 1.5em; } }
@media only screen and (max-width: 469px) { .top-view .txt-catch { font-size: 1.1em; } }
.top-view .txt-about { text-align: center; font-weight: 500; text-shadow: 1px 1px 3px #333; }
@media only screen and (min-width: 470px) { .top-view .txt-about { font-size: 1em; } }
@media only screen and (max-width: 469px) { .top-view .txt-about { font-size: 0.8em; } }

.try-entry-area { width: 100%; background: #fbfce6; text-align: center; padding: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.try-entry-area .txt-top { font-weight: bold; padding-bottom: 12px; }
@media only screen and (min-width: 470px) { .try-entry-area .txt-top { font-size: 1.1rem; } }
@media only screen and (max-width: 469px) { .try-entry-area .txt-top { font-size: 0.95rem; } }
.try-entry-area .txt-top i { margin: 0 8px; }
.try-entry-area .txt-mid { color: #454545; }
@media only screen and (min-width: 470px) { .try-entry-area .txt-mid { font-size: 0.9rem; } }
@media only screen and (max-width: 469px) { .try-entry-area .txt-mid { font-size: 0.7rem; } }
.try-entry-area .txt-mid span { color: #ef0000; font-weight: bold; }
.try-entry-area .txt-mid a { text-decoration: underline; }
.try-entry-area .btn-try { width: 100%; }
@media only screen and (min-width: 470px) { .try-entry-area .btn-try { display: flex; justify-content: space-around; } }
.try-entry-area .btn-try .btn-entry { position: relative; background: #10e7ad; text-align: center; text-shadow: none; font-weight: bold; background: #F0C464; margin: 16px auto 8px; }
.try-entry-area .btn-try .btn-entry a { display: block; color: #fff; text-decoration: none; padding: 16px 0; }
@media only screen and (min-width: 640px) { .try-entry-area .btn-try .btn-entry a { font-size: 1.3rem; } }
@media only screen and (min-width: 470px) and (max-width: 639px) { .try-entry-area .btn-try .btn-entry a { font-size: 1.2rem; } }
@media only screen and (max-width: 469px) { .try-entry-area .btn-try .btn-entry a { font-size: 1rem; } }
.try-entry-area .btn-try .btn-entry a:hover { background: #76dd99; }
.try-entry-area .btn-try .btn-entry i { margin-left: 10px; }
@media only screen and (min-width: 640px) { .try-entry-area .btn-try .btn-entry { width: 45%; }
  .try-entry-area .btn-try .btn-entry a { padding-left: 32px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
@media only screen and (min-width: 470px) and (max-width: 639px) { .try-entry-area .btn-try .btn-entry { width: 45%; }
  .try-entry-area .btn-try .btn-entry a { font-size: 0.9rem; padding-left: 32px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
@media only screen and (max-width: 469px) { .try-entry-area .btn-try .btn-entry { width: 95%; }
  .try-entry-area .btn-try .btn-entry a { padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
.try-entry-area .btn-try .btn-entry a:hover { background: #E9B33D; }
.try-entry-area .btn-try .btn-entry .point { position: absolute; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; font-size: 0.65rem; font-weight: normal; color: #666; line-height: 1.4; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); }
@media only screen and (min-width: 470px) { .try-entry-area .btn-try .btn-entry .point { top: -12px; left: -10px; width: 72px; height: 72px; } }
@media only screen and (max-width: 469px) { .try-entry-area .btn-try .btn-entry .point { top: -7px; left: -15px; width: 68px; height: 68px; } }
.try-entry-area .btn-try .btn-entry .point p { padding: 20px 5px 2px; }
.try-entry-area .btn-try .btn-entry .point p span { color: #ef0000; font-weight: bold; text-align: center; }
@media only screen and (min-width: 470px) { .try-entry-area .btn-try .btn-entry .point p span { font-size: 0.9rem; } }
@media only screen and (max-width: 469px) { .try-entry-area .btn-try .btn-entry .point p span { font-size: 0.7rem; } }
.try-entry-area .btn-try .btn-qa { background: #70CAD1; }
.try-entry-area .btn-try .btn-qa a:hover { background: #39BFC9; }

/*-----------------------------------------------------
TOP-人気アイテム
-----------------------------------------------------*/
.top-slider { width: 100%; display: flex; padding: 16px 6px 0 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.top-slider li { background: #fff; border: solid 1px #ddd; margin-right: 8px; }
.top-slider li a { display: block; font-size: 0.8rem; color: #aaa; padding: 8px 10px; }
.top-slider .on a { background: #5a7d93; border: solid 1px #5a7d93; color: #fff; }

.top-slider::-webkit-scrollbar { display: none; -webkit-appearance: none; }

#top-item-panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; margin-top: 8px; }
#top-item-panel .box-item { text-align: center; background: #fff; margin: 8px 6px; padding-bottom: 16px; }
@media only screen and (min-width: 640px) { #top-item-panel .box-item { width: calc(calc(100% / 3) - 12px); width: calc(33.33% - 12px); /*  IE11 */ } }
@media only screen and (max-width: 639px) { #top-item-panel .box-item { width: calc(calc(100% / 2) - 12px); width: calc(50% - 12px); /*  IE11 */ } }
#top-item-panel .box-item .item-img { padding: 16px 16px 10px 16px; max-height: 169px; }
#top-item-panel .box-item .item-img img { max-width: 100%; max-height: 169px; }
#top-item-panel .box-item { padding-bottom: 10px; }
#top-item-panel .box-item .item-img { display: table-cell; vertical-align: middle; text-align: center; height: 169px; }
#top-item-panel .box-item .item-name { padding: 0 10px; color: #999; text-align: left; }
@media only screen and (min-width: 640px) { #top-item-panel .box-item .item-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 0.9rem; } }
@media only screen and (max-width: 639px) { #top-item-panel .box-item .item-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 0.8rem; } }
#top-item-panel .box-item .check { display: flex; justify-content: center; color: #aaa; }
#top-item-panel .box-item .check p { margin-right: 2px; }
@media only screen and (min-width: 470px) { #top-item-panel .box-item .check p { font-size: 0.8rem; } }
@media only screen and (max-width: 469px) { #top-item-panel .box-item .check p { font-size: 0.7rem; } }
#top-item-panel .box-item .check p i { margin-right: 4px; }
#top-item-panel .box-item .check .count { position: relative; display: inline-block; align-items: center; max-width: 100%; background: #eee; }
@media only screen and (min-width: 470px) { #top-item-panel .box-item .check .count { font-size: 0.7rem; padding: 2px 6px; } }
@media only screen and (max-width: 469px) { #top-item-panel .box-item .check .count { font-size: 0.6rem; padding: 2px 4px; } }
#top-item-panel .box-item .check .count:before { content: ""; position: absolute; top: 50%; left: -8px; margin-top: -4px; border: 4px solid transparent; border-right: 4px solid #eee; }
#top-item-panel .box-item .btn-comment a { display: block; color: #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd; width: 76%; margin: 10px 12% 0; padding: 5px 0; }
@media only screen and (min-width: 640px) { #top-item-panel .box-item .btn-comment a { font-size: 0.8rem; }
  #top-item-panel .box-item .btn-comment a span { margin-left: 5px; } }
@media only screen and (max-width: 639px) { #top-item-panel .box-item .btn-comment a { font-size: 0.6rem; }
  #top-item-panel .box-item .btn-comment a span { margin-left: 2px; } }

.btn-ranking-more { background: #10e7ad; text-align: center; text-shadow: none; font-weight: bold; background: #e5e5e5; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.btn-ranking-more a { display: block; color: #fff; text-decoration: none; padding: 16px 0; }
@media only screen and (min-width: 640px) { .btn-ranking-more a { font-size: 1.3rem; } }
@media only screen and (min-width: 470px) and (max-width: 639px) { .btn-ranking-more a { font-size: 1.2rem; } }
@media only screen and (max-width: 469px) { .btn-ranking-more a { font-size: 1rem; } }
.btn-ranking-more a:hover { background: #76dd99; }
.btn-ranking-more i { margin-left: 10px; }
@media only screen and (min-width: 640px) { .btn-ranking-more { margin: 16px 6px 0; } }
@media only screen and (max-width: 639px) { .btn-ranking-more { margin: 16px 16px 0; } }
.btn-ranking-more a { font-size: 1rem; color: #aaa; font-weight: normal; padding-left: 8px; }
.btn-ranking-more a:hover { background: #e5e5e5; }
.btn-ranking-more a i { margin-left: 8px; }

.menu-list-area { width: 100%; background: #fff; margin: 32px 0 0; }
.menu-list-area li { position: relative; }
.menu-list-area li a { display: block; border-top: solid 1px #f3f3f3; color: #666; text-decoration: none; margin: 0; padding: 16px 8px 16px 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.menu-list-area li a:after { position: absolute; top: 50%; right: 24px; width: 8px; height: 8px; margin-top: -3px; border-top: 3px solid #e5e5e5; border-right: 3px solid #eee; transform: rotate(45deg); content: ""; -webkit-transform: rotate(45deg); }
.menu-list-area .top { font-weight: bold; color: #666; text-align: center; padding: 16px 0; }

/*-----------------------------------------------------
TOP-急上昇
-----------------------------------------------------*/
.top-refine-zoom { display: flex; justify-content: center; align-items: center; color: #999; }
@media only screen and (max-width: 639px) { .top-refine-zoom { margin: 0 10px; } }
.top-refine-zoom li { padding: 16px 4px 0 4px; }
@media only screen and (min-width: 470px) { .top-refine-zoom li { font-size: 0.9rem; } }
@media only screen and (max-width: 469px) { .top-refine-zoom li { font-size: 0.8rem; } }
.top-refine-zoom li .form-select { display: block; position: relative; width: 100%; height: 38px; border: 1px solid #ccc; overflow: hidden; cursor: pointer; }
.top-refine-zoom li .form-select:after { position: absolute; display: block; content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #333; top: 50%; right: 10px; margin-top: -3px; pointer-events: none; }
.top-refine-zoom li .form-select select, .top-refine-zoom li .form-select input[type="select"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: none; outline: 0; margin: 0; background: #fff; }
.top-refine-zoom li .form-select select { text-indent: 0.01px; text-overflow: ''; }
.top-refine-zoom li .form-select select::-ms-expand { display: none; }
.top-refine-zoom li .form-select select { position: relative; width: 100%; height: 35px; border: none; font-size: 0.9rem; color: #666; cursor: pointer; padding: 8px 24px 4px 8px; }
.top-refine-zoom li .form-select select:not(:target) { width: 120% \9; }

#list-area-l { width: 100%; background: #fff; margin-top: 16px; padding: 0 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#list-area-l ul { width: 100%; display: table; border-bottom: solid 1px #eee; margin: 0; padding: 10px 0; }
#list-area-l ul a { width: 100%; display: table; }
#list-area-l ul li { display: table-cell; vertical-align: middle; margin: 0; padding: 0; }
#list-area-l ul li:hover { text-decoration: underline; }
#list-area-l ul li:first-child { position: relative; vertical-align: top; text-align: center; }
@media only screen and (min-width: 470px) { #list-area-l ul li:first-child { width: 88px; } }
@media only screen and (max-width: 469px) { #list-area-l ul li:first-child { width: 72px; } }
#list-area-l ul li:first-child img { max-width: 100%; max-height: 96px; }
#list-area-l ul li:first-child .triangle { z-index: 1; position: absolute; width: 0; height: 0; top: 0; left: 0; border-right: 80px solid transparent; border-top: 80px solid #ddd; top: 0; left: 0; border-right: 64px solid transparent; border-top: 64px solid #ddd; border-top-color: #ed6a8f; }
#list-area-l ul li:first-child .triangle .squ-txt { z-index: 1001; position: absolute; top: -70px; width: 80px; left: -12px; font-size: 0.8em; color: #fff; text-align: center; }
#list-area-l ul li:first-child .triangle .squ-txt { top: -60px; width: 64px; left: -8px; font-size: 0.8rem; }
#list-area-l ul li:first-child .triangle-done { z-index: 1; position: absolute; width: 0; height: 0; top: 0; left: 0; border-right: 80px solid transparent; border-top: 80px solid #ddd; top: 0; left: 0; border-right: 64px solid transparent; border-top: 64px solid #ddd; border-top-color: #bbb; }
#list-area-l ul li:first-child .triangle-done .squ-txt { z-index: 1001; position: absolute; top: -70px; width: 80px; left: -12px; font-size: 0.8em; color: #fff; text-align: center; }
#list-area-l ul li:first-child .triangle-done .squ-txt { top: -60px; width: 64px; left: -8px; font-size: 0.7rem; }
#list-area-l ul li:first-child .circle { z-index: 1; position: absolute; background-color: #e3c341; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; text-align: center; color: #fff; }
@media only screen and (min-width: 470px) { #list-area-l ul li:first-child .circle { width: 40px; height: 40px; right: -10px; top: 5px; font-size: 0.9rem; line-height: 40px; } }
@media only screen and (max-width: 469px) { #list-area-l ul li:first-child .circle { width: 35px; height: 35px; right: -8px; top: 5px; font-size: 0.75rem; line-height: 35px; } }
@media only screen and (min-width: 470px) { #list-area-l ul li:first-child .circle { top: -5px; font-size: 0.8rem; } }
@media only screen and (max-width: 469px) { #list-area-l ul li:first-child .circle { top: -5px; font-size: 0.75rem; } }
#list-area-l ul .qa-ttl { color: #666; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 640px) { #list-area-l ul .qa-ttl { font-size: 1.1rem; padding: 8px 16px; } }
@media only screen and (max-width: 639px) { #list-area-l ul .qa-ttl { font-size: 0.95rem; padding: 8px 8px 8px 16px; } }
#list-area-l ul .answer { font-size: 0.65rem; color: #ccc; text-align: center; }
@media only screen and (min-width: 640px) { #list-area-l ul .answer { width: 64px; } }
@media only screen and (max-width: 639px) { #list-area-l ul .answer { width: 48px; } }
#list-area-l ul .answer p { font-size: 0.8rem; color: #f8a67c; }
#list-area-l ul .answer p:hover { text-decoration: none; }

.list-area-l { width: 100%; background: #fff; margin-top: 16px; padding: 0 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.list-area-l ul { width: 100%; display: table; border-bottom: solid 1px #eee; margin: 0; padding: 10px 0; }
.list-area-l ul a { width: 100%; display: table; }
.list-area-l ul li { display: table-cell; vertical-align: middle; margin: 0; padding: 0; }
.list-area-l ul li:hover { text-decoration: underline; }
.list-area-l ul li:first-child { position: relative; vertical-align: top; text-align: center; }
@media only screen and (min-width: 470px) { .list-area-l ul li:first-child { width: 88px; } }
@media only screen and (max-width: 469px) { .list-area-l ul li:first-child { width: 72px; } }
.list-area-l ul li:first-child img { max-width: 100%; max-height: 96px; }
.list-area-l ul li:first-child .triangle { z-index: 1; position: absolute; width: 0; height: 0; top: 0; left: 0; border-right: 64px solid transparent; border-top: 64px solid #ed6a8f; }
.list-area-l ul li:first-child .triangle .squ-txt { z-index: 1001; position: absolute; top: -60px; width: 64px; left: -8px; font-size: 0.8rem; color: #fff; text-align: center; }
.list-area-l ul li:first-child .triangle-done { z-index: 1; position: absolute; width: 0; height: 0; top: 0; left: 0; border-right: 64px solid transparent; border-top: 64px solid #bbb; }
.list-area-l ul li:first-child .triangle-done .squ-txt { z-index: 1001; position: absolute; top: -60px; width: 64px; left: -8px; font-size: 0.7rem; color: #fff; text-align: center; }
.list-area-l ul li:first-child .circle { z-index: 1; position: absolute; background-color: #e3c341; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; text-align: center; color: #fff; }
@media only screen and (min-width: 470px) { .list-area-l ul li:first-child .circle { width: 40px; height: 40px; right: -10px; top: -5px; font-size: 0.8rem; line-height: 40px; } }
@media only screen and (max-width: 469px) { .list-area-l ul li:first-child .circle { width: 35px; height: 35px; right: -8px; top: -5px; font-size: 0.75rem; line-height: 35px; } }
.list-area-l ul .qa-ttl { color: #666; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media only screen and (min-width: 640px) { .list-area-l ul .qa-ttl { font-size: 1.1rem; padding: 8px 16px; } }
@media only screen and (max-width: 639px) { .list-area-l ul .qa-ttl { font-size: 0.95rem; padding: 8px 8px 8px 16px; } }
.list-area-l ul .answer { font-size: 0.65rem; color: #ccc; text-align: center; }
@media only screen and (min-width: 640px) { .list-area-l ul .answer { width: 64px; } }
@media only screen and (max-width: 639px) { .list-area-l ul .answer { width: 48px; } }
.list-area-l ul .answer p { font-size: 0.8rem; color: #f8a67c; }
.list-area-l ul .answer p:hover { text-decoration: none; }

/*-----------------------------------------------------
TOP-受付中
-----------------------------------------------------*/
.top-head-title { font-weight: bold; color: #666; text-align: center; }
@media only screen and (min-width: 470px) { .top-head-title { font-size: 1.2rem; margin-top: 8px; } }
@media only screen and (max-width: 469px) { .top-head-title { font-size: 1rem; margin-top: 8px; padding: 0 16px; } }

.top-qa-answer { background: #fbfce6; color: #aea677; text-align: center; }
@media only screen and (min-width: 640px) { .top-qa-answer { font-size: 0.85rem; padding: 12px 8px; } }
@media only screen and (max-width: 639px) { .top-qa-answer { font-size: 0.75rem; margin: 0 10px; padding: 8px; } }
.top-qa-answer p { font-weight: bold; color: #f5a04e; padding-bottom: 2px; }
@media only screen and (min-width: 640px) { .top-qa-answer p { font-size: 0.9rem; } }
@media only screen and (max-width: 639px) { .top-qa-answer p { font-size: 0.8rem; padding: 8px; } }
.top-qa-answer p i { margin-right: 8px; }
.top-qa-answer span { color: #ef0000; font-weight: bold; }

.accepting-h2 { margin: 8px; padding: 8px; border-bottom: 3px solid #5a7d93; position: relative; font-size: 1.1rem; }

/*-----------------------------------------------------
TOP-履歴
-----------------------------------------------------*/
.top-history input { display: none; }
.top-history .radio-menu { display: flex; justify-content: center; }
@media only screen and (min-width: 470px) { .top-history .radio-menu { margin: 24px auto 16px; } }
@media only screen and (max-width: 469px) { .top-history .radio-menu { margin: 16px auto 8px; } }
.top-history .radio-menu label { display: block; width: 40%; background: #ddd; color: #869198; text-align: center; line-height: 1; transition: .2s; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
@media only screen and (min-width: 470px) { .top-history .radio-menu label { font-size: 0.9rem; padding: 14px 8px; } }
@media only screen and (max-width: 469px) { .top-history .radio-menu label { font-size: 0.9rem; padding: 12px 8px; } }
.top-history .radio-menu label:first-of-type { border-radius: 3px 0 0 3px; }
.top-history .radio-menu label:last-of-type { border-radius: 0 3px 3px 0; }
.top-history .radio-menu input[type="radio"]:checked + .switch-on { background-color: #5a7d93; color: #fff; }
.top-history .radio-menu input[type="radio"]:checked + .switch-off { background-color: #5a7d93; color: #fff; }

/*# sourceMappingURL=top.css.map */