@charset "UTF-8";
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
}
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
These "retina group" variables are mappings for the naming and pairing of normal and retina sprites.
The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`.
*/
/*
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
}
.icon-email {
@include sprite($icon-email);
}
Example usage in HTML:
`display: block` sprite:
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
*/
/*
The `retina-sprite` mixin sets up rules and a media query for a sprite/retina sprite.
It should be used with a "retina group" variable.
The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/
$icon-home-group: ('icon-home', $icon-home, $icon-home-2x, );
.icon-home {
@include retina-sprite($icon-home-group);
}
*/
/*
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
*/
/*
The `retina-sprites` mixin generates a CSS rule and media query for retina groups
This yields the same output as CSS retina template but can be overridden in SCSS
@include retina-sprites($retina-groups);
*/
/** setting
****************************************/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.8;
vertical-align: baseline;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
letter-spacing: 0;
}
a{
color: #171515;
}
/** body **/
body {
width: 100%;
min-width: 1080px;
height: 100%;
font-size: 13px;
text-align: left;
letter-spacing: 0;
line-height: 1.8;
margin-top: 0px;
background: #f6f6f6;
position: relative;
}
@media all and (max-width: 768px) {
body {
min-width: 100%;
}
body:after {
top: 8px;
}
}
.nav-open {
overflow: hidden;
}
/**clear**/
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.clear {
clear: both;
}
a {
cursor: pointer;
}
br {
line-height: inherit;
}
/*------------------------------------------
Header
------------------------------------------*/
.g-header {
width: 100%;
min-width: 1080px;
height: 106px;
padding: 16px 0 0;
background: #fff;
}
.g-header__wrapper {
width: 1080px;
margin: 0 auto;
font-size: 0;
position: relative;
}
.g-header__sitename {
padding: 8px 0 0;
display: inline-block;
vertical-align: top;
}
.g-header__logo img {
width: 150px;
}
.g-header__logo a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.g-header__logo a:hover {
opacity: 0.8;
}
.g-header__sitemeta {
width: 150px;
margin: 4px 0 0;
text-align: center;
font-size: 13px;
font-weight: bold;
}
.g-header__date {
margin: 0 0 0 18px;
padding: 30px 0 0;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
.g-header__banner {
float: right;
}
@media all and (max-width: 768px) {
.g-header {
height: 60px;
min-width: 100%;
padding: 0;
background: rgba(255, 255, 255, 0.9);
box-sizing: border-box;
position: fixed;
z-index: 100;
}
.g-header__wrapper {
width: 100%;
height: 60px;
}
.g-header__sitename {
width: 120px;
margin: 0 auto;
padding: 5px 0 0;
display: block;
}
.g-header__logo {
text-align: center;
}
.g-header__logo img {
width: 100px;
}
.g-header__sitemeta {
width: 120px;
margin: 2px 0 0;
font-size: 10px;
text-align: center;
}
.g-header__date {
display: none;
}
.g-header__banner {
display: none;
}
}
.g-nav {
height: 56px;
background: #222;
min-width: 1080px;
}
.g-nav__wrapper {
width: 1080px;
margin: 0 auto;
position: relative;
}
.g-nav ul {
font-size: 0;
}
.g-nav li {
height: 56px;
line-height: 56px;
padding: 0 24px;
display: inline-block;
position: relative;
}
.g-nav li a {
line-height: inherit;
color: #fff;
font-size: 15px;
display: block;
}
.g-nav li a:hover {
opacity: 0.8;
}
.g-nav li span {
line-height: inherit;
padding: 0 18px 0 0;
color: #fff;
font-size: 15px;
display: block;
position: relative;
cursor: pointer;
}
.g-nav li span:after {
margin: -5px 0 0;
content: "";
background-image: url(../img/sprite.png);
background-position: -32px 0px;
width: 10px;
height: 8px;
position: absolute;
top: 50%;
right: 0;
transition: 0.2s;
-webkit-transition: 0.2s;
-ms-transition: 0.2s;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.g-nav li span:after {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.g-nav li span:hover {
opacity: 0.8;
}
.g-nav li span.on:after {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
}
.g-nav__category {
padding: 16px 0 0;
position: absolute;
top: 72px;
left: 0;
z-index: 100;
visibility: hidden;
transition: 0.2s;
-webkit-transition: 0.2s;
-ms-transition: 0.2s;
opacity: 0;
}
.g-nav__category.on {
top: 56px;
visibility: visible;
opacity: 1;
}
.g-nav__cat-box {
width: 420px;
height: auto;
padding: 20px 20px;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
position: relative;
}
.g-nav__cat-box li {
width: 50%;
height: 48px;
line-height: 48px;
padding: 0;
}
.g-nav__cat-box li a {
height: 48px;
line-height: 48px;
padding: 0 0 0 24px;
color: #222;
font-size: 15px;
display: block;
position: relative;
}
.g-nav__cat-box li a:before {
margin: -5px 0 0;
content: "";
display: block;
background-image: url(../img/sprite.png);
background-position: 0px -31px;
width: 5px;
height: 8px;
position: absolute;
top: 50%;
left: 8px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.g-nav__cat-box li a:before {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.g-nav__cat-box li a:hover {
color: #888;
text-decoration: underline;
}
.g-nav__cat-box:before {
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 15px solid #fff;
content: "";
position: absolute;
top: -26px;
left: 62px;
}
.g-nav__search {
height: 40px;
width: 300px;
background: #fff;
position: absolute;
top: 8px;
right: 0;
}
.g-nav__search-text {
width: calc(100% - 36px);
}
.g-nav__search-text input {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 2px;
box-sizing: border-box;
}
.g-nav__search-submit {
width: 36px;
height: 36px;
position: absolute;
top: 2px;
right: 0;
}
.g-nav__search-submit input {
width: 36px;
height: 36px;
background: url(../img/icon-search.png);
background-size: 36px;
display: block;
color: transparent;
overflow: hidden;
cursor: pointer;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
z-index: 10;
}
.g-nav__search-submit input:hover {
opacity: 0.5;
}
.g-nav img {
display: none;
}
@media all and (max-width: 768px) {
.g-nav {
display: none;
}
}
.sp-nav-btn {
width: 48px;
height: 48px;
position: absolute;
top: 6px;
left: 4px;
z-index: 20;
cursor: pointer;
display: none;
}
.sp-nav-btn .line1 {
width: 24px;
height: 3px;
background: #171515;
border-radius: 1.5px;
position: absolute;
top: 14px;
left: 12px;
transition: 0.35s;
-webkit-transition: 0.35s;
-ms-transition: 0.35s;
}
.sp-nav-btn .line2 {
width: 24px;
height: 3px;
margin: -2px 0 0;
background: #171515;
position: absolute;
border-radius: 1.5px;
top: 50%;
left: 12px;
transition: 0.1s;
-webkit-transition: 0.1s;
-ms-transition: 0.1s;
}
.sp-nav-btn .line3 {
width: 24px;
height: 3px;
background: #171515;
border-radius: 1.5px;
position: absolute;
bottom: 15px;
left: 12px;
transition: 0.35s;
-webkit-transition: 0.35s;
-ms-transition: 0.35s;
}
@media all and (max-width: 768px) {
.sp-nav-btn {
display: block;
}
}
.sp-nav {
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
position: fixed;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sp-nav__wrapper {
padding: 44px 20px 20px;
}
.sp-nav li {
border-top: 1px dotted #ccc;
}
.sp-nav li:first-child {
border: none;
}
.sp-nav li a {
height: 48px;
line-height: 48px;
font-size: 15px;
}
.sp-nav.nav-open {
opacity: 1;
visibility: visible;
}
.sp-close-btn {
width: 48px;
height: 48px;
position: absolute;
top: 6px;
left: 4px;
z-index: 20;
cursor: pointer;
}
.sp-close-btn .line1 {
width: 24px;
height: 3px;
background: #171515;
border-radius: 1.5px;
position: absolute;
top: 14px;
left: 12px;
transform: translate3d(0, 7px, 0) rotate(135deg);
}
.sp-close-btn .line2 {
width: 24px;
height: 3px;
margin: -2px 0 0;
background: #171515;
position: absolute;
border-radius: 1.5px;
top: 50%;
left: 12px;
transform: translate3d(0, -2px, 0) rotate(-135deg);
}
.sp-search-btn {
width: 48px;
height: 48px;
text-align: center;
position: absolute;
top: 6px;
right: 4px;
cursor: pointer;
display: none;
}
.sp-search-btn i {
margin: -11px 0 0 -11px;
font-size: 21px;
position: absolute;
top: 50%;
left: 50%;
}
@media all and (max-width: 768px) {
.sp-search-btn {
display: block;
}
}
.sp-search {
width: 100%;
height: 60px;
background: #fff;
position: fixed;
z-index: 100;
opacity: 0;
visibility: hidden;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sp-search__box {
width: calc(100% - 60px);
height: 54px;
padding: 6px 0 0 6px;
background: #fff;
}
.sp-search__form {
height: 48px;
border: 2px solid #222;
box-sizing: border-box;
position: relative;
}
.sp-search input[type="text"] {
height: 44px;
line-height: 44px;
}
.sp-search input[type="submit"] {
width: 36px;
height: 36px;
background: url(../img/icon-search.png);
background-size: 36px;
display: block;
color: transparent;
overflow: hidden;
cursor: pointer;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
z-index: 10;
}
.sp-search input[type="submit"]:hover {
opacity: 0.5;
}
.sp-search .g-nav__search-submit {
top: 4px;
}
.sp-search.nav-open {
opacity: 1;
visibility: visible;
}
.search-close-btn {
width: 48px;
height: 48px;
background: #fff;
position: absolute;
top: 6px;
right: 4px;
z-index: 20;
cursor: pointer;
}
.search-close-btn .line1 {
width: 24px;
height: 3px;
background: #171515;
border-radius: 1.5px;
position: absolute;
top: 15px;
left: 14px;
transform: translate3d(0, 7px, 0) rotate(135deg);
}
.search-close-btn .line2 {
width: 24px;
height: 3px;
margin: -1px 0 0;
background: #171515;
position: absolute;
border-radius: 1.5px;
top: 50%;
left: 14px;
transform: translate3d(0, -2px, 0) rotate(-135deg);
}
/*------------------------------------------
Main
------------------------------------------*/
.contents {
width: 1080px;
margin: 40px auto 0;
}
@media all and (max-width: 768px) {
.contents {
width: 100%;
margin: 0;
padding: 72px 4px 0;
box-sizing: border-box;
}
}
.main {
width: 740px;
float: left;
}
.main .slick-initialized {
opacity: 1;
}
@media all and (max-width: 768px) {
.main {
width: 100%;
float: none;
}
}
.main-section {
margin: 32px 0 0;
padding: 24px 40px;
background: #fff;
border-radius: 8px;
}
.main-section__find {
height: 48px;
line-height: 48px;
padding: 0 0 4px 0;
font-size: 22px;
font-weight: bold;
border-bottom: 3px solid #171515;
position: relative;
}
.main-section:first-child {
margin: 0;
}
.main-section .more-link {
height: 20px;
margin: -10px 0 0;
position: absolute;
top: 50%;
right: 0;
}
.main-section .more-link a {
height: 20px;
line-height: 20px;
padding: 0 12px 0 0;
font-size: 13px;
font-weight: normal;
display: block;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.main-section .more-link a:after {
content: "";
margin: -5px 0 0;
position: absolute;
top: 50%;
right: 0;
background-image: url(../img/sprite.png);
background-position: 0px -31px;
width: 5px;
height: 8px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.main-section .more-link a:after {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.main-section .more-link a:hover {
opacity: 0.8;
}
@media all and (max-width: 768px) {
.main-section {
margin: 16px 0 0;
padding: 20px 12px;
}
.main-section__find {
height: 28px;
line-height: 28px;
padding: 0 0 8px 0;
font-size: 19px;
}
.main-section__find .more-link {
margin: -14px 0 0;
}
}
.main-banner-list {
margin: 32px 0 0;
}
.main-banner-list ul {
margin: 0 -16px;
text-align: center;
font-size: 0;
}
.main-banner-list li {
width: 50%;
padding: 0 16px;
box-sizing: border-box;
display: inline-block;
}
.main-banner-list img {
width: 100%;
max-width: 354px;
}
.main-banner-list a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.main-banner-list a:hover {
opacity: 0.8;
}
@media all and (max-width: 768px) {
.main-banner-list {
margin: 16px 0 0;
}
.main-banner-list ul {
width: 100%;
margin: 0 auto;
}
}
@media all and (max-width: 640px) {
.main-banner-list li {
width: 100%;
max-width: 100%;
margin: 12px 0 0;
padding: 0;
text-align: center;
display: block;
}
.main-banner-list li:fist-child {
margin: 0;
}
.main-banner-list img {
max-width: 354px;
min-width: 60%;
}
}
.main-more-btn {
margin: 16px 0 20px;
}
.main-more-btn a {
height: 56px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
text-align: center;
border: 3px solid #222;
box-sizing: border-box;
display: block;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.main-more-btn a:hover {
color: #fff;
background: #222;
}
.main-more-btn a:hover span {
color: #fff;
}
@media all and (max-width: 640px) {
.main-more-btn {
margin: 8px 0 12px;
}
.main-more-btn a {
height: 48px;
line-height: 42px;
font-size: 14px;
}
.main-more-btn span {
display: none;
}
}
.column-1 {
width: 840px;
margin: 40px auto 0;
}
@media all and (max-width: 1080px) {
.column-1 {
width: 100vw;
margin: 40px 0 0;
padding: 0 4px;
box-sizing: border-box;
}
}
@media all and (max-width: 768px) {
.column-1 {
width: calc(100% - 8px);
margin: 0 4px;
padding: 72px 0 0;
}
}
.share-btn-side {
width: 40px;
padding: 10px;
background: #fff;
border-radius: 0 6px 6px 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
position: fixed;
left: 0;
top: 218px;
z-index: 100;
}
.share-btn-side li {
height: 40px;
width: 40px;
margin: 6px 0 0;
text-align: center;
display: block;
position: relative;
}
.share-btn-side li:first-child {
margin: 0;
}
.share-btn-side a {
height: 40px;
width: 40px;
display: block;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
position: relative;
}
.share-btn-side a:hover {
opacity: 0.7;
}
.share-btn-side i {
display: block;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
.share-btn-side .facebook {
background: #3a5999;
}
.share-btn-side .facebook i {
margin: -11px 0 0 -5px;
font-size: 22px;
}
.share-btn-side .twitter {
background: #4da9ef;
}
.share-btn-side .twitter i {
margin: -11px 0 0 -10px;
font-size: 22px;
}
.share-btn-side .line {
background: #50c018;
}
.share-btn-side .line a:before {
margin: -11px 0 0 -11px;
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
background-image: url(../img/sprite.png);
background-position: 0px 0px;
width: 22px;
height: 21px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.share-btn-side .line a:before {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
@media all and (max-width: 768px) {
.share-btn-side {
display: none;
}
}
/*------------------------------------------
Top
------------------------------------------*/
.top-cal {
opacity: 0;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.top-cal .slick-slide {
height: 390px;
position: relative;
overflow: hidden;
}
.top-cal .slick-list {
border-radius: 8px;
overflow: hidden;
}
.top-cal img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.top-cal__text {
width: 100%;
height: auto;
background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.top-cal__text p {
padding: 8px 20px;
color: #fff;
font-size: 16px;
}
.top-cal .slick-dots {
margin: 16px 0 0;
text-align: center;
font-size: 0;
}
.top-cal .slick-dots li {
width: 10px;
height: 10px;
margin: 0 8px;
background: #e0e0e0;
border-radius: 5px;
display: inline-block;
}
.top-cal .slick-dots .slick-active {
background: #222;
}
@media all and (max-width: 768px) {
.top-cal {
height: auto;
margin: -12px -4px 0;
}
.top-cal .slick-list {
border-radius: 0;
}
.top-cal__text p {
font-size: 15px;
}
}
@media all and (max-width: 640px) {
.top-cal .slick-slide {
height: 280px;
}
}
.top-news {
margin: 10px 0 0;
}
.top-news article {
padding: 14px 0;
border-top: 1px dotted #ccc;
position: relative;
}
.top-news article:first-child {
border: none;
}
.top-news__thumb {
width: 280px;
height: 158px;
border-radius: 8px;
overflow: hidden;
position: absolute;
top: 14px;
left: 0;
}
.top-news__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.top-news__thumb > a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.top-news__thumb > a:hover {
opacity: 0.8;
}
.top-news__cat {
height: 26px;
position: absolute;
left: 0;
bottom: 0;
}
.top-news__cat a {
height: 26px;
line-height: 26px;
padding: 0 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.85);
display: block;
z-index: 10;
}
.top-news__cat a:hover {
color: #fff;
background: #222;
}
.top-news__meta {
min-height: 158px;
margin: 0 0 0 300px;
padding: 8px 0 0;
box-sizing: border-box;
}
.top-news__ttl {
font-size: 16px;
font-weight: normal;
}
.top-news__ttl a {
line-height: 1.7;
display: block;
}
.top-news__ttl a:hover {
color: #666;
text-decoration: underline;
}
.top-news__tag {
margin: 9px 0 0;
}
.top-news__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.top-news__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.top-news__tag li:first-child {
margin: 0;
}
.top-news__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.top-news__tag a:hover {
background: #222;
}
.top-news__other {
margin: 11px 0 0;
font-size: 0;
}
.top-news__author {
display: inline-block;
vertical-align: top;
}
.top-news__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 18px;
}
.top-news__author a {
color: #777;
font-size: 14px;
}
.top-news__author a:hover {
text-decoration: underline;
}
.top-news__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.top-news__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 18px;
}
@media all and (max-width: 768px) {
.top-news article {
padding: 12px 0;
}
.top-news__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.top-news__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.top-news__ttl {
font-size: 15px;
}
}
.top-news-line article {
padding: 10px 0;
border-top: 1px dotted #ccc;
}
.top-news-line__ttl {
font-size: 16px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-news-line__ttl a:hover {
color: #666;
text-decoration: underline;
}
.top-news-line__other {
margin: 5px 0 0;
font-size: 0;
}
.top-news-line__cat {
display: inline-block;
vertical-align: top;
position: relative;
}
.top-news-line__cat i {
margin: 0 4px 0 0;
color: #777;
font-size: 16px;
position: absolute;
top: 4px;
left: 0;
}
.top-news-line__cat a {
padding: 0 0 0 18px;
font-size: 14px;
color: #777;
}
.top-news-line__author {
margin: 0 0 0 14px;
display: inline-block;
vertical-align: top;
}
.top-news-line__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 16px;
}
.top-news-line__author a {
color: #777;
font-size: 14px;
}
.top-news-line__author a:hover {
color: #666;
text-decoration: underline;
}
.top-news-line__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.top-news-line__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 17px;
}
@media all and (max-width: 768px) {
.top-news-line__ttl {
font-size: 15px;
overflow: none;
white-space: normal;
text-overflow: clip;
}
.top-news-line__cat i {
font-size: 14px;
}
.top-news-line__cat a {
padding: 0 0 0 16px;
font-size: 13px;
}
.top-news-line__author {
margin: 0 0 0 8px;
}
.top-news-line__author i {
font-size: 14px;
}
.top-news-line__author a {
font-size: 13px;
}
.top-news-line__time {
margin: 0 0 0 8px;
font-size: 13px;
}
.top-news-line__time i {
font-size: 15px;
}
}
.top-pickup-main {
margin: 24px 0 0;
}
.top-pickup-main article {
position: relative;
}
.top-pickup-main__thumb {
position: absolute;
top: 0;
left: 0;
width: 380px;
height: 210px;
border-radius: 8px;
position: absolute;
overflow: hidden;
}
.top-pickup-main__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.top-pickup-main__thumb a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.top-pickup-main__thumb a:hover {
opacity: 0.8;
}
.top-pickup-main__meta {
min-height: 210px;
margin: 0 0 0 400px;
}
.top-pickup-main__ttl {
color: #777;
font-size: 15px;
font-weight: normal;
}
.top-pickup-main__ttl a:hover {
color: #666;
text-decoration: underline;
}
.top-pickup-main__tag {
margin: 8px 0 0;
}
.top-pickup-main__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.top-pickup-main__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.top-pickup-main__tag li:first-child {
margin: 0;
}
.top-pickup-main__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.top-pickup-main__tag a:hover {
background: #222;
}
.top-pickup-main__other {
margin: 11px 0 0;
font-size: 0;
}
.top-pickup-main__author {
display: inline-block;
vertical-align: top;
}
.top-pickup-main__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 18px;
}
.top-pickup-main__author a {
color: #777;
font-size: 14px;
}
.top-pickup-main__author a:hover {
text-decoration: underline;
}
.top-pickup-main__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.top-pickup-main__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 18px;
}
@media all and (max-width: 768px) {
.top-pickup-main__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.top-pickup-main__thumb img {
width: 100% !important;
}
.top-pickup-main__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.top-pickup-main__ttl {
font-size: 15px;
}
}
.top-pickup {
margin: 12px -12px 20px;
font-size: 0;
}
.top-pickup article {
width: 50%;
margin: 20px 0 0;
padding: 0 12px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.top-pickup__thumb {
width: 100%;
height: 180px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.top-pickup__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.top-pickup__thumb a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.top-pickup__thumb a:hover {
opacity: 0.8;
}
.top-pickup__meta {
margin: 10px 3px 0;
}
.top-pickup__ttl {
line-height: 1.7;
font-size: 14px;
font-weight: normal;
}
.top-pickup__ttl a:hover {
color: #666;
text-decoration: underline;
}
.top-pickup__tag {
margin: 8px 0 0;
}
.top-pickup__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.top-pickup__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.top-pickup__tag li:first-child {
margin: 0;
}
.top-pickup__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.top-pickup__tag a:hover {
background: #222;
}
.top-pickup__tag + .top-pickup__other {
margin: 10px 0 0;
}
.top-pickup__other {
margin: 4px 0 0;
font-size: 0;
}
.top-pickup__author {
display: inline-block;
vertical-align: top;
}
.top-pickup__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 16px;
}
.top-pickup__author a {
color: #777;
font-size: 14px;
}
.top-pickup__author a:hover {
color: #666;
text-decoration: underline;
}
.top-pickup__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.top-pickup__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 17px;
}
@media all and (max-width: 768px) {
.top-pickup__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.top-pickup__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.top-pickup__ttl {
font-size: 15px;
}
}
@media all and (max-width: 768px) {
.top-pickup {
margin: 0px 0 20px;
}
.top-pickup article {
width: 100%;
padding: 0;
}
}
.top-information {
margin: 6px 0 0;
}
.top-information li {
border-top: 1px dotted #ccc;
}
.top-information li:first-child {
border: none;
}
.top-information li a {
height: 52px;
line-height: 52px;
font-size: 0;
display: block;
}
.top-information li a:hover p {
color: #666;
text-decoration: underline;
}
.top-information time {
width: 68px;
line-height: 52px;
font-size: 13px;
display: inline-block;
vertical-align: top;
}
.top-information p {
width: calc(100% - 72px);
line-height: 52px;
margin: 0 0 0 4px;
font-size: 15px;
display: inline;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
@media all and (max-width: 768px) {
.top-information li {
padding: 8px 0;
}
.top-information li a {
height: auto;
line-height: 1.7;
}
.top-information time {
line-height: 1.7;
display: block;
}
.top-information p {
width: 100%;
margin: 4px 0 0;
line-height: 1.7;
font-size: 14px;
display: block;
white-space: normal;
}
}
/*------------------------------------------
Archives
------------------------------------------*/
.archives {
margin: 10px 0 0;
}
.archives article {
padding: 14px 0;
border-top: 1px dotted #ccc;
position: relative;
}
.archives article:first-child {
border: none;
}
.archives__thumb {
width: 280px;
height: 158px;
border-radius: 8px;
overflow: hidden;
position: absolute;
top: 14px;
left: 0;
}
.archives__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.archives__thumb > a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.archives__thumb > a:hover {
opacity: 0.8;
}
.archives__cat {
height: 26px;
position: absolute;
left: 0;
bottom: 0;
}
.archives__cat a {
height: 26px;
line-height: 26px;
padding: 0 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.85);
display: block;
z-index: 10;
}
.archives__cat a:hover {
color: #fff;
background: #222;
}
.archives__meta {
min-height: 158px;
margin: 0 0 0 300px;
padding: 8px 0 0;
box-sizing: border-box;
}
.archives__ttl {
font-size: 16px;
font-weight: normal;
}
.archives__ttl a {
line-height: 1.7;
display: block;
}
.archives__ttl a:hover {
color: #666;
text-decoration: underline;
}
.archives__tag {
margin: 9px 0 0;
}
.archives__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.archives__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
vertical-align: top;
}
.archives__tag li:first-child {
margin: 0;
}
.archives__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.archives__tag a:hover {
background: #222;
}
.archives__other {
margin: 11px 0 0;
font-size: 0;
}
.archives__author {
display: inline-block;
vertical-align: top;
}
.archives__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 18px;
}
.archives__author a {
color: #777;
font-size: 14px;
}
.archives__author a:hover {
color: #666;
text-decoration: underline;
}
.archives__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.archives__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 18px;
}
@media all and (max-width: 768px) {
.archives article {
padding: 12px 0;
}
.archives__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.archives__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.archives__ttl {
font-size: 15px;
}
}
.wp-pagenavi {
margin: 16px 0 0;
height: 40px;
padding: 0 0 24px 0;
text-align: center;
font-size: 0;
}
.wp-pagenavi span {
min-width: 40px;
height: 40px;
line-height: 40px;
margin: 0 4px;
font-size: 14px;
text-align: center;
display: inline-block;
}
.wp-pagenavi a {
min-width: 40px;
height: 40px;
line-height: 40px;
margin: 0 4px;
font-size: 14px;
text-align: center;
display: inline-block;
background: #f6f6f6;
box-sizing: border-box;
}
.wp-pagenavi a:hover {
text-decoration: underline;
}
.wp-pagenavi .current {
color: #fff;
background: #222;
}
@media all and (max-width: 768px) {
.wp-pagenavi {
height: 32px;
margin: 8px 0 0;
padding: 0 0 12px 0;
}
.wp-pagenavi span {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
font-size: 13px;
}
.wp-pagenavi a {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
padding: 0 4px;
font-size: 13px;
}
.wp-pagenavi .extend {
margin: 0;
}
}
/*------------------------------------------
Information
------------------------------------------*/
.information-archive {
margin: 6px 0 0;
}
.information-archive li {
border-top: 1px dotted #ccc;
position: relative;
}
.information-archive li:first-child {
border: none;
}
.information-archive li a {
padding: 10px 0;
font-size: 0;
display: block;
}
.information-archive li a:hover p {
color: #666;
text-decoration: underline;
}
.information-archive time {
width: 68px;
font-size: 13px;
display: inline-block;
vertical-align: top;
position: absolute;
top: 12px;
}
.information-archive p {
width: calc(100% - 68px);
line-height: 1.8;
margin: 0 0 0 80px;
font-size: 15px;
display: inline-block;
}
@media all and (max-width: 768px) {
.information-archive li a {
height: auto;
line-height: 1.8;
}
.information-archive time {
line-height: 1.8;
font-size: 12px;
display: block;
position: relative;
top: 0;
}
.information-archive p {
width: 100%;
margin: 0;
line-height: 1.8;
font-size: 14px;
display: block;
white-space: normal;
}
}
/*------------------------------------------
Single
------------------------------------------*/
.single__wrapper {
padding: 32px 56px 48px;
background: #fff;
border-radius: 8px;
}
.single__cat a {
height: 22px;
line-height: 22px;
padding: 0 18px;
font-size: 14px;
font-weight: bold;
border: 2px solid #222;
display: inline-block;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.single__cat a:hover {
color: #fff;
background: #222;
}
.single__ttl {
line-height: 1.7;
margin: 6px 0 8px 0;
padding: 8px 0;
font-size: 24px;
}
.single__ttl a {
line-height: 1.7;
}
.single__ttl a:hover {
text-decoration: underline;
}
.single__meta {
padding: 10px 0;
border-top: 2px solid #222;
border-bottom: 2px solid #222;
}
.single__author {
display: inline-block;
vertical-align: top;
}
.single__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 19px;
}
.single__author a {
color: #777;
font-size: 15px;
}
.single__author a:hover {
text-decoration: underline;
}
.single__tag {
margin: 20px 0 0;
}
.single__tag ul {
margin: -6px 0 0;
font-size: 0;
}
.single__tag li {
margin: 6px 6px 0 0;
display: inline-block;
}
.single__tag li:last-child {
margin: 6px 0 0;
}
.single__tag a {
height: 24px;
line-height: 24px;
padding: 0 14px;
color: #fff;
font-size: 13px;
background: #888888;
border-radius: 3px;
display: block;
}
.single__tag a:hover {
background: #222;
}
.single__time {
margin: 0 0 0 14px;
padding: 0 0 0 23px;
color: #777;
font-size: 15px;
display: inline-block;
vertical-align: top;
position: relative;
}
.single__time i {
color: #777;
font-size: 19px;
position: absolute;
top: 3px;
left: 0;
}
.single__thumb {
margin: 40px 0 32px;
}
.single__thumb img {
width: 100% !important;
height: auto !important;
}
.single__body {
margin: 56px 0 0;
}
.single__body h2 {
margin: 0 0 24px;
padding: 64px 0 0;
font-size: 26px;
clear: both;
}
.single__body h2 + p {
margin: 0;
}
.single__body h2 + img {
margin: 0;
}
.single__body h3 {
margin: 0 0 20px;
padding: 44px 0 4px;
font-size: 22px;
border-bottom: 2px solid #f0f0f0;
clear: both;
}
.single__body p {
margin: 28px 0 0;
font-size: 17px;
}
.single__body p:first-child {
margin: 0;
}
.single__body .small {
margin: 12px 0 0;
color: #888;
font-size: 14px;
}
.single__body img {
margin: 28px 0 0;
max-width: 100%;
height: auto !important;
}
.single__body img + .small {
margin: 8px 0 0;
}
.single__body a {
color: #888;
text-decoration: underline;
}
.single__body a:hover {
text-decoration: none;
}
.single__body hr {
margin: 40px 0;
border-top: 1px solid #ddd;
}
.single__body .img-left {
width: 260px;
margin: 28px 20px 8px 0;
float: left;
}
.single__body .img-right {
width: 260px;
margin: 28px 0 8px 20px;
float: right;
}
.single__body .box-gray {
margin: 28px 0 0;
padding: 32px;
background: #f6f6f6;
}
.single__body .box-gray p {
margin: 24px 0 0;
}
.single__body .box-gray p:first-child {
margin: 0;
}
.single__body dl {
margin: 28px 0 0;
font-size: 0;
display: table;
}
.single__body dl dt {
width: 92px;
font-size: 17px;
font-weight: bold;
display: table-cell;
vertical-align: top;
}
.single__body dl dd {
display: table-cell;
vertical-align: top;
}
.single__body dl dd p:first-child {
margin: 0;
}
.single__body dl dd p {
margin: 18px 0 0;
font-size: 17px;
}
.single .index-kikanritokei {
margin: 48px 0 0;
padding: 24px 36px;
background: #f6f6f6;
border-radius: 8px;
}
.single .index-kikanritokei h4 {
font-size: 20px;
}
.single .index-kikanritokei h5 {
line-height: 1.6;
margin: 20px 0 0;
padding: 0 0 0 12px;
font-size: 17px;
border-left: 5px solid #222;
}
.single .index-kikanritokei p {
margin: 16px 0 0;
font-size: 15px;
}
.single .index-kikanritokei p a {
font-size: 15px;
text-decoration: underline;
}
.single .index-kikanritokei p a:hover {
color: #666;
text-decoration: none;
}
.single .index-kikanritokei ul {
margin: 16px 0 0;
}
.single .index-kikanritokei ul time {
font-size: 14px;
font-weight: bold;
display: block;
}
.single .index-kikanritokei ul li {
margin: 12px 0 0;
}
.single .index-kikanritokei ul li:first-child {
margin: 0;
}
.single .index-kikanritokei ul a {
font-size: 15px;
text-decoration: underline;
}
.single .index-kikanritokei ul a:hover {
color: #666;
text-decoration: none;
}
@media all and (max-width: 768px) {
.single__wrapper {
padding: 20px 16px 32px;
}
.single__cat a {
height: 20px;
line-height: 20px;
font-size: 13px;
}
.single__ttl {
line-height: 1.5;
margin: 0 0 6px 0;
font-size: 20px;
}
.single__ttl a {
line-height: 1.5;
}
.single__meta {
margin: 4px 0 0;
}
.single__author i {
display: none;
}
.single__author a {
color: #666;
font-size: 13px;
}
.single__time {
margin: 0;
padding: 0;
font-size: 13px;
}
.single__time i {
display: none;
}
.single__time:before {
margin: 0 5px 0 0;
content: "・";
}
.single__tag {
margin: 12px 0 0;
}
.single__thumb {
margin: 24px 0 0;
}
.single__body {
margin: 40px 0 0;
}
.single__body h2 {
margin: 0 0 8px;
padding: 36px 0 0;
font-size: 19px;
}
.single__body h3 {
padding: 28px 0 0;
font-size: 18px;
}
.single__body p {
margin: 20px 0 0;
font-size: 15px;
}
.single__body .small {
font-size: 12px;
}
.single__body hr {
margin: 28px 0;
}
.single__body .img-left {
width: 160px;
}
.single__body .img-right {
width: 160px;
}
.single__body .box-gray {
margin: 20px 0 0;
padding: 20px 12px;
}
.single__body .box-gray p {
margin: 16px 0 0;
}
.single__body dl {
margin: 20px 0 0;
}
.single__body dl dt {
width: 80px;
font-size: 15px;
}
.single__body dl dd p {
font-size: 15px;
}
.single .index-kikanritokei {
margin: 24px 0 0;
padding: 22px 16px 28px;
}
.single .index-kikanritokei h4 {
font-size: 18px;
}
.single .index-kikanritokei h5 {
font-size: 16px;
}
.single .index-kikanritokei p {
margin: 20px 0 0;
font-size: 14px;
}
.single .index-kikanritokei ul time {
font-size: 13px;
}
.single .index-kikanritokei ul a {
font-size: 14px;
}
}
@media all and (max-width: 480px) {
.single__body .img-left {
width: auto;
margin: 20px 0 0;
float: none;
}
.single__body .img-right {
width: auto;
margin: 20px 0 0;
float: none;
}
}
.site-map li {
margin: 6px 0 0;
padding: 0 0 0 16px;
font-size: 16px;
position: relative;
}
.site-map li:before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 0;
background-image: url(../img/sprite.png);
background-position: 0px -31px;
width: 5px;
height: 8px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.site-map li:before {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.site-map li:first-child {
margin: 0;
}
.share-btn-main {
margin: 40px 0 0;
}
.share-btn-main ul {
margin: 0 -4px;
font-size: 0;
}
.share-btn-main li {
width: 33.33333%;
padding: 0 4px;
box-sizing: border-box;
display: inline-block;
}
.share-btn-main .facebook a {
background: #3a5999;
}
.share-btn-main .twitter a {
background: #4da9ef;
}
.share-btn-main .line a {
background: #50c018;
}
.share-btn-main .line a:before {
margin: 0 0 0 -11px;
content: "";
display: block;
position: absolute;
top: 9px;
left: 50%;
background-image: url(../img/sprite.png);
background-position: 0px 0px;
width: 22px;
height: 21px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.share-btn-main .line a:before {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.share-btn-main a {
height: 56px;
padding: 31px 0 0 0;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 3px;
box-sizing: border-box;
display: block;
position: relative;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.share-btn-main a:hover {
opacity: 0.8;
}
.share-btn-main a i {
width: 20px;
height: 20px;
margin: 0 0 0 -10px;
color: #fff;
font-size: 21px;
display: block;
position: absolute;
top: 10px;
left: 50%;
}
@media all and (max-width: 640px) {
.share-btn-main {
margin: 28px 0 0;
}
.share-btn-main ul {
margin: 0 -2px;
}
.share-btn-main li {
padding: 0 2px;
}
.share-btn-main a {
height: 48px;
padding: 26px 0 0;
}
.share-btn-main a i {
top: 7px;
}
.share-btn-main .line a:before {
top: 7px;
}
}
.single-post-list {
margin: 10px 0 0;
}
.single-post-list a {
font-weight: normal !important;
}
.single-post-list article {
padding: 14px 0;
border-top: 1px dotted #ccc;
position: relative;
}
.single-post-list article:first-child {
border: none;
}
.single-post-list__thumb {
width: 280px;
height: 158px;
border-radius: 8px;
overflow: hidden;
position: absolute;
top: 14px;
left: 0;
}
.single-post-list__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.single-post-list__thumb > a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.single-post-list__thumb > a:hover {
opacity: 0.8;
}
.single-post-list__cat {
height: 26px;
position: absolute;
left: 0;
bottom: 0;
}
.single-post-list__cat a {
height: 26px;
line-height: 26px;
padding: 0 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.85);
display: block;
z-index: 10;
}
.single-post-list__cat a:hover {
color: #fff;
background: #222;
}
.single-post-list__meta {
min-height: 158px;
margin: 0 0 0 300px;
padding: 8px 0 0;
box-sizing: border-box;
}
.single-post-list__ttl {
font-size: 16px;
font-weight: normal;
}
.single-post-list__ttl a {
line-height: 1.7;
display: block;
}
.single-post-list__ttl a:hover {
color: #666;
text-decoration: underline;
}
.single-post-list__tag {
margin: 9px 0 0;
}
.single-post-list__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.single-post-list__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.single-post-list__tag li:first-child {
margin: 0;
}
.single-post-list__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.single-post-list__tag a:hover {
background: #222;
}
.single-post-list__other {
margin: 11px 0 0;
font-size: 0;
}
.single-post-list__author {
display: inline-block;
vertical-align: top;
}
.single-post-list__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 18px;
}
.single-post-list__author a {
color: #777;
font-size: 14px;
}
.single-post-list__author a:hover {
color: #666;
text-decoration: underline;
}
.single-post-list__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.single-post-list__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 18px;
}
.single-post-list .none {
margin: 16px 0 0;
font-size: 16px;
}
@media all and (max-width: 768px) {
.single-post-list article {
padding: 12px 0;
}
.single-post-list__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.single-post-list__thumb img {
width: 100%;
height: 100% !important;
top: 0;
left: 0;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.single-post-list__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.single-post-list__ttl {
font-size: 15px;
}
.single-post-list .none {
font-size: 15px;
}
}
.single-pickup {
margin: 12px -12px 20px;
font-size: 0;
}
.single-pickup article {
width: 50%;
margin: 20px 0 0;
padding: 0 12px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.single-pickup__thumb {
width: 100%;
height: 180px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.single-pickup__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.single-pickup__thumb a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.single-pickup__thumb a:hover {
opacity: 0.8;
}
.single-pickup__meta {
margin: 10px 3px 0;
}
.single-pickup__ttl {
line-height: 1.7;
font-size: 14px;
font-weight: normal;
}
.single-pickup__ttl a:hover {
color: #666;
text-decoration: underline;
}
.single-pickup__tag {
margin: 8px 0 0;
}
.single-pickup__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.single-pickup__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.single-pickup__tag li:first-child {
margin: 0;
}
.single-pickup__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.single-pickup__tag a:hover {
background: #222;
}
.single-pickup__tag + .single-pickup__other {
margin: 10px 0 0;
}
.single-pickup__other {
margin: 4px 0 0;
font-size: 0;
}
.single-pickup__author {
display: inline-block;
vertical-align: top;
}
.single-pickup__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 16px;
}
.single-pickup__author a {
color: #777;
font-size: 14px;
}
.single-pickup__author a:hover {
color: #666;
text-decoration: underline;
}
.single-pickup__time {
margin: 0 0 0 14px;
color: #777;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
.single-pickup__time i {
margin: 0 6px 0 0;
font-size: 17px;
}
@media all and (max-width: 1080px) {
.single-pickup__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
}
@media all and (max-width: 768px) {
.single-pickup__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.single-pickup__ttl {
font-size: 15px;
}
}
@media all and (max-width: 768px) {
.single-pickup {
margin: 0px 0 20px;
}
.single-pickup article {
width: 100%;
padding: 0;
}
}
.single-banner-list {
width: 740px;
margin: 32px auto 0;
}
.single-banner-list ul {
margin: 0 -16px;
text-align: center;
font-size: 0;
}
.single-banner-list li {
width: 50%;
padding: 0 16px;
box-sizing: border-box;
display: inline-block;
}
.single-banner-list img {
width: 354px;
}
.single-banner-list a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.single-banner-list a:hover {
opacity: 0.8;
}
@media all and (max-width: 840px) {
.single-banner-list {
width: 100%;
margin: 16px 0 0;
}
.single-banner-list ul {
width: 100%;
margin: 0 auto;
}
.single-banner-list img {
width: 100%;
}
}
@media all and (max-width: 640px) {
.single-banner-list li {
width: 100%;
max-width: 100%;
margin: 12px 0 0;
padding: 0;
text-align: center;
display: block;
}
.single-banner-list li:fist-child {
margin: 0;
}
.single-banner-list img {
max-width: 354px;
min-width: 60%;
}
}
/*------------------------------------------
Page
------------------------------------------*/
.page__wrapper {
padding: 32px 56px 48px;
background: #fff;
border-radius: 8px;
}
.page__ttl {
margin: 0 0 24px 0;
padding: 8px 0;
font-size: 26px;
border-bottom: 3px solid #222;
}
.page__body h2 {
margin: 32px 0 12px;
font-size: 22px;
}
.page__body h2 + p {
margin: 0;
}
.page__body p {
margin: 28px 0 0;
font-size: 17px;
}
.page__body a {
color: #888;
}
.page__body a:hover {
text-decoration: underline;
}
.page__body img {
margin: 32px 0 0;
width: 100%;
height: auto;
}
@media all and (max-width: 768px) {
.page__wrapper {
padding: 20px 16px 32px;
}
.page__ttl {
font-size: 22px;
}
.page__body h2 {
margin: 32px 0 8px;
font-size: 19px;
}
.page__body p {
margin: 20px;
font-size: 15px;
}
.page__body img {
margin: 24px 0 0;
}
}
/*------------------------------------------
Page Land
------------------------------------------*/
.page-land__wrapper {
padding: 32px 56px 48px;
background: #fff;
border-radius: 8px;
}
.page-land__ttl {
margin: 0 0 24px 0;
padding: 8px 0;
font-size: 26px;
border-bottom: 3px solid #222;
}
.page-land__information {
position: relative;
}
.page-land__img {
width: 240px;
height: 240px;
padding: 8px;
border: 1px solid #ddd;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
.page-land__img-wrapper {
width: 222px;
height: 222px;
position: relative;
}
.page-land__img-wrapper img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.page-land__meta {
min-height: 228px;
margin: 0 0 0 268px;
padding: 12px 0 0;
}
.page-land__meta p {
font-size: 16px;
}
.page-land__meta .small {
margin: 4px 0 0;
color: #666;
font-size: 14px;
}
.page-land__name {
font-size: 23px;
}
.page-land__name + p {
margin: 12px 0 0;
}
.page-land__body {
margin: 40px 0 0;
}
.page-land__body h2 {
margin: 32px 0 12px;
font-size: 21px;
}
.page-land__body h2 + p {
margin: 0;
}
.page-land__body p {
margin: 28px 0 0;
font-size: 17px;
}
.page-land__body img {
margin: 32px 0 0;
width: 100%;
height: auto;
}
@media all and (max-width: 768px) {
.page-land__wrapper {
padding: 20px 16px 24px;
}
.page-land__ttl {
font-size: 22px;
}
.page-land__information {
margin: 0 0 24px;
}
.page-land__img {
width: 100%;
height: auto;
position: static;
}
.page-land__img-wrapper {
width: 100%;
height: 280px;
}
.page-land__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
}
.page-land__name {
font-size: 21px;
}
.page-land__name + p {
margin: 8px 0 0;
}
.page-land__body h2 {
margin: 32px 0 8px;
font-size: 18px;
}
.page-land__body p {
margin: 20px 0 0;
font-size: 15px;
}
.page-land__body img {
margin: 24px 0 0;
}
}
/*------------------------------------------
Pickup
------------------------------------------*/
.pickup__wrapper {
width: 840px;
margin: 0 auto;
}
.pickup__find {
padding: 36px 0 6px;
font-size: 23px;
border-bottom: 3px solid #222;
}
.pickup .wp-pagenavi {
height: 44px;
margin: 32px 0 0;
padding: 0;
}
.pickup .wp-pagenavi a {
min-width: 44px;
height: 44px;
line-height: 44px;
background: #fff;
}
.pickup .wp-pagenavi span {
min-width: 44px;
height: 44px;
line-height: 44px;
}
@media all and (max-width: 1080px) {
.pickup__wrapper {
width: 100%;
margin: 0;
padding: 0 4px;
box-sizing: border-box;
}
}
@media all and (max-width: 768px) {
.pickup {
padding: 60px 0 0;
}
.pickup__find {
padding: 20px 0 04px;
font-size: 20px;
}
.pickup .wp-pagenavi {
height: 32px;
margin: 8px 0 0;
padding: 0 0 12px 0;
}
.pickup .wp-pagenavi span {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
font-size: 13px;
}
.pickup .wp-pagenavi a {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
padding: 0 4px;
font-size: 13px;
}
.pickup .wp-pagenavi .extend {
margin: 0;
}
}
.pickup-visual {
height: auto;
position: relative;
background-size: cover;
background-position: center center;
}
.pickup-visual__filter {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: absolute;
}
.pickup-visual__text {
width: 100%;
height: 100%;
padding: 44px 0;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.pickup-visual__ttl {
text-align: center;
}
.pickup-visual__ttl img {
width: 180px;
}
.pickup-visual__ttl p {
color: #fff;
font-size: 22px;
text-align: center;
}
.pickup-visual__description {
margin: 26px 0 0;
}
.pickup-visual__description p {
margin: 16px 0 0;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.pickup-visual__description p:first-child {
margin: 0;
}
@media all and (max-width: 768px) {
.pickup-visual {
height: auto;
}
.pickup-visual__text {
padding: 40px 20px 52px;
}
.pickup-visual__ttl p {
font-size: 18px;
}
.pickup-visual__description p {
font-size: 15px;
}
.pickup-visual__description p br {
display: none;
}
}
.pickup-tag__main {
margin: 0 auto;
padding: 24px 0 0;
}
.pickup-tag__main ul {
margin: -8px 0 0;
font-size: 0;
text-align: center;
}
.pickup-tag__main li {
margin: 8px 0 0 8px;
display: inline-block;
}
.pickup-tag__main li:first-child {
margin: 8px 0 0 0;
}
.pickup-tag__main a {
height: 40px;
line-height: 40px;
padding: 0 20px;
font-size: 15px;
background: #fff;
border: 1px solid #ececec;
display: block;
}
.pickup-tag__main a:hover {
text-decoration: underline;
background: #ececec;
}
.pickup-tag__main span {
height: 40px;
line-height: 40px;
padding: 0 20px;
font-size: 14px;
background: #ececec;
border: 1px solid #ececec;
border-radius: 3px;
display: block;
cursor: pointer;
}
.pickup-tag__main span:before {
content: "すべて見る";
display: inline;
}
.pickup-tag__main span:hover {
color: #fff;
background: #222;
border: 1px solid #222;
}
.pickup-tag__main span.tag-open:before {
content: "閉じる";
}
.pickup-tag__all {
width: 840px;
margin: 24px auto 0;
padding: 24px 32px;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
position: relative;
display: none;
}
.pickup-tag__all.tag-open {
display: block;
visibility: visible;
}
.pickup-tag__all ul {
margin: -8px 0 0;
font-size: 0;
}
.pickup-tag__all li {
margin: 8px 0 0 8px;
display: inline-block;
}
.pickup-tag__all a {
height: 32px;
line-height: 32px;
padding: 0 16px;
font-size: 14px;
background: #ececec;
border: 1px solid #ececec;
border-radius: 3px;
display: block;
}
.pickup-tag__all a:hover {
text-decoration: underline;
background: #fff;
border: 1px solid #ececec;
}
.pickup-tag__close-btn {
width: 24px;
height: 24px;
line-height: 24px;
color: #fff;
font-size: 13px;
text-align: center;
background: #222;
border-radius: 16px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
@media all and (max-width: 840px) {
.pickup-tag__main {
width: 100%;
padding: 20px 12px 0;
box-sizing: border-box;
}
.pickup-tag__main ul {
margin: -4px 0 0;
}
.pickup-tag__main li {
margin: 4px 0 0 4px;
}
.pickup-tag__main li:first-child {
margin: 4px 0 0 0;
}
.pickup-tag__main a {
height: 32px;
line-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.pickup-tag__main span {
height: 32px;
line-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.pickup-tag__all {
width: calc(100% - 8px);
margin: 16px 4px 0;
padding: 20px;
}
.pickup-tag__all ul {
margin: -4px 0 0 -4px;
}
.pickup-tag__all li {
margin: 4px 0 0 4px;
}
}
.pickup-list {
margin: 8px -10px 20px;
font-size: 0;
}
.pickup-list article {
width: 50%;
margin: 20px 0 0;
padding: 0 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.pickup-list__box {
padding: 20px;
background: #fff;
border-radius: 8px;
}
.pickup-list__thumb {
width: 100%;
height: 180px;
overflow: hidden;
position: relative;
}
.pickup-list__thumb img {
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.pickup-list__thumb a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.pickup-list__thumb a:hover {
opacity: 0.8;
}
.pickup-list__tag {
margin: 8px 0 0;
}
.pickup-list__tag ul {
height: 20px;
font-size: 0;
overflow: hidden;
}
.pickup-list__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.pickup-list__tag li:first-child {
margin: 0;
}
.pickup-list__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.pickup-list__tag a:hover {
background: #222;
}
.pickup-list__meta {
margin: 12px 3px 0;
}
.pickup-list__ttl {
line-height: 1.7;
font-size: 15px;
font-weight: normal;
}
.pickup-list__ttl a:hover {
color: #666;
text-decoration: underline;
}
.pickup-list__other {
margin: 10px 0 0;
font-size: 0;
}
.pickup-list__author {
display: inline-block;
vertical-align: top;
}
.pickup-list__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 16px;
}
.pickup-list__author a {
color: #777;
font-size: 13px;
}
.pickup-list__author a:hover {
text-decoration: underline;
}
.pickup-list__time {
margin: 0 0 0 14px;
color: #777;
font-size: 13px;
display: inline-block;
vertical-align: top;
}
.pickup-list__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 16px;
}
@media all and (max-width: 1080px) {
.pickup-list {
margin: 14px 0 0;
}
.pickup-list article {
margin: 12px 0 0;
padding: 0 6px;
}
}
@media all and (max-width: 768px) {
.pickup-list {
margin: 12px 0 20px;
}
.pickup-list article {
width: 100%;
margin: 8px 0 0;
padding: 0;
}
.pickup-list__box {
padding: 12px;
}
.pickup-list__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.pickup-list__meta {
min-height: auto;
min-height: initial;
margin: 12px 0 0;
padding: 0;
}
.pickup-list__ttl {
font-size: 15px;
}
}
/*------------------------------------------
Land
------------------------------------------*/
.land-list {
padding: 0 0 16px 0;
}
.land-list p {
margin: 24px 0 0;
font-size: 15px;
}
.land-list .land-find {
margin: 28px 0 0;
padding: 12px 20px;
font-size: 18px;
font-weight: bold;
background: #f6f6f6;
border-radius: 6px;
}
.land-list ul {
margin: 12px 0 0;
font-size: 0;
}
.land-list li {
width: 50%;
display: inline-block;
vertical-align: top;
}
.land-list li a {
height: 48px;
line-height: 48px;
padding: 0 0 0 28px;
font-size: 15px;
display: block;
position: relative;
}
.land-list li a:before {
content: "";
margin: -4px 0 0;
position: absolute;
top: 50%;
left: 12px;
background-image: url(../img/sprite.png);
background-position: 0px -31px;
width: 5px;
height: 8px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.land-list li a:before {
background-image: url(../img/sprite@2x.png);
background-size: 42px 39px;
}
}
.land-list li a:hover {
text-decoration: underline;
}
@media all and (max-width: 768px) {
.land-list {
padding: 0 0 8px 0;
}
.land-list .land-find {
margin: 20px 0 0;
padding: 10px 12px;
font-size: 17px;
}
.land-list ul {
margin: 8px 0 0;
}
.land-list li {
width: 100%;
border-top: 1px dotted #ccc;
}
.land-list li:first-child {
border: none;
}
.land-list li a {
font-size: 14px;
}
}
/*------------------------------------------
Sub
------------------------------------------*/
.sub {
width: 300px;
float: right;
}
.sub .sub-banner {
height: 180px;
text-align: center;
opacity: 0;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sub .sub-banner a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sub .sub-banner a:hover {
opacity: 0.8;
}
.sub .sub-banner img {
max-width: 100%;
min-width: 60%;
}
.sub .sub-banner .slick-slide {
text-align: center;
}
.sub .slick-initialized {
opacity: 1;
}
.sub .sub-banner-f {
margin: 20px 0 0;
}
.sub .sub-banner-f li {
margin: 12px 0 0;
text-align: center;
}
.sub .sub-banner-f li:first-child {
margin: 0;
}
.sub .sub-banner-f a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sub .sub-banner-f a:hover {
opacity: 0.8;
}
.sub .sub-banner-f img {
max-width: 100%;
min-width: 60%;
}
.sub .sub-section {
margin: 20px 0 0;
padding: 20px;
background: #fff;
border-radius: 8px;
}
.sub .sub-section__ttl {
height: 32px;
line-height: 32px;
padding: 0 0 8px 0;
font-size: 18px;
font-weight: bold;
border-bottom: 3px solid #171515;
}
.sub .sub-post {
margin: 20px 0 0;
}
.sub .sub-post li {
margin: 16px 0 0;
}
.sub .sub-post li:first-child {
margin: 0;
}
.sub .sub-post a {
display: block;
}
.sub .sub-post a:hover .sub-post__thumb {
opacity: 0.8;
}
.sub .sub-post a:hover .sub-post__ttl p {
color: #666;
text-decoration: underline;
}
.sub .sub-post__thumb {
width: 100%;
height: 146px;
border-radius: 8px;
position: relative;
overflow: hidden;
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.sub .sub-post__thumb img {
width: 100% !important;
height: auto;
top: 50%;
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.sub .sub-post__ttl {
margin: 8px 4px 0;
}
.sub .sub-post__ttl p {
font-size: 14px;
}
.sub .sub-category {
margin: 8px 0 0;
}
.sub .sub-category li {
border-top: 1px dotted #ccc;
}
.sub .sub-category li:first-child {
border: none;
}
.sub .sub-category li a {
width: 100%;
height: 48px;
line-height: 48px;
padding: 0 6px;
font-size: 15px;
box-sizing: border-box;
display: block;
}
.sub .sub-category li a:hover {
color: #666;
text-decoration: underline;
}
.sub .sub-ranking {
margin: 20px 0 0;
}
@media all and (max-width: 768px) {
.sub {
width: 100%;
float: none;
margin: 16px 0 0;
}
.sub .sub-banner {
height: auto;
}
.sub .sub-section {
margin: 16px 0 0;
padding: 20px 12px;
}
.sub .sub-section__ttl {
height: 28px;
line-height: 28px;
font-size: 18px;
}
.sub .sub-post {
margin: 16px 0 0;
}
.sub .sub-post__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
}
.sub .sub-ranking {
margin: 16px 0 0;
}
}
/*------------------------------------------
Footer
------------------------------------------*/
.g-footer {
margin: 56px 0 0;
}
.g-footer .f-nav {
width: 100%;
min-width: 1080px;
background: #fff;
}
.g-footer .f-nav__wrapper {
width: 1080px;
margin: 0 auto;
padding: 40px 0;
font-size: 0;
}
.g-footer .f-nav__column {
width: calc(50% - 16px);
padding: 16px 28px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.g-footer .f-nav__column:first-child {
margin: 0 32px 0 0;
}
.g-footer .f-nav__ttl img {
height: 42px;
}
.g-footer .f-nav__list li {
width: 100%;
height: 44px;
line-height: 44px;
border-top: 1px dotted #ddd;
}
.g-footer .f-nav__list li:first-child {
border: none;
}
.g-footer .f-nav__list li a {
height: 44px;
line-height: 44px;
font-size: 15px;
display: block;
}
.g-footer .f-nav__list li a:hover {
color: #666;
text-decoration: underline;
}
.g-footer .copyright {
padding: 24px 0;
font-size: 0;
text-align: center;
}
.g-footer .copyright__logo {
margin: 0 0 4px 0;
text-align: center;
}
.g-footer .copyright__logo p {
height: 30px;
line-height: 30px;
display: inline-block;
vertical-align: top;
font-size: 13px;
}
.g-footer .copyright__logo div {
height: 30px;
margin: 0 0 0 10px;
display: inline-block;
vertical-align: top;
}
.g-footer .copyright__logo div img {
width: 200px;
height: auto;
}
.g-footer .copyright__logo div a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.g-footer .copyright__logo div a:hover {
opacity: 0.7;
}
.g-footer .copyright small {
font-size: 12px;
}
@media all and (max-width: 768px) {
.g-footer .f-nav {
min-width: 100%;
}
.g-footer .f-nav__wrapper {
width: 100%;
}
.g-footer .f-nav__column {
width: 100%;
display: block;
padding: 0 16px;
}
.g-footer .f-nav__column:last-child {
margin: 20px 0 0;
}
.g-footer .f-nav__list {
margin: 8px 0 0;
}
.g-footer .copyright {
padding: 16px;
}
.g-footer .copyright__logo {
margin: 0 0 8px 0;
}
.g-footer .copyright__logo p {
display: none;
}
.g-footer .copyright small {
text-align: center;
display: block;
font-size: 11px;
word-break: normal;
}
}
@media all and (max-width: 640px) {
.g-footer {
margin: 24px 0 0;
}
.g-footer .f-nav__wrapper {
padding: 32px 0 24px;
}
.g-footer .f-nav__ttl img {
height: 36px;
}
.g-footer .f-nav__list li {
width: 100%;
height: 44px;
line-height: 44px;
margin: 0;
display: block;
border-top: 1px dotted #ccc;
}
.g-footer .f-nav__list li:nth-child(odd) {
margin: 0;
}
.g-footer .f-nav__list li:first-child {
border: none;
}
.g-footer .f-nav__list li a {
height: 44px;
line-height: 44px;
font-size: 14px;
display: block;
}
}
/*------------------------------------------
Forum
------------------------------------------*/
.forum__area {
background-size: contain;
background-image: url("../img/forum-area-bg.png");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
}
.forum__wrapper {
width: 840px;
margin: 0 auto;
padding-bottom: 56px;
}
.forum__find {
padding: 36px 0 6px;
font-size: 23px;
border-bottom: 3px solid #222;
}
.forum .wp-pagenavi {
height: 44px;
margin: 32px 0 0;
padding: 30px 0;
}
.forum .wp-pagenavi a {
min-width: 44px;
height: 44px;
line-height: 44px;
background: #fff;
}
.forum .wp-pagenavi span {
min-width: 44px;
height: 44px;
line-height: 44px;
}
.forum .archives__cat {
font-size: 13px !important;
position: relative;
margin: 10px 0 0;
color: #888888;
}
.forum .archives__tagwords {
font-size: 13px !important;
position: relative;
margin: 10px 0 0;
}
.forum .archives__tagwords li {
margin: 0 8px 0 0;
height: 20px;
white-space: nowrap;
display: inline-block;
vertical-align: top;
}
.forum .archives__tagwords li a {
color: #888888;
}
.forum .archives__tagwords li:before {
content: "#";
color: #888888;
}
.forum-list__content p {
font-size: 13px;
line-height: 1.6;
margin: 5px 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.forum-list__meta {
margin: 5px 10px 0;
width: 60%;
}
.forum .archives__author {
margin: 0 10px 2px 0;
}
.forum .archives__time {
margin: 0 10px 0 0;
}
.forum-list__content a:hover {
color: #888;
text-decoration: underline;
}
@media all and (max-width: 1080px) {
.forum__wrapper {
width: 100%;
margin: 0;
padding: 0 4px 28px;
box-sizing: border-box;
}
}
@media all and (max-width: 768px) {
.forum {
padding: 60px 0 0;
}
.forum__find {
padding: 20px 0 40px;
font-size: 20px;
}
.forum .wp-pagenavi {
height: 32px;
margin: 8px 0 0;
padding: 0 0 12px 0;
}
.forum .wp-pagenavi span {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
font-size: 13px;
}
.forum .wp-pagenavi a {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 2px;
padding: 0 4px;
font-size: 13px;
}
.forum .wp-pagenavi .extend {
margin: 0;
}
}
.forum-visual {
height: auto;
position: relative;
background-size: cover;
background-position: center center;
}
.forum-visual__filter {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
position: absolute;
}
.forum-visual__text {
width: 100%;
height: 100%;
padding: 44px 0;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.forum-visual__ttl {
text-align: center;
color: #fff;
font-size: 2em;
text-align: center;
}
.forum-visual__ttl img {
width: 186px;
}
.forum-visual__ttl p {
color: #fff;
font-size: 24px;
text-align: center;
}
.forum-visual__description {
margin: 26px 140px 0;
text-align: center;
}
.forum-visual__description p {
margin: 16px 0 0;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
font-size: 14px;
}
.forum-visual__description p:first-child {
margin: 0;
}
@media all and (max-width: 768px) {
.forum-visual {
height: auto;
}
.forum-visual__text {
padding: 40px 20px 52px;
}
.forum-visual__ttl p {
font-size: 18px;
}
.forum-visual__description p {
font-size: 15px;
}
.forum-visual__description p br {
display: none;
}
}
ul.children {
margin: 0;
}
.forum-tag__main {
margin: 0 auto;
padding: 24px 0 0;
}
.forum-tag__main ul {
margin: -8px 0 0;
text-align: center;
}
.forum-tag__main li {
margin: 8px 0 0 8px;
display: inline-block;
}
.forum-tag__main li:first-child {
margin: 8px 0 0 0;
}
.forum-tag__main a {
height: 40px;
line-height: 40px;
padding: 0 20px;
font-size: 15px;
background: #fff;
border: 1px solid #ececec;
display: block;
}
.forum-tag__main a:hover {
text-decoration: underline;
background: #ececec;
}
.forum-tag__main span {
height: 40px;
line-height: 40px;
padding: 0 20px;
font-size: 14px;
background: #ececec;
border: 1px solid #ececec;
border-radius: 3px;
display: block;
cursor: pointer;
}
.forum-tag__main span:before {
content: "すべて見る";
display: inline;
}
.forum-tag__main span:hover {
color: #fff;
background: #222;
border: 1px solid #222;
}
.forum-tag__main span.tag-open:before {
content: "閉じる";
}
.forum-tag__all {
width: 840px;
margin: 24px auto 0;
padding: 24px 32px;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
position: relative;
display: none;
}
.forum-tag__all.tag-open {
display: block;
visibility: visible;
}
.forum-tag__all ul {
margin: 0 0 0;
}
.forum-tag__all li {
margin: 8px 0 0 8px;
display: inline-block;
}
.forum-tag__all a {
height: 32px;
line-height: 32px;
padding: 0 16px;
font-size: 14px;
background: #ececec;
border: 1px solid #ececec;
border-radius: 3px;
display: block;
}
.forum-tag__all a:hover {
text-decoration: underline;
background: #fff;
border: 1px solid #ececec;
}
.forum-tag__close-btn {
width: 24px;
height: 24px;
line-height: 24px;
color: #fff;
font-size: 13px;
text-align: center;
background: #222;
border-radius: 16px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
@media all and (max-width: 840px) {
.forum-tag__main {
width: 100%;
padding: 20px 12px 0;
box-sizing: border-box;
}
.forum-tag__main ul {
margin: -4px 0 0;
}
.forum-tag__main li {
margin: 4px 0 0 4px;
}
.forum-tag__main li:first-child {
margin: 4px 0 0 0;
}
.forum-tag__main a {
height: 32px;
line-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.forum-tag__main span {
height: 32px;
line-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.forum-tag__all {
width: calc(100% - 8px);
margin: 16px 4px 0;
padding: 20px;
}
.forum-tag__all ul {
margin: -4px 0 0 -4px;
}
.forum-tag__all li {
margin: 4px 0 0 4px;
}
}
.forum-list {
margin: 8px -10px 20px;
}
.forum-list article {
width: 100%;
margin: 20px 0 0;
padding: 0 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
border-top: none !important;
}
.forum-list__box {
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 20px;
justify-content: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
box-shadow: 2px 2px 4px #80808038;
}
.forum-list__img {
position: relative;
width: 35%;
margin-right: 20px;
height: 216px;
}
.forum-list__thumb {
border-radius: 8px;
}
.forum-list__thumb img {
border-radius: 8px;
width: 100% !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.forum-list__thumb a {
transition: 0.15s;
-webkit-transition: 0.15s;
-ms-transition: 0.15s;
}
.forum-list__thumb a:hover {
opacity: 0.8;
}
.forum-list__tag {
margin: 8px 0 0;
}
.forum-list__tag ul {
height: 20px;
overflow: hidden;
}
.forum-list__tag li {
margin: 0 0 0 8px;
height: 20px;
white-space: nowrap;
display: inline-block;
}
.forum-list__tag li:first-child {
margin: 0;
}
.forum-list__tag a {
width: auto;
height: 20px;
line-height: 20px;
padding: 0 12px;
color: #fff;
font-size: 13px;
border-radius: 3px;
display: block;
background: #888;
}
.forum-list__tag a:hover {
background: #222;
}
.forum-list__ttl {
line-height: 1.7;
font-size: 15px;
font-weight: normal;
}
.forum-list__ttl a:hover {
color: #666;
text-decoration: underline;
}
.forum-list__other {
margin: 10px 0 0;
}
.forum-list__author {
display: inline-block;
vertical-align: top;
}
.forum-list__author i {
margin: 0 3px 0 0;
color: #777;
font-size: 16px;
}
.forum-list__author a {
color: #777;
font-size: 13px;
}
.forum-list__author a:hover {
text-decoration: underline;
}
.forum-list__time {
margin: 0 0 0 14px;
color: #777;
font-size: 13px;
display: inline-block;
vertical-align: top;
}
.forum-list__time i {
margin: 0 6px 0 0;
color: #777;
font-size: 16px;
}
@media all and (max-width: 1080px) {
.forum-list {
margin: 14px 0 0;
}
.forum-list article {
margin: 12px 0 0;
padding: 0 6px;
}
}
@media all and (max-width: 768px) {
.forum-list__meta {
margin: 5px 10px 0;
width: 50%;
}
.forum-list {
margin: 12px 0 20px;
}
.forum-list article {
width: 100%;
margin: 8px 0 0;
padding: 0;
}
.forum-list__box {
padding: 12px;
}
.forum-list__thumb {
width: 100%;
height: auto;
top: 0;
padding-top: 56.25%;
position: relative;
margin-right: 0 !important;
}
.forum .archives__author {
display: block;
}
.forum .archives__time {
display: block;
}
.forum-list__meta {
min-height: auto;
min-height: initial;
margin: 0;
padding: 0;
}
.forum-list__ttl {
font-size: 15px;
}
.forum-visual__description {
margin: 26px 0 0;
}
.forum-list__content p {
-webkit-line-clamp: 4;
}
.forum .archives__author {
margin: 0 0 2px 0;
}
.forum .archives__time {
margin: 0 0 0 0;
}
.forum .archives__time i {
font-size: 14px;
}
.forum .archives__author i {
font-size: 14px;
}
}
/*--------------------------
島データ
---------------------------*/
.islands_data h3,
.islands_data h4 {
color: #1588c4;
padding: 0.3em 0;
}
.islands_data h4 {
font-size: 1.1em;
}
table.data {
width: 100%;
}
table.data,
.data td,
.data th {
border: 1px solid #595959;
border-collapse: collapse;
text-align: center;
}
table.data td {
padding: 8px 3px;
width: 30px;
height: 25px;
}
table.data th.thead {
padding: 2px 3px;
background: #ddd;
}
table.data th {
padding: 2px 3px;
background: #eee;
}
div.islands_data p {
font-size: 14px;
margin: 0 0 3em 0;
}
.land-list li a {
height: 48px;
line-height: 1.2em;
padding: 30px 0 0 1.5em;
margin-top: -24px;
}
@media screen and (max-width: 780px) {
.land-list li a {
padding: 30px 0 0 1.5em;
margin-top: 2px;
}
}
hr {
margin-top: 10px;
border-top: 1px solid #ccc;
}
/*--------------------------
ヘッダーメニュー
---------------------------*/
.g-header__wrapper,
.g-nav__wrapper {
width: 1170px;
overflow: hidden;
}
/* menu-top-nav */
.menu-top-nav-container {
float: right;
display: inline-block;
font-size: 0.875rem;
}
.menu-top-nav-container ul {
display: flex;
justify-content: space-between;
}
.menu-top-nav-container li a {
width: 7rem;
display: block;
text-align: center;
font-weight: bold;
}
.menu-top-nav-container li a:hover {
opacity: 0.7;
}
.menu-top-nav-container li a::before,
.menu-top-nav-container li.nav-tokusyu a::before {
background: url(../img/nav-tokusyu.png) center no-repeat;
content: "";
display: block;
width: 52px;
height: 44px;
margin: 10px auto 5px;
}
.menu-top-nav-container li.nav-shimajima a::before {
background: url(../img/nav-shimajima.png) center no-repeat;
}
.menu-top-nav-container li.nav-yujin a::before {
background: url(../img/nav-yujin.png) center no-repeat;
}
.menu-top-nav-container li.nav-supporter a::before {
background: url(../img/nav-supporter.png) center no-repeat;
}
/* menu-g-nav */
.g-nav {
background: #dde8ec;
}
.menu-g-nav-container {
width: calc(100% - 170px);
overflow-x: scroll;
/* IE, Edge 対応 */
-ms-overflow-style: none;
/* Firefox 対応 */
scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.menu-g-nav-container::-webkit-scrollbar {
display: none;
}
.menu-g-nav-container::after {
content: ">>";
position: absolute;
top: 16px;
right: 140px;
}
.g-nav li a {
color: #000;
font-size: 14px;
font-weight: bold;
}
.g-nav li a:hover {
opacity: 0.7;
}
.g-nav ul {
width: 1050px;
font-size: 1rem;
display: flex;
}
.g-nav li {
height: 56px;
line-height: 56px;
margin-right: 16px;
padding: 0 4px;
display: inline-block;
position: relative;
}
.g-nav__search {
width: 123px;
border: 1px solid #ccc;
border-radius: 4px;
}
.g-nav__search table.gsc-search-box td.gsc-input {
padding-right: 0;
}
.g-nav__search form.gsc-search-box {
padding-top: 3px;
}
.g-nav__search .gsc-input-box {
width: 90px;
margin-left: 2px;
}
.g-nav__search .gsib_a {
padding-left: 4px;
padding-right: 4px;
}
.g-nav__search .gsc-search-button-v2,
.g-nav__search .gsc-search-button-v2:hover,
.g-nav__search .gsc-search-button-v2:focus {
background: none;
border: 0;
padding: 6px;
}
.g-nav__search .gsc-search-button-v2:hover,
.g-nav__search .gsc-search-button-v2:focus {
opacity: 0.5;
}
.g-nav__search .gsc-input {
font-size: 13px;
}
.g-nav__search .gsst_a .gscb_a {
font-size: 20px;
color: #aaa;
margin-top: 2px;
margin-right: -20px;
}
/* header-change */
.header-change {
background: rgb(255 255 255 / 97%);
box-shadow: 0 1px 2px #ccc;
padding: 0 0 10px;
position: fixed;
top: -150px;
transition: 0.8s;
width: 100%;
z-index: 99;
}
.header-change.show {
top: 0;
}
.header-change .g-header__wrapper {
display: flex;
align-items: center;
}
.header-change .g-header__sitename {
padding-top: 0;
padding-right: 40px;
}
.header-change .g-nav-wrap {
width: calc(100% - 190px);
}
.header-change .menu-g-nav-container {
width: calc(100% - 40px);
margin: 20px 0 35px;
}
.header-change::after {
content: ">>";
position: absolute;
top: 22px;
right: calc(50vw - 590px);
display: inline-block;
}
.header-change ul#menu-g-nav-1 {
width: 1050px;
font-size: 1rem;
display: flex;
}
.header-change li a {
font-size: 14px;
font-weight: 500;
margin-right: 24px;
}
.header-change .menu-top-nav-container li a {
margin-right: 0;
}
.header-change .menu-top-nav-container {
float: unset;
margin-bottom: 10px;
}
.header-change .menu-top-nav-container li a {
width: auto;
padding: 0 20px;
line-height: 1;
}
.header-change .menu-top-nav-container li:first-child a {
padding-left: 0;
}
.header-change .menu-top-nav-container li a::before {
display: none;
}
.header-change .menu-top-nav-container li {
border-right: 1px solid;
}
.header-change .menu-top-nav-container li:last-child {
border-right: 0;
}
.header-change .g-nav__search {
top: unset;
bottom: 0;
}
.sp-top-nav .menu-top-nav-container {
display: none;
}
/* SP,Tab
----------------------------------------------*/
@media (max-width: 1200px) {
.g-header__wrapper,
.g-nav__wrapper {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}
@media (max-width: 768px) {
.header-change,
.g-nav__search,
.menu-top-nav-container {
display: none;
}
.sp-search,
.sp-search.nav-open,
.g-header {
top: 0;
}
.sp-nav {
width: 90%;
left: -120%;
opacity: 1;
-webkit-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}
.sp-nav.nav-open {
box-shadow: 1px 0 3px #ccc;
left: 0;
}
.sp-nav__wrapper {
padding: 70px 20px 20px;
}
.menu-g-nav-container {
width: calc(100% - 20px);
}
.menu-g-nav-container::after {
top: 16px;
right: 5px;
}
.sp-top-nav {
padding: 70px 0 20px;
background: #fff;
}
.sp-top-nav .menu-top-nav-container {
display: block;
float: none;
}
.menu-top-nav-container ul {
max-width: 390px;
margin: auto;
}
.menu-top-nav-container li a {
font-size: 9px;
width: 5rem;
}
.menu-top-nav-container li a::before,
.menu-top-nav-container li.nav-tokusyu a::before {
width: 38px;
height: 32px;
background-size: contain !important;
}
.g-nav {
display: block;
min-width: unset;
}
.g-nav ul {
width: 870px;
}
.g-nav li {
margin-right: 10px;
}
.g-nav li a {
font-size: 12px;
}
.contents {
padding-top: 12px;
}
.g-nav__search-text {
width: 100%;
margin-left: 0;
}
.sp-search__box .gsc-control-cse {
padding: 2px 0.5em 0;
}
.sp-search__box .gsc-search-button-v2,
.sp-search__box .gsc-search-button-v2:hover,
.sp-search__box .gsc-search-button-v2:focus {
background: none;
border: 0;
padding: 6px;
}
.sp-search__box .gsc-search-button-v2:hover,
.sp-search__box .gsc-search-button-v2:focus {
opacity: 0.5;
}
.sp-search__box form.gsc-search-box {
margin-top: 5px;
margin-bottom: 0;
}
.sp-search__box .gsst_a .gscb_a {
margin-top: 4px;
}
.sp-search__box table.gsc-search-box td.gsc-input {
padding-right: 0;
}
.sp-search__box .gsc-input {
font-size: 13px;
}
}
@media (max-width: 480px) {
.top-cal .slick-slide {
height: 260px;
}
}
@media (max-width: 400px) {
.top-cal .slick-slide {
height: 200px;
}
.top-cal__text p {
font-size: 12px;
}
}
/*--------------------
キャンペーン
---------------------*/
.campaign {
width: 100vw;
}
.campaign__content {
text-align: center;
}
.campaign__content .alignwide {
max-width: 70vw;
margin: 10px auto;
}
.campaign__content .alignfull {
width: 100vw;
}
.campaign__content .archives__ttl{
font-weight:bold;
}
/*nukaga*/
.campaign .cal-top{
position: relative;
display: inline-block;
}
.campaign .top-bg {
max-width: 100%;
height: auto;
}
.campaign .top-button {
position: absolute;
right: 0%;
bottom: 2%;
width: 25%;
height: auto;
}
.campaign .copy{
font-size:1.2em
}
.campaign .wp-block-image{
margin: 0;
}
.campaign h2{
margin:1.5em 0;
}
.campaign p{
margin-block-end: 1em;
}
.campaign .wp-container-3
{
padding:2.4em;
}
@media screen and (min-width: 800px) {.campaign .main-section{
width:800px;
margin:30px auto;
}}
.single__body hr {
margin: 40px auto;
}
.new:after {
position: relative;
content: "NEW";
color:#fff;
background-color: crimson;
padding: 4px 10px;
}
.slide-content{
}
.slide-content-text{
}
.xo-slider-template-default .swiper-slide img.camtest{
width:100px;
}
/*--------------------
Other
---------------------*/
blockquote {
position: relative;
margin: 2em 0;
padding: 1em 1em 1em 2.6em;
border-left: 5px solid #ccc;
border-radius: 2px;
}
blockquote:after {
position: absolute;
bottom: 0;
right: 0;
content: "”";
font-family: sans-serif;
font-size: 6em;
opacity: 0.1;
}
/*--------------------
トップバナー（モバイルのみ）表示設定
---------------------*/
@media screen and (min-width: 769px) {
.top-banner {
display: none;
}
}
@media screen and (max-width: 768px) {
.top-banner {
display: block;
margin: 10px 0;
}
.top-banner img{
width: 100%;
height: auto;
}
}