@charset "utf-8";

/*　リセット
/************************************************************/
@media (max-width: 575px) {
    #list .term img {
        margin-bottom: 8px;
    }
}
@media print, (max-width: 991px) {
    #main {
        margin-bottom: 0px;
    }
}

/* 横幅
/************************************************************/

@media screen and (max-width: 1151px) {
.container {
	width: 72%;
    max-width: 72%;
}
article .container {
	width: 72%;
    max-width: 72%;
}
}
@media screen and (max-width: 1023px) {
.container {
	width: 76%;
    max-width: 76%;
}
article .container {
	width: 76%;
    max-width: 76%;
}
}
@media screen and (max-width: 895px) {
.container {
	width: 80%;
    max-width: 80%;
}
article .container {
	width: 80%;
    max-width: 80%;
}
}
@media screen and (max-width: 767px) {
.container {
	width: 64%;
    max-width: 64%;
}
article .container {
	width: 64%;
    max-width: 64%;
}
}
@media screen and (max-width: 703px) {
.container {
	width: 72%;
    max-width: 72%;
}
article .container {
	width: 72%;
    max-width: 72%;
}
}
@media screen and (max-width: 639px) {
.container {
	width: 80%;
    max-width: 80%;
}
article .container {
	width: 80%;
    max-width: 80%;
}
}
@media screen and (max-width: 575px) {
.container {
	width: 88%;
    max-width: 88%;
}
article .container {
	width: 88%;
    max-width: 88%;
}
}

/* ベース
/************************************************************/

@media screen and (max-width: 511px) {

}


/* 共通要素
/************************************************************/

@media screen and (max-width: 1151px) {
.hide-sp {
	display: none;
}
.hide-pc {
	display: block;
}
}
@media screen and (max-width: 767px) {
.heading {
    margin-bottom: 24px;
}
.heading h2 {
  font-size: 2.0rem;
}
main {
margin-top: 64px;
}
}



/* SPメニュー
/************************************************************/

@media screen and (max-width: 767px) {
.openbtn{
	top:8px;
	right: 4px;
}
#sp-nav ul {
	width: 80%;
}
}

/* header
/************************************************************/


@media screen and (max-width: 1151px) {
header {
  min-width: 360px;
}
header .header-nav {
display: none;
}
header .header-contact {
display: none;
}
.h-production {
  min-width: 360px;
}

}

@media screen and (max-width: 767px) {
header {
    height: 64px;
    padding: 18px 0px;
}
header .header-logo {
    left: 4%;
}
header .header-logo img {
    width: 98px;
    height: 24px;
}
header .header-logo p {
    font-size: 1.0rem;
    line-height: 24px;
    margin-left: 12px;
}
}

/* フッター
/************************************************************/
@media screen and (max-width: 1151px) {


.footer .footer-nav {
  float: none;
    text-align: center;
    margin-bottom: 32px;
}
.footer .copyright {
  float: none;
    text-align: center;
}
}

@media screen and (max-width: 767px) {
.footer {
  padding: 0px 0px 24px;
}
.footer .footer-nav {
    border-bottom: none;
    padding: 0;
    margin-bottom: 24px;
}
.footer .footer-nav li {
padding: 16px 0;
    border-bottom: solid 1px #D9D9D9;
    display: block;
    margin-right: 0;
    border-right: none;
}
}


/* 一覧ページ
/************************************************************/

@media screen and (max-width: 1151px) {
#tile-3 .toc {
    max-width: 48%;
    width: 48%;
}
}

@media screen and (max-width: 767px) {
.category-nav {
    margin-bottom: 48px;
}
.category-nav li {
    margin-right: 32px;
    padding-bottom: 16px;
    font-size: 1.4rem;
}
#tile-3 {
    margin-top: -24px;
}
#tile-3 .toc {
    max-width: 100%;
    width: 100%;
}
#list .toc {
    margin: 24px 0 0;
}
.term img {
    margin-bottom: 8px;
}
div[id^=tile-] h2, div[id^=card-] h2 {
    font-size: 1.5rem;
}
#list .meta {
    margin: 8px 0 0;
}
}


/* 共通コンテンツ
/************************************************************/

@media screen and (max-width: 1151px) {
#ranking-tile .toc {
    max-width: 48%;
    width: 48%;
}
}
@media screen and (max-width: 767px) {
.contents {
    padding: 40px 0px;
}
.ranking-info {
    padding: 40px 0;
}
.ranking-info .heading {
    text-align: center;
    margin-bottom: 24px;
}
.ranking-info .heading p {
    top: 0px;
    margin-left: 0px;
    margin-top: 4px;
    font-size: 1.2rem;
    display: block;
}
#ranking-tile {
    margin-top: -24px;
}
#ranking-tile .toc {
    max-width: 100%;
    width: 100%;
    margin: 24px 0 0;
}
#ranking-tile h2 {
    font-size: 1.5rem;
}
.contact-info {
    padding: 40px 0;
}

.contact-info p {
    text-align: left;
}
.contact-info .btn {
    margin: 24px auto 0;
    width: 200px;
}
.contact-info .btn a {
    font-size: 1.4rem;
}
.service-info {
    padding: 40px 0;
}
.service-info p {
    text-align: left;
}
}

/* 詳細ページ
/************************************************************/

@media screen and (max-width: 1151px) {

#article-head {
  width: auto;
}

#article-main {
  width: auto;
}

}

@media screen and (max-width: 767px) {
#article-thumbnail {
    margin-bottom: 16px;
}

#article-head .entry-title {
    font-size: 2.0rem;
    margin: 0 0 24px;
}
#article-head .writer {
    position: static;
    margin-top: 8px;
}
#article-main {
  margin-top: 40px;
}
.post p {
    line-height: 175%;
    margin: 24px 0;
    font-size: 1.5rem;
}
.post h2 {
    font-size: 2.0rem;
    padding: 40px 0 0;
    margin: 40px 0 24px;
}
.post h3 {
    padding: 0 0 2px 12px;
    font-size: 1.6rem;
    margin: 40px 0 24px;
}
.post h4 {
    font-size: 1.5rem;
    margin: 24px 0 4px;
}
.post h5 {
    padding: 12px 12px;
    margin: 32px 0 2px;
    font-size: 1.2rem;
}
.post ul {
    line-height: 175%;
    margin: 24px 0;
    font-size: 1.5rem;
}
.post ul, .post ol {
    padding: 0 0 0 24px;
}
.wp-block-code {
    margin: 0 0 32px;
}
.wp-block-code code {
    padding: 12px;
}
.post .tags {
    margin: 40px 0 0;
}
#article-writer {
    padding: 48px 0 0;
    margin-top: 48px;
}
#article-writer h2 span {
    font-size: 1.2rem;
    padding: 0 12px;
}
.writer-info .img {
    width: 128px;
}
.writer-info .name {
    font-size: 1.6rem;
    margin-top: 12px;
}
.writer-info p {
    text-align: left;
}

}