@charset "UTF-8";
/*
Theme Name: WORLD IMPORT TOOLS 
Theme URI: https://shop.worldimporttools.co.jp/blog/
Description: WORLD IMPORT TOOLS オリジナルテーマ
Version: 1.0
Author: Morichika Design Studio
Author URI: http://morichikadesignstudio.com/
*/
#blog-wrapper { display: flex; justify-content: space-between; flex-direction: row-reverse; }

@media screen and (max-width: 980px) { #blog-wrapper { display: block; } }

#blog-wrapper #blog-main { width: 700px; }

@media screen and (max-width: 980px) { #blog-wrapper #blog-main { width: 100%; margin-bottom: 40px; } }

#blog-wrapper #blog-sub { width: 200px; }

@media screen and (max-width: 980px) { #blog-wrapper #blog-sub { width: 100%; } }

.article-list { display: flex; justify-content: space-between; flex-wrap: wrap; }

.article-list:after { content: ""; display: block; width: calc(33.3% - 13px); }

.article-list .article-block { width: calc(33.3% - 13px); margin-bottom: 40px; }

@media screen and (max-width: 768px) { .article-list .article-block { width: calc(50% - 10px); } }

.article-list .article-block .article-image { font-size: 0; line-height: 0; margin-bottom: 10px; position: relative; width: 100%; }

.article-list .article-block .article-image:before { content: ""; display: block; padding-top: 100%; }

.article-list .article-block .article-image a { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

.article-list .article-block .article-image a img { object-fit: cover; width: 100%; height: 100%; }

.article-list .article-block .article-ttl { font-size: 1.4rem; line-height: 1.6em; margin: 0 0 10px; }

.article-list .article-block .article-ttl a { display: block; }

.staff-list .staff-block { display: flex; justify-content: space-between; flex-wrap: wrap; }

.staff-list .staff-block:not(:last-child) { margin-bottom: 40px; }

.staff-list .staff-block .staff-thumb { width: 150px; font-size: 0; line-height: 0; }

@media screen and (max-width: 768px) { .staff-list .staff-block .staff-thumb { width: 80px; } }

@media screen and (max-width: 320px) { .staff-list .staff-block .staff-thumb { width: 60px; } }

.staff-list .staff-block .text { width: calc(100% - 170px); }

@media screen and (max-width: 768px) { .staff-list .staff-block .text { width: calc(100% - 100px); } }

@media screen and (max-width: 320px) { .staff-list .staff-block .text { width: calc(100% - 80px); } }

.staff-list .staff-block .text .staff-name { font-size: 1.8rem; line-height: 1.6em; margin: 0 0 10px; padding: 0; }

.staff-list .staff-block .text .staff-description { margin-bottom: 10px; }

.staff-list .staff-block .text .staff-link a { border: 1px solid #003d73; background: #fff; display: inline-block; color: #003d73; text-decoration: none; font-size: 1.4rem; font-weight: 600; position: relative; padding: 10px 20px 10px 10px; }

.staff-list .staff-block .text .staff-link a:after { content: ""; width: 6px; height: 6px; display: block; border-top: 2px solid #003d73; border-right: 2px solid #003d73; transform: rotate(45deg); position: absolute; top: 50%; margin-top: -3px; right: 10px; transition: border-color 0.3s; }

.staff-list .staff-block .text .staff-link a:link, .staff-list .staff-block .text .staff-link a:visited { background: #fff; color: #003d73; text-decoration: none; }

.staff-list .staff-block .text .staff-link a:hover, .staff-list .staff-block .text .staff-link a:active { background: #0066bf; color: #fff; text-decoration: none; border-color: #0066bf; }

.staff-list .staff-block .text .staff-link a:hover:after, .staff-list .staff-block .text .staff-link a:active:after { border-color: #fff; }

.article-detail-block .article-ttl { font-size: 2.2rem; line-height: 1.6em; }

.page-ttl { font-size: 2.2rem; line-height: 1.6em; position: relative; border-bottom: 3px solid #cfd9e6; margin: 0 0 40px; padding: 0 0 10px; }

.page-ttl:after { content: ""; width: 20%; height: 3px; background: #0066bf; position: absolute; left: 0; bottom: -3px; }

.sns-block { margin-top: 30px; }

.sns-block ul { list-style: none; padding: 0; }

.sns-block ul li { display: inline-block; line-height: 0; vertical-align: top; margin: 0 5px 0 0; }

@media screen and (max-width: 768px) { .sns-block ul li { margin: 0 2px 0 0; } }

.sns-block ul li iframe { margin: 0 !important; }

.article-body { margin-top: 20px; zoom: 1; overflow: hidden; }

@media screen and (max-width: 980px) { .article-body { margin-top: 0; } }

.article-date { font-size: 1.2rem; line-height: 1.6em; font-weight: 600; color: #565656 !important; }

.article-author { background: #e8ebf0; display: flex; justify-content: space-around; align-items: center; padding: 10px 0; }

.article-author .staff-thumb { width: 30px; font-size: 0; line-height: 0; }

.article-author .staff-name { width: calc(100% - 50px); }

.article-author .staff-name a { display: block; }

.link-list:not(:last-child) { margin-bottom: 40px; }

.link-list h3 { position: relative; border-bottom: 3px solid #cfd9e6; margin: 0; padding: 0 0 10px; }

.link-list h3:after { content: ""; width: 20%; height: 3px; background: #0066bf; position: absolute; left: 0; bottom: -3px; }

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

.link-list ul li { border-bottom: 1px solid #cfd9e6; }

.link-list ul li h4 { margin: 0; line-height: 1.6em; }

.link-list ul li .article-date { margin-bottom: 5px; }

.link-list ul li a { display: block; padding: 15px 0; }

.link-list ul li a:link, .link-list ul li a:visited, .link-list ul li a:hover, .link-list ul li a:active { text-decoration: none; }

.pager { text-align: center; }

.pager:not(:last-child) { margin-bottom: 40px; }

@media screen and (max-width: 768px) { .pager:not(:last-child) { margin-bottom: 20px; } }

.pager a { display: inline-block; background: #0066bf; color: #fff; text-align: center; font-weight: 500; margin: 0 2px; transition: background-color 0.3s; padding: 3px 10px; }

@media screen and (max-width: 768px) { .pager a { margin: 0 1px; padding: 8px; line-height: 1em; } }

.pager a:link, .pager a:visited { background: #0066bf; text-decoration: none !important; color: #fff; }

.pager a:hover, .pager a:active { background: #0066bf; color: #fff; text-decoration: none !important; }

.pager span { display: inline-block; color: #0066bf; text-align: center; font-weight: 500; margin: 0 2px; background: #cfd9e6; transition: background-color 0.3s; padding: 3px 10px; }

@media screen and (max-width: 768px) { .pager span { margin: 0 1px; padding: 8px; line-height: 1em; } }

.pager span.dots { border: none; padding: 3px 0; font-size: 1rem; background: none; }

.btn-list:not(:last-child) { margin-bottom: 40px; }

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

.btn-list ul li:not(:last-child) { margin-bottom: 10px; }

.btn-list ul li a { display: block; padding: 10px; transition: background-color 0.3s, color 0.3s, border-color 0.3s; -webkit-appearance: none; border-radius: 0; border: none; cursor: pointer; border: 1px solid #003d73; background: #fff; color: #003d73; text-decoration: none; font-size: 1.6rem; font-weight: 600; position: relative; }

.btn-list ul li a:after { content: ""; width: 6px; height: 6px; display: block; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; top: 50%; margin-top: -3px; right: 10px; transition: border-color 0.3s; }

.btn-list ul li a:link, .btn-list ul li a:visited { color: #fff; text-decoration: none; background: #003d73; }

.btn-list ul li a:hover, .btn-list ul li a:active { background: #0066bf; color: #fff; text-decoration: none; border-color: #0066bf; }

.btn-list ul li a:hover:after, .btn-list ul li a:active:after { border-color: #fff; }

.item-block:not(:last-of-type) { margin-bottom: 10px; }

.item-block a { display: block; background: #e7ebf0; padding: 10px; border: 1px solid #cfd9e6; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; transition: background-color 0.3s; }

.item-block a:link, .item-block a:visited { text-decoration: none; }

.item-block a:hover, .item-block a:active { text-decoration: none; background: #f2f8ff; }

.item-block .image { width: 100px; font-size: 0; line-height: 0; }

.item-block .text { width: calc(100% - 120px); }

.item-block .text .name { font-weight: 600; font-size: 1.6rem; line-height: 1.6em; }

.item-block .text .fs-c-price { display: block; }