@charset 'UTF-8';
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
    outline: 0;
    background: transparent;
}

body
{
    line-height: 1;
}

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

nav ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after
{
    content: '';
    content: none;
}

a
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    background: transparent;
}

/* change colours to suit your needs */
ins
{
    text-decoration: none;

    color: #000;
    background-color: #ff9;
}

/* change colours to suit your needs */
mark
{
    font-weight: bold;
    font-style: italic;

    color: #000;
    background-color: #ff9;
}

del
{
    text-decoration: line-through;
}

abbr[title], dfn[title]
{
    cursor: help;

    border-bottom: 1px dotted;
}

table
{
    border-spacing: 0;
    border-collapse: collapse;
}

/* change border colour to suit your needs */
hr
{
    display: block;

    height: 1px;
    margin: 1em 0;
    padding: 0;

    border: 0;
    border-top: 1px solid #ccc;
}

input, select
{
    vertical-align: middle;
}

li
{
    list-style-type: none;
}

@font-face {
    font-family: 'hannari';
    font-weight: normal;
    font-style: normal;

    src: url('../font/hannari.woff') format('woff'), url('../font/hannari.ttf') format('truetype'), url('../font/hannari.svg') format('svg');
}

.hannari
{
    font: bold 16px/1.2 'hannari', sans-serif;

    letter-spacing: -1.5px;
}

.mincho {
	font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
	letter-spacing: -1.5px;
}

.icon
{
    display: inline-block;

    width: 32px;
    height: 32px;

    fill: currentColor;
}

.icon-catch
{ /*fill: #000000;*/
    width: 36px;
}

.icon-heart
{ /*fill: #000000;*/
}

.icon-plus
{ /*fill: #000000;*/
}

.icon-arrow-left
{ /*fill: #000000;*/
}

.icon-arrow-down
{ /*fill: #000000;*/
}

.icon-arrow-up
{ /*fill: #000000;*/
}

.icon-arrow-right
{ /*fill: #000000;*/
}

.icon-arrow-left2
{ /*fill: #000000;*/
}

.icon-arrow-down2
{ /*fill: #000000;*/
}

.icon-arrow-up2
{ /*fill: #000000;*/
}

.icon-arrow-up3
{ /*fill: #000000;*/
}

/* base
	========================================================================== */
body
{
    font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 14px;
    line-height: 1.3;

    color: #373737;
    background: #d83a15 url('../img/bg.jpg') no-repeat 50% 0;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
}

*, *::before, *::after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

a
{
    text-decoration: none;

    -webkit-touch-callout: none;
}

a, a:link, a:visited
{
    color: #fff;
}

img
{
    vertical-align: middle;
}

img:not([width])
{
    zoom: .5;
}

#wrapper
{
    padding-top: 30px;
    padding-bottom: 30px;
}

.frame
{
    padding: 3px;

    border: 1px solid #fff;
}
.frame .inner
{
    padding: 5px;

    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 0 0 3px rgba(60, 38, 34, .4);
            box-shadow: 0 0 0 3px rgba(60, 38, 34, .4);
}
.frame .inner.darkly
{
    background-color: rgba(255, 255, 255, .9);
}

header#inner
{
    border-bottom: 0;
    background: #111;
}

/* [ content-row ] */
.row
{
    width: 280px;
    margin-right: auto;
    margin-left: auto;
}

/* top
	========================================================================== */
.page-header h1
{
    overflow: hidden;

    width: 109px;
    height: 78px;
    margin-right: auto;
    margin-left: auto;

    white-space: nowrap;
    text-indent: 100%;

    background-image: url('../img/sprite-sf83519ecfb.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-background-size: 320px auto;
            background-size: 320px auto;
}

.sns
{
    text-align: center;
}
.sns iframe
{
    width: 110px !important;
}

.photo
{
    text-align: center;
}

.photo-main figcaption, .photo-list figcaption
{
    font-size: 12px;

    padding-top: 5px;
}
.photo-main figcaption .hannari, .photo-list figcaption .hannari
{
    font-size: 18px;
}

.photo-main
{
    margin-bottom: 18px;
}

.photo-list
{
    margin-bottom: 15px;
    padding-bottom: 25px;

    border-bottom: 1px dotted #000;
}
.photo-list .photo
{
    float: left;

    //width: 130px;
    width: 45%;
    margin-bottom: 10px;
}
.photo-list .photo figcaption
{
    color: #ffe3bb;
}
.photo-list .photo figcaption .hannari
{
    display: block;
}
.photo-list .photo:nth-child(odd)
{
    //margin-right: 18px;
    margin-right: 10%;
}

.search h2
{
    overflow: hidden;

    width: 227px;
    height: 16px;
    margin-right: auto;
    margin-left: auto;

    white-space: nowrap;
    text-indent: 100%;

    background-image: url('../img/sprite-se4580bb72f.png');
    background-repeat: no-repeat;
    background-position: 0 -88px;
    -webkit-background-size: 320px auto;
            background-size: 320px auto;
}
.search ul
{
    padding-bottom: 20px;
}
.search li
{
    float: left;

    width: 138px;
}
.search .search-1
{
    margin-right: 4px;
}
.search .search-1 .inner
{
    background: black url('../img/btn_search_01.png') no-repeat 50% 50%;
    -webkit-background-size: 130px 30px;
            background-size: 130px 30px;
}
.search .search-2 .inner
{
    background: black url('../img/btn_search_02.png') no-repeat 50% 50%;
    -webkit-background-size: 130px 30px;
            background-size: 130px 30px;
}
.search a
{
    position: relative;
    top: -10px;

    display: block;
}
.search a .inner
{
    overflow: hidden;

    -webkit-transition: .5s background-color;
            transition: .5s background-color;
    white-space: nowrap;
    text-indent: 100%;
}
.search a:hover .inner
{
    background-color: #cd080b;
}

.report { clear: both; padding-top: 15px; border-top: 1px dotted #000; margin-top: 15px; }
.report h2 { text-indent: 100%; white-space: nowrap; overflow: hidden; margin-left: auto; margin-right: auto; background-image: url('../img/sprite-sf83519ecfb.png'); background-repeat: no-repeat; height: 15px; width: 212px; background-position: 0 -114px; -webkit-background-size: 320px auto; background-size: 320px auto; margin-bottom: 10px; }
.report a { display: block; position: relative; }
.report a .inner { -webkit-transition: .5s background-color; transition: .5s background-color; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.report a:hover .inner { background-color: #d83a15; }
.report .inner { background: rgba(0, 0, 0, 0.8) url("../img/btn_report.png") no-repeat 50% 50%; -webkit-background-size: 270px 29px; background-size: 270px 29px; }

.back-top { clear: both; padding-top: 15px; border-top: 1px dotted #000; margin-top: 15px; }
.back-top a { display: block; position: relative; }
.back-top a .inner { -webkit-transition: .5s background-color; transition: .5s background-color; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.back-top a:hover .inner { background-color: #d83a15; }
.back-top .inner { background: rgba(255, 255, 255, 0.8) url("../img/btn_top.png") no-repeat 50% 50%; -webkit-background-size: 123px 14px; background-size: 123px 14px; }
/* second
	========================================================================== */
.detail-header
{
    position: relative;
}

.btn-spot
{
    position: absolute;
    top: 50%;
    right: 0;

    display: inline-block;

    height: 36px;
    margin-top: -18px;
}
.btn-spot .inner
{
    font-size: 13px;
    line-height: 1;

    padding: 3px 3px 3px 5px;

    -webkit-transition: .5s background-color;
            transition: .5s background-color;

    background-color: #000;
}
.btn-spot .inner .icon
{
    width: 20px;
    height: 20px;

    vertical-align: middle;
}
.btn-spot:hover .inner
{
    background-color: #cd080b;
}

.area-title
{
    font-size: 20px;

    margin-bottom: 20px;
    padding-right: 118px;
    padding-left: 80px;
}

.report-list:not(:first-child)
{
    margin-top: 5px;
    padding-top: 5px;

    border-top: 1px dotted #000;
}
.report-list img
{
    float: left;
}
.report-list figcaption
{
    margin-left: 95px;
}
.report-list figcaption h2
{
    font-size: 20px;

    margin-bottom: 5px;
    padding-bottom: 5px;

    border-bottom: 1px dotted #000;
}
.report-list figcaption h2 .icon
{
    width: 16px;
    height: 16px;
    margin-right: 5px;

    fill: #cd080b;
}
.report-list .data
{
    font-size: 13px;

    margin-top: 5px;

    text-align: right;
}

.btn-action
{
    display: block;

    margin: 10px -5px -5px;
    padding: 5px;

    -webkit-transition: .5s background-color;
            transition: .5s background-color;
    text-align: center;

    background-color: #000;
}
.btn-action .icon
{
    position: relative;
    top: -2px;

    width: 25px;
    height: 25px;

    vertical-align: middle;
}
.btn-action.favorite .icon
{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.btn-action.favorite .hannari
{
    font-size: 14px;
}
.btn-action.favorite.active .icon
{
    fill: #cd080b;
}

.spot-title
{
    font-size: 22px;

    margin-bottom: 10px;
    padding-right: 65px;
    padding-left: 65px;

    text-align: center;
}

.report-detail
{
    margin-bottom: 10px;
}
.report-detail p
{
    padding-top: 5px;

    text-align: center;
}

.report-text h2
{
    font-size: 20px;

    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;

    border-top: 1px dotted #000;
    border-bottom: 1px dotted #000;
}
.report-text h2 .icon
{
    width: 16px;
    height: 16px;
    margin-right: 5px;

    fill: #cd080b;
}
.report-text h2 .date
{
    font-size: 14px;
}

.pager
{
    margin-top: 10px;
}
.pager .frame
{
    width: 80px;
}
.pager .inner
{
    display: block;

    -webkit-transition: .5s all;
            transition: .5s all;
    text-align: center;

    background-color: #000;
}
.pager .inner:hover
{
    background-color: #cd080b;
}
.pager .prev
{
    float: left;
}
.pager .next
{
    float: right;
}
.pager .icon
{
    width: 20px;
    height: 20px;

    vertical-align: middle;
}