@charset "utf-8";

/*
line-height:var(--line-height-14);
12px：1.42
14px：1.6（概要文章）
24px：1.2（スポット名）
*/
/* ---------------------------------
  Base layout
---------------------------------- */
/* spot irregular layout */
.str-main{
width:730px;
margin:0 auto;
float:none;
}

/* ---------------------------------
  Outline Control
---------------------------------- */
[data-whatintent="mouse"] *:focus{
outline:none;
}

/* ---------------------------------
  Start Local Common Modules
---------------------------------- */
.mod-num{
font-family:Arial;
}
.mod-icon-external{
overflow:hidden;
display:inline-block;
position:relative;
margin-left:4px;
padding-top:10px;
width:10px;
height:0;
background:url(/element/spot/shared/images/icon-external.svg) 0 0 no-repeat;
line-height:2;
vertical-align:middle;
}
.mod-dashed{
background:-webkit-gradient(linear, left top, right top, from(#949494), color-stop(50%, #949494), color-stop(50%, transparent), to(transparent)) repeat-x 0 95%;
background:linear-gradient(90deg, #949494, #949494 50%, transparent 50%, transparent 100%) repeat-x 0 95%;
background-size:4px 1px;
border:1px solid #f00;
}

/* mod-noimg
---------------------------------- */
.mod-noimg{
border:1px solid #e5e5e5;
background-color:#fff;
}

/* ---------------------------------
  End Local Common Modules
---------------------------------- */
/* ---------------------------------
  Start Main Content Modules
---------------------------------- */
/* .error
----------------------------------------------- */
.error{
margin-bottom:20px;
}
.error.simple{
margin:40px 0 70px;
}
.error-wording{
margin:20px 0;
text-align:center;
font-size:14px;
}
.error-wording strong{
color:#333;
font-weight:bold;
font-size:18px;
}
#errMsg{
margin:20px 0;
text-align:center;
font-size:14px;
}
.error-prev{
margin-top:32px;
text-align:center;
}
.error-prev a{
padding:9px 8px 8px;
border:1px solid #c5c5c5;
border-radius:3px;
color:#666;
display:inline-block;
min-width:202px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color:#fff;
text-decoration:none;
font-size:14px;
}

/* .error-box
---------------------------------- */
.error-box{
text-align:center;
margin:45px 0;
}
.error-box .error-hdg{
font-size:17px;
margin-bottom:20px;
font-weight:bold;
}
.error-box .error-txt{
font-size:14px;
font-weight:normal;
margin-bottom:30px;
}
.error-box .btn-error{
min-width:190px;
height:40px;
border-radius:4px;
background:#fff;
border:1px solid #c5c5c5;
color:#666;
font-size:14px;
line-height:1.6;
padding:0 20px;
}

/* loading-spinner
---------------------------------- */
.loading-spinner{
margin:50px 0 1000px;
text-align:center;
}
.loading-spinner span{
margin-top:10px;
display:block;
font-size:16px;
font-weight:bold;
}

/* shared-url-container
---------------------------------- */
.shared-url-container{
width:223px;
margin:0 auto;
}
.shared-url-container .shared-url-sns{
margin:0 auto;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-ms-flex-pack:distribute;
justify-content:space-around;
}
.shared-url-container .shared-url-sns li{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}
.shared-url-container .shared-url-sns button{
display:block;
width:40px;
height:0;
padding-top:40px;
overflow:hidden;
line-height:2;
border:none;
background:none;
background-size:100%;
margin:0 auto;
}
.shared-url-container .shared-url-sns button.shared-url-btn-instagram{
background:url(/element/shared/images/icon/icon-sns-instagram.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url-sns button.shared-url-btn-line{
background:url(/element/shared/images/icon/icon-sns-line.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url-sns button.shared-url-btn-fb{
background:url(/element/shared/images/icon/icon-sns-fb.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url-sns button.shared-url-btn-tw{
background:url(/element/shared/images/icon/icon-sns-twitter.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url{
margin-top:15px;
}
.shared-url-container .shared-url > li:not(:first-child){
margin-top:10px;
}
.shared-url-container .shared-url .shared-url-copy{
font-size:11px;
display:block;
text-align:center;
margin-top:7px;
}
.shared-url-container .shared-url button{
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
border:1px solid #bfbfbf;
background:none;
border-radius:4px;
width:100%;
text-align:left;
font-size:15px;
color:#666;
height:38px;
padding-top:3px;
padding-left:40px;
background-size:100%;
}
.shared-url-container .shared-url button::before{
position:absolute;
left:12px;
top:50%;
content:"";
display:block;
}
.shared-url-container .shared-url button.shared-url-btn{
padding-left:10px;
text-align:center;
display:block;
}
.shared-url-container .shared-url button.shared-url-btn::before{
display:none;
}
.shared-url-container .shared-url button.shared-url-btn-mail::before{
margin-top:-6px;
width:18px;
height:12px;
background:url(/element/spot/shared/images/icon-ml.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url button.shared-url-btn-sms::before{
margin-top:-8px;
width:18px;
height:16px;
background:url(/element/spot/shared/images/icon-sms.svg) 0 0 no-repeat;
}
.shared-url-container .shared-url button.shared-url-btn-copy::before{
margin-top:-8px;
width:15px;
height:19px;
background:url(/element/spot/shared/images/icon-copy.svg) 0 0 no-repeat;
}

/* article-container
---------------------------------- */
.article-container{
/* line-height: 1.4;
background-color: #f5f5f5; */
}

/* article-header-container
---------------------------------- */
.article-header-container{
position:relative;
}

/* article-header
---------------------------------- */
.article-header{
display:table;
width:100%;
table-layout:fixed;
}

/* article-header-hdg
---------------------------------- */
.article-header .article-header-hdg{
font-size:24px;
line-height:1.2;
font-weight:bold;
padding-right:194px;

}
.article-header .article-header-hdg-sup{
line-height:1;
margin-top:8px;
font-size:12px;
line-height:1.42;
}
.article-header .article-header-hdg-sup .cmn-tip-btn{
margin-left:4px;
}
.article-header .article-header-att{
margin-top:4px;
margin-bottom:8px;
font-size:12px;
line-height:1.42;
}
.article-header .article-header-att em{
color:#e93939;
}

/* article-slide
---------------------------------- */
.article-header .article-slide-container{
position:relative;
}
.article-header .article-slide-container ul{
margin:0;
}
.article-header .article-slide-container .article-slide-list{
margin:0;
}
.article-header .article-slide-container .article-slide-pagination{
right:10px;
bottom:8px;
left:auto;
text-align:right;
width:auto;
background-color:rgba(0,0,0,.45);
height:24px;
font-size:14px;
line-height:1.6;
font-family:Arial;
padding:1px 12px 3px;
color:#fff;
border-radius:3px;
-webkit-box-sizing:border-box;
box-sizing:border-box;

}
.article-header .article-slide-container .article-slide-pagination.swiper-pagination-lock{
display:block;
}
.article-header .article-slide-container .article-slide-prev,
.article-header .article-slide-container .article-slide-next{
background:none;
}
.article-header .article-slide-container .article-slide-prev::after,.article-header .article-slide-container .article-slide-next::after{
display:none;
}
.article-header .article-slide-container .article-slide-prev::before,.article-header .article-slide-container .article-slide-next::before{
position:absolute;
top:9px;
content:"";
display:block;
width:15px;
height:24px;
background-position:0 0;
background-repeat:no-repeat;
background-size:100%;
-webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, .75));
filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, .75));
}
.article-header .article-slide-container .article-slide-prev{
left:20px;
}
.article-header .article-slide-container .article-slide-prev::before{
left:0;
background-image:url(/element/spot/shared/images/icon-slider-prev.svg);
}
.article-header .article-slide-container .article-slide-next{
right:20px;
}
.article-header .article-slide-container .article-slide-next::before{
right:0;
background-image:url(/element/spot/shared/images/icon-slider-next.svg);
}
.article-header .article-slide-pic{
position:relative;
vertical-align:middle;
text-align:center;
height:483px;
width:100%;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-color:#f5f5f5;
}
.article-header .article-slide-pic.is-caption::after{
content:"";
display:block;
position:absolute;
bottom:0;
width:100%;
height:50px;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .6)));
background:linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
opacity:.5;
}
.article-header .article-slide-pic >img{
height:483px;
width:100%;
-o-object-fit:cover;
object-fit:cover;
}
.article-header .article-slide-pic .guard{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
}
.article-header .article-slide-cap{
position:absolute;
left:10px;
bottom:8px;
width:85%;
color:rgba(255,255,255,.6);
font-size:11px;
line-height:1.42;
z-index:1;
}
.article-header .article-slide-cap a{
color:rgba(255,255,255,.6);
}
.article-header .article-slide-cap a:link,
.article-header .article-slide-cap a:visited,
.article-header .article-slide-cap a:hover,
.article-header .article-slide-cap a:active{
color:rgba(255,255,255,.6);
text-decoration:none;
}

@media all and (-ms-high-contrast:none){
*::-ms-backdrop,
.article-header .article-slide-pic >img{
position:absolute;
top:50%;
left:50%;
height:auto;
width:auto;
max-height:483px;
max-width:730px;
transform:translate(-50%, -50%);
}
}

/* article-header-caption
---------------------------------- */
.article-header .article-header-caption{
margin-top:6px;
color:#949494;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:end;
-ms-flex-pack:end;
justify-content:flex-end;
font-size:11px;
}
.article-header .article-header-caption a{
color:#949494;
text-decoration:none;
}
.article-header .article-header-caption a:active,
.article-header .article-header-caption a:hover,
.article-header .article-header-caption a:focus{
text-decoration:underline;
}

/* article-header-summary
---------------------------------- */
.article-header .article-header-summary{
position:relative;
margin-top:20px;
}

/* article-shared-btn
---------------------------------- */
.article-header .article-shared-btn{
position:absolute;
right:0;
top:0;
height:34px;
background:none;
border:none;
padding:3px 12px 0;
border:1px solid #bbb;
border-radius:3px;
font-size:12px;
line-height:1.42;
padding-right:40px;
color:var(--cmn-font-color-base);
}
.article-header .article-shared-btn::after{
position:absolute;
content:"";
display:block;
width:16px;
height:20px;
top:7px;
right:12px;
background:url(/element/spot/shared/images/icon-share.svg) top left no-repeat;
background-size:15px 18px;
}

/* article-header-tags
---------------------------------- */
.article-header .article-header-tags{
margin:8px 0 0;
padding-right:194px;
font-size:0;
}
.article-header .article-header-tags >li{
font-size:12px;
line-height:1.42;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.article-header .article-header-tags >li:not(:first-child){
margin-top:4px;
}
.article-header .article-header-tags >li >div:first-child{
position:relative;
white-space:nowrap;
min-width:5em;
padding-right:10px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.article-header .article-header-tags >li >div:first-child::after{
position:absolute;
content:":";
display:block;
right:4px;
top:0;
}
.article-header .article-header-tags >li >div .article-header-tags-desc{
margin-right:12px;
}
.article-header .article-header-tags .article-header-tags-link{
display:inline-block;
color:#333;
}
.article-header .article-header-tags .article-header-tags-link:link,
.article-header .article-header-tags .article-header-tags-link:visited,
.article-header .article-header-tags .article-header-tags-link:hover,
.article-header .article-header-tags .article-header-tags-link:active{
text-decoration:none;
}

/* article-card-footer
---------------------------------- */
.article-card-footer{
margin-top:20px;
}

/* article-item-container
---------------------------------- */
.article-item-container{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin-top:20px;
padding-bottom:60px;
}
.article-item-container .article-item:first-child{
width:432px;
margin-right:20px;
}
.article-item-container .article-item:last-child:not(:first-child){
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}
.article-item-container .article-item:last-child:not(:first-child) .error-box .error-txt{
margin-bottom:24px;
}
.article-item-container .article-item:last-child:not(:first-child) .error-box .btn-error{
min-width:118px;
}

/* article-item
---------------------------------- */
.article-item .article-card-container >:first-child{
margin-top:0;
}

/* article-card-header
---------------------------------- */
.article-item .article-card-header{
margin-top:16px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.article-item .article-card-header .article-card-header-hdg{
font-weight:normal;
font-size:14px;
line-height:1.6;
}
.article-item .article-card-header .article-card-header-link a{
font-size:12px;
line-height:1.42;
color:#333;
}

/* article-card
---------------------------------- */
.article-item .article-card{
margin-top:8px;
padding:20px;
border-radius:6px;
background:#fff;
-webkit-box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
}
.article-item a{
color:#333;
text-decoration:none;
}

/* article-card-item-list
---------------------------------- */
.article-item .article-card-item-list{
margin:0;
display:table;
table-layout:fixed;
}
.article-item .article-card-item-list a{
color:#333;
}
.article-item .article-card-item-list a:link,
.article-item .article-card-item-list a:visited,
.article-item .article-card-item-list a:hover,
.article-item .article-card-item-list a:active{
text-decoration:none;
}
.article-item .article-card-item-list >li{
display:table-row;
font-size:12px;
line-height:1.42;
}
.article-item .article-card-item-list >li:not(:last-child) >div{
padding-bottom:8px;
}
.article-item .article-card-item-list >li >div{
display:table-cell;
word-break:break-all;
}
.article-item .article-card-item-list >li >div:first-child{
white-space:nowrap;
position:relative;
padding-right:21px;
min-width:48px;
}
.article-item .article-card-item-list >li >div:first-child::after{
position:absolute;
top:-1px;
right:10px;
content:":";
display:inline-block;
}
.article-item .article-card-item-list >li >div:last-child{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}
.article-item .article-card-item-list-notes{
margin:0;
}
.article-item .article-card-item-list-notes >li{
font-size:12px;
line-height:1.42;
text-indent:-1em;
margin-left:1em;
}
.article-item .article-card-item-list-notice{
margin:4px 0 0 0;
}
.article-item .article-card-item-list-notice >li{
color:#777;
font-size:12px;
line-height:1.42;
text-indent:-1em;
margin-left:1em;
}
.article-item .article-card-item-list-notice em{
color:#e93939;
}
.article-item .article-card-item-list-link{
display:block;
margin-top:4px;
}

/* article-card-item-notes
---------------------------------- */
.article-item .article-card-item-notes{
margin:0;
}
.article-item .article-card-item-notes >li{
font-size:12px;
line-height:1.42;
color:#777;
text-indent:-1em;
margin-left:1em;
}

/* article-card-item-footer
---------------------------------- */
.article-item .article-card-item-footer{
margin-top:8px;
}

/* article-card-desc-footer
---------------------------------- */
.article-item .article-card-desc-footer{
margin-top:12px;
}
.article-item .article-card-desc-footer .article-card-desc-footer-link{
text-align:right;
line-height:1;
}
.article-item .article-card-desc-footer .article-card-desc-footer-link > span::after{
content:":";
display:inline-block;
margin:0 4px;
}

/* article-card-desc
---------------------------------- */
.article-item .article-card-desc{
font-size:14px;
line-height:1.6;
word-break:break-all;
}
.article-item .article-card-desc a:link,
.article-item .article-card-desc a:visited,
.article-item .article-card-desc a:hover,
.article-item .article-card-desc a:active{
text-decoration:none;
}
.article-item .article-card-desc.article-card-desc-toggle-container.is-active .article-card-desc-toggle-overflow{
display:none;
}
.article-item .article-card-desc.article-card-desc-toggle-container.is-active .article-card-desc-toggle-item{
display:block;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-hdg{
font-size:14px;
font-weight:normal;
margin-top:20px;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-prg{
margin:8px 0 0;
font-size:12px;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow{
margin-bottom:-4px;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow >:first-child{
margin-top:0;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow .article-card-desc-prg .article-card-desc-toggle-trigger{
font-size:12px;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow .article-card-desc-prg .article-card-desc-toggle-trigger button{
font-size:12px;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow .article-card-desc-toggle-trigger{
display:inline-block;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow .article-card-desc-toggle-trigger button{
background:none;
padding:0;
border:none;
color:#a4a4a4;
font-size:14px;
line-height:1.6;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-overflow .article-card-desc-toggle-trigger button::before{
content:"...";
display:block;
position:relative;
display:inline-block;
color:#333;
margin-right:.4em;
font-size:14px;
line-height:1.6;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item{
display:none;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item >:first-child{
margin-top:0;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item .article-card-desc-toggle-footer{
line-height:1;
margin-top:8px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item .article-card-desc-toggle-trigger{
margin-top:8px;
display:block;
text-align:right;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item .article-card-desc-toggle-trigger button{
background:none;
padding:0;
border:none;
color:#333;
font-size:14px;
line-height:1.6;
}
.article-item .article-card-desc.article-card-desc-toggle-container .article-card-desc-toggle-item .article-card-desc-toggle-trigger button::before{
content:"";
position:relative;
top:-2px;
margin-right:4px;
display:inline-block;
width:8px;
height:5px;
background-image:url(/element/spot/shared/images/icon-arrow-01-up.svg);
background-color:transparent;
background-repeat:no-repeat;
background-size:8px 5px;
}

/* article-card-author
---------------------------------- */
.article-item .article-card-author{
background-color:#f5f5f5;
border-radius:4px;
padding:8px;
margin-top:20px;
}
.article-item .article-card-author-name{
font-size:14px;
}
.article-item .article-card-author-desc{
font-size:12px;
margin:4px 0 0 0;
}
.article-item .article-card-author-tags{
margin:3px 0 0 0;
font-size:12px;
color:#777;
}
.article-item .article-card-author-tags > li{
display:inline-block;
}
.article-item .article-card-author-tags > li:not(:first-child)::before{
content:"/";
display:inline-block;
margin:0 4px;
}

/* article-card-list
---------------------------------- */
.article-item .article-card-list >li{
overflow:hidden;
padding:8px;
background:#fff;
-webkit-box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
margin-top:12px;
border-radius:6px;
}
.article-item .article-card-list >li:first-child{
margin-top:8px;
}
.article-item .article-card-list .article-card-list-header-row{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.article-item .article-card-list .article-card-list-pic{
position:relative;
width:90px;
height:75px;
padding-right:8px;
margin-top:-8px;
margin-left:-8px;
}
.article-item .article-card-list .article-card-list-pic img{
vertical-align:middle;
width:90px;
height:75px;
-o-object-fit:cover;
object-fit:cover;
border-radius:0 0 6px;
}
.article-item .article-card-list .article-card-list-pic >span{
display:block;
text-align:center;
padding:3px 7px 3px;
min-width:36px;
height:21px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
top:4px;
left:4px;
color:#fff;
font-family:Arial;
font-size:12px;
line-height:1.42;
text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
border-radius:6px;
background-color:rgba(0, 0, 0, .45);
}
.article-item .article-card-list .article-card-list-pic .mod-noimg{
border-radius:0 0 6px;
border-top:none;
border-left:none;
text-align:center;
}
.article-item .article-card-list .article-card-list-pic .mod-noimg img{
width:74px;
height:auto;
}
.article-item .article-card-list .article-card-list-desc{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}
.article-item .article-card-list .article-card-list-desc::after{
content:"";
display:table;
clear:both;
}
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg{
font-size:12px;
line-height:1.42;
font-weight:normal;
}
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg a{
color:#0b4cae;
}
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg a:link,
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg a:visited,
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg a:hover,
.article-item .article-card-list .article-card-list-desc .article-card-list-desc-hdg a:active{
text-decoration:none;
}
.article-item .article-card-list .article-card-list-row{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;
-ms-flex-direction:row-reverse;
flex-direction:row-reverse;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:end;
-ms-flex-align:end;
align-items:flex-end;
margin-top:4px;
}
.article-item .article-card-list .article-card-list-price-unit{
text-align:right;
width:100px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.article-item .article-card-list .article-card-list-price-unit .article-card-list-price-sup{
margin-left:-162px;
font-size:12px;
line-height:1.42;
}
.article-item .article-card-list .article-card-list-price-unit .article-card-list-price{
font-size:12px;
line-height:1.42;
}
.article-item .article-card-list .article-card-list-price-unit .article-card-list-price .mod-num{
font-size:16px;
font-weight:bold;
}
.article-item .article-card-list .article-card-list-review-point{
font-size:0;
width:150px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.article-item .article-card-list .article-card-list-review-point::before{
margin-right:4px;
display:inline-block;
width:10px;
height:10px;
overflow:hidden;
background:url(/element/spot/shared/images/icon-review.svg) 0 0;
background-size:10px 10px;
content:"";
}
.article-item .article-card-list .article-card-list-review-point .article-card-list-review-point-rank{
font-size:14px;
line-height:1.6;
font-family:Arial;
font-weight:bold;
}
.article-item .article-card-list .article-card-list-review-point .article-card-list-review-point-label{
font-size:10px;
white-space:nowrap;
margin-left:3px;
}
.article-item .article-card-list .article-card-list-review-comment{
border:1px solid #e5e5e5;
border-radius:4px;
padding:8px;
margin-top:2px;
position:relative;
}
.article-item .article-card-list .article-card-list-review-comment::before,
.article-item .article-card-list .article-card-list-review-comment::after{
display:block;
position:absolute;
top:-5px;
left:14px;
content:"";
width:0;
height:0;
border-bottom:5px solid #ddd;
border-right:7px solid transparent;
border-left:7px solid transparent;
}
.article-item .article-card-list .article-card-list-review-comment::after{
top:-4px;
border-bottom:5px solid #fff;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-hdg{
font-size:11px;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-score{
font-size:11px;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-score > span:first-child::after{
content:":";
display:inline-block;
margin:0 4px;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-desc{
font-size:11px;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-more{
color:#a4a4a4;
cursor:pointer;
}
.article-item .article-card-list .article-card-list-review-comment .article-card-list-review-comment-more::before{
content:"...";
position:relative;
display:inline-block;
color:#333;
margin-right:.4em;
font-size:11px;
}
.article-item .article-card-list .article-card-list-review-comment >:first-child{
margin-top:0;
}

/* article-card-climate
---------------------------------- */
.article-item .article-card-climate-graph img{
/* max-width: 100%; */
width:392px;
height:auto;
image-rendering:-webkit-optimize-contrast;
}
.article-item .article-card-climate-hdg{
font-weight:normal;
font-size:14px;
display:inline-block;
}
.article-item .article-card-climate-hdg-container{
position:relative;
}
.article-item .article-card-climate-hdg-container::after{
content:"";
display:table;
clear:both;
}
.article-item .article-card-climate-notes{
float:right;
margin-top:4px;
font-size:11px;
color:#777;
}
.article-item .article-card-climate-notes .mark{
margin-right:4px;
}
.article-item .article-card-climate-graph{
margin-top:11px;
margin-bottom:28px;
}
.article-item .article-card-climate-clothes{
padding:11px 14px 0 17px;
}
.article-item .article-card-climate-clothes-list{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.article-item .article-card-climate-clothes-list li{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
font-size:11px;
}
.article-item .article-card-climate-clothes-list li > div{
width:100%;
line-height:1;
text-align:center;
}
.article-item .article-card-climate-clothes-list li > div:last-child{
padding:6px 0;
margin-top:5px;
border-left:1px solid #e9e9e9;
}
.article-item .article-card-climate-clothes-list li:last-child > div:last-child{
border-right:1px solid #e9e9e9;
}
.article-item .article-card-climate-clothes-list .clothes-type{
display:block;
margin:0 auto;
width:20px;
height:0;
padding-top:28px;
overflow:hidden;
line-height:2;
background-repeat:no-repeat;
background-position:center center;
background-size:20px auto;
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-01{
background-image:url(/element/spot/shared/images/icon-clothes-01.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-01-02{
background-image:url(/element/spot/shared/images/icon-clothes-01-02.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-01-03{
background-image:url(/element/spot/shared/images/icon-clothes-01-03.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-01-04{
background-image:url(/element/spot/shared/images/icon-clothes-01-04.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-02{
background-image:url(/element/spot/shared/images/icon-clothes-02.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-02-03{
background-image:url(/element/spot/shared/images/icon-clothes-02-03.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-02-04{
background-image:url(/element/spot/shared/images/icon-clothes-02-04.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-03{
background-image:url(/element/spot/shared/images/icon-clothes-03.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-03-04{
background-image:url(/element/spot/shared/images/icon-clothes-03-04.png);
}
.article-item .article-card-climate-clothes-list .clothes-type.clothes-type-04{
background-image:url(/element/spot/shared/images/icon-clothes-04.png);
}
.article-item .article-card-climate-clothes-def-container{
text-align:right;
margin-top:8px;
}
.article-item .article-card-climate-clothes-def{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
font-size:0;
}
.article-item .article-card-climate-clothes-def > span{
font-size:12px;
margin-right:4px;
}
.article-item .article-card-climate-clothes-def ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.article-item .article-card-climate-clothes-def ul li{
font-size:12px;
}
.article-item .article-card-climate-clothes-def ul li:not(:last-child){
margin-right:6px;
}
.article-item .article-card-climate-clothes-def .clothes-type{
position:relative;
top:-2px;
content:"";
display:inline-block;
width:18px;
height:0;
padding-top:20px;
overflow:hidden;
line-height:2;
background-repeat:no-repeat;
background-position:center left;
background-size:18px auto;
margin-right:4px;
vertical-align:middle;
}
.article-item .article-card-climate-clothes-def .clothes-type.clothes-type-01{
background-image:url(/element/spot/shared/images/icon-clothes-01-s.png);
}
.article-item .article-card-climate-clothes-def .clothes-type.clothes-type-02{
background-image:url(/element/spot/shared/images/icon-clothes-02-s.png);
}
.article-item .article-card-climate-clothes-def .clothes-type.clothes-type-03{
background-image:url(/element/spot/shared/images/icon-clothes-03-s.png);
}
.article-item .article-card-climate-clothes-def .clothes-type.clothes-type-04{
background-image:url(/element/spot/shared/images/icon-clothes-04-s.png);
}

/* article-card-climate-footer
---------------------------------- */
.article-item .article-card-climate-footer{
margin-top:20px;
}
.article-item .article-card-climate-footer .article-card-climate-footer-link{
text-align:right;
font-size:12px;
line-height:1;
}

/* article-more-link
---------------------------------- */
.article-item .article-more-link{
text-align:center;
}
.article-item .article-more-link a{
display:inline-block;
font-size:14px;
line-height:1.6;
text-decoration:none;
color:#333;
}

/* .article-card .faq-list
---------------------------------- */
/* .article-card .faq-list{
  margin:0;
  & .faq-toggle-container{
    &[aria-expanded=true]{
      & .faq-toggle-item{
        display: block;
      }
      & .faq-toggle-trigger{
        &::after{
          background: url(/element/shared/images/icon/icon-chevron-up.svg) 0 0 no-repeat;
        }
      }
    }
    &[aria-expanded=false]{
      & .faq-toggle-item{
        display: none;
      }
    }
    & .faq-toggle-trigger{
      margin:0;
      padding:0;
      background: none;
      border: none;
      text-align: left;
      font-size:12px;
      font-weight: normal;
      cursor:pointer;
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top:-4px;
        width: 11px;
        height: 7px;
        background: url(/element/shared/images/icon/icon-chevron-down.svg) 0 0 no-repeat;
      }
    }
  }
  & li{
    font-size:12px;
    &:not(:first-child){
      margin-top:8px;
      padding-top: 8px;
      border-top:1px solid #E5E5E5;
    }
    & em{
      color:#e93939;
      font-weight: normal;
    }
    & .question{
      position:relative;
      padding-left: 23px;
      padding-right: 30px;
      &::before{
        position:absolute;
        content:"";
        display:block;
        left:0;
        top:0;
        width:11px;
        height:15px;
        background:url(/element_sp/spot/shared/images/icon-faq-q.svg) 0 0 no-repeat;
        background-size: 100% auto;
      }
    }
    & .answer{
      margin-top:4px;
      position:relative;
      padding-left: 23px;
      & p{
        &:not(:first-child){
          margin: 8px 0 0;
        }
      }
      &::before{
        position:absolute;
        content:"";
        display:block;
        left:0;
        top:2px;
        width:11px;
        height:15px;
        background:url(/element_sp/spot/shared/images/icon-faq-a.svg) 0 0 no-repeat;
        background-size: 100% auto;
      }
    }
  }
} */
/* .spot-seo-faq
----------------------------------------------------------------- */
.spot-seo-faq{
margin:-13px 0 -14px;
}
.spot-seo-faq a{
color:#0b4cae;
text-decoration:underline;
}
.spot-seo-faq p{
margin:0;
}
.spot-seo-faq > :first-child{
margin-top:0;
}

/* .spot-seo-faq-item
----------------------------------------------------------------- */
.spot-seo-faq-item + .spot-seo-faq-item{
border-top:1px solid #ddd;
}

/* .spot-seo-faq-item-hook
----------------------------------------------------------------- */
.spot-seo-faq-item-hook{
padding:6px 16px 4px 24px;
border:none;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:100%;
min-height:42px;
position:relative;
cursor:pointer;
background:url(/element/spot/shared/images/icon-faq-q.svg) 0 50% no-repeat;
background-size:11px auto;
text-align:left;
font-size:12px;
font-weight:normal;
}
.spot-seo-faq-item-hook::before{
margin-top:-4px;
content:"";
display:block;
width:12px;
height:7px;
overflow:hidden;
position:absolute;
top:50%;
right:0;
background:url(/element/shared/images/icon/icon-chevron-down.svg) 0 0 no-repeat;
}
.spot-seo-faq-item[aria-expanded="true"] > .spot-seo-faq-item-hook::before{
background-image:url(/element/shared/images/icon/icon-chevron-up.svg);
}

/* .spot-seo-faq-item-content
----------------------------------------------------------------- */
.spot-seo-faq-item-content{
padding:0 0 12px 24px;
background:url(/element/spot/shared/images/icon-faq-a.svg) 0 4px no-repeat;
background-size:11px auto;
font-size:12px;
}
.spot-seo-faq-item[aria-expanded="false"] > .spot-seo-faq-item-content{
display:none;
}

/* swiper-spot
---------------------------------- */
.swiper-spot{
margin:-4px -4px 0;
position:relative;
}
.swiper-spot .swiper-nav{
margin:0;
}
.swiper-spot .swiper-nav .swiper-button-prev,
.swiper-spot .swiper-nav .swiper-button-next{
background:none;
position:absolute;
margin-top:-16px;
top:50%;
z-index:1;
width:32px;
height:30px;
text-indent:-9999px;
overflow:hidden;
line-height:2;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
border-radius:50%;
border:1px solid #bbbbbb;
background-color:#fff;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:transparent;
}
.swiper-spot .swiper-nav .swiper-button-prev::before,.swiper-spot .swiper-nav .swiper-button-next::before{
width:7px;
height:12px;
margin-top:-6px;
background:url(/element/shared/images/icon/icon-chevron-left.svg) top left no-repeat;
background-size:7px 12px;
content:"";
display:block;
position:absolute;
top:50%;
right:10px;
}
.swiper-spot .swiper-nav .swiper-button-prev::after,.swiper-spot .swiper-nav .swiper-button-next::after{
display:none;
}
.swiper-spot .swiper-nav .swiper-button-prev.swiper-button-disabled,.swiper-spot .swiper-nav .swiper-button-next.swiper-button-disabled{
display:none;
}
.swiper-spot .swiper-nav .swiper-button-prev{
left:-14px;
}
.swiper-spot .swiper-nav .swiper-button-prev::before{
right:12px;
}
.swiper-spot .swiper-nav .swiper-button-next{
right:-14px;
}
.swiper-spot .swiper-nav .swiper-button-next::before{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.swiper-spot .swiper{
overflow:hidden;
}
.swiper-spot .swiper-slide{
width:260px;
height:auto;
}
.swiper-spot .swiper-slide a{
color:var(--cmn-font-color-base);
}
.swiper-spot .swiper-slide a:link,
.swiper-spot .swiper-slide a:visited,
.swiper-spot .swiper-slide a:hover,
.swiper-spot .swiper-slide a:active{
text-decoration:none;
}
.swiper-spot .swiper-spot-content{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
height:calc(100% - 12px);
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
padding:0 12px 12px;
margin:4px 5px;
background:#fff;
border-radius:6px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
box-shadow:0px 0px 4px rgba(0, 0, 0, .3);
}
.swiper-spot .swiper-spot-thumb{
position:relative;
margin:0 -12px;
}
.swiper-spot .swiper-spot-pic{
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:100%;
height:161px;
overflow:hidden;
border-radius:6px 6px 0 0;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
.swiper-spot .swiper-spot-pic.mod-noimg{
border:none;
border-bottom:1px solid #e5e5e5;
}
.swiper-spot .swiper-spot-pic.mod-noimg .pic{
-o-object-fit:contain;
object-fit:contain;
width:130px;
height:auto;
}
.swiper-spot .swiper-spot-pic.mod-noimg::after{
display:none;
}
.swiper-spot .swiper-spot-pic .guard{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.swiper-spot .swiper-spot-pic .pic{
width:100%;
height:100%;
-o-object-fit:cover;
object-fit:cover;
}
.swiper-spot .swiper-spot-pic::after{
content:"";
display:block;
position:absolute;
bottom:0;
width:100%;
height:50px;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .6)));
background:linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
opacity:.5;
}
.swiper-spot .swiper-spot-pic.is-nophoto{
border-bottom:1px solid #e5e5e5;
background-color:#fff;
}
.swiper-spot .swiper-spot-pic.is-nophoto::after{
display:none;
}
.swiper-spot .swiper-spot-pic.is-nophoto img{
width:100px;
}
.swiper-spot .swiper-spot-cap{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:4px 10px;
color:rgba(255,255,255,.6);
font-size:11px;
z-index:1;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.swiper-spot .swiper-spot-cap .swiper-spot-cap-link{
display:inline;
}
.swiper-spot .swiper-spot-desc{
margin-top:12px;
}
.swiper-spot .swiper-spot-desc-hdg{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:14px;
}
.swiper-spot .swiper-spot-tags{
margin:8px 0 0;
}
.swiper-spot .swiper-spot-tags-area{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:12px;
}
.swiper-spot .swiper-spot-tags-category{
font-size:12px;
margin-top:4px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

/* swiper-spot
---------------------------------- */
/*
.swiper-spot{
  margin:6px -4px 0;
  position:relative;
  & .swiper-nav{
    & .swiper-button-prev,
    & .swiper-button-next{
      background: none;
      position:absolute;
      margin-top:-16px;
      top:50%;
      z-index:1;
      width:32px;
      height:0;
      padding-top:30px;
      overflow:hidden;
      line-height:2;
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      border-radius:50%;
      border:1px solid #BBBBBB;
      background-color:#fff;
      box-sizing:border-box;
      &::before{
        width: 7px;
        height: 12px;
        margin-top:-6px;
        background: url(/element/shared/images/icon/icon-chevron-left.svg) top left no-repeat;
        background-size: 7px 12px;
        content:'';
        display:block;
        position:absolute;
        top:50%;
        right:10px;
      }
      &.swiper-button-disabled{
        display: none;
      }
    }
    & .swiper-button-prev{
      left:-13px;
      &::before{
        right: 12px;
      }
    }
    & .swiper-button-next{
      right:-13px;
      &::before{
        transform:rotate(180deg);
      }
    }
  }
  & .swiper{
    overflow:hidden;
  }
  & .swiper-slide{
    width:260px;
    height:auto;
    & a{
      color:var(--cmn-font-color-base);
      &:link,&:visited,&:hover,&:active{
        text-decoration: none;
      }
    }
  }
  & .swiper-spot-content{
    display: flex;
    height:calc(100% - 8px);
    flex-direction:column;
    padding:0 8px 8px;
    margin:4px 5px;
    background: #fff;
    border-radius: 6px;
    box-sizing:border-box;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  }
  & .swiper-spot-thumb{
    position:relative;
    margin:0 -8px;
  }
  & .swiper-spot-pic{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 161px;
    overflow:hidden;
    border-radius: 6px 6px 0 0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
    & .guard{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height: 100%;
      z-index: 1;
    }
    & .pic{
      width:100%;
      height: 100%;
      object-fit: cover;
    }
    &::after{
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
      opacity: .5;
    }
    &.is-nophoto{
      border-bottom:1px solid #e5e5e5;
      background-color:#fff;
      &::after{
        display: none;
      }
      & img{
        width: 100px;
      }
    }
  }
  & .swiper-spot-cap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 4px 10px;
    color:#fff;
    font-size: 11px;
    z-index: 1;
    box-sizing: border-box;
    & .swiper-spot-cap-link{
      display: inline;
    }
  }
  & .swiper-spot-desc{
    margin-top:8px;
  }
  & .swiper-spot-desc-hdg{
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    font-size:14px;
  }
  & .swiper-spot-tags{
    margin:8px 0 0;
  }
  & .swiper-spot-tags-area{
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    font-size:12px;
  }
  & .swiper-spot-tags-category{
    font-size:12px;
    margin-top:4px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
  }
}
*/
/* article-footer
---------------------------------- */
.article-footer{
-o-border-image:linear-gradient(#eee 1px, #eee 100%) 0//0 100vw 0 100vw;
border-image:linear-gradient(#eee 1px, #eee 100%) fill 0//0 100vw 0 100vw;
margin-bottom:-50px;
padding:20px 0 50px;
}
.article-footer .article-footer-item .article-footer-hdg{
margin-bottom:8px;
font-size:14px;
font-weight:bold;
}

/* article-footer-link
---------------------------------- */
.article-footer-link{
margin:60px 0 30px;
font-size:12px;
}

/* article-footer-link-hdg
---------------------------------- */
.article-footer-link .article-footer-link-hdg{
margin:30px 0 20px;
padding-top:20px;
border-top:1px solid #d9d9d9;
font-size:14px;
font-weight:bold;
}

/* article-footer-link
---------------------------------- */
.article-footer-link .article-footer-link-list{
margin-top:-10px;
line-height:1.25;
}
.article-footer-link .article-footer-link-list > li{
margin:10px 7px 0 0;
display:inline-block;
padding-right:10px;
border-right:1px solid #d9d9d9;
}
.article-footer-link .article-footer-link-list > li:last-child{
margin-right:0;
padding-right:0;
border-right:none;
}
.article-footer-link .article-footer-link-list > li > a{
color:#666;
}

/* ---------------------------------
  End Main Content Modules
---------------------------------- */
/* ---------------------------------
  Start Modal Content Modules
---------------------------------- */
/* modal error-box
---------------------------------- */
.cmn-modal-select .error-box{
margin-top:20px;

/* padding:54px 0 95px; */
}
.cmn-modal-select .error-box .error-wording{
text-align:center;
font-size:17px;
}
.cmn-modal-select .error-box .error-wording b{
font-weight:bold;
}
.cmn-modal-select .error-box .error-message{
margin-top:17px;
text-align:center;
font-size:14px;
}
.cmn-modal-select .error-box .error-action{
margin-top:33px;
text-align:center;
}
.cmn-modal-select .error-box .error-action .error-action-btn{
padding:8px 25px 9px;
border:1px solid #c5c5c5;
border-radius:4px;
color:#666;
display:inline-block;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color:#fff;
text-decoration:none;
font-size:14px;
}

/* modal loading-box
---------------------------------- */
.cmn-modal-select .loading-box{
padding:54px 0 95px;
}

/* modal-review
----------------------------------- */
.cmn-modal-select.modal-review{
width:860px;
}
.cmn-modal-select.modal-review .cmn-modal-hdg-container{
padding-right:20px;
padding-left:20px;
}
.cmn-modal-select.modal-review .cmn-modal-hdg-container .cmn-modal-hdg{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.cmn-modal-select.modal-review .modal-review-content-header{
position:relative;
margin:-20px -20px 0;
padding:12px 25px 0;
background:#fff;
-webkit-box-shadow:0px 3px 6px rgba(0, 0, 0, .16);
box-shadow:0px 3px 6px rgba(0, 0, 0, .16);
}

/* modal-review-content-inner
---------------------------------- */
.modal-review-content-inner{
overflow-y:scroll;
height:455px;
margin:0 -20px -20px;
padding:20px 14px 0 30px;
display:block;

/* for IE11 */
}
.modal-review-content-inner::after{
content:"";
display:block;
height:34px;
}

/* modal-review-header
------------------------------------------------ */
.modal-review-header{
width:100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:start;
-ms-flex-pack:start;
justify-content:flex-start;
}
.modal-review-header .modal-review-header-col >:first-child{
width:360px;
margin-right:40px;
}
.modal-review-header .modal-review-header-col >:last-child{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
}

/* modal-review-footer
------------------------------------------------ */
.modal-review-footer{
margin-top:16px;
}
.modal-review-footer .modal-review-more-btn{
display:block;
margin:0 auto;
padding:0;
min-width:350px;
height:41px;
background:none;
background-color:#fff;
border-radius:2px;
border:1px solid #c5c5c5;
-webkit-box-shadow:0px 2px 0px #ccc;
box-shadow:0px 2px 0px #ccc;
font-size:14px;
font-weight:bold;
color:#666;
}

/* modal-review-point
------------------------------------------------ */
.modal-review-point{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.modal-review-point .modal-review-sup{
font-size:12px;
margin-right:8px;
position:relative;
white-space:nowrap;
}
.modal-review-point .modal-review-sup .cmn-tip-btn{
margin-left:4px;
}
.modal-review-point .modal-review-rank{
margin-right:16px;
white-space:nowrap;
}
.modal-review-point .modal-review-label-container{
text-align:center;
}
.modal-review-point .modal-review-label-container .modal-review-label-value{
font-size:48px;
font-family:Arial;
font-weight:normal;
}
.modal-review-point .modal-review-label-container .modal-review-label-total{
display:block;
white-space:nowrap;
font-weight:normal;
font-size:14px;
position:relative;
top:-3px;
}

/* modal-review-header-row
------------------------------------------------ */
.modal-review-header-row{
border-top:1px solid #ccc;
margin-top:16px;
}

/* modal-review-sorter-list
------------------------------------------------ */
.modal-review-sorter-list{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.modal-review-sorter-list button{
height:35px;
background:none;
border:none;
padding:0 5px;
font-size:12px;
color:var(--cmn-font-color-base);
}
.modal-review-sorter-list >li:not(:first-child){
margin-left:20px;
}
.modal-review-sorter-list >li.is-active button{
border-bottom:2px solid #333;
font-weight:bold;
}

/* modal-review-score
------------------------------------------------ */
.modal-review-score > li{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;

}
.modal-review-score > li.modal-review-score-na .modal-review-score-sup,
.modal-review-score > li.modal-review-score-na .modal-review-score-number{
color:#ccc;
}
.modal-review-score > li .modal-review-score-sup{
white-space:nowrap;
font-size:11px;
width:60px;
}
.modal-review-score > li .modal-review-score-number{
white-space:nowrap;
font-size:11px;
width:38px;
text-align:right;
}
.modal-review-score > li .modal-review-score-bar{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
line-height:0;
margin:0 15px 0 17px;
}
.modal-review-score .modal-review-score-bar-bg{
position:relative;
background-color:#ededed;
display:inline-block;
width:100%;
height:6px;
border-radius:6px;
}
.modal-review-score .modal-review-score-bar-bg .modal-review-score-bar-value{
position:absolute;
display:inline-block;
height:0;
padding-top:6px;
border-radius:6px;
overflow:hidden;
line-height:2;
background-color:#338cd5;
}

/* modal-review-card
------------------------------------------------ */
.modal-review-card{
padding:20px;
border-radius:5px;
background:#fff;
-webkit-box-shadow:0px 1px 4px 1px rgba(32, 33, 36, .28);
box-shadow:0px 1px 4px 1px rgba(32, 33, 36, .28);
}
.modal-review-card-list > li{
padding:20px;
border-radius:5px;
-webkit-box-shadow:0px 1px 4px 1px rgba(32, 33, 36, .28);
box-shadow:0px 1px 4px 1px rgba(32, 33, 36, .28);
}
.modal-review-card-list > li:not(:first-child){
margin-top:15px;
}
.modal-review-card-header .modal-review-card-date{
white-space:nowrap;
font-size:11px;
display:inline-block;
margin-right:9px;
}
.modal-review-card-header .modal-review-card-pickup{
display:inline-block;
font-size:11px;
color:#a4a4a4;
}
.modal-review-card-header .modal-review-card-name{
display:inline-block;
font-size:11px;
margin-right:20px;
}
.modal-review-card-header .modal-review-card-score{
display:inline-block;
font-size:11px;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-sup{
display:inline-block;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-sup::after{
content:":";
display:inline-block;
margin:0 3px;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-mark{
margin-right:8px;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-point{
display:inline-block;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-point > li{
display:inline-block;
}
.modal-review-card-header .modal-review-card-score .modal-review-card-score-point > li:not(:first-child)::before{
content:"/";
margin-right:3px;
display:inline-block;
}
.modal-review-card-comment{
margin-top:8px;
}
.modal-review-card-comment .modal-review-card-comment-hdg{
font-size:14px;
font-weight:bold;
}
.modal-review-card-comment .modal-review-card-comment-plan{
font-size:14px;
margin-top:5px;
}
.modal-review-card-comment .modal-review-card-comment-plan a{
color:#666;
text-decoration:underline;
}
.modal-review-card-comment .modal-review-card-comment-desc{
font-size:13px;
margin-top:5px;
}
.modal-review-card-info{
margin-top:4px;
}
.modal-review-card-info-time-list > li{
font-size:11px;
}
.modal-review-card-info-time-list > li > div{
display:inline;
}
.modal-review-card-info-time-list > li > div:first-child:not(:last-child){
display:inline-block;
position:relative;
width:54px;
padding-right:10px;
}
.modal-review-card-info-time-list > li > div:first-child:not(:last-child)::after{
position:absolute;
right:2px;
content:":";
display:inline-block;
}
.modal-review-card-info-list{
display:block;
line-height:1.2;
}
.modal-review-card-info-list > li{
display:inline-block;
font-size:11px;
}
.modal-review-card-info-list > li:not(:last-child)::after{
content:"/";
display:inline-block;
margin:0 0 0 3px;
}
.modal-review-card-info-list > li > div{
display:inline;
}
.modal-review-card-info-list > li > div:first-child:not(:last-child){
display:inline-block;
position:relative;
padding-right:10px;
}
.modal-review-card-info-list > li > div:first-child:not(:last-child)::after{
position:absolute;
right:3px;
content:":";
display:inline-block;
}
.modal-review-card-info-list > li > div > ul{
display:inline;
}
.modal-review-card-info-list > li > div > ul > li{
display:inline-block;
}
.modal-review-card-info-list > li > div > ul > li::after{
content:"/";
display:inline-block;
margin:0 0 0 3px;
}
.modal-review-card-reply{
margin-top:16px;
background-color:#f5f5f5;
border-radius:4px;
padding:10px;
}
.modal-review-card-reply .modal-review-card-reply-hdg{
font-size:12px;
font-weight:normal;
}
.modal-review-card-reply .modal-review-card-reply-desc{
font-size:12px;
margin-top:8px;
}
.modal-review-card-reply .modal-review-card-reply-desc .modal-review-card-reply-sup{
display:block;
}
.modal-review-card-slide{
position:relative;
margin-top:16px;
}
.modal-review-card-slide:hover .swiper-button-prev,
.modal-review-card-slide:hover .swiper-button-next{
display:block;
}
/* for large photos */
.modal-review-card-slide .modal-review-card-photo-container{
margin-top:-4px;
}
.modal-review-card-slide .modal-review-card-photo-container .modal-review-card-photo-close{
text-align:right;
margin-top:12px;
}
.modal-review-card-slide .modal-review-card-photo-container .modal-review-card-photo-close button{
background:none;
border:none;
}
.modal-review-card-slide .modal-review-card-photo-container .modal-review-card-photo-close button::before{
content:"";
position:relative;
top:-2px;
margin-right:4px;
display:inline-block;
width:11px;
height:7px;
background-image:url(/element/shared/images/icon/icon-chevron-up.svg);
background-color:transparent;
background-repeat:no-repeat;
background-size:11px 7px;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-slide{
margin-top:20px;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie{
position:relative;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie::after{
position:absolute;
content:"";
left:50%;
top:50%;
margin-left:-33px;
margin-top:-33px;
display:block;
width:66px;
height:66px;
background:url(/element/spot/shared/images/icon-play.svg) 0 0 no-repeat;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:pointer;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie.is-played a{
display:none;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie.is-played::after{
display:none;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie.is-played .swiper-thumb-movie-item{
display:block;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie.is-played .swiper-thumb-movie-item iframe{
display:block;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie .swiper-thumb-movie-item{
display:none;
position:relative;
width:480px;
height:360px;
margin:0 auto;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb.swiper-thumb-movie .swiper-thumb-movie-item iframe{
display:none;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
border:none;

}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb span{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:481px;
height:auto;
margin:0 auto;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-thumb img{
width:481px;
height:auto;
max-height:100%;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-caption{
font-size:13px;
width:481px;
margin-left:auto;
margin-right:auto;
overflow:visible;
word-break:break-all;
white-space:pre-wrap;
}
.modal-review-card-slide .modal-review-card-photo-container .swiper-caption br{
display:inline;
}
.modal-review-card-slide .swiper-container{
width:100%;
margin:0 auto;
}
.modal-review-card-slide .swiper-total{
height:22px;
bottom:18px;
right:8px;
font-size:14px;
font-family:Arial;
position:absolute;
background-color:rgba(0,0,0,.5);
border-radius:3px;
padding:4px 23px 4px 4px;
display:block;
color:#fff;
line-height:1;
-webkit-box-sizing:border-box;
box-sizing:border-box;
cursor:pointer;
}
.modal-review-card-slide .swiper-total::after{
content:"";
display:block;
position:absolute;
width:16px;
height:13px;
background:url(/element/spot/shared/images/icon-slider-total.svg) 0 0 no-repeat;
top:5px;
right:4px;
line-height:1;
}
.modal-review-card-slide .swiper-button-prev,
.modal-review-card-slide .swiper-button-next{
display:none;
margin-top:-40px;
width:29px;
height:50px;
background:none;
background-color:rgba(0,0,0,.5);
}
.modal-review-card-slide .swiper-button-prev.swiper-button-disabled,.modal-review-card-slide .swiper-button-next.swiper-button-disabled{
display:none;
}
.modal-review-card-slide .swiper-button-prev::after,.modal-review-card-slide .swiper-button-next::after{
content:"";
display:block;
position:absolute;
top:50%;
margin-top:-11px;
width:12px;
height:0;
padding-top:24px;
overflow:hidden;
background-repeat:no-repeat;
background-position:0 0;
background-size:12px auto;
-webkit-filter:drop-shadow(0px 1px 0px rgba(0, 0, 0, .5));
filter:drop-shadow(0px 1px 0px rgba(0, 0, 0, .5));
line-height:2;
}
.modal-review-card-slide .swiper-button-prev{
left:0;
border-radius:0 4px 4px 0;
}
.modal-review-card-slide .swiper-button-prev::after{
background-image:url(/element/spot/shared/images/icon-slider-prev-01.svg);
left:8px;
}
.modal-review-card-slide .swiper-button-next{
right:0;
border-radius:4px 0 0 4px;
}
.modal-review-card-slide .swiper-button-next::after{
background-image:url(/element/spot/shared/images/icon-slider-next-01.svg);
right:8px;
}
.modal-review-card-slide .swiper-slide{
text-align:center;
font-size:18px;
}
.modal-review-card-slide .swiper-slide > a{
display:block;
}
.modal-review-card-slide .swiper-thumb{
width:100%;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie{
position:relative;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie::after{
position:absolute;
content:"";
left:50%;
top:50%;
margin-left:-18px;
margin-top:-18px;
display:block;
width:36px;
height:36px;
background:url(/element/spot/shared/images/icon-play.svg) 0 0 no-repeat;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:pointer;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie.is-played a{
display:none;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie.is-played::after{
display:none;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie.is-played .swiper-thumb-movie-item{
display:block;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie.is-played .swiper-thumb-movie-item iframe{
display:block;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie .swiper-thumb-movie-item{
display:none;
position:relative;
width:100%;
height:180px;
}
.modal-review-card-slide .swiper-thumb.swiper-thumb-movie .swiper-thumb-movie-item iframe{
display:none;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
border:none;

}
.modal-review-card-slide .swiper-thumb span{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
width:100%;
height:180px;
background-color:#f2f2f2;
}
.modal-review-card-slide .swiper-thumb img{
max-width:100%;
max-height:180px;
vertical-align:middle;
}
.modal-review-card-slide .swiper-caption{
display:block;
font-size:11px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-top:4px;
color:#333;
text-align:left;
}
.modal-review-card-slide .swiper-caption br{
display:none;
}
.modal-review-card-slide .swiper-caption a{
color:#666;
}

/* ---------------------------------
  End Modal Content Modules
---------------------------------- */