@charset "UTF-8";

/*----------------------------------------------------------------default*/
html {
font-size: 62.5%;
}

a {
color: #ff4614;
}

a:focus,
input:focus,
button:focus {
outline: none;
}

p {
margin: 0;
padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-size: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}

ul {
margin: 0;
padding: 0;
}

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

ol {
padding: 0 0 0 1.5em;
}

ol li {
list-style-type: decimal;
}

dl,
dt,
dd {
margin: 0;
padding: 0;
}

dt {
font-weight: normal;
}

table {
border-collapse: collapse;
}

figure {
margin: 0;
padding: 0;
}

input {
cursor: pointer;
}

.fa {
display: inline-block;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/*----------------------------------------------------------------fade*/
a {
transition: .3s ease-in-out;
}

a:hover {
opacity: .7;
filter: alpha(opacity=70);
}

/*===============================================================共通*/
body {
margin: 0;
padding: 0;
background: #fff;
color: #3d3d3d;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
font-size: 1.2rem;
text-align: left;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}

.inner {
width: 94%;
margin: 0 auto;
}

h1,h2,.lead {
width: 94%;
text-align: center;
margin: 0 auto;
}

header {
border-bottom: 2px solid #000;
}

header .inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}

header .logo {
width: 152px;
}

header .logo_torunavi {
width: 66px;
}

.slider {
width: 375px;
height: 300px;
margin: 0 auto 40px !important;
}

.slider div {
height: 300px;
}

.slider div li {
}

.slider div img {
width: 375px;
position: absolute;
top: -285px;
}

.slick-dots li {
width: 14px !important;
height: 14px !important;
margin: 0 7px !important;
}

.slick-dots li button:before {
font-size: 16px !important;
color: #e6e6e6 !important;
opacity: 1 !important;
}

.slick-dots li.slick-active button:before {
color: #ff4614 !important;
}

h1 + .lead {
margin: 0 auto 60px;
}

h2 {
margin: 0 auto 15px;
}

h2 img {
width: 125px;
}

#topics {
margin: 0 0 35px;
}

#topics .inner {
width: 100%;
}

#topics dl {
padding: 10px 25px;
background: #e2e2e2;
height: 80px;
overflow-y: scroll;
}

/*スクロールバーの横幅指定*/
#topics dl::-webkit-scrollbar {
width: 12px;
}
/*スクロールバーの背景色・角丸指定*/
#topics dl::-webkit-scrollbar-track {
border-radius: 0;
background: #e6e6e6;
}
/*スクロールバーの色・角丸指定*/
#topics dl::-webkit-scrollbar-thumb {
border-radius: 0;
background: #ff4614;
}

#topics dt {
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#topics dd {
margin: 0 0 1em;
}

#topics dd:last-child {
margin: 0;
}

#lineup {
margin: 0 0 40px;
}

.sort-menu {
display: flex;
flex-wrap: wrap;
margin: 0 0 20px;
}

.sort-menu li {
margin: 0 5px 5px 0;
width: calc(calc(100% - 10px) / 3);
font-size: 1rem;
}

.sort-menu li:nth-child(3n) {
margin: 0;
}

.sort-menu li a {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 26px;
line-height: 1.2;
background: #fff;
border: 1px solid #3d3d3d;
color: #3d3d3d;
cursor: pointer;
}

.sort-menu li a.active,
.sort-menu li a:hover {
background: #ff4614;
color: #fff;
border: 1px solid #ff4614;
opacity: 1;
filter: alpha(opacity=100);
}

.list-blk {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}

.list-blk li {
width: calc(calc(100% - 21px) / 2);
margin: 22px 19px 0 0;
box-sizing: border-box;
font-size: 1rem;
position: relative;
}

.list-blk li:nth-child(2n) {
margin: 22px 0 0;
}

.list-blk li.new:after {
content: '';
display: inline-block;
position: absolute;
width: 33px;
height: 33px;
background: url(images/new.png) no-repeat;
background-size: contain;
top: 2px;
left: 2px;
}

.list-blk li figure {
position: relative;
}

.list-blk li figure > img {
border: 1px solid #3d3d3d;
}

.list-blk li .popup {
position: absolute;
bottom: 5px;
right: 3px;
width: 25px;
height: 25px;
}

#colorbox, #cboxOverlay, #cboxWrapper {
overflow: visible !important;
padding: 0 0 0 20px;
}

#cboxOverlay {
background: #000 !important;
opacity: 0.8 !important;
background-image: none !important;
}

#cboxContent {
background: transparent !important;
overflow: visible !important;
}

#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
display: none !important;
}

#cboxPrevious {
left: -35px !important;
top: calc(50% - 13px) !important;
background: url(images/ico_prev.svg) no-repeat !important;
}

#cboxNext {
left: calc(100% + 10px) !important;
top: calc(50% - 13px) !important;
background: url(images/ico_next.svg) no-repeat !important;
}

#cboxTitle {
position: relative !important;
text-align: left !important;
margin: -20px 40px 0 10px !important;
color: #fff !important;
width: auto !important;
}

#cboxCurrent {
display: none !important;
/* position: relative !important;
left: 0 !important;
margin: 0 0 0 10px !important;
color: #fff !important; */
}

#cboxClose {
background: url(images/ico_close.svg) no-repeat !important;
bottom: 0 !important;
right: 10px !important;
width: 20px !important;
height: 20px !important;
background-size: contain !important;
}

.list-blk li .desp {
margin: 5px 0 0;
}

#page-top {
display: inline-block;
position: fixed;
right: 30px;
color: #fff;
font-size: 14px;
line-height: 37px;
width: 140px;
text-align: center;
background: #646464;
border-radius: 5px;
z-index: 1000;
cursor: pointer;
}

footer {
font-size: 1rem;
border-top: 2px solid #000;
}

footer .inner {
padding: 18px 0;
}

footer .cp {
background: #000;
padding: 10px 3%;
text-align: center;
color: #fff;
}

/*===============================================================スマホ小*/
@media all and (max-width:374px) {
.slider {
width: 100%;
}

.slider div img {
width: 320px;
top: -200px;
}

}


/*===============================================================タブレット*/
@media all and (min-width:768px) {
header .inner {
height: 97px;
}

header .logo {
width: 304px;
}

header .logo_torunavi {
width: 132px;
}

.slider {
height: 500px;
width: 768px;
margin: 0 auto;
}

.slider div {
height: 500px;
}

.slider div img {
width: 768px;
top: -700px;
}

h2 img {
width: 250px;
}

#topics .inner {
width: 94%;
margin: 0 auto;
}

#topics dl {
height: 130px;
}

.sort-menu li {
margin: 0 10px 10px 0;
width: calc(calc(100% - 40px) / 5);
}

.sort-menu li:nth-child(3n) {
margin: 0 10px 10px 0;
}

.sort-menu li:nth-child(5n) {
margin: 0 0 10px;
}

.sort-menu li:last-child {
margin: 0;
}

.sort-menu li,
.sort-menu li a {
height: 50px;
font-size: 1.2rem;
}

.list-blk li {
width: calc(calc(100% - 40px) / 3);
margin: 22px 20px 0 0;
font-size: 1.2rem;
}

.list-blk li:nth-child(3n) {
margin: 22px 0 0;
}

.list-blk li.new:after {
width: 65px;
height: 70px;
}

.list-blk li .popup {
width: 49px;
height: 49px;
}

#colorbox, #cboxOverlay, #cboxWrapper {
padding: 0 0 0 30px;
}

.list-blk li .desp {
margin: 5px 0 0 5px;
}

footer {
font-size: 1.2rem;
}

}

/*===============================================================PC*/
@media all and (min-width:1025px) {
.inner {
width: 960px;
}

.slider {
width: 1280px;
height:600px;
}

.slider div {
height: 600px;
}

.slider div img {
width: auto;
top: -1400px;
}

#topics .inner {
width: 960px;
margin: 0 auto;
}

.sort-menu li {
width: calc(910px / 6);
}

.sort-menu li:nth-child(3n),
.sort-menu li:nth-child(5n) {
margin: 0 10px 10px 0;
}

.sort-menu li:nth-child(6n) {
margin: 0 0 10px;
}

.list-blk li,
.list-blk li:nth-child(2n) {
width: 292px;
margin: 22px 41px 0 0;
}


}






/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}