/*
Theme Name: manmai-blog-themes
Author: escord
Description: 万枚ブログページ
Version: 1.0
*/
@charset "UTF-8";
html,
body,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 700;
font-size: 100%;
font-family: inherit;
}
h1 {
background-size: 4px 4px;
background-repeat: repeat-x;
font-size: 2rem;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
}
.related h2 {
padding: 14px;
background: #393f50;
color: #fff;
font-size: 1.5rem;
margin-bottom: 20px;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
}
.related h3 {
margin-top: 20px;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
line-height: 1;
font-size: 58%;
}
*,
:before,
:after {
box-sizing: inherit;
}
iframe {
border: 0;
}
hr {
height: 0;
border: 0;
}
body {
width: 100%;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
font-size: 1.2rem;
font-weight: 500;
color: #444;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media all and (-ms-high-contrast: none) {
body {
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
}
}
button,
input,
select,
textarea {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
::-webkit-input-placeholder {
color: #7f7f7f;
}
::-moz-placeholder {
color: #7f7f7f;
opacity: 1;
}
:-ms-input-placeholder {
color: #7f7f7f;
}
a {
color: inherit;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
color: #00008b;
}
.l-header {
position: relative;
width: 100%;
padding: 1px 0 10px;
background: #fff;
z-index: 9999;
}
.l-header-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.l-header-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.l-header-clone {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
transition: 0.3s;
transform: translateY(-100%);
}
.l-header-clone.is-show {
transform: translateY(0);
}
.l-headerBottom {
position: relative;
width: 100%;
}
.l-wrapper {
position: relative;
max-width: 1140px;
margin: 40px 0;
}
.l-wrapper-lp {
margin: 0 15px;
}
.l-main {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.l-sidebar {
position: relative;
width: 100%;
}
.l-footerTop {
position: relative;
width: 100%;
}
.l-footer {
position: relative;
width: 100%;
}
.wider {
position: relative;
width: 100%;
}
.wider::after {
content: "";
display: block;
clear: both;
}
.container {
position: relative;
max-width: 1140px;
margin-left: 15px;
margin-right: 15px;
}
.container::after {
content: "";
display: block;
clear: both;
}
.divider {
margin-top: 40px;
margin-bottom: 40px;
}
.dividerBottom {
margin-bottom: 40px;
}
.eyecatch {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
}
.eyecatch:before {
content: "";
display: block;
padding-top: 56.25%;
}
.eyecatch-43:before {
padding-top: 75%;
}
.eyecatch-11:before {
padding-top: 100%;
}
.eyecatch-main {
margin: 0 -15px 40px;
width: auto;
}
.eyecatch__link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: auto;
}
.eyecatch__link::after {
font-family: "Fjalla One", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3",
Meiryo, "メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
font-weight: 400;
}
.eyecatch .eyecatch__link img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit:cover;";
vertical-align: bottom;
transition: 0.3s;
}
.eyecatch__link:hover img {
transform: scale(1.2);
}
.eyecatch__link-zoomgray img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.eyecatch__link-zoomgray:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
.eyecatch__link-zoomsepia img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.eyecatch__link-zoomsepia:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
.eyecatch__link-zoomrotate:hover img {
transform: scale(1.2) rotate(3deg);
}
.eyecatch__link-mask::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.75);
font-size: 1.5rem;
transition: 0.6s;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.eyecatch__link-mask:hover::after {
background: rgba(0, 0, 0, 0.5);
opacity: 1;
}
.eyecatch__link-mask:hover img {
transform: none;
}
.eyecatch__link-maskzoom::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.75);
font-size: 1.5rem;
transition: 0.6s;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.eyecatch__link-maskzoom:hover::after {
background: rgba(0, 0, 0, 0.5);
opacity: 1;
}
.eyecatch__link-maskzoom img {
transition: 0.6s;
}
.eyecatch__link-maskzoomrotate::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.75);
font-size: 1.5rem;
transition: 0.6s;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.eyecatch__link-maskzoomrotate:hover::after {
background: rgba(0, 0, 0, 0.5);
opacity: 1;
}
.eyecatch__link-maskzoomrotate img {
transition: 0.6s;
}
.eyecatch__link-maskzoomrotate:hover img {
transform: scale(1.2) rotate(3deg);
}
.eyecatch__cat {
position: absolute;
top: 0;
right: 0;
z-index: 10;
background: #a83f3f;
max-width: calc(100% - 3rem);
}
.eyecatch__cat a {
display: block;
padding: 7.5px 10px;
color: #fff;
font-size: 1rem;
transition: 0.15s;
line-height: 1.35;
}
.eyecatch__cat a::before {
font-family: "icomoon";
content: "\e938";
margin-right: 5px;
}
.eyecatch__cat a:hover {
background: rgba(255, 255, 255, 0.25);
}
#viewNormal:checked ~ .archive .eyecatch {
max-width: 300px;
}
.viral .eyecatch {
display: none;
}
.prevNext .eyecatch {
margin-bottom: 0;
background: rgba(0, 0, 0, 0.05);
}
.prevNext .eyecatch__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: 0.3s;
z-index: 1;
}
.prevNext .eyecatch__link:hover::before {
background: rgba(0, 0, 0, 0);
}
.content .blogcard .eyecatch {
float: right;
width: calc(30% - 15px);
min-width: 100px;
margin-left: 15px;
margin-top: 2.5rem;
margin-bottom: 0;
}
.content .blogcard .eyecatch img {
max-width: 100%;
}
.content .sitecard .eyecatch {
float: right;
width: calc(30% - 15px);
min-width: 100px;
margin-left: 15px;
margin-top: 2.5rem;
margin-bottom: 0;
}
.content .sitecard .eyecatch img {
max-width: 100%;
}
.viral .eyecatch {
min-width: 360px;
max-width: 360px;
margin-left: 20px;
display: block;
}
.heading {
display: block;
margin-bottom: 20px;
line-height: 1.5;
font-weight: 700;
}
.heading a {
transition: 0.15s;
display: inline-block;
max-width: 100%;
}
.heading a:hover {
color: #a83f3f;
}
.heading-main {
font-size: 2.4rem;
font-family: "Fjalla One", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3",
Meiryo, "メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
font-weight: 400;
}
.heading-main i {
margin-right: 1rem;
}
.heading-main span {
font-size: 1.4rem;
margin-left: 1rem;
color: rgba(0, 0, 0, 0.5);
font-weight: 700;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
}
.heading-main.u-white span {
color: #fff;
}
.heading-primary {
font-size: 1.8rem;
margin-bottom: 10px;
}
.heading-primary span {
font-size: 1rem;
margin-left: 10px;
font-weight: 400;
}
.heading-sub {
font-size: 1.6rem;
margin-bottom: 10px;
}
.heading-sub span {
font-size: 1rem;
margin-left: 10px;
font-weight: 400;
}
.heading-secondary {
font-size: 1.5rem;
margin-bottom: 10px;
}
.heading-tertiary {
font-size: 1.5rem;
margin-bottom: 10px;
}
.heading-widget {
font-size: 1.5rem;
margin-bottom: 20px;
background: #a83f3f;
color: #fff;
border-radius: 5px;
padding: 10px;
}
.heading-widgetsimple {
font-size: 1.5rem;
margin-bottom: 20px;
background: #a83f3f;
color: #fff;
padding: 10px;
}
.heading-widgetsimplewide {
font-size: 1.5rem;
margin: -15px -15px 20px;
background: #a83f3f;
color: #fff;
padding: 10px;
}
.dateList {
list-style: none;
margin-bottom: 5px;
}
.dateList__item {
display: inline-block;
text-align: left;
color: gray;
font-size: 14px;
margin-right: 5px;
line-height: 1.5;
}
.dateList-main {
margin-bottom: 20px;
}
.dateList__item::before {
margin-right: 2.5px;
line-height: 1;
}
.dateList__item a:hover {
color: #a83f3f;
transition: 0.15s;
}
.btn {
width: 100%;
}
.btn-left {
text-align: left;
}
.btn-center {
text-align: center;
}
.btn-right {
text-align: right;
}
.btn__link {
position: relative;
display: inline-block;
cursor: pointer;
transition: 0.15s;
}
.btn__link::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 5px;
height: 5px;
margin: auto;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}
.btn__link-wide {
width: 80%;
}
.btn__link-normal {
font-size: 1.2rem;
padding: 10px 20px;
border-radius: 5px;
color: #a83f3f;
border: 1px solid;
}
.btn__link-normal:hover {
color: #fff;
background: #a83f3f;
border-color: transparent;
}
.btn__link-primary {
padding: 15px 40px;
border-radius: 5px;
background: #a83f3f;
border: none;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
font-size: 1.4rem;
font-weight: 700;
color: #fff;
overflow: hidden;
line-height: normal;
}
.btn__link-primary::before {
border-top: 2px solid;
border-right: 2px solid;
}
.btn__link-primary::after {
content: "";
position: absolute;
top: -50px;
left: -100px;
background: #fff;
width: 50px;
height: calc(100% + 100px);
opacity: 0.1;
transform: rotate(45deg);
transition: 0.3s;
}
.btn__link-primary:hover::after {
left: calc(100% + 50px);
}
.btn__link-primary:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.btn__link-secondary {
padding: 5px 25px 5px 15px;
border-radius: 5px;
background: #a83f3f;
border: none;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
font-size: 1.2rem;
font-weight: 700;
color: #fff;
overflow: hidden;
line-height: normal;
}
.btn__link-secondary:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.btn__link-search {
padding: 5px 25px 5px 15px;
border-radius: 5px;
background: #a83f3f;
border: none;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
font-size: 1.2rem;
font-weight: 700;
color: #fff;
overflow: hidden;
line-height: normal;
}
.btn__link-search:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.searchBtn__contentInner .btn-search {
text-align: center;
margin-bottom: 40px;
}
.searchBtn__contentInner .btn__link-search {
padding: 15px 40px;
border-radius: 5px;
background: #a83f3f;
border: none;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
font-size: 1.4rem;
font-weight: 700;
color: #fff;
overflow: hidden;
line-height: normal;
}
.searchBtn__contentInner .btn__link-search::before {
border-top: 2px solid;
border-right: 2px solid;
}
.searchBtn__contentInner .btn__link-search::after {
content: "";
position: absolute;
top: -50px;
left: -100px;
background: #fff;
width: 50px;
height: calc(100% + 100px);
opacity: 0.1;
transform: rotate(45deg);
transition: 0.3s;
}
.searchBtn__contentInner .btn__link-search:hover::after {
left: calc(100% + 50px);
}
.archive__contents {
position: relative;
}
.siteTitle {
font-family: "Fjalla One", Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3",
Meiryo, "メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
max-width: calc(100% - 66px);
font-size: 20px;
margin-bottom: 10px;
font-weight: 700;
}
.siteTitle__link {
display: inline-block;
}
.siteTitle__link:hover {
animation: flash 1s;
}
.siteTitle__logo {
width: auto;
height: 20px;
vertical-align: bottom;
}
.searchBtn {
position: absolute;
top: 0;
right: 38px;
line-height: 20px;
font-size: 18px;
text-align: right;
}
.searchBtn-zero {
right: 0;
}
.searchBtn__link {
cursor: pointer;
transition: 0.15s;
}
.searchBtn__link:hover {
color: #a83f3f;
}
.searchBtn__checkbox {
display: none;
}
.searchBtn__unshown {
display: none;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: fixed;
right: 0;
top: 0;
z-index: 999;
animation: fade 0.3s;
}
.searchBtn__checkbox:checked ~ .searchBtn__unshown {
display: block;
}
.searchBtn__content {
position: fixed;
top: 0;
right: 0;
left: 0;
background: #fff;
width: 90%;
max-width: 780px;
height: calc(100% - 40px);
z-index: 9999;
margin: 0 auto;
transition: 0.3s;
transform: translateY(-110%);
text-align: center;
}
.searchBtn__scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
padding: 0 15px;
}
.searchBtn__contentInner {
text-align: left;
font-size: 1.2rem;
}
.searchBtn__checkbox:checked ~ .searchBtn__content {
transform: translateY(20px);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.searchBtn__close {
font-family: "Fjalla One";
display: inline-block;
height: 2rem;
font-size: 2rem;
margin: 40px auto;
cursor: pointer;
}
.searchBtn__close:hover {
color: #a83f3f;
}
.searchBtn__close i {
margin-right: 10px;
font-size: 1.5rem;
vertical-align: middle;
}
.menuBtn {
position: absolute;
top: 0;
right: 0;
line-height: 20px;
font-size: 18px;
text-align: right;
}
.menuBtn__link {
cursor: pointer;
transition: 0.15s;
}
.menuBtn__link:hover {
color: #a83f3f;
}
.menuBtn__checkbox {
display: none;
}
.menuBtn__unshown {
display: none;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: fixed;
right: 0;
top: 0;
bottom: 0;
left: 0;
z-index: 999999;
animation: fade 0.3s;
}
.menuBtn__checkbox:checked ~ .menuBtn__unshown {
display: block;
}
.menuBtn__content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
background: #fff;
width: 90%;
max-width: 340px;
height: 100%;
z-index: 9999999;
transition: 0.3s;
transform: translateX(110%);
text-align: center;
}
.menuBtn__scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
padding: 0 15px 15px;
}
.menuBtn__contentInner {
text-align: left;
font-size: 1.2rem;
}
.menuBtn__checkbox:checked ~ .menuBtn__content {
transform: translateX(0%);
box-shadow: -2px 0 2px rgba(0, 0, 0, 0.15);
}
.menuBtn__close {
font-family: "Fjalla One";
display: inline-block;
height: 2rem;
font-size: 2rem;
margin: 40px auto;
cursor: pointer;
}
.menuBtn__close:hover {
color: #a83f3f;
}
.menuBtn__close i {
margin-right: 10px;
font-size: 1.5rem;
vertical-align: middle;
}
.menuBtn__navi {
margin: 0 -15px 40px;
padding: 20px 15px;
background: rgba(0, 0, 0, 0.05);
}
.menuBtn__naviList {
margin-top: 10px;
list-style: none;
display: flex;
justify-content: center;
overflow: auto;
}
.menuBtn__naviItem {
margin: 0 2.5px;
}
.menuBtn__naviLink {
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
line-height: 30px;
border-radius: 50%;
font-size: 14px;
text-align: center;
transition: 0.15s;
color: #fff;
}
.menuBtn__naviLink.icon-facebook {
background: #3b5998;
}
.menuBtn__naviLink.icon-twitter {
background: #00b0ed;
}
.menuBtn__naviLink.icon-instagram {
background: radial-gradient(
circle farthest-corner at 32% 106%,
#ffe17d 0%,
#ffcd69 10%,
#fa9137 28%,
#eb4141 42%,
transparent 82%
),
linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}
.menuBtn__naviLink.icon-youtube {
background: #cd201f;
}
.menuBtn__naviLink.icon-linkedin {
background: #0079ba;
}
.menuBtn__naviLink.icon-pinterest {
background: #ce0f19;
}
.menuBtn__naviLink.icon-rss {
background: #f90;
}
.globalNavi {
position: relative;
}
.globalNavi::before {
position: absolute;
right: 0;
bottom: 0;
content: "";
width: 25px;
height: 2.5rem;
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(100%, #fff)
);
z-index: 2;
}
.globalNavi::after {
position: absolute;
right: 0;
bottom: 0;
font-family: "icomoon";
content: "\ea26";
width: 25px;
height: 2.5rem;
line-height: 2.5rem;
text-align: right;
color: rgba(0, 0, 0, 0.5);
animation: fade 1s ease-in-out infinite alternate;
z-index: 3;
}
.globalNavi__inner {
position: relative;
overflow-x: auto;
}
.globalNavi__list {
list-style: none;
display: flex;
}
.globalNavi__list li {
width: -webkit-max-content;
width: -moz-max-content;
width: -o-max-content;
width: max-content;
height: 2.5rem;
line-height: 2.3rem;
}
.globalNavi__list li a {
margin-right: 20px;
display: block;
float: left;
white-space: nowrap;
color: #fff;
font-weight: 700;
transition: 0.15s;
}
.globalNavi__list .children,
.globalNavi__list .sub-menu {
display: none;
}
.globalNavi__list .current_page_item > a,
.globalNavi__list .current-menu-item > a,
.globalNavi__list .current-menu-parent > a,
.globalNavi__list .page_item a:hover,
.globalNavi__list .menu-item a:hover {
border-bottom: 2px solid rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0.9);
}
.subNavi {
display: none;
}
.searchHead {
padding: 10px 0;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-color: #757575;
}
.container-searchHead {
display: flex;
flex-wrap: wrap;
}
.searchHead__title {
display: none;
}
.searchHead__headtitle {
color: #fff;
padding: 10px 0;
display: table-cell;
vertical-align: middle;
font-weight: 700;
font-size: 16px;
}
.searchHead__keyword {
display: block;
margin-top: 10px;
order: 2;
overflow: auto;
}
.searchHead__keywordList {
display: table;
vertical-align: bottom;
list-style: none;
overflow: hidden;
}
.searchHead__keywordItem {
color: rgba(255, 255, 255, 0.75);
display: table-cell;
white-space: nowrap;
overflow: hidden;
transition: 0.15s;
padding-right: 10px;
font-size: 14px;
line-height: 2;
}
.searchHead__keywordItem:hover {
color: #fff;
font-weight: 700;
}
.searchHead__search {
display: block;
width: 100%;
order: 1;
}
.searchHead__form {
display: flex;
}
.searchHead__input {
width: calc(100% - 4rem);
border: 0;
padding: 0 10px;
-webkit-appearance: none;
appearance: none;
border-radius: 5px 0 0 5px;
}
.searchHead__submit {
width: 4rem;
border: 0;
cursor: pointer;
text-align: center;
background: #fff;
padding: 10px;
border-radius: 0 5px 5px 0;
}
.searchHead__submit:hover {
color: #a83f3f;
}
.breadcrumb {
padding: 10px 0;
background: #f2f2f2;
overflow-x: auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.breadcrumb__list {
list-style: none;
display: table;
}
.breadcrumb__list::after {
content: "";
display: block;
clear: both;
}
.breadcrumb__item {
position: relative;
display: table-cell;
white-space: nowrap;
padding-right: 15px;
padding-left: 15px;
font-size: 1.2rem;
line-height: 1.75;
color: #7f7f7f;
}
.breadcrumb__item:first-child {
padding-left: 0;
}
.breadcrumb__item.icon-home::before {
margin-right: 5px;
}
.breadcrumb__item::after {
content: "";
position: absolute;
right: 0;
top: 50%;
margin-top: -3px;
width: 5px;
height: 5px;
border-top: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
transform: rotate(45deg);
}
.breadcrumb__item:last-child::after {
border: none;
}
.breadcrumb__item a:hover {
color: #a83f3f;
}
.archiveHead {
position: relative;
width: 100%;
}
.archiveHead__img {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
font-family: "object-fit:cover;";
width: 100%;
height: 100%;
z-index: -10;
}
.archiveHead__contents {
position: relative;
z-index: 9;
}
.archiveHead__authorImg {
float: left;
}
.archiveHead__authorImg img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
font-family: "object-fit:cover;";
}
.archiveHead__authorText {
float: right;
width: calc(100% - 100px);
}
.archiveHead__authorDescription {
margin-top: 20px;
}
.archiveHead__subtitle {
font-size: 1rem;
display: block;
margin-bottom: 5px;
color: rgba(0, 0, 0, 0.5);
}
.archiveHead__subtitle i {
margin-right: 5px;
}
.archiveHead .heading {
border-bottom: 1px dotted #d8d8d8;
padding-bottom: 5px;
}
.archiveHead__list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin-top: -5px;
}
.archiveHead__item {
margin: 5px 10px 0 0;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.archiveHead__item:hover {
background-color: #fff;
}
.archiveHead__link {
padding: 10px;
display: block;
color: #fff;
font-size: 1rem;
}
.archiveHead__link:hover {
color: #191919;
}
.archiveHead.mask {
padding: 20px;
}
.archiveHead.mask .archiveHead__subtitle {
color: rgba(255, 255, 255, 0.5);
}
.archiveHead.mask .heading {
display: inline-block;
color: #fff;
border-bottom: 2px solid;
}
.archiveHead.mask .phrase {
color: rgba(255, 255, 255, 0.9);
}
.archiveContents {
position: relative;
width: 100%;
margin-top: 20px;
}
.archiveHead__slist {
margin-top: -5px;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.archiveHead__sitem {
margin: 5px 5px 0 0;
}
.archiveHead__slink {
display: block;
width: 55px;
height: 30px;
line-height: 30px;
margin: 0 auto;
overflow: hidden;
font-size: 12px;
text-align: center;
transition: 0.15s;
color: #fff;
border: 1px solid transparent;
}
.archiveHead__slink.icon-facebook {
background: #3b5998;
}
.archiveHead__slink.icon-twitter {
background: #00b0ed;
}
.archiveHead__slink.icon-instagram {
background: linear-gradient(145deg, #3051f1 10%, #c92bb7 70%) no-repeat;
}
.archiveHead__slink.icon-youtube {
background: #cd201f;
}
.archiveHead__slink.icon-linkedin {
background: #0079ba;
}
.archiveHead__slink.icon-pinterest {
background: #ce0f19;
}
.archiveHead__slink.icon-facebook:hover {
background: #fff;
color: #3b5998;
border: 1px solid #3b5998;
}
.archiveHead__slink.icon-twitter:hover {
background: #fff;
color: #00b0ed;
border: 1px solid #00b0ed;
}
.archiveHead__slink.icon-instagram:hover {
background: #fff;
color: #cc55b1;
border: 1px solid #cc55b1;
}
.archiveHead__slink.icon-youtube:hover {
background: #fff;
color: #cd201f;
border: 1px solid #cd201f;
}
.archiveHead__slink.icon-linkedin:hover {
background: #fff;
color: #0079ba;
border: 1px solid #0079ba;
}
.archiveHead__slink.icon-pinterest:hover {
background: #fff;
color: #ce0f19;
border: 1px solid #ce0f19;
}
.archiveHead__search {
position: relative;
width: 100%;
}
.archiveHead__searchItem:not(:last-child) {
margin-right: 15px;
}
.archiveHead__searchItem:not(:last-child):after {
margin-left: 15px;
content: "×";
color: rgba(0, 0, 0, 0.5);
}
.archiveHead__searchItem:before {
margin-right: 5px;
color: rgba(0, 0, 0, 0.5);
font-size: 1.2rem;
}
.archiveHead__searchSeparator {
margin: 0 10px;
color: rgba(0, 0, 0, 0.5);
}
.pageContents {
width: 100%;
}
.postContents {
width: 100%;
}
.social-top {
margin-bottom: 40px;
}
.social-bottom {
margin-top: 40px;
}
.socialList {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.socialList__item {
text-align: center;
}
.socialList__link {
display: block;
padding: 0 10px;
}
.socialList__link::before {
display: block;
transition: 0.15s;
}
.socialList-type01 {
justify-content: flex-end;
}
.socialList-type01 .socialList__item {
flex-grow: 1;
height: 40px;
line-height: 40px;
min-width: 70px;
}
.socialList-type01 .socialList__link {
color: #fff;
padding: 0;
}
.socialList-type01 .socialList__link::before {
font-size: 2rem;
}
.socialList-type01 .socialList__link:hover::before {
background: #fff;
transform: scale(1.2);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.socialList-type02 {
justify-content: flex-end;
margin: -5px 0 5px -5px;
}
.socialList-type02 .socialList__item {
flex-grow: 1;
height: 40px;
line-height: 40px;
min-width: 70px;
margin: 5px 0 0 5px;
}
.socialList-type02 .socialList__link {
color: #fff;
padding: 0;
}
.socialList-type02 .socialList__link::before {
font-size: 2rem;
}
.socialList-type02 .socialList__link:hover::before {
background: #fff;
transform: scale(1.2);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.socialList-type03 {
margin: -5px 0 5px -5px;
}
.socialList-type03 .socialList__item {
height: 30px;
line-height: 30px;
width: 30px;
margin: 5px 0 0 5px;
}
.socialList-type03 .socialList__link {
color: #fff;
border-radius: 5px;
transition: 0.15s;
padding: 0;
}
.socialList-type03 .socialList__link::before {
font-size: 1.4rem;
border-radius: 5px;
}
.socialList-type03 .socialList__link:hover::before {
background: #fff;
transform: scale(1.2);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.socialList-type04 {
margin: -5px 0 -3px -5px;
}
.socialList-type04 .socialList__item {
height: 30px;
line-height: 30px;
width: 30px;
margin: 5px 0 3px 5px;
}
.socialList-type04 .socialList__link {
color: #fff;
border-radius: 5px;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
transition: 0.15s;
padding: 0;
}
.socialList-type04 .socialList__link::before {
font-size: 1.4rem;
}
.socialList-type04 .socialList__link:hover {
opacity: 0.75;
}
.socialList-type04 .socialList__link:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.socialList-type05 {
margin: -5px 0 5px -5px;
}
.socialList-type05 .socialList__item {
height: 60px;
line-height: 60px;
width: 60px;
margin: 5px 0 0 5px;
}
.socialList-type05 .socialList__link {
color: #fff;
border-radius: 5px;
transition: 0.15s;
padding: 0;
}
.socialList-type05 .socialList__link::before {
font-size: 1.6rem;
border-radius: 5px;
}
.socialList-type05 .socialList__link:hover::before {
background: #fff;
transform: scale(1.2);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.socialList-type06 {
margin: -8px 0 0 -5px;
}
.socialList-type06 .socialList__item {
height: 60px;
line-height: 60px;
width: 60px;
margin: 8px 0 0 5px;
}
.socialList-type06 .socialList__link {
color: #fff;
border-radius: 5px;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
transition: 0.15s;
}
.socialList-type06 .socialList__link::before {
font-size: 1.6rem;
}
.socialList-type06 .socialList__link:hover {
opacity: 0.75;
}
.socialList-type06 .socialList__link:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.socialList-type07 {
justify-content: flex-end;
margin: -5px 0 5px -5px;
}
.socialList-type07 .socialList__item {
flex-grow: 1;
height: 50px;
line-height: 50px;
min-width: 120px;
text-align: center;
margin: 9px 0 0 5px;
}
.socialList-type07 .socialList__link {
color: #fff;
border-radius: 5px;
border: 2px solid;
transition: 0.15s;
}
.socialList-type07 .socialList__link::before {
font-size: 1.6rem;
display: inline-block;
transition: 0;
}
.socialList-type07 .socialList__link::after {
content: attr(title);
font-size: 1.4rem;
font-weight: 700;
vertical-align: top;
margin-left: 5px;
}
.socialList-type08 {
justify-content: flex-end;
margin: -10px 0 0 -5px;
}
.socialList-type08 .socialList__item {
flex-grow: 1;
height: 50px;
line-height: 50px;
min-width: 120px;
text-align: center;
margin: 10px 0 0 5px;
}
.socialList-type08 .socialList__link {
color: #fff;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
border-radius: 5px;
transition: 0.15s;
}
.socialList-type08 .socialList__link::before {
font-size: 1.6rem;
display: inline-block;
transition: 0;
}
.socialList-type08 .socialList__link::after {
content: attr(title);
font-size: 1.4rem;
font-weight: 700;
vertical-align: top;
margin-left: 5px;
}
.socialList-type08 .socialList__link:hover {
opacity: 0.75;
}
.socialList-type08 .socialList__link:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.socialList-type09 {
margin: -5px 0 5px -5px;
}
.socialList-type09 .socialList__item {
height: 50px;
line-height: 50px;
text-align: center;
margin: 9px 0 0 5px;
}
.socialList-type09 .socialList__link {
color: #fff;
border-radius: 5px;
border: 2px solid;
transition: 0.15s;
}
.socialList-type09 .socialList__link::before {
font-size: 1.6rem;
display: inline-block;
transition: 0;
}
.socialList-type09 .socialList__link::after {
content: attr(title);
font-size: 1.4rem;
font-weight: 700;
vertical-align: top;
margin-left: 5px;
}
.socialList-type10 {
margin: -10px 0 0 -5px;
}
.socialList-type10 .socialList__item {
height: 50px;
line-height: 50px;
text-align: center;
margin: 10px 0 0 5px;
}
.socialList-type10 .socialList__link {
color: #fff;
border-bottom: solid 3px rgba(0, 0, 0, 0.25);
border-radius: 5px;
transition: 0.15s;
}
.socialList-type10 .socialList__link::before {
font-size: 1.6rem;
display: inline-block;
transition: 0;
}
.socialList-type10 .socialList__link::after {
content: attr(title);
font-size: 1.4rem;
font-weight: 700;
vertical-align: top;
margin-left: 5px;
}
.socialList-type10 .socialList__link:hover {
opacity: 0.75;
}
.socialList-type10 .socialList__link:active {
transform: translateY(3px);
border-bottom: solid 3px transparent;
}
.socialList-type11 {
margin: -5px 0 5px -5px;
}
.socialList-type11 .socialList__item {
height: 28px;
line-height: 28px;
margin: 5px 0 0 5px;
}
.socialList-type11 .socialList__link {
color: #fff;
border-radius: 5px;
transition: 0.15s;
}
.socialList-type11 .socialList__link::before {
font-size: 1.4rem;
display: inline-block;
transition: 0;
}
.socialList-type11 .socialList__link::after {
content: attr(title);
font-size: 1.2rem;
vertical-align: top;
margin-left: 5px;
}
.socialList-type11 .socialList__link:hover {
opacity: 0.75;
}
.socialList__link.icon-facebook {
background: #3b5998;
}
.socialList__link.icon-twitter {
background: #00b0ed;
}
.socialList__link.icon-hatenabookmark {
background: #008fde;
}
.socialList__link.icon-pocket {
background: #eb4654;
}
.socialList__link.icon-line {
background: #00c300;
}
.socialList__link.icon-linkedin {
background: #0e76a8;
}
.socialList__link.icon-pinterest {
background: #cb2027;
}
.socialList-type01 .socialList__link.icon-facebook:hover::before,
.socialList-type02 .socialList__link.icon-facebook:hover::before,
.socialList-type03 .socialList__link.icon-facebook:hover::before,
.socialList-type05 .socialList__link.icon-facebook:hover::before,
.socialList-type07 .socialList__link.icon-facebook:hover::before,
.socialList-type09 .socialList__link.icon-facebook:hover::before {
color: #3b5998;
}
.socialList-type01 .socialList__link.icon-twitter:hover::before,
.socialList-type02 .socialList__link.icon-twitter:hover::before,
.socialList-type03 .socialList__link.icon-twitter:hover::before,
.socialList-type05 .socialList__link.icon-twitter:hover::before,
.socialList-type07 .socialList__link.icon-twitter:hover::before,
.socialList-type09 .socialList__link.icon-twitter:hover::before {
color: #00b0ed;
}
.socialList-type01 .socialList__link.icon-hatenabookmark:hover::before,
.socialList-type02 .socialList__link.icon-hatenabookmark:hover::before,
.socialList-type03 .socialList__link.icon-hatenabookmark:hover::before,
.socialList-type05 .socialList__link.icon-hatenabookmark:hover::before,
.socialList-type07 .socialList__link.icon-hatenabookmark:hover::before,
.socialList-type09 .socialList__link.icon-hatenabookmark:hover::before {
color: #008fde;
}
.socialList-type01 .socialList__link.icon-pocket:hover::before,
.socialList-type02 .socialList__link.icon-pocket:hover::before,
.socialList-type03 .socialList__link.icon-pocket:hover::before,
.socialList-type05 .socialList__link.icon-pocket:hover::before,
.socialList-type07 .socialList__link.icon-pocket:hover::before,
.socialList-type09 .socialList__link.icon-pocket:hover::before {
color: #eb4654;
}
.socialList-type01 .socialList__link.icon-line:hover::before,
.socialList-type02 .socialList__link.icon-line:hover::before,
.socialList-type03 .socialList__link.icon-line:hover::before,
.socialList-type05 .socialList__link.icon-line:hover::before,
.socialList-type07 .socialList__link.icon-line:hover::before,
.socialList-type09 .socialList__link.icon-line:hover::before {
color: #00c300;
}
.socialList-type01 .socialList__link.icon-linkedin:hover::before,
.socialList-type02 .socialList__link.icon-linkedin:hover::before,
.socialList-type03 .socialList__link.icon-linkedin:hover::before,
.socialList-type05 .socialList__link.icon-linkedin:hover::before,
.socialList-type07 .socialList__link.icon-linkedin:hover::before,
.socialList-type09 .socialList__link.icon-linkedin:hover::before {
color: #0e76a8;
}
.socialList-type01 .socialList__link.icon-pinterest:hover::before,
.socialList-type02 .socialList__link.icon-pinterest:hover::before,
.socialList-type03 .socialList__link.icon-pinterest:hover::before,
.socialList-type05 .socialList__link.icon-pinterest:hover::before,
.socialList-type07 .socialList__link.icon-pinterest:hover::before,
.socialList-type09 .socialList__link.icon-pinterest:hover::before {
color: #cb2027;
}
.socialList-type07 .socialList__link.icon-facebook:hover,
.socialList-type09 .socialList__link.icon-facebook:hover {
color: #3b5998;
background: #fff;
border-color: #3b5998;
}
.socialList-type07 .socialList__link.icon-twitter:hover,
.socialList-type09 .socialList__link.icon-twitter:hover {
color: #00b0ed;
background: #fff;
border-color: #00b0ed;
}
.socialList-type07 .socialList__link.icon-hatenabookmark:hover,
.socialList-type09 .socialList__link.icon-hatenabookmark:hover {
color: #008fde;
background: #fff;
border-color: #008fde;
}
.socialList-type07 .socialList__link.icon-pocket:hover,
.socialList-type09 .socialList__link.icon-pocket:hover {
color: #eb4654;
background: #fff;
border-color: #eb4654;
}
.socialList-type07 .socialList__link.icon-line:hover,
.socialList-type09 .socialList__link.icon-line:hover {
color: #00c300;
background: #fff;
border-color: #00c300;
}
.socialList-type07 .socialList__link.icon-linkedin:hover,
.socialList-type09 .socialList__link.icon-linkedin:hover {
color: #0e76a8;
background: #fff;
border-color: #0e76a8;
}
.socialList-type07 .socialList__link.icon-pinterest:hover,
.socialList-type09 .socialList__link.icon-pinterest:hover {
color: #cb2027;
background: #fff;
border-color: #cb2027;
}
.snsFollow {
display: flex;
height: 200px;
margin-top: 40px;
}
.snsFollow__bg {
flex: 2;
position: relative;
overflow: hidden;
}
.snsFollow__bg::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.snsFollow__bg img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit:cover;";
}
.snsFollow__contents {
flex: 3;
position: relative;
background: #191919;
text-align: center;
padding: 20px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.snsFollow__text {
width: 100%;
color: #fff;
margin: 40px auto 10px;
font-weight: 700;
line-height: 1.5;
}
.snsFollow__list {
list-style: none;
display: inline-block;
margin: 0 auto;
}
.snsFollow__item {
list-style: none;
display: inline-block;
margin: 0 5px 5px;
vertical-align: top;
}
.related {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 40px;
padding-top: 20px;
}
.related__list {
list-style-type: none;
}
.related__item {
padding-bottom: 20px;
width: 100%;
display: flex;
align-items: flex-start;
}
.related__item .eyecatch {
max-width: 200px;
}
.related__item .archive__contents {
width: 100%;
margin-left: 15px;
}
.related__item:last-child {
padding-bottom: 0;
}
.content {
position: relative;
font-size: 1.4rem;
line-height: 1.6em;
}
.content::after {
content: "";
display: block;
clear: both;
}
.content a {
color: #63acb7;
}
.content a:hover {
font-weight: 700;
}
.content .the__category a {
color: #fff;
}
.content .eyecatch__cat a {
color: #fff;
}
.content .heading a {
color: #191919;
}
.content img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.content .sitemap li a {
color: #191919;
}
.btn {
width: 100%;
line-height: 1;
}
.btn-left {
text-align: left;
}
.btn-center {
text-align: center;
}
.btn-right {
text-align: right;
}
.content p::after {
content: "";
display: block;
clear: both;
}
.content h2 {
margin: 10px 0;
}
.content h3,
.content h4,
.content h5 {
margin-top: 14px;
}
.content h2 {
font-size: 16px;
}
.content h3 {
font-size: 15px;
}
.content h4 {
font-size: 15px;
}
.content h5 {
font-size: 15px;
}
.content h2 + h2,
.content h2 + h3,
.content h2 + h4,
.content h2 + h5,
.content h3 + h2,
.content h3 + h3,
.content h3 + h4,
.content h3 + h5,
.content h4 + h2,
.content h4 + h3,
.content h4 + h4,
.content h4 + h5,
.content h5 + h2,
.content h5 + h3,
.content h5 + h4,
.content h5 + h5 {
margin-top: 0;
}
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a {
color: #191919;
}
.partsH2-1 h2,
.partsH3-1 h3,
.partsH4-1 h4,
.partsH5-1 h5 {
padding-bottom: 10px;
border-bottom: solid 4px #a83f3f;
}
.partsH2-2 h2,
.partsH3-2 h3,
.partsH4-2 h4,
.partsH5-2 h5 {
position: relative;
padding-bottom: 16px;
}
.partsH2-2 h2::after,
.partsH3-2 h3::after,
.partsH4-2 h4::after,
.partsH5-2 h5::after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
border-top: 2px solid #a83f3f;
border-bottom: 1px solid #a83f3f;
}
.partsH2-3 h2,
.partsH3-3 h3,
.partsH4-3 h4,
.partsH5-3 h5 {
padding-bottom: 10px;
border-bottom: dotted 1px #a83f3f;
}
.partsH2-4 h2,
.partsH3-4 h3,
.partsH4-4 h4,
.partsH5-4 h5 {
position: relative;
padding-bottom: 14px;
overflow: hidden;
}
.partsH2-4 h2::before,
.partsH3-4 h3::before,
.partsH4-4 h4::before,
.partsH5-4 h5::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 4px solid #a83f3f;
}
.partsH2-4 h2::after,
.partsH3-4 h3::after,
.partsH4-4 h4::after,
.partsH5-4 h5::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 4px solid #d8d8d8;
}
.partsH2-5 h2,
.partsH3-5 h3,
.partsH4-5 h4,
.partsH5-5 h5 {
background: linear-gradient(transparent 60%, #d8d8d8 60%);
}
.partsH2-6 h2,
.partsH3-6 h3,
.partsH4-6 h4,
.partsH5-6 h5 {
position: relative;
padding-bottom: 14px;
padding-right: 30px;
}
.partsH2-6 h2::before,
.partsH3-6 h3::before,
.partsH4-6 h4::before,
.partsH5-6 h5::before {
content: "";
position: absolute;
bottom: -0;
right: 0;
width: 0;
height: 0;
border: none;
border-right: solid 15px transparent;
border-bottom: solid 15px #a83f3f;
}
.partsH2-6 h2::after,
.partsH3-6 h3::after,
.partsH4-6 h4::after,
.partsH5-6 h5::after {
content: "";
position: absolute;
bottom: 0;
right: 10px;
width: 100%;
border-bottom: solid 4px #a83f3f;
}
.partsH2-7 h2,
.partsH3-7 h3,
.partsH4-7 h4,
.partsH5-7 h5 {
position: relative;
padding-bottom: 16px;
}
.partsH2-7 h2::after,
.partsH3-7 h3::after,
.partsH4-7 h4::after,
.partsH5-7 h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
background: repeating-linear-gradient(
-45deg,
#a83f3f,
#a83f3f 2px,
#fff 2px,
#fff 4px
);
}
.partsH2-8 h2,
.partsH3-8 h3,
.partsH4-8 h4,
.partsH5-8 h5 {
position: relative;
padding-bottom: 14px;
}
.partsH2-8 h2::after,
.partsH3-8 h3::after,
.partsH4-8 h4::after,
.partsH5-8 h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #a83f3f, #d8d8d8);
}
.partsH2-9 h2,
.partsH3-9 h3,
.partsH4-9 h4,
.partsH5-9 h5 {
position: relative;
padding-bottom: 14px;
text-align: center;
}
.partsH2-9 h2::after,
.partsH3-9 h3::after,
.partsH4-9 h4::after,
.partsH5-9 h5::after {
content: "";
position: absolute;
bottom: 0;
display: inline-block;
width: 60px;
height: 4px;
left: 50%;
transform: translateX(-50%);
background-color: #a83f3f;
border-radius: 2px;
}
.partsH2-10 h2,
.partsH3-10 h3,
.partsH4-10 h4,
.partsH5-10 h5 {
position: relative;
padding-bottom: 10px;
text-align: center;
border-bottom: 1px solid #a83f3f;
}
.partsH2-10 h2::before,
.partsH3-10 h3::before,
.partsH4-10 h4::before,
.partsH5-10 h5::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top: 10px solid #a83f3f;
}
.partsH2-10 h2::after,
.partsH3-10 h3::after,
.partsH4-10 h4::after,
.partsH5-10 h5::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top: 10px solid #fff;
margin-top: -1px;
}
.partsH2-11 h2,
.partsH3-11 h3,
.partsH4-11 h4,
.partsH5-11 h5 {
padding: 10px 0 10px 20px;
border-left: solid 4px #a83f3f;
}
.partsH2-12 h2,
.partsH3-12 h3,
.partsH4-12 h4,
.partsH5-12 h5 {
padding: 10px 0 10px 20px;
border-left: solid 4px #a83f3f;
border-bottom: solid 1px #d8d8d8;
}
.partsH2-13 h2,
.partsH3-13 h3,
.partsH4-13 h4,
.partsH5-13 h5 {
padding: 10px 0 10px 20px;
border-left: solid 4px #a83f3f;
border-bottom: dotted 1px #d8d8d8;
}
.partsH2-14 h2,
.partsH3-14 h3,
.partsH4-14 h4,
.partsH5-14 h5 {
position: relative;
padding: 10px 0 10px 20px;
border-left: solid 4px #a83f3f;
}
.partsH2-14 h2::before,
.partsH3-14 h3::before,
.partsH4-14 h4::before,
.partsH5-14 h5::before {
content: "";
position: absolute;
left: -4px;
bottom: 0;
width: 4px;
height: 50%;
background-color: #d8d8d8;
}
.partsH2-14 h2::after,
.partsH3-14 h3::after,
.partsH4-14 h4::after,
.partsH5-14 h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
border-bottom: 1px solid #d8d8d8;
}
.partsH2-21 h2,
.partsH3-21 h3,
.partsH4-21 h4,
.partsH5-21 h5 {
padding: 20px;
background-color: #f2f2f2;
}
.partsH2-22 h2,
.partsH3-22 h3,
.partsH4-22 h4,
.partsH5-22 h5 {
padding: 20px;
background-color: #f2f2f2;
border-bottom: 4px solid #a83f3f;
}
.partsH2-23 h2,
.partsH3-23 h3,
.partsH4-23 h4,
.partsH5-23 h5 {
padding: 20px;
background-color: #f2f2f2;
border-left: 4px solid #a83f3f;
}
.partsH2-24 h2,
.partsH3-24 h3,
.partsH4-24 h4,
.partsH5-24 h5 {
padding: 20px;
background-color: #f2f2f2;
border-left: 4px solid #a83f3f;
border-bottom: 4px solid rgba(0, 0, 0, 0.1);
}
.partsH2-25 h2,
.partsH3-25 h3,
.partsH4-25 h4,
.partsH5-25 h5 {
position: relative;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}
.partsH2-25 h2::after,
.partsH3-25 h3::after,
.partsH4-25 h4::after,
.partsH5-25 h5::after {
position: absolute;
top: 100%;
left: 30px;
content: "";
height: 0;
width: 0;
border: 10px solid transparent;
margin-top: -2px;
border-top: 15px solid #f2f2f2;
}
.partsH2-26 h2,
.partsH3-26 h3,
.partsH4-26 h4,
.partsH5-26 h5 {
position: relative;
padding: 20px;
border: 1px solid #d8d8d8;
border-radius: 5px;
}
.partsH2-26 h2::before,
.partsH3-26 h3::before,
.partsH4-26 h4::before,
.partsH5-26 h5::before {
position: absolute;
top: 100%;
left: 30px;
content: "";
height: 0;
width: 0;
border: 10px solid transparent;
border-top: 15px solid #d8d8d8;
}
.partsH2-26 h2::after,
.partsH3-26 h3::after,
.partsH4-26 h4::after,
.partsH5-26 h5::after {
position: absolute;
top: 100%;
left: 30px;
content: "";
height: 0;
width: 0;
border: 10px solid transparent;
margin-top: -2px;
border-top: 15px solid #fff;
}
.partsH2-27 h2,
.partsH3-27 h3,
.partsH4-27 h4,
.partsH5-27 h5 {
position: relative;
padding: 20px;
color: #fff;
background: #a83f3f;
}
.partsH2-27 h2::before,
.partsH3-27 h3::before,
.partsH4-27 h4::before,
.partsH5-27 h5::before {
content: "";
position: absolute;
top: 100%;
right: 0;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #752f2f;
border-left: 5px solid #752f2f;
}
.partsH2-27 h2::after,
.partsH3-27 h3::after,
.partsH4-27 h4::after,
.partsH5-27 h5::after {
content: "";
position: absolute;
top: 100%;
left: 0;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #752f2f;
border-right: 5px solid #752f2f;
}
.partsH2-28 h2,
.partsH3-28 h3,
.partsH4-28 h4,
.partsH5-28 h5 {
position: relative;
padding: 20px;
color: #fff;
background: #a83f3f;
}
.partsH2-28 h2::before,
.partsH3-28 h3::before,
.partsH4-28 h4::before,
.partsH5-28 h5::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 0;
border: solid 10px transparent;
border-bottom-color: #752f2f;
}
.partsH2-29 h2,
.partsH3-29 h3,
.partsH4-29 h4,
.partsH5-29 h5 {
position: relative;
padding: 20px;
color: #fff;
background: #a83f3f;
box-shadow: 0 0 0 5px #a83f3f;
border: dashed 1px #fff;
}
.partsH2-30 h2,
.partsH3-30 h3,
.partsH4-30 h4,
.partsH5-30 h5 {
position: relative;
padding: 20px;
color: #fff;
background: repeating-linear-gradient(
-45deg,
#a83f3f,
#a83f3f 3px,
#752f2f 3px,
#752f2f 7px
);
}
.partsH2-31 h2,
.partsH3-31 h3,
.partsH4-31 h4,
.partsH5-31 h5 {
position: relative;
padding: 20px;
text-align: center;
border: solid 1px #a83f3f;
}
.partsH2-32 h2,
.partsH3-32 h3,
.partsH4-32 h4,
.partsH5-32 h5 {
position: relative;
padding: 20px;
text-align: center;
border: dashed 1px #a83f3f;
border-radius: 5px;
}
.partsH2-33 h2,
.partsH3-33 h3,
.partsH4-33 h4,
.partsH5-33 h5 {
position: relative;
padding: 20px;
text-align: center;
}
.partsH2-33 h2::before,
.partsH3-33 h3::before,
.partsH4-33 h4::before,
.partsH5-33 h5::before {
display: inline-block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 30px;
border-left: solid 1px #a83f3f;
border-top: solid 1px #a83f3f;
}
.partsH2-33 h2::after,
.partsH3-33 h3::after,
.partsH4-33 h4::after,
.partsH5-33 h5::after {
display: inline-block;
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 30px;
border-right: solid 1px #a83f3f;
border-bottom: solid 1px #a83f3f;
}
.partsH2-34 h2,
.partsH3-34 h3,
.partsH4-34 h4,
.partsH5-34 h5 {
position: relative;
padding: 20px;
text-align: center;
border-top: solid 1px #a83f3f;
border-bottom: solid 1px #a83f3f;
}
.partsH2-34 h2::before,
.partsH3-34 h3::before,
.partsH4-34 h4::before,
.partsH5-34 h5::before {
content: "";
position: absolute;
top: -10px;
left: 10px;
width: 1px;
height: calc(100% + 20px);
background-color: #a83f3f;
}
.partsH2-34 h2::after,
.partsH3-34 h3::after,
.partsH4-34 h4::after,
.partsH5-34 h5::after {
content: "";
position: absolute;
top: -10px;
right: 10px;
width: 1px;
height: calc(100% + 20px);
background-color: #a83f3f;
}
.partsH2-41 h2,
.partsH3-41 h3,
.partsH4-41 h4,
.partsH5-41 h5 {
position: relative;
padding: 20px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#f2f2f2 0%, #fff 50%, #f2f2f2 50%, #fff 100%);
}
.partsH2-42 h2,
.partsH3-42 h3,
.partsH4-42 h4,
.partsH5-42 h5 {
position: relative;
padding: 20px;
border-radius: 5px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#f2f2f2 0%, #fff 50%, #f2f2f2 50%, #fff 100%);
}
.partsH2-43 h2,
.partsH3-43 h3,
.partsH4-43 h4,
.partsH5-43 h5 {
position: relative;
padding: 20px;
border-radius: 100px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#f2f2f2 0%, #fff 50%, #f2f2f2 50%, #fff 100%);
}
.partsH2-44 h2,
.partsH3-44 h3,
.partsH4-44 h4,
.partsH5-44 h5 {
position: relative;
padding: 20px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-45 h2,
.partsH3-45 h3,
.partsH4-45 h4,
.partsH5-45 h5 {
position: relative;
padding: 20px;
border-radius: 5px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-46 h2,
.partsH3-46 h3,
.partsH4-46 h4,
.partsH5-46 h5 {
position: relative;
padding: 20px;
border-radius: 50px;
border: 1px solid #f2f2f2;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-47 h2,
.partsH3-47 h3,
.partsH4-47 h4,
.partsH5-47 h5 {
position: relative;
padding: 20px;
border: 1px solid #f2f2f2;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-48 h2,
.partsH3-48 h3,
.partsH4-48 h4,
.partsH5-48 h5 {
position: relative;
padding: 20px;
border-radius: 5px;
border: 1px solid #f2f2f2;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-49 h2,
.partsH3-49 h3,
.partsH4-49 h4,
.partsH5-49 h5 {
position: relative;
padding: 20px;
border: 1px solid #323232;
color: #fff;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#191919 0%, #323232 100%);
}
.partsH2-50 h2,
.partsH3-50 h3,
.partsH4-50 h4,
.partsH5-50 h5 {
position: relative;
padding: 20px;
border-radius: 5px;
border: 1px solid #323232;
color: #fff;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#191919 0%, #323232 100%);
}
.partsH2-61 h2,
.partsH3-61 h3,
.partsH4-61 h4,
.partsH5-61 h5 {
position: relative;
padding: 10px 0 10px 30px;
}
.partsH2-61 h2::after,
.partsH3-61 h3::after,
.partsH4-61 h4::after,
.partsH5-61 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
transform: translateY(-50%);
background-color: #a83f3f;
}
.partsH2-62 h2,
.partsH3-62 h3,
.partsH4-62 h4,
.partsH5-62 h5 {
position: relative;
padding: 20px 0 20px 30px;
background-color: #a83f3f;
color: #fff;
border-radius: 5px;
}
.partsH2-62 h2::after,
.partsH3-62 h3::after,
.partsH4-62 h4::after,
.partsH5-62 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
transform: translateY(-50%);
background-color: #fff;
}
.partsH2-63 h2,
.partsH3-63 h3,
.partsH4-63 h4,
.partsH5-63 h5 {
position: relative;
padding: 20px 0 20px 30px;
border: 1px solid #d8d8d8;
border-radius: 5px;
}
.partsH2-63 h2::after,
.partsH3-63 h3::after,
.partsH4-63 h4::after,
.partsH5-63 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
transform: translateY(-50%);
background-color: #a83f3f;
}
.partsH2-64 h2,
.partsH3-64 h3,
.partsH4-64 h4,
.partsH5-64 h5 {
position: relative;
padding: 20px 0 20px 30px;
border: 1px solid #f2f2f2;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-64 h2::after,
.partsH3-64 h3::after,
.partsH4-64 h4::after,
.partsH5-64 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
transform: translateY(-50%);
background-color: #a83f3f;
}
.partsH2-65 h2,
.partsH3-65 h3,
.partsH4-65 h4,
.partsH5-65 h5 {
position: relative;
padding: 20px 0 20px 30px;
border: 1px solid #323232;
color: #fff;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#191919 0%, #323232 100%);
}
.partsH2-65 h2::after,
.partsH3-65 h3::after,
.partsH4-65 h4::after,
.partsH5-65 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 4px;
transform: translateY(-50%);
background-color: #a83f3f;
}
.partsH2-71 h2,
.partsH3-71 h3,
.partsH4-71 h4,
.partsH5-71 h5 {
position: relative;
padding: 10px 0 10px 25px;
}
.partsH2-71 h2::after,
.partsH3-71 h3::after,
.partsH4-71 h4::after,
.partsH5-71 h5::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 15px;
height: 15px;
border: solid 4px #a83f3f;
border-radius: 100%;
transform: translateY(-50%);
}
.partsH2-72 h2,
.partsH3-72 h3,
.partsH4-72 h4,
.partsH5-72 h5 {
position: relative;
padding: 20px 0 20px 35px;
background-color: #a83f3f;
color: #fff;
border-radius: 5px;
}
.partsH2-72 h2::after,
.partsH3-72 h3::after,
.partsH4-72 h4::after,
.partsH5-72 h5::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 15px;
height: 15px;
border: solid 4px #fff;
border-radius: 100%;
transform: translateY(-50%);
}
.partsH2-73 h2,
.partsH3-73 h3,
.partsH4-73 h4,
.partsH5-73 h5 {
position: relative;
padding: 20px 0 20px 35px;
border: 1px solid #d8d8d8;
border-radius: 5px;
}
.partsH2-73 h2::after,
.partsH3-73 h3::after,
.partsH4-73 h4::after,
.partsH5-73 h5::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 15px;
height: 15px;
border: solid 4px #a83f3f;
border-radius: 100%;
transform: translateY(-50%);
}
.partsH2-74 h2,
.partsH3-74 h3,
.partsH4-74 h4,
.partsH5-74 h5 {
position: relative;
padding: 20px 0 20px 35px;
border: 1px solid #f2f2f2;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#fff 0%, #f2f2f2 100%);
}
.partsH2-74 h2::after,
.partsH3-74 h3::after,
.partsH4-74 h4::after,
.partsH5-74 h5::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 15px;
height: 15px;
border: solid 4px #a83f3f;
border-radius: 100%;
transform: translateY(-50%);
}
.partsH2-75 h2,
.partsH3-75 h3,
.partsH4-75 h4,
.partsH5-75 h5 {
position: relative;
padding: 20px 0 20px 35px;
border: 1px solid #323232;
color: #fff;
border-top: 4px solid #a83f3f;
box-shadow: inset 1px -1px 0 rgba(255, 255, 255, 0.5);
background: linear-gradient(#191919 0%, #323232 100%);
}
.partsH2-75 h2::after,
.partsH3-75 h3::after,
.partsH4-75 h4::after,
.partsH5-75 h5::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 15px;
height: 15px;
border: solid 4px #a83f3f;
border-radius: 100%;
transform: translateY(-50%);
}
.partsH2-81 h2:first-letter {
font-size: 3.2rem;
}
.partsH3-81 h3:first-letter {
font-size: 2.8rem;
}
.partsH4-81 h4:first-letter {
font-size: 2.6rem;
}
.partsH5-81 h5:first-letter {
font-size: 2.4rem;
}
.partsH2-81 h2:first-letter,
.partsH3-81 h3:first-letter,
.partsH4-81 h4:first-letter,
.partsH5-81 h5:first-letter {
color: #a83f3f;
}
.partsH2-82 h2:first-letter {
font-size: 3.2rem;
}
.partsH3-82 h3:first-letter {
font-size: 2.8rem;
}
.partsH4-82 h4:first-letter {
font-size: 2.6rem;
}
.partsH5-82 h5:first-letter {
font-size: 2.4rem;
}
.partsH2-82 h2:first-letter,
.partsH3-82 h3:first-letter,
.partsH4-82 h4:first-letter,
.partsH5-82 h5:first-letter {
padding-bottom: 5px;
color: #a83f3f;
border-bottom: 3px solid;
}
.partsH2-83 h2,
.partsH3-83 h3,
.partsH4-83 h4,
.partsH5-83 h5 {
padding: 10px 0;
border-bottom: dotted 1px #d8d8d8;
}
.partsH2-83 h2:first-letter {
font-size: 3.2rem;
}
.partsH3-83 h3:first-letter {
font-size: 2.8rem;
}
.partsH4-83 h4:first-letter {
font-size: 2.6rem;
}
.partsH5-83 h5:first-letter {
font-size: 2.4rem;
}
.partsH2-83 h2:first-letter,
.partsH3-83 h3:first-letter,
.partsH4-83 h4:first-letter,
.partsH5-83 h5:first-letter {
color: #a83f3f;
}
.partsH2-84 h2,
.partsH3-84 h3,
.partsH4-84 h4,
.partsH5-84 h5 {
padding: 20px;
border: solid 1px #d8d8d8;
border-radius: 5px;
}
.partsH2-84 h2:first-letter {
font-size: 3.2rem;
}
.partsH3-84 h3:first-letter {
font-size: 2.8rem;
}
.partsH4-84 h4:first-letter {
font-size: 2.6rem;
}
.partsH5-84 h5:first-letter {
font-size: 2.4rem;
}
.partsH2-84 h2:first-letter,
.partsH3-84 h3:first-letter,
.partsH4-84 h4:first-letter,
.partsH5-84 h5:first-letter {
color: #a83f3f;
}
.content .size-full,
.content .size-large,
.content .size-medium,
.content .size-thumbnail {
max-width: 100%;
height: auto;
}
.content .alignleft {
float: left;
margin: 0 1rem 1rem 0;
text-align: left;
}
.content .aligncenter {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
}
.content .alignright {
float: right;
margin: 0 0 1rem 1rem;
text-align: right;
}
.content pre {
font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro",
"Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo,Osaka", "ＭＳ Ｐゴシック",
"MS PGothic", "sans-serif";
font-weight: 400;
margin-top: 2rem;
padding: 20px;
background-color: #f2f2f2;
border-left: solid 5px #191919;
color: #7f7f7f;
overflow: auto;
}
.content hr {
clear: both;
margin: 20px 0;
padding: 0;
height: 0;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.content dl {
margin-top: 2rem;
}
.content dt {
margin-top: 2rem;
padding: 10px;
background-color: rgba(0, 0, 0, 0.05);
}
.content dd {
padding: 10px;
border: solid 1px rgba(0, 0, 0, 0.05);
}
.content .accordionBox dt {
position: relative;
}
.content .accordionBox dt::after {
font-family: "icomoon";
content: "\ea0c";
position: absolute;
top: 50%;
right: 10px;
margin-top: -0.5rem;
font-size: 1rem;
line-height: 1;
}
.content .accordionBox dt.current::after {
content: "\ea0d";
}
.content .accordionBox-border dt {
background: #fff;
border: solid 1px rgba(0, 0, 0, 0.05);
}
.content .accordionBox-border dd {
border-top: 0;
}
.content .hr-solid {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.content .hr-dashed {
border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.content .hr-dotted {
border-top: 1px dotted rgba(0, 0, 0, 0.1);
}
.content .marker-thickRed {
background: linear-gradient(transparent 35%, #ffc6c6 35%);
}
.content .marker-thickBlue {
background: linear-gradient(transparent 35%, #cce5ff 35%);
}
.content .marker-thickYellow {
background: linear-gradient(transparent 60%, #ffffbc 35%);
}
.content .marker-thickPink {
background: linear-gradient(transparent 35%, #ffdfef 35%);
}
.content .marker-thickGreen {
background: linear-gradient(transparent 35%, #d2ffd2 35%);
}
.content .marker-thickGray {
background: linear-gradient(transparent 35%, #d8d8d8 35%);
}
.content .marker-halfRed {
background: linear-gradient(transparent 60%, #ffc6c6 60%);
}
.content .marker-halfBlue {
background: linear-gradient(transparent 60%, #cce5ff 60%);
}
.content .marker-halfYellow {
background: linear-gradient(transparent 60%, #ffffbc 60%);
}
.content .marker-halfPink {
background: linear-gradient(transparent 60%, #ffdfef 60%);
}
.content .marker-halfGreen {
background: linear-gradient(transparent 60%, #d2ffd2 60%);
}
.content .marker-halfGray {
background: linear-gradient(transparent 35%, #d8d8d8 35%);
}
.content .marker-thinRed {
background: linear-gradient(transparent 85%, #ffc6c6 85%);
}
.content .marker-thinBlue {
background: linear-gradient(transparent 85%, #cce5ff 85%);
}
.content .marker-thinYellow {
background: linear-gradient(transparent 85%, #ffffbc 85%);
}
.content .marker-thinPink {
background: linear-gradient(transparent 85%, #ffdfef 85%);
}
.content .marker-thinGreen {
background: linear-gradient(transparent 85%, #d2ffd2 85%);
}
.content .marker-thinGray {
background: linear-gradient(transparent 35%, #d8d8d8 35%);
}
.content .ftc-Vyellow {
color: #fff100;
}
.content .ftc-Vorange {
color: #f49801;
}
.content .ftc-Vred {
color: #e60112;
}
.content .ftc-Vmagenta {
color: #e5004f;
}
.content .ftc-Vpink {
color: #e4017f;
}
.content .ftc-Vpurple {
color: #920883;
}
.content .ftc-Vnavy {
color: #1c1e84;
}
.content .ftc-Vblue {
color: #0068b7;
}
.content .ftc-Vsky {
color: #00a0e9;
}
.content .ftc-Vturquoise {
color: #009e96;
}
.content .ftc-Vgreen {
color: #094;
}
.content .ftc-Vlime {
color: #8ec31f;
}
.content .ftc-Byellow {
color: #fff338;
}
.content .ftc-Borange {
color: #f6ad3a;
}
.content .ftc-Bred {
color: #ea5532;
}
.content .ftc-Bmagenta {
color: #e9536b;
}
.content .ftc-Bpink {
color: #e95098;
}
.content .ftc-Bpurple {
color: #a54a98;
}
.content .ftc-Bnavy {
color: #4c4398;
}
.content .ftc-Bblue {
color: #2b71b8;
}
.content .ftc-Bsky {
color: #00b0ec;
}
.content .ftc-Bturquoise {
color: #00ada9;
}
.content .ftc-Bgreen {
color: #0ba95f;
}
.content .ftc-Blime {
color: #a9cf52;
}
.content .ftc-DPyellow {
color: #cbbd00;
}
.content .ftc-DPorange {
color: #bf7601;
}
.content .ftc-DPred {
color: #b60105;
}
.content .ftc-DPmagenta {
color: #b5003c;
}
.content .ftc-DPpink {
color: #b50165;
}
.content .ftc-DPpurple {
color: #740169;
}
.content .ftc-DPnavy {
color: #14116e;
}
.content .ftc-DPblue {
color: #005293;
}
.content .ftc-DPsky {
color: #0081ba;
}
.content .ftc-DPturquoise {
color: #007f78;
}
.content .ftc-DPgreen {
color: #007c36;
}
.content .ftc-DPlime {
color: #6f9b12;
}
.content .ftc-Lyellow {
color: #fff89a;
}
.content .ftc-Lorange {
color: #fbce8a;
}
.content .ftc-Lred {
color: #f39c76;
}
.content .ftc-Lmagenta {
color: #f29c9f;
}
.content .ftc-Lpink {
color: #f29fc3;
}
.content .ftc-Lpurple {
color: #c490bf;
}
.content .ftc-Lnavy {
color: #8f82bc;
}
.content .ftc-Lblue {
color: #87abda;
}
.content .ftc-Lsky {
color: #7ecff5;
}
.content .ftc-Lturquoise {
color: #83ccc9;
}
.content .ftc-Lgreen {
color: #88c997;
}
.content .ftc-Llime {
color: #cce199;
}
.content .ftc-DLyellow {
color: #cac04e;
}
.content .ftc-DLorange {
color: #c39043;
}
.content .ftc-DLred {
color: #ba5536;
}
.content .ftc-DLmagenta {
color: #ba5460;
}
.content .ftc-DLpink {
color: #ba5584;
}
.content .ftc-DLpurple {
color: #8c4b82;
}
.content .ftc-DLnavy {
color: #4e4282;
}
.content .ftc-DLblue {
color: #3970a2;
}
.content .ftc-DLsky {
color: #1894be;
}
.content .ftc-DLturquoise {
color: #1d928f;
}
.content .ftc-DLgreen {
color: #218f59;
}
.content .ftc-DLlime {
color: #8ea953;
}
.content .ftc-VPyellow {
color: #fffded;
}
.content .ftc-VPorange {
color: #fef5e8;
}
.content .ftc-VPred {
color: #feede3;
}
.content .ftc-VPmagenta {
color: #fdedec;
}
.content .ftc-VPpink {
color: #fdeff5;
}
.content .ftc-VPpurple {
color: #f3eaf4;
}
.content .ftc-VPnavy {
color: #e8e6f3;
}
.content .ftc-VPblue {
color: #e9eef9;
}
.content .ftc-VPsky {
color: #eaf6fe;
}
.content .ftc-VPturquoise {
color: #eaf5f4;
}
.content .ftc-VPgreen {
color: #ebf5eb;
}
.content .ftc-VPlime {
color: #ebf5eb;
}
.content .ftc-DGyellow {
color: #675f00;
}
.content .ftc-DGorange {
color: #633c00;
}
.content .ftc-DGred {
color: #5f0100;
}
.content .ftc-DGmagenta {
color: #5f0017;
}
.content .ftc-DGpink {
color: #600033;
}
.content .ftc-DGpurple {
color: #3e0036;
}
.content .ftc-DGnavy {
color: #08003a;
}
.content .ftc-DGblue {
color: #00274f;
}
.content .ftc-DGsky {
color: #004462;
}
.content .ftc-DGturquoise {
color: #004340;
}
.content .ftc-DGgreen {
color: #004215;
}
.content .ftc-DGlime {
color: #395104;
}
.content .ftc-white {
color: #fff;
}
.content .ftc-VLgray {
color: #d8d8d8;
}
.content .ftc-Lgray {
color: #b2b2b2;
}
.content .ftc-gray {
color: #8c8c8c;
}
.content .ftc-Dgray {
color: #656565;
}
.content .ftc-VDgray {
color: #3f3f3f;
}
.content .ftc-black {
color: #191919;
}
.content .bgc-Vyellow {
background-color: #fff100;
}
.content .bgc-Vorange {
background-color: #f49801;
}
.content .bgc-Vred {
background-color: #e60112;
}
.content .bgc-Vmagenta {
background-color: #e5004f;
}
.content .bgc-Vpink {
background-color: #e4017f;
}
.content .bgc-Vpurple {
background-color: #920883;
}
.content .bgc-Vnavy {
background-color: #1c1e84;
}
.content .bgc-Vblue {
background-color: #0068b7;
}
.content .bgc-Vsky {
background-color: #00a0e9;
}
.content .bgc-Vturquoise {
background-color: #009e96;
}
.content .bgc-Vgreen {
background-color: #094;
}
.content .bgc-Vlime {
background-color: #8ec31f;
}
.content .bgc-Byellow {
background-color: #fff338;
}
.content .bgc-Borange {
background-color: #f6ad3a;
}
.content .bgc-Bred {
background-color: #ea5532;
}
.content .bgc-Bmagenta {
background-color: #e9536b;
}
.content .bgc-Bpink {
background-color: #e95098;
}
.content .bgc-Bpurple {
background-color: #a54a98;
}
.content .bgc-Bnavy {
background-color: #4c4398;
}
.content .bgc-Bblue {
background-color: #2b71b8;
}
.content .bgc-Bsky {
background-color: #00b0ec;
}
.content .bgc-Bturquoise {
background-color: #00ada9;
}
.content .bgc-Bgreen {
background-color: #0ba95f;
}
.content .bgc-Blime {
background-color: #a9cf52;
}
.content .bgc-DPyellow {
background-color: #cbbd00;
}
.content .bgc-DPorange {
background-color: #bf7601;
}
.content .bgc-DPred {
background-color: #b60105;
}
.content .bgc-DPmagenta {
background-color: #b5003c;
}
.content .bgc-DPpink {
background-color: #b50165;
}
.content .bgc-DPpurple {
background-color: #740169;
}
.content .bgc-DPnavy {
background-color: #14116e;
}
.content .bgc-DPblue {
background-color: #005293;
}
.content .bgc-DPsky {
background-color: #0081ba;
}
.content .bgc-DPturquoise {
background-color: #007f78;
}
.content .bgc-DPgreen {
background-color: #007c36;
}
.content .bgc-DPlime {
background-color: #6f9b12;
}
.content .bgc-Lyellow {
background-color: #fff89a;
}
.content .bgc-Lorange {
background-color: #fbce8a;
}
.content .bgc-Lred {
background-color: #f39c76;
}
.content .bgc-Lmagenta {
background-color: #f29c9f;
}
.content .bgc-Lpink {
background-color: #f29fc3;
}
.content .bgc-Lpurple {
background-color: #c490bf;
}
.content .bgc-Lnavy {
background-color: #8f82bc;
}
.content .bgc-Lblue {
background-color: #87abda;
}
.content .bgc-Lsky {
background-color: #7ecff5;
}
.content .bgc-Lturquoise {
background-color: #83ccc9;
}
.content .bgc-Lgreen {
background-color: #88c997;
}
.content .bgc-Llime {
background-color: #cce199;
}
.content .bgc-DLyellow {
background-color: #cac04e;
}
.content .bgc-DLorange {
background-color: #c39043;
}
.content .bgc-DLred {
background-color: #ba5536;
}
.content .bgc-DLmagenta {
background-color: #ba5460;
}
.content .bgc-DLpink {
background-color: #ba5584;
}
.content .bgc-DLpurple {
background-color: #8c4b82;
}
.content .bgc-DLnavy {
background-color: #4e4282;
}
.content .bgc-DLblue {
background-color: #3970a2;
}
.content .bgc-DLsky {
background-color: #1894be;
}
.content .bgc-DLturquoise {
background-color: #1d928f;
}
.content .bgc-DLgreen {
background-color: #218f59;
}
.content .bgc-DLlime {
background-color: #8ea953;
}
.content .bgc-VPyellow {
background-color: #fffded;
}
.content .bgc-VPorange {
background-color: #fef5e8;
}
.content .bgc-VPred {
background-color: #feede3;
}
.content .bgc-VPmagenta {
background-color: #fdedec;
}
.content .bgc-VPpink {
background-color: #fdeff5;
}
.content .bgc-VPpurple {
background-color: #f3eaf4;
}
.content .bgc-VPnavy {
background-color: #e8e6f3;
}
.content .bgc-VPblue {
background-color: #e9eef9;
}
.content .bgc-VPsky {
background-color: #eaf6fe;
}
.content .bgc-VPturquoise {
background-color: #eaf5f4;
}
.content .bgc-VPgreen {
background-color: #ebf5eb;
}
.content .bgc-VPlime {
background-color: #ebf5eb;
}
.content .bgc-DGyellow {
background-color: #675f00;
}
.content .bgc-DGorange {
background-color: #633c00;
}
.content .bgc-DGred {
background-color: #5f0100;
}
.content .bgc-DGmagenta {
background-color: #5f0017;
}
.content .bgc-DGpink {
background-color: #600033;
}
.content .bgc-DGpurple {
background-color: #3e0036;
}
.content .bgc-DGnavy {
background-color: #08003a;
}
.content .bgc-DGblue {
background-color: #00274f;
}
.content .bgc-DGsky {
background-color: #004462;
}
.content .bgc-DGturquoise {
background-color: #004340;
}
.content .bgc-DGgreen {
background-color: #004215;
}
.content .bgc-DGlime {
background-color: #395104;
}
.content .bgc-white {
background-color: #fff;
}
.content .bgc-VLgray {
background-color: #d8d8d8;
}
.content .bgc-Lgray {
background-color: #b2b2b2;
}
.content .bgc-gray {
background-color: #8c8c8c;
}
.content .bgc-Dgray {
background-color: #656565;
}
.content .bgc-VDgray {
background-color: #3f3f3f;
}
.content .bgc-black {
background-color: #191919;
}
.content .brc-Vyellow {
border-color: #fff100;
}
.content .brc-Vorange {
border-color: #f49801;
}
.content .brc-Vred {
border-color: #e60112;
}
.content .brc-Vmagenta {
border-color: #e5004f;
}
.content .brc-Vpink {
border-color: #e4017f;
}
.content .brc-Vpurple {
border-color: #920883;
}
.content .brc-Vnavy {
border-color: #1c1e84;
}
.content .brc-Vblue {
border-color: #0068b7;
}
.content .brc-Vsky {
border-color: #00a0e9;
}
.content .brc-Vturquoise {
border-color: #009e96;
}
.content .brc-Vgreen {
border-color: #094;
}
.content .brc-Vlime {
border-color: #8ec31f;
}
.content .brc-Byellow {
border-color: #fff338;
}
.content .brc-Borange {
border-color: #f6ad3a;
}
.content .brc-Bred {
border-color: #ea5532;
}
.content .brc-Bmagenta {
border-color: #e9536b;
}
.content .brc-Bpink {
border-color: #e95098;
}
.content .brc-Bpurple {
border-color: #a54a98;
}
.content .brc-Bnavy {
border-color: #4c4398;
}
.content .brc-Bblue {
border-color: #2b71b8;
}
.content .brc-Bsky {
border-color: #00b0ec;
}
.content .brc-Bturquoise {
border-color: #00ada9;
}
.content .brc-Bgreen {
border-color: #0ba95f;
}
.content .brc-Blime {
border-color: #a9cf52;
}
.content .brc-DPyellow {
border-color: #cbbd00;
}
.content .brc-DPorange {
border-color: #bf7601;
}
.content .brc-DPred {
border-color: #b60105;
}
.content .brc-DPmagenta {
border-color: #b5003c;
}
.content .brc-DPpink {
border-color: #b50165;
}
.content .brc-DPpurple {
border-color: #740169;
}
.content .brc-DPnavy {
border-color: #14116e;
}
.content .brc-DPblue {
border-color: #005293;
}
.content .brc-DPsky {
border-color: #0081ba;
}
.content .brc-DPturquoise {
border-color: #007f78;
}
.content .brc-DPgreen {
border-color: #007c36;
}
.content .brc-DPlime {
border-color: #6f9b12;
}
.content .brc-Lyellow {
border-color: #fff89a;
}
.content .brc-Lorange {
border-color: #fbce8a;
}
.content .brc-Lred {
border-color: #f39c76;
}
.content .brc-Lmagenta {
border-color: #f29c9f;
}
.content .brc-Lpink {
border-color: #f29fc3;
}
.content .brc-Lpurple {
border-color: #c490bf;
}
.content .brc-Lnavy {
border-color: #8f82bc;
}
.content .brc-Lblue {
border-color: #87abda;
}
.content .brc-Lsky {
border-color: #7ecff5;
}
.content .brc-Lturquoise {
border-color: #83ccc9;
}
.content .brc-Lgreen {
border-color: #88c997;
}
.content .brc-Llime {
border-color: #cce199;
}
.content .brc-DLyellow {
border-color: #cac04e;
}
.content .brc-DLorange {
border-color: #c39043;
}
.content .brc-DLred {
border-color: #ba5536;
}
.content .brc-DLmagenta {
border-color: #ba5460;
}
.content .brc-DLpink {
border-color: #ba5584;
}
.content .brc-DLpurple {
border-color: #8c4b82;
}
.content .brc-DLnavy {
border-color: #4e4282;
}
.content .brc-DLblue {
border-color: #3970a2;
}
.content .brc-DLsky {
border-color: #1894be;
}
.content .brc-DLturquoise {
border-color: #1d928f;
}
.content .brc-DLgreen {
border-color: #218f59;
}
.content .brc-DLlime {
border-color: #8ea953;
}
.content .brc-VPyellow {
border-color: #fffded;
}
.content .brc-VPorange {
border-color: #fef5e8;
}
.content .brc-VPred {
border-color: #feede3;
}
.content .brc-VPmagenta {
border-color: #fdedec;
}
.content .brc-VPpink {
border-color: #fdeff5;
}
.content .brc-VPpurple {
border-color: #f3eaf4;
}
.content .brc-VPnavy {
border-color: #e8e6f3;
}
.content .brc-VPblue {
border-color: #e9eef9;
}
.content .brc-VPsky {
border-color: #eaf6fe;
}
.content .brc-VPturquoise {
border-color: #eaf5f4;
}
.content .brc-VPgreen {
border-color: #ebf5eb;
}
.content .brc-VPlime {
border-color: #ebf5eb;
}
.content .brc-DGyellow {
border-color: #675f00;
}
.content .brc-DGorange {
border-color: #633c00;
}
.content .brc-DGred {
border-color: #5f0100;
}
.content .brc-DGmagenta {
border-color: #5f0017;
}
.content .brc-DGpink {
border-color: #600033;
}
.content .brc-DGpurple {
border-color: #3e0036;
}
.content .brc-DGnavy {
border-color: #08003a;
}
.content .brc-DGblue {
border-color: #00274f;
}
.content .brc-DGsky {
border-color: #004462;
}
.content .brc-DGturquoise {
border-color: #004340;
}
.content .brc-DGgreen {
border-color: #004215;
}
.content .brc-DGlime {
border-color: #395104;
}
.content .brc-white {
border-color: #fff;
}
.content .brc-VLgray {
border-color: #d8d8d8;
}
.content .brc-Lgray {
border-color: #b2b2b2;
}
.content .brc-gray {
border-color: #8c8c8c;
}
.content .brc-Dgray {
border-color: #656565;
}
.content .brc-VDgray {
border-color: #3f3f3f;
}
.content .brc-black {
border-color: #191919;
}
.content .adPost {
width: 100%;
overflow: hidden;
padding: 0 10px;
background-color: #f2f2f2;
background-image: linear-gradient(
to top right,
#fff 0%,
#fff 25%,
transparent 25%,
transparent 50%,
#fff 50%,
#fff 75%,
transparent 75%,
transparent 100%
);
background-size: 6px 6px;
}
.content .adPost__title {
font-size: 1.2rem;
padding: 10px 0;
display: block;
font-weight: 400;
text-align: center;
}
.content .youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin: 2rem auto 0;
}
.content .youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.content .twitter-tweet,
.content .instagram-media {
width: 500px !important;
max-width: 100% !important;
margin: 2rem auto 0 !important;
}
.content :first-child {
margin-top: 0;
}
.rankingBox {
position: relative;
padding-top: 40px;
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5) inset;
}
.rankingBox__bg {
position: absolute;
top: 0;
width: 100%;
height: 14rem;
background: #a83f3f;
z-index: -1;
}
.rankingBox__inner {
overflow-x: auto;
overflow-y: hidden;
}
.rankingBox__list {
display: table;
border-spacing: 15px 0;
list-style: none;
counter-reset: number;
margin: 0 -15px 20px;
}
.rankingBox__item {
display: table-cell;
vertical-align: top;
position: relative;
min-width: 260px;
max-width: 260px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
}
.rankingBox__item:last-child {
margin-right: 0;
}
.rankingBox__item:before {
position: absolute;
counter-increment: number;
content: counter(number);
display: block;
width: 3rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #bfbfbf;
color: #fff;
z-index: 5;
}
.rankingBox__item:nth-child(1):before {
background: #ecd357;
}
.rankingBox__item:nth-child(2):before {
background: #a9c6d5;
}
.rankingBox__item:nth-child(3):before {
background: #c58459;
}
.rankingBox__contents {
padding: 10px 20px;
}
.rankingBox__inner::-webkit-scrollbar {
height: 10px;
}
.rankingBox__inner::-webkit-scrollbar-track {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) inset;
background-color: #f2f2f2;
border-radius: 10px;
}
.rankingBox__inner::-webkit-scrollbar-thumb {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) inset;
background-color: #3f3f3f;
border-radius: 10px;
}
.snsFooter {
background: #303841;
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5) inset;
}
.snsFooter__list {
list-style: none;
text-align: center;
}
.snsFooter__item {
display: inline-block;
color: #fff;
margin: 10px 0;
}
.snsFooter__link {
display: inline-block;
padding: 10px;
border-radius: 5px;
transition: 0.15s;
}
.snsFooter__link:hover {
background: rgba(255, 255, 255, 0.15);
}
.bottomFooter {
position: relative;
background: #191919;
padding: 40px 0;
}
.bottomFooter__navi {
margin-bottom: 20px;
}
.bottomFooter__list {
list-style: none;
text-align: center;
}
.bottomFooter__list li {
display: inline-block;
color: #fff;
font-size: 1.4rem;
font-weight: 700;
}
.bottomFooter__list li a {
display: block;
margin: 0 10px;
line-height: 1.5;
border-bottom: 2px solid transparent;
transition: 0.15s;
}
.bottomFooter__list li a:hover {
animation: flash 1s;
border-color: #fff;
}
.bottomFooter__copyright {
text-align: center;
color: #bfbfbf;
letter-spacing: 0.5px;
line-height: 1.75;
}
.bottomFooter__link {
font-weight: 700;
color: #fff;
transition: 0.15s;
}
.bottomFooter__link:hover {
animation: flash 1s;
border-bottom: 1px solid;
}
.bottomFooter__topBtn:before {
content: "";
position: absolute;
top: 50%;
right: 50%;
transform: rotate(-45deg);
margin-top: -3px;
margin-right: -6px;
width: 12px;
height: 12px;
border-top: 3px solid;
border-right: 3px solid;
transition: 0.3s;
}
.bottomFooter__topBtn:hover {
opacity: 0.75;
}
.widget {
position: relative;
margin: 0 auto 15px;
}
.widgetTab {
background-color: #fff;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
margin: 0 auto;
}
.widgetTab__menu {
display: flex;
}
.widgetTab__item {
flex: 1;
padding: 10px;
height: auto;
background: #f2f2f2;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
line-height: 1.5;
text-align: center;
display: block;
float: left;
font-size: 1.2rem;
font-weight: 700;
transition: 0.3s;
cursor: pointer;
}
.widgetTab__item:first-child {
border-left: 0;
}
.widgetTab__item:hover {
background: #fff;
border-top: 2px solid #a83f3f;
}
input[name="widgetTab__item"] {
display: none;
}
.widgetTab__content {
display: none;
width: 100%;
padding: 0 20px 20px;
overflow: hidden;
}
.widgetTab__content.current {
display: block;
}
.widgetTab__item.current {
background: #fff;
border-top: 2px solid #a83f3f;
border-bottom: 1px solid #fff;
}
.widget img {
max-width: 100%;
height: auto;
}
.widget ul {
list-style-type: none;
}
.widget > ul {
border-top: dotted 1px rgba(0, 0, 0, 0.1);
}
.widget ul.menu {
border-top: dotted 1px rgba(0, 0, 0, 0.1);
}
.widget ul li {
position: relative;
}
.widget.widget_archive ul li a,
.widget.widget_nav_menu ul li a,
.widget.widget_meta ul li a,
.widget.widget_pages ul li a {
display: block;
border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
line-height: 1.5;
padding: 15px 10px;
transition: 0.15s;
}
.widget ul li a:hover {
color: #a83f3f;
}
.widget ul li a.widgetAfTag__btnDetail:hover,
.widget ul li a.widgetAfTag__btnAf:hover,
.widget ul li a.afTagBox__btnDetail:hover,
.widget ul li a.afTagBox__btnAf:hover {
color: #fff;
}
.widget.widget_rss .rss-widget-icon {
display: none;
}
.widget.widget_rss ul li {
display: block;
border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
line-height: 1.5;
padding: 15px 10px;
text-decoration: none;
}
.widget.widget_rss ul li a {
display: block;
}
.widget.widget_rss .rsswidget {
font-weight: 700;
display: block;
}
.widget.widget_rss .rsswidget:hover {
color: #a83f3f;
}
.widget.widget_rss .rss-date {
display: block;
font-size: 1.2rem;
color: rgba(0, 0, 0, 0.5);
margin-top: 5px;
font-weight: 400;
}
.widget.widget_rss .rss-date::before {
font-family: "icomoon";
content: "\e957";
margin-right: 5px;
line-height: 1;
}
.widget.widget_rss .rssSummary {
color: rgba(0, 0, 0, 0.75);
margin-top: 10px;
line-height: 1.85;
font-size: 1.2rem;
}
.widget.widget_rss cite {
display: block;
margin-top: 10px;
}
.widgetProfile {
text-align: center;
}
.widgetProfile__img {
width: 120px;
height: 120px;
margin: 0 auto 10px;
overflow: hidden;
}
.widgetProfile__img img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
font-family: "object-fit:cover;";
}
.widgetProfile__name {
font-size: 1.5rem;
margin: 0 auto 10px;
}
.widgetProfile__text {
color: rgba(0, 0, 0, 0.75);
margin: 20px auto;
line-height: 1.85;
text-align: left;
}
.widgetProfile__sns {
padding: 20px 17.5px 15px;
margin-top: 20px;
background: #a83f3f;
}
.widgetProfile__snsTitle {
color: #fff;
font-size: 1.4rem;
margin-bottom: 10px;
}
.widgetProfile__snsList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.widgetProfile__snsItem {
margin: 5px 2.5px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
padding: 0;
margin: 0 auto;
font-size: 14px;
text-align: center;
color: #fff;
border-radius: 50%;
border: 1px solid;
transition: 0.15s;
}
.widgetProfile__snsItem .widgetProfile__snsLink:hover {
color: #fff;
border-color: transparent;
}
.widgetProfile__snsLink:hover.icon-facebook {
background: #3b5998;
}
.widgetProfile__snsLink:hover.icon-twitter {
background: #00b0ed;
}
.widgetProfile__snsLink:hover.icon-instagram {
background: radial-gradient(
circle farthest-corner at 32% 106%,
#ffe17d 0%,
#ffcd69 10%,
#fa9137 28%,
#eb4141 42%,
transparent 82%
),
linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}
.widgetProfile__snsLink:hover.icon-youtube {
background: #cd201f;
}
.widgetProfile__snsLink:hover.icon-linkedin {
background: #0079ba;
}
.widgetProfile__snsLink:hover.icon-pinterest {
background: #ce0f19;
}
.widgetArchive {
list-style-type: none;
}
.widgetArchive__item {
position: relative;
padding-bottom: 0;
}
.widgetArchive__item:last-child {
padding-bottom: 0;
}
.widgetArchive__item.widgetArchive__item-normal {
display: flex;
align-items: flex-start;
}
.widgetArchive__item.widgetArchive__item-normal .widgetArchive__contents {
width: 100%;
margin-left: 15px;
}
.widgetArchive__item.widgetArchive__item-normal .widgetArchive__contents-none,
.widgetArchive__item .widgetArchive__contents-none {
margin-left: 45px;
}
.widgetArchive.widgetArchive-rank {
counter-reset: number;
}
.widgetArchive__item.widgetArchive__item-rank:before {
position: absolute;
counter-increment: number;
content: counter(number);
display: block;
width: 3rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #bfbfbf;
color: #fff;
z-index: 5;
}
.widgetArchive__item.widgetArchive__item-rank:nth-child(1):before {
background: #ecd357;
}
.widgetArchive__item.widgetArchive__item-rank:nth-child(2):before {
background: #a9c6d5;
}
.widgetArchive__item.widgetArchive__item-rank:nth-child(3):before {
background: #c58459;
}
.widgetSearch__flex {
display: flex;
}
.widgetSearch__input {
border: 2px solid #d8d8d8;
width: calc(100% - 4rem);
padding: 10px;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.widgetSearch__input.widgetSearch__input-max {
width: 100%;
}
.widgetSearch__input:hover {
border-color: #a83f3f;
}
.widgetSearch__submit {
width: 4rem;
cursor: pointer;
text-align: center;
background: #f2f2f2;
border-left: 0;
border-right: 2px solid #d8d8d8;
border-top: 2px solid #d8d8d8;
border-bottom: 2px solid #d8d8d8;
padding: 10px;
}
.widgetSearch__submit:hover {
background: #a83f3f;
color: #fff;
}
.widgetSearch__word {
list-style: none;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
border-top: none;
}
.widgetSearch__wordItem {
margin: 5px 5px 0 0;
}
.widgetSearch__wordItem a {
display: block;
padding: 5px 10px;
font-size: 1rem;
background: rgba(0, 0, 0, 0.05);
border-radius: calc(1rem + 10px);
transition: 0.15s;
}
.widgetSearch__wordItem a:hover {
color: #fff;
background: rgba(0, 0, 0, 0.75);
}
.widgetSearch__contents {
width: 100%;
margin-bottom: 20px;
}
.widgetSearch__tag {
width: 100%;
margin-bottom: 10px;
}
.widgetSearch__select {
cursor: pointer;
}
.widgetSearch__check {
display: none;
}
.widgetSearch__checkLabel {
position: relative;
display: inline-block;
padding-left: 2.5rem;
margin: 0 10px 10px 0;
line-height: 2rem;
cursor: pointer;
}
.widgetSearch__checkLabel:after,
.widgetSearch__checkLabel:before {
content: "";
position: absolute;
display: block;
}
.widgetSearch__checkLabel:after {
top: 0;
left: 0;
width: 2rem;
height: 2rem;
border: 2px solid #d8d8d8;
background: #fff;
}
.widgetSearch__checkLabel:hover:after {
border-color: #a83f3f;
}
.widgetSearch__check:checked .widgetSearch__checkLabel:before,
.widgetSearch__check:checked + .widgetSearch__checkLabel:before {
top: 0.35rem;
left: 0.75rem;
width: 0.5rem;
height: 1rem;
border-right: 2px solid #a83f3f;
border-bottom: 2px solid #a83f3f;
transform: rotate(45deg);
z-index: 9;
}
.t-middle {
font-size: 68.75%;
}
.t-large {
font-size: 75%;
}
.t-headerColor .siteTitle {
color: #fff;
}
.t-headerColor .searchBtn__link {
color: #fff;
}
.t-headerColor .menuBtn__link {
color: #fff;
}
.t-headerColor .globalNavi::before {
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(100%, #a83f3f)
);
}
.t-headerColor .globalNavi::after {
color: rgba(255, 255, 255, 0.5);
}
.t-headerColor .globalNavi__list li a {
color: #fff;
}
.t-headerColor .globalNavi__list .current_page_item > a,
.t-headerColor .globalNavi__list .current-menu-item > a,
.t-headerColor .globalNavi__list .current-menu-parent > a,
.t-headerColor .globalNavi__list .page_item a:hover,
.t-headerColor .globalNavi__list .menu-item a:hover {
border-color: rgba(255, 255, 255, 0.9);
color: rgba(255, 255, 255, 0.9);
}
.t-headerColor .globalNavi__list > li.page_item_has_children > a::before,
.t-headerColor .globalNavi__list > li.menu-item-has-children > a::before {
border-color: rgba(255, 255, 255, 0.5);
}
.t-headerCenter .siteTitle {
margin: 0 auto 10px;
padding-top: 5px;
text-align: center;
}
.t-headerCenter .searchBtn {
left: 0;
right: auto;
line-height: 1.25;
font-size: 16px;
text-align: center;
display: block;
}
.t-headerCenter .searchBtn__link {
display: block;
}
.t-headerCenter .searchBtn__link::after {
font-family: "Fjalla One";
content: "SEARCH";
font-size: 1rem;
display: block;
}
.t-headerCenter .menuBtn {
line-height: 1.25;
font-size: 16px;
text-align: center;
}
.t-headerCenter .menuBtn__link {
display: block;
}
.t-headerCenter .menuBtn__link::after {
font-family: "Fjalla One";
content: "MENU";
font-size: 1rem;
display: block;
}
.t-headerCenter .globalNavi {
padding-top: 5px;
}
.t-logoSp25 .siteTitle__logo {
height: 25px;
}
.t-logoSp30 .siteTitle__logo {
height: 30px;
}
.t-footerFixed {
padding-bottom: 0;
}
.u-none-pc {
display: block;
}
.u-none-sp {
display: none;
}
.globalNavi.u-none-sp {
display: none;
}
.u-mt-main {
margin-top: 40px;
}
.u-mt-sub {
margin-top: 30px;
}
.u-white {
color: #fff;
}
.u-whiteHalf {
color: rgba(255, 255, 255, 0.5);
}
.u-bold {
font-weight: 700;
}
.u-clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
}
.u-shadow {
background: #fff;
padding: 15px;
border-bottom: none;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.u-border {
background: #fff;
padding: 15px;
border: 1px solid #e2e2e2;
}
.u-shadowfix {
background: #fff;
padding: 15px;
border-bottom: none;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.u-borderfix {
background: #fff;
padding: 15px;
border: 1px solid #e2e2e2;
}
@media only screen and (min-width: 768px) {
body {
font-size: 14px;
}
.l-wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.l-main {
width: calc(70% - 30px);
margin-bottom: 0;
}
.l-main-wide {
width: 100%;
margin-right: 0;
}
.l-main-wide1000 {
width: 1000px;
margin: auto;
}
.l-main-wide900 {
width: 900px;
margin: auto;
}
.l-main-wide800 {
width: 800px;
margin: auto;
}
.l-main-wide700 {
width: 700px;
margin: auto;
}
.l-main-right {
order: 2;
}
.l-sidebar {
width: 30%;
}
.content .archiveScode__item .eyecatch {
width: 100px;
float: left;
margin: 0;
}
.eyecatch-main {
margin: 0 0 20px;
}
.eyecatch__cat-big a {
font-size: 1.4rem;
}
.heading-main {
font-size: 2.6rem;
margin-bottom: 30px;
}
.heading-main span {
font-size: 1.6rem;
}
.heading-primary span {
font-size: 1.6rem;
}
.heading-sub {
font-size: 2.2rem;
margin-bottom: 20px;
}
.heading-sub span {
font-size: 1.2rem;
}
.heading-secondary {
font-size: 1.6rem;
}
.heading-tertiary {
font-size: 1.6rem;
}
.dateList-main .dateList__item {
margin-right: 10px;
font-weight: 700;
}
.siteTitle__logo {
height: 30px;
}
.searchBtn__scroll {
padding: 0 40px;
}
.searchHead__keyword {
width: calc(70% - 40px);
margin: 0 40px 0 0;
order: 1;
overflow: visible;
}
.searchHead__title {
display: inline-block;
vertical-align: bottom;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
padding: 0 15px;
background: #a83f3f;
margin: 2px 5px 0 0;
border-radius: 5px;
}
.searchHead__keywordList {
display: inline-block;
}
.searchHead__keywordItem {
height: 30px;
line-height: 30px;
}
.searchHead__search {
width: 30%;
order: 2;
}
.searchHead__search-100 {
width: 100%;
}
.breadcrumb {
overflow: visible;
}
.breadcrumb__list {
list-style: none;
display: block;
}
.breadcrumb__item {
display: block;
float: left;
}
.social-bottom {
margin-top: 60px;
}
.socialList__item {
height: 50px;
line-height: 50px;
}
.snsFollow {
margin-top: 60px;
}
.related {
margin-top: 60px;
}
.content {
font-size: 14px;
}
.content .btn__link-primary {
padding: 20px 50px;
}
.content .column {
display: flex;
position: relative;
}
.content .column__item {
flex: 1;
margin-left: 20px;
margin-top: 0;
}
.content .column__item:first-child {
margin-left: 0;
}
.content .column-2pc37 .column__item:first-child {
flex: 3;
}
.content .column-2pc37 .column__item:last-child {
flex: 7;
}
.content .column-2pc73 .column__item:first-child {
flex: 7;
}
.content .column-2pc73 .column__item:last-child {
flex: 3;
}
.content h2 {
font-size: 2.6rem;
}
.content h3 {
font-size: 2.2rem;
}
.content h4 {
font-size: 1.8rem;
}
.content h5 {
font-size: 1.6rem;
}
.widgetFooter {
display: flex;
justify-content: space-between;
width: calc(100% + 20px);
}
.widgetFooter__box {
flex-grow: 1;
width: calc(33.3333% - 20px);
margin-right: 20px;
}
.widget:last-child {
margin-bottom: 0;
}
.t-footerFixed {
padding-bottom: 0;
}
.u-border {
padding: 12px;
}
.u-shadowfix {
padding: 20px;
}
.u-borderfix {
padding: 12px;
}
}
@media only screen and (min-width: 992px) {
.l-header {
padding: 0;
}
.l-wrapper {
margin: 60px 20px;
}
.l-wrapper-lp {
margin: 0 20px;
}
.l-main {
width: calc(70% - 40px);
margin-bottom: 0;
}
.l-main-wide {
width: 100%;
margin-right: 0;
}
.l-main-wide1000 {
width: 1000px;
margin: auto;
}
.l-main-wide900 {
width: 900px;
margin: auto;
}
.l-main-wide800 {
width: 800px;
margin: auto;
}
.l-main-wide700 {
width: 700px;
margin: auto;
}
.l-main-right {
order: 2;
}
.container {
margin-left: 20px;
margin-right: 20px;
}
.container-header {
display: flex;
align-items: center;
min-height: 70px;
}
.divider {
margin-top: 60px;
margin-bottom: 60px;
}
.dividerTop {
margin-top: 60px;
}
.dividerBottom {
margin-bottom: 60px;
}
.heading-main {
font-size: 3rem;
}
.heading-main span {
font-size: 1.8rem;
}
.heading-primary/*PCのh1*/ {
font-size: 20px;
}
.heading-primary span {
font-size: 1.4rem;
}
.heading-sub {
font-size: 1.4rem;
}
.heading-sub span {
font-size: 1.4rem;
}
.heading-secondary {
font-size: 1.8rem;
}
.heading-tertiary {
font-size: 1.7rem;
}
.siteTitle {
max-width: 340px;
font-size: 24px;
margin: 0 20px 0 0;
}
.searchBtn {
position: static;
top: auto;
right: auto;
text-align: center;
}
.searchBtn-right {
margin-left: auto;
}
.searchBtn__link {
display: block;
width: 50px;
height: 70px;
line-height: 70px;
font-size: 14px;
}
.menuBtn {
position: static;
top: auto;
right: auto;
text-align: center;
}
.menuBtn-right {
margin-left: auto;
}
.menuBtn__link {
display: block;
width: 50px;
height: 70px;
line-height: 70px;
font-size: 14px;
background: #a83f3f;
color: #fff;
}
.menuBtn__link:hover {
background: #191919;
color: #fff;
}
.globalNavi::before {
content: none;
}
.globalNavi::after {
content: none;
}
.globalNavi__inner {
overflow: visible;
}
.globalNavi__list,
.globalNavi__list .children,
.globalNavi__list .sub-menu {
list-style: none;
display: block;
}
.globalNavi__list li {
position: relative;
width: auto;
height: calc(1.4rem + 20px);
line-height: 1;
display: inline-block;
}
.globalNavi__list li a {
float: none;
white-space: normal;
color: #fff;
padding: 10px 0;
}
.globalNavi__list > li.page_item_has_children > a,
.globalNavi__list > li.menu-item-has-children > a {
position: relative;
padding-right: 10px;
}
.globalNavi__list > li.page_item_has_children > a:hover,
.globalNavi__list > li.menu-item-has-children > a:hover {
border-bottom: none;
}
.globalNavi__list > li.page_item_has_children > a::before,
.globalNavi__list > li.menu-item-has-children > a::before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
margin-top: -6px;
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
border-right: solid 1px rgba(0, 0, 0, 0.5);
transform: rotate(45deg);
}
.globalNavi__list > li.page_item_has_children:hover > a::before,
.globalNavi__list > li.menu-item-has-children:hover > a::before {
margin-top: -2.5px;
transform: rotate(-135deg);
}
.globalNavi__list > li .children,
.globalNavi__list > li .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
transition: 0.15s;
}
.globalNavi__list > li:hover .children::before,
.globalNavi__list > li:hover .sub-menu::before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: 10px;
border-right: 4px solid transparent;
border-bottom: 6px solid #323232;
border-left: 4px solid transparent;
}
.globalNavi__list > li .children > li,
.globalNavi__list > li .sub-menu > li {
display: block;
overflow: hidden;
width: auto;
min-width: 300px;
height: 0;
line-height: 5rem;
white-space: nowrap;
background-color: #323232;
transition: 0.15s;
text-align: left;
}
.globalNavi__list > li:hover .children > li,
.globalNavi__list > li:hover .sub-menu > li {
overflow: visible;
height: 5rem;
line-height: 5rem;
}
.globalNavi__list > li:hover .children > li:not(:first-child),
.globalNavi__list > li:hover .sub-menu > li:not(:first-child) {
border-top: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
}
.globalNavi__list > li .children > li a,
.globalNavi__list > li .sub-menu > li a {
color: rgba(255, 255, 255, 0);
transition: 0.15s;
padding: 0 10px;
margin: 0;
font-weight: 400;
}
.globalNavi__list > li:hover .children > li a,
.globalNavi__list > li:hover .sub-menu > li a {
color: rgba(255, 255, 255, 1);
}
.globalNavi__list > li:hover .children > li a:hover,
.globalNavi__list > li:hover .sub-menu > li a:hover {
border-bottom: none;
background: rgba(255, 255, 255, 0.15);
}
.subNavi {
display: block;
margin-left: auto;
}
.subNavi__list {
list-style: none;
display: flex;
}
.subNavi__link {
display: block;
font-size: 14px;
margin-right: 5px;
padding: 10px 0;
text-align: center;
width: 30px;
color: rgba(0, 0, 0, 0.5);
transition: 0.15s;
}
.subNavi__link-pickup {
font-size: 1.4rem;
width: auto;
margin-right: 15px;
padding: 9px 10px;
border-radius: 5px;
color: #a83f3f;
border: 1px solid;
white-space: nowrap;
}
.subNavi__link-pickup:hover {
background: #a83f3f;
color: #fff;
border-color: transparent;
}
.subNavi__link.icon-facebook2:hover {
color: #3b5998;
}
.subNavi__link.icon-twitter:hover {
color: #00b0ed;
}
.subNavi__link.icon-instagram:hover {
color: #e23f60;
}
.subNavi__link.icon-youtube:hover {
color: #cd201f;
}
.subNavi__link.icon-linkedin:hover {
color: #0079ba;
}
.subNavi__link.icon-pinterest:hover {
color: #ce0f19;
}
.subNavi__link.icon-rss:hover {
color: #f90;
}
.pickupHead .pickupHead__inner {
margin-left: 20px;
margin-right: 20px;
}
.keyBig {
margin-left: 20px;
margin-right: 20px;
}
.pickup3 {
padding-top: 60px;
}
.pickup3__bg {
height: 16rem;
}
.pickup3__item-first {
width: calc(70% - 40px);
margin-right: 40px;
}
.postcta-bg,
.pagecta-bg {
padding: 30px;
}
.rankingBox {
padding-top: 60px;
}
.rankingBox__bg {
height: 16rem;
}
.widgetFooter {
display: flex;
justify-content: space-between;
width: calc(100% + 30px);
}
.widgetFooter__box {
flex-grow: 1;
width: calc(33.3333% - 30px);
margin-right: 30px;
}
.bottomFooter {
padding: 60px 0;
}
.bottomFooter__list li {
font-size: 1.6rem;
}
.t-headerColor .searchBtn__link {
color: rgba(255, 255, 255, 0.5);
}
.t-headerColor .searchBtn__link:hover {
color: rgba(255, 255, 255, 1);
}
.t-headerColor .menuBtn__link {
background: #fff;
color: #191919;
}
.t-headerColor .menuBtn__link:hover {
background: #191919;
color: #fff;
}
.u-border {
padding: 12px;
}
}
@media only screen and (min-width: 1139px) {
.l-wrapper {
margin-left: auto;
margin-right: auto;
}
.container {
margin-left: auto;
margin-right: auto;
}
}
.widgetSearch__input:hover {
border-color: #2c3e66;
}
.widgetSearch__submit:hover {
background-color: #2c3e66;
}
.widgetProfile__sns {
background-color: #2c3e66;
}
.widget.widget_calendar .calendar_wrap tbody a:hover {
background-color: #2c3e66;
}
.widget ul li a:hover {
color: #2c3e66;
}
.widget.widget_rss .rsswidget:hover {
color: #2c3e66;
}
.widget.widget_tag_cloud a:hover {
background-color: #2c3e66;
}
.widget select:hover {
border-color: #2c3e66;
}
.widgetSearch__checkLabel:hover:after {
border-color: #2c3e66;
}
.widgetSearch__check:checked .widgetSearch__checkLabel:before,
.widgetSearch__check:checked + .widgetSearch__checkLabel:before {
border-color: #2c3e66;
}
.widgetTab__item.current {
border-top-color: #2c3e66;
}
.widgetTab__item:hover {
border-top-color: #2c3e66;
}
.searchHead__title {
background-color: #333;
}
.searchHead__submit:hover {
color: #2c3e66;
}
.menuBtn__close:hover {
color: #2c3e66;
}
.menuBtn__link:hover {
color: #2c3e66;
}
@media only screen and (min-width: 992px) {
.menuBtn__link {
background-color: #2c3e66;
}
}
.searchBtn__link:hover {
color: #2c3e66;
}
.heading a:hover {
color: #2c3e66;
}
.eyecatch__cat {
background-color: #2c3e66;
}
.bottomFooter__topBtn {
background-color: #2c3e66;
}
body {
background: #f0f4f3;
margin: 0 auto;
}
.t-headerColor .l-header {
background-color: #303841;
}
.t-headerColor .globalNavi::before {
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(100%, #1e2e53)
);
}
.t-headerColor .subNavi__link-pickup:hover {
color: #1e2e53;
}
.widget-main .heading.heading-widget {
background-color: #2c3e66;
}
.widget-main .heading.heading-widgetsimple {
background-color: #2c3e66;
}
.widget-main .heading.heading-widgetsimplewide {
background-color: #2c3e66;
}
.widget-main .heading.heading-widgetwide {
background-color: #2c3e66;
}
.widget-main .heading.heading-widgetbottom:before {
border-color: #2c3e66;
}
.widget-main .heading.heading-widgetborder {
border-color: #2c3e66;
}
.widget-main .heading.heading-widgetborder::before,
.widget-main .heading.heading-widgetborder::after {
background-color: #2c3e66;
}
.widget-side .heading.heading-widget {
background-color: #393f50;
}
.widget-side .heading.heading-widgetsimple {
background-color: #393f50;
}
.widget-side .heading.heading-widgetsimplewide {
background-color: #393f50;
}
.widget-side .heading.heading-widgetwide {
background-color: #393f50;
}
.widget-side .heading.heading-widgetbottom:before {
border-color: #393f50;
}
.widget-side .heading.heading-widgetborder {
border-color: #393f50;
}
.widget-side .heading.heading-widgetborder::before,
.widget-side .heading.heading-widgetborder::after {
background-color: #393f50;
}
.widget-foot .heading.heading-widget {
background-color: #393f50;
}
.widget-foot .heading.heading-widgetsimple {
background-color: #393f50;
}
.widget-foot .heading.heading-widgetsimplewide {
background-color: #393f50;
}
.widget-foot .heading.heading-widgetwide {
background-color: #393f50;
}
.widget-foot .heading.heading-widgetbottom:before {
border-color: #393f50;
}
.widget-foot .heading.heading-widgetborder {
border-color: #393f50;
}
.widget-foot .heading.heading-widgetborder::before,
.widget-foot .heading.heading-widgetborder::after {
background-color: #393f50;
}
.widget-menu .heading.heading-widget {
background-color: #393f50;
}
.widget-menu .heading.heading-widgetsimple {
background-color: #393f50;
}
.widget-menu .heading.heading-widgetsimplewide {
background-color: #393f50;
}
.widget-menu .heading.heading-widgetwide {
background-color: #393f50;
}
.widget-menu .heading.heading-widgetbottom:before {
border-color: #393f50;
}
.widget-menu .heading.heading-widgetborder {
border-color: #393f50;
}
.widget-menu .heading.heading-widgetborder::before,
.widget-menu .heading.heading-widgetborder::after {
background-color: #393f50;
}
.still {
height: 200px;
}
@media only screen and (min-width: 768px) {
.still {
height: 400px;
}
}
.pickupHead {
background-color: #393f50;
}
.rankingBox__bg {
background-color: #393f50;
}
.cc-bg2 {
background-color: #c5593e;
}
.cc-bg7 {
background-color: #c5593e;
}
.content a {
color: #448acb;
}
.content a:hover,
.content a:active,
.content a:focus {
color: #00008b;
}
.searchBtn__contentInner .btn__link-search {
color: #fff;
background-color: #c5593e;
}
.btn__link-secondary {
color: #fff;
background-color: #c5593e;
}
.btn__link-search {
color: #fff;
background-color: #c5593e;
}
.content h2 {
padding: 10px;
background: #393f50;
color: #fff;
font-size: 16px;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
}
.content h3 {
padding: 0.25em 0 0.3em 0.45em;
border-left: 6px solid #393f50;
font-size: 16px;
margin-bottom: 0.8em;
line-height: 1.3em;
background: none;
height: auto;
width: auto;
color: #444;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
font-weight: 600;
}
.content h4 {
padding: 0.25em 0 0.3em 0.45em;
border-left: 6px solid #bcc4cc;
font-size: 14px;
margin-bottom: 0.8em;
line-height: 1.1em;
background: none;
height: auto;
width: auto;
color: #444;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Meiryo,
"メイリオ", Osaka, MS PGothic, arial, helvetica, sans-serif;
font-weight: 600;
}
.content h5 {
color: #191919;
}
table {
width: 100%;
margin: 1em 0;
padding: 0;
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 0.4em 0.8em;
font-size: 1.4rem;
vertical-align: middle;
}
th {
border: 1px solid #161616;
background-color: #efefef;
color: #fff;
font-weight: 700;
text-align: left;
}
td {
border: 1px solid #161616;
}
td a {
font-weight: 700;
}
th a {
font-weight: 700;
}
tbody th {
background: #efefef;
border: 1px solid #161616;
color: #444;
text-align: center;
}
.v-res_wrap {
max-width: 500px;
margin: auto;
margin-bottom: 40px;
}
.v-res {
position: relative;
overflow: hidden;
height: 0;
padding-top: 30px;
padding-bottom: 56.25%;
}
.v-res iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.news_parent_box {
margin: 0 0 5px;
display: table;
width: 100%;
border: 1px solid #747c94;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px 0;
}
.news_frame {
padding: 10px;
transform: scale(1);
min-height: 80px;
background-color: #ffffff80;
overflow: hidden;
}
.news_frame:hover {
filter: brightness(0.95);
}
.news_frame_img {
width: 60px;
height: 60px;
position: relative;
float: left;
margin-right: 10px;
}
.news_frame_img img {
width: 60px;
height: 60px;
object-fit: cover;
display: block;
padding: 3px;
box-shadow: 0 0 3px #888;
}
.thumnail {
object-fit: cover;
width: 60px;
height: 60px;
}
.news_frame_day {
display: table-cell;
padding-left: 0;
position: absolute;
top: 4px;
left: 90px;
font-size: 9px;
font-weight: 700;
color: #6d7f8b;
}
.news_frame_title {
margin-left: 70px;
margin-top: 5px;
font-size: 13px;
font-weight: 700;
color: #444;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-clamp: 2;
}
.news_frame_text {
margin-left: 70px;
margin-top: 5px;
font-size: 12px;
font-weight: 700;
color: #6d7f8b;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-clamp: 2;
}
span.slot {
color: #fff;
background: #fe2e2e;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
border-radius: 2px;
}
span.pachinko {
color: #fff;
background: #06f;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
border-radius: 2px;
}
span.ps4 {
color: #fff;
background: #06f;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
}
span.switch {
color: #fff;
background: #fe2e2e;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
}
span.app {
color: #fff;
background: #3c9;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
}
span.pc {
color: #fff;
background: #696969;
padding: 1px 3px 0;
margin-right: 3px;
font-size: 10px;
}
a.pagebtn {
display: block;
text-decoration: none;
background: #fff;
border: solid 2px #3381e8;
text-align: center;
margin: 0;
padding: 7px;
font-size: 14px;
line-height: 21px;
font-weight: 700;
border-radius: 2px;
}
a.pagebtn:hover {
color: #fff;
background: #3381e8;
}
body .pagebtn {
color: #3381e8;
}
p.koushin {
margin: 0;
padding: 0;
font-size: 14px;
color: #7b7b7b;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
line-height: 1.8em;
}
p.description {
color: gray;
font-size: 14px;
}
p.copyright {
margin: 20px 0;
padding: 0;
font-size: 12px;
color: gray;
line-height: 1.4;
}
.menu-list {
width: 100%;
}
ul,
li {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
ol,
ul {
list-style: none;
}
.menu-list ul li a {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
font-size: 14px;
font-weight: 700;
position: relative;
display: block;
padding: 8px 10px 6px 15px;
border-bottom: 1px solid #dde4e6;
}
.menu-list ul li a::before,
.menu-list ul li a::after {
position: absolute;
top: 50%;
right: 5px;
display: block;
content: "";
width: 12px;
height: 3px;
background-color: #888;
border-radius: 4px;
}
.menu-list ul li a::before {
margin-top: -4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-list ul li a::after {
margin-top: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bg-color-good {
padding: 5px;
background-color: #fcc;
}
table.top_naka_table {
font-size: 13px;
padding: 2px;
}
table.top_naka_table a {
display: block;
}
#main_contents table.top_naka_table td {
padding: 6px 4px;
}
.top_naka_table__line {
display: none;
}
.top_naka_table .top_naka_table__line {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
box-sizing: border-box;
display: block;
width: 100%;
height: 1px;
margin: 0.5em 0;
border-bottom: 1px dotted #d1d8e2;
border-top: none;
border-right: none;
border-left: none;
color: #dde4e6;
}
.top_naka_table .top_naka_table__line {
border-color: #3e738a;
}
.article-news-wrap {
margin: 0 0 5px;
display: table;
width: 100%;
border: 1px solid #244e81;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px 0;
}
.article-news-list {
padding: 10px;
transform: scale(1);
height: 80px;
background-color: #ffffff80;
}
.article-news-list:hover {
filter: brightness(0.95);
}
.article-news-list_img {
width: 100%;
height: 100%;
position: relative;
}
.article-news-list_img img {
width: 100px;
height: 100%;
object-fit: cover;
display: block;
float: left;
padding: 3px;
box-shadow: 0 0 3px #888;
}
.article-news-list_day {
display: table-cell;
padding-left: 0;
position: absolute;
top: 4px;
left: 120px;
font-size: 9px;
font-weight: 700;
color: #6d7f8b;
}
.article-news-list_title {
position: absolute;
top: 14px;
left: 120px;
font-size: 13px;
font-weight: 700;
color: #444;
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.article-news-list_text {
display: table-cell;
padding-left: 0;
position: absolute;
top: 40px;
left: 120px;
font-size: 12px;
font-weight: 700;
color: #6d7f8b;
width: 70%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.toc-area {
position: relative;
margin: 30px auto;
border: 1px solid #747c94;
}
ul.cp_list {
padding: 0.5em;
list-style-type: none;
}
ul.cp_list li {
position: relative;
padding: 0 0.3em 0.3em 1.3em;
}
ul.cp_list li::before {
position: absolute;
content: "";
display: block;
top: 0.5em;
left: 0;
width: 6px;
height: 6px;
border-right: 3px solid #747c94;
border-bottom: 3px solid #747c94;
transform: rotate(-45deg);
}
.toc_title {
padding: 10px;
background-color: #747c94;
color: #fff;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.ads_col2 {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.box_notice {
position: relative;
margin: 20px auto;
border: 1px solid #ea2a3d;
}
.box_title {
padding: 10px;
background-color: #ea2a3d;
color: #fff;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.tab-wrap:after {
content: "";
width: 100%;
height: 3px;
background: #747c94;
display: block;
order: -1;
}
.tab-label {
color: #fff;
background: LightGray;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
white-space: nowrap;
text-align: center;
padding: 10px 0.5em;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
}
.tab-label:not(:last-of-type) {
margin-right: 5px;
}
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
.tab-switch:checked + .tab-label {
background: #747c94;
}
.tab-switch:checked + .tab-label + .tab-content {
height: auto;
overflow: auto;
padding: 15px;
opacity: 1;
transition: 0.5s opacity;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.tab-switch {
display: none;
}
.box_style_red .box_inner {
background-color: #fff8f9;
}
.box_style_red .list_style02 li::before,
.box_style_red .box_style_title span {
background-color: #d94b59;
}
.p10 {
padding: 10px !important;
}
.related-entry-list {
margin: 0 0 40px;
padding: 0;
line-height: 1.5;
}
.related-entry-list li {
position: relative;
list-style: none;
overflow: hidden;
margin-bottom: 10px;
background: #fff;
border: 1px solid #747c94;
}
.related-entry-list .related-entry_title a {
color: #3982c6;
font-weight: 700;
text-decoration: none;
}
.related-entry_title a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
.related-entry-list .related-entry_title a:hover,
.related-entry-list .related-entry_title a:active,
.related-entry-list .related-entry_title a:focus {
color: #00008b;
}
.related-entry-list_style01 > .entry-list_item {
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #ccc;
border-radius: 0;
}
.related-entry-list_style01 > .entry-list_item:last-child {
border-bottom: 1px solid #ccc;
}
.related-entry-list_style01 .related-entry_inner {
overflow: hidden;
font-size: 1.4rem;
}
.related-entry-list_style01 .related-entry_title {
margin: 0;
padding: 15px;
overflow: hidden;
color: #000;
font-size: 1.2rem;
}
.related-entry-list_style01 .related-entry_thumb {
position: relative;
float: left;
width: 90px;
height: 90px;
margin: 0;
overflow: hidden;
text-align: center;
}
.related-entry-list_style01 .related-entry_thumb img {
position: absolute;
top: 80%;
left: 50%;
max-width: none;
height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.col1 .related-entry-list_style01 {
letter-spacing: -0.5em;
}
.col1 .related-entry-list_style01 .related-entry-list_item {
display: inline-block;
width: 47%;
height: 90px;
margin-right: 2%;
vertical-align: top;
letter-spacing: 0;
}
.col1 .related-entry-list_style01 .related-entry-list_item:nth-child(2n) {
margin-right: 0;
}
.related-entry-list_style01 .related-entry_title {
padding: 20px 15px;
}
.related-entry-list .related-entry_title a {
display: block;
overflow: hidden;
}
.dl_style02 {
margin: 1em 0;
}
.dl_style02 dt,
.dl_style02 dd {
padding: 10px;
}
.dl_style02 dt {
display: block;
background: #e16428;
color: #fff;
font-weight: 700;
}
.dl_style02 dd {
background: #efefef;
}
.bdr,
.bdr_gray {
border: 1px solid #ccc;
}
.bdr_red {
border: 1px solid #e00000;
}
.bdr_blue {
border: 1px solid #0329ce;
}
.bdr_green {
border: 1px solid #01995e;
}
.bdr_yellow {
border: 1px solid #ffe400;
}
.bdr_navy {
border: 1px solid #133d94;
}
.bdr_orange {
border: 1px solid #eca100;
}
.bdr_pink {
border: 1px solid #eb67b5;
}
.bdr_lime {
border: 1px solid #2abe0d;
}
.bdr_aqua {
border: 1px solid #0baedd;
}
.bdr_black {
border: 1px solid #000;
}
.red {
color: red;
}
.blue {
color: #00f;
}
.green {
color: green;
}
.skyblue {
color: #00bfff;
}
.gold {
color: #ffd700;
}
.orange {
color: orange;
}
.violet {
color: #9400d3;
}
.purple {
color: purple;
}
.lightgray {
color: #ccc;
}
.p-PortalsNewsContent .a-outline {
border-bottom: 2px solid #aaa;
padding-bottom: 20px;
}
.p-PortalsNewsContent .a-outline p {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 700;
color: var(--theme-color);
padding: 0;
background-color: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
margin-bottom: 10px;
}
.p-PortalsNewsContent .a-outline p svg {
flex-shrink: 0;
position: relative;
top: 0;
display: inline-block;
margin: 0 6px 0 0;
fill: var(--theme-color);
width: 14px;
height: 14px;
}
.p-PortalsNewsContent .a-outline p::after {
content: "";
display: inline-block;
height: 2px;
width: 100%;
margin-left: 10px;
background-color: #ccc;
}
.p-PortalsNewsContent .a-outline ul {
background-color: #fff;
box-shadow: none;
padding: 0;
}
.p-PortalsNewsContent .a-outline ul li {
color: #000;
font-size: 16px;
line-height: 31px;
display: block;
margin: 0;
list-style: none;
padding: 0;
font-weight: 700;
width: calc(100% + 15px);
border-top: none;
}
.p-PortalsNewsContent .a-outline li a {
color: #000;
font-size: 16px;
line-height: 24px;
display: inline;
margin: 0;
list-style: none;
padding: 0;
font-weight: 400;
width: calc(100% + 15px);
border-bottom: 1px solid #000;
}
.p-PortalsNewsContent .a-outline li a::after {
display: none;
}
.p-PortalsNewsContent .a-outline ul li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin: 0 10px 0 3px;
border-radius: 4px;
background-color: var(--theme-color);
}
.a-outline {
margin: 20px 0;
width: 100%;
border: 1px solid #747c94;
}
.a-outline p {
line-height: 2.1rem;
font-weight: 700;
color: #fff;
padding: 8px 0 8px 8px;
background-color: #747c94;
}
.a-outline p svg {
position: relative;
top: 2px;
display: inline-block;
margin: 0 6px 0 0;
fill: #313131;
width: 14px;
height: 14px;
}
.a-outline ul {
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px 0;
position: relative;
display: block;
padding: 2px 0 2px 15px;
background-color: #fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.a-outline li {
position: relative;
border-top: 1px solid #ccc;
}
.a-outline li:first-child {
border-top: none;
}
.a-outline li a {
font-size: 1.4rem;
line-height: 2.1rem;
display: block;
margin: 0 0 0 -15px;
padding: 8px 10px 6px 15px;
font-weight: 700;
width: calc(100% + 15px);
}
.a-outline li a:hover {
text-decoration: none;
background: #fff;
}
.a-outline li a::after {
display: inline-block;
color: #90a4ae;
position: absolute;
}
.a-outline li a.a-outline__tree::before {
position: relative;
margin: 0 7px 0 12px;
content: "-";
color: #90a4ae;
display: inline-block;
top: -2px;
left: 0;
background-size: contain;
background-repeat: no-repeat;
width: 6px;
height: 6px;
}
blockquote {
position: relative;
margin: 0 0 2.5em;
padding: 20px 25px;
color: #555;
background: #f4f4f4;
}
blockquote::before,
blockquote::after {
position: absolute;
font-size: 16px;
color: #999;
}
.link-ref,
.article-body .link-ref {
margin-bottom: 0;
font-size: 1.4rem;
text-align: right;
}
/* 機械割テーブル専用 */
table.kikai-spec {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 10px 0;
table-layout: fixed;
}
/* 共通セル */
table.kikai-spec th,
table.kikai-spec td {
border: 1px solid #161616;
padding: 0.4em 0.8em;
text-align: center;
color: #161616;
background: #fff;
vertical-align: middle;
font-size: 1.4rem;
overflow-wrap: anywhere;
}
/* ヘッダー行 */
table.kikai-spec thead th {
background: #efefef;
font-weight: 700;
}
/* 行見出しと1列目 */
table.kikai-spec tbody th[scope="row"],
table.kikai-spec tbody td:first-child {
background: #efefef;
font-weight: 700;
width: 20%;
}
/* 機械割テーブル詳細スタイル */
.content table.kikai-spec th,
.content table.kikai-spec td {
border: 1px solid #161616;
padding: 0.4em 0.8em;
vertical-align: middle;
text-align: center;
color: #161616;
background: #fff;
overflow-wrap: anywhere;
font-size: 1.4rem;
}
.content table.kikai-spec thead th {
background: #efefef;
font-weight: 700;
}
.content table.kikai-spec tbody th[scope="row"],
.content table.kikai-spec tbody td:first-child {
background: #efefef;
font-weight: 700;
width: 20%;
}
/* 機械割テーブル追加スタイル */
.content table.kikai-spec {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 10px 0;
font-size: 14px;
}
.content table.kikai-spec tbody th[scope="row"] {
line-height: 1.6;
}
.content table.kikai-spec td a,
.content table.kikai-spec th a {
font-weight: 700;
}
/* 1列目の幅を固定 */
.content table.kikai-spec thead > tr > th:first-child,
.content table.kikai-spec tbody > tr > :is(th[scope="row"], td):first-child {
width: 20%;
}
/* 数値だけの1列目（設定1〜6など）を中央寄せにしたい時は
テーブルに .is-numeric を付与して有効化 */
.kikai-spec.is-numeric th[scope="row"] {
text-align: center;
}
/* ===============================
Clean pack（重複なし・安全上書き）
=============================== */
/* 画像を中央寄せ（テーマと衝突しにくいよう .content も許容） */
img.aligncenter,
.content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
/* アクセシビリティ用：視覚的に非表示 */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ===============================
<dl class="spec--tablelike"> を表風に
（左列=dt だけ太字＆中央、右列=dd は通常）
=============================== */
.spec--tablelike {
display: grid;
grid-template-columns: 35% 65%;
border: 1px solid #161616;
}
.spec--tablelike > dt,
.spec--tablelike > dd {
margin: 0;
padding: 0.6rem 0.8rem;
border-top: 1px solid #161616;
line-height: 1.6;
/* vertical-align は不要（ブロック要素には効かない） */
}
/* 左列=項目セル：上下左右センター */
.spec--tablelike > dt {
font-weight: 700;
text-align: center;
background: #efefef;
display: flex;
align-items: center; /* 上下センター */
justify-content: center; /* 左右センター */
}
/* 右列=値セル */
.spec--tablelike > dd {
border-left: 1px solid #161616;
font-weight: 400; /* normal */
text-align: left;
background: #fff; /* テーマの dd 背景にじみ防止 */
}
/* 1行目だけ上罫線を消す */
.spec--tablelike > dt:first-of-type,
.spec--tablelike > dd:first-of-type {
border-top: 0;
}
/* ネストULの余白を控えめに */
.spec--tablelike ul {
margin: 0.2rem 0 0.2rem 1.1rem;
}
/* ===============================
（任意）.spec-table：テーブル版の体裁
左列thは中央・太字、値は通常
=============================== */
.spec-table {
border-collapse: collapse;
width: 100%;
}
.spec-table th,
.spec-table td {
border: 1px solid #161616;
padding: 0.6rem 0.8rem;
vertical-align: top;
}
.spec-table th {
background: #efefef;
color: #444;
font-weight: 700;
text-align: center; /* 項目セルは中央寄せ */
}
.spec-table td {
text-align: left; /* 値は通常 */
}
/* アイキャッチ行（colspan=2）の見た目調整 */
.spec-table__eyecatch {
padding: 0;
border: 0;
text-align: center;
}
.spec-table__eyecatch img {
display: block;
width: 100%;
height: auto;
}
/* テーブル内の画像は原寸284pxを上限。狭い画面では縮小だけ許可 */
.top_naka_table td img{
max-width:284px !important;
width:100% !important;
height:auto !important;
display:block !important;
margin:0 auto !important;
}
/* ===== ヘッダー下部(.l-headerBottom) デザイン調整用コード ===== */
/* (1) l-headerBottomに背景画像と各種スタイルを適用 */
.l-headerBottom {
position: relative; /* オーバーレイを配置するための基準 */
background-color: #303841; /* 画像が読み込まれない場合の予備色 */
/* (3) 画像を中央に配置し、エリア全体を覆うように設定 */
background-size: cover;
background-position: center;
padding: 20px 0; /* 上下の余白を確保 */
overflow: hidden; /* 念のため、はみ出しを隠す */
}
/* (2) 画像の上に重ねる「半透明のオーバーレイ」 */
.l-headerBottom::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* この最後の数値(0.6)を調整してお好みの透明度にしてください */
background-color: rgba(0, 0, 0, 0.6);
z-index: 1; /* オーバーレイをコンテンツの下に配置 */
}
/* (4) ヘッダー内のコンテンツをオーバーレイの上に表示 */
.l-headerBottom .container {
position: relative;
z-index: 2;
}
/* (5) 以前の調整をリセットし、コンテンツの見た目を再調整 */
.searchHead {
background-color: transparent !important;
padding: 0;
border: none;
border-radius: 0;
}
.searchHead::before {
display: none;
}
.searchHead__title,
.searchHead__keywordItem a {
color: #ffffff;
background-color: transparent;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.searchHead__keywordItem a:hover {
color: #f0f0f0;
text-decoration: none;
}
.searchHead__input {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: none;
color: #333;
}
.searchHead__submit {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #333;
}
.searchHead__submit:hover {
background-color: #fff;
color: #000;
}
/* ===== ここまで ===== */
/*
================================================================
ヘッダー下部（l-headerBottom）のカスタマイズコード【最終・根本解決版】
================================================================
*/
/* --- (1) ヘッダー下部エリア全体の基本スタイル --- */
.l-headerBottom {
position: relative;
background-color: #303841;
background-size: cover;
background-position: center;
padding: 15px 0;
overflow: hidden;
}
.l-headerBottom::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.l-headerBottom .container {
position: relative;
z-index: 2;
}
/* --- (2) 【最重要】既存スタイルの根本原因を徹底的にリセット --- */
.l-headerBottom .searchHead,
.l-headerBottom .searchHead__keyword,
.l-headerBottom .searchHead__headtitle {
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
display: block !important;
vertical-align: initial !important;
}
/* --- (3) 新しいシンプルなFlexboxレイアウトを適用 --- */
.l-headerBottom .container-searchHead {
display: flex !important;
align-items: center !important; /* アイコンとタイトルコンテナを上下中央に */
gap: 15px; /* アイコンとタイトルの間の隙間 */
}
/* アイコンのスタイル */
.l-headerBottom .search-head-icon {
display: block;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 8px;
flex-shrink: 0; /* アイコンが縮まないようにする */
width: 60px;
height: 60px;
}
/* タイトルコンテナのスタイル */
.l-headerBottom .searchHead__keyword {
flex: 1; /* 残りのスペースをすべて使う */
min-width: 0; /* これがテキストの改行を可能にする鍵です */
}
/* タイトルのスタイル */
.l-headerBottom .searchHead__headtitle {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
font-size: 16px !important;
line-height: 1.4 !important;
white-space: normal !important; /* 改行を許可 */
word-break: break-word !important;
}
/* --- (4) スマートフォンでの微調整 --- */
@media only screen and (max-width: 767px) {
.l-headerBottom .container-searchHead {
gap: 12px;
}
.l-headerBottom .search-head-icon {
width: 50px;
height: 50px;
}
}
/*
================================================================
サイト全体のレイアウトカスタマイズ【最終・根本解決版】
================================================================
*/
/* --- (1) アイキャッチ画像のはみ出しによる「1pxのズレ」を修正 --- */
/*
* .eyecatch-mainの親要素である.l-mainにoverflow-x: hiddenを設定します。
* これにより、ネガティブマージンによって画像がわずかにはみ出しても、
* 親要素がそれをクリップ（切り取り）し、ページ全体のレイアウトに影響を与えなくなります。
*/
.l-main {
overflow-x: hidden;
}
/* --- (2) AdSense広告のはみ出し防止 ＆ 中央揃え対策 --- */
/*
* 広告を囲むコンテナ(insタグ)自体を「Flexboxコンテナ」として定義し、
* 中身の広告(iframe)を強制的に水平方向の中央に配置します。
*/
ins.adsbygoogle {
justify-content: center !important; /* 水平方向の中央揃え */
align-items: center !important; /* 垂直方向の中央揃え */
overflow: hidden !important; /* コンテナからはみ出す広告部分を隠す */
width: 100% !important;
margin: 0 auto !important; /* コンテナ自体も中央に配置（念のため） */
padding: 0 !important;
background-color: transparent !important;
}
/* 広告本体（iframe）が、親（insタグ）の幅を超えないようにする */
ins.adsbygoogle iframe {
max-width: 100% !important;
}
/*
================================================================
機種一覧グリッド表示用スタイル【最終確定版】
================================================================
*/
/* --- グリッド全体のコンテナ --- */
.machine-grid {
display: grid !important;
/* ★PCでは8列表示 */
grid-template-columns: repeat(8, 1fr) !important;
gap: 20px 10px !important; /* 上下:20px, 左右:10px */
margin-top: 15px !important;
}
/* --- 各アイテムのスタイル --- */
.machine-grid-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-decoration: none !important;
color: #444 !important;
transition: opacity 0.2s !important;
}
.machine-grid-item:hover {
opacity: 0.7 !important;
}
/* アイコン画像のスタイル */
.machine-grid-icon {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 12px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
margin-bottom: 8px !important;
}
/* テキストラベルのスタイル */
.machine-grid-label {
font-size: 12px !important; /* 少し小さめにしてバランス調整 */
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: center !important;
word-break: break-all !important;
}
/* --- スマートフォン表示（幅767px以下） --- */
@media screen and (max-width: 767px) {
.machine-grid {
/* ★スマホでは6列表示 */
grid-template-columns: repeat(6, 1fr) !important;
gap: 15px 8px !important; /* 隙間を少し狭める */
}
.machine-grid-label {
font-size: 10px !important; /* スマホではさらに文字を小さく */
}
.machine-grid-icon {
border-radius: 8px !important;
}
}
/* --- (1) PC表示での列数設定 --- */
/* 「関連記事」の中にあるグリッドは、8列で表示する */
.related-grid.machine-grid {
grid-template-columns: repeat(8, 1fr) !important;
gap: 20px 12px !important; /* 8列用に少し余白を調整 */
}
/* --- (2) スマートフォン表示（幅767px以下）での列数設定 --- */
@media screen and (max-width: 767px) {
/* 「関連記事」の中にあるグリッドは、6列で表示する */
.related-grid.machine-grid {
grid-template-columns: repeat(6, 1fr) !important;
gap: 15px 10px !important; /* 6列用に少し余白を調整 */
}
/* 6列でも機種名が見えるように、フォントサイズをさらに調整 */
.related-grid.machine-grid .machine-grid-label {
font-size: 10px !important;
}
}
/*
================================================================
タブコンテンツ内 h3 見出しのスタイル調整
================================================================
/* デザイン案3：左側のアイコン＋テキストスタイル */
.tab-content h3 {
display: flex; /* アイコンとテキストを横並びにする */
align-items: center; /* 上下中央揃え */
font-size: 16px;
font-weight: 700;
color: #393f50;
margin: 25px 0 15px 0;
/* 元のスタイルをリセット */
background: none;
border: none;
padding: 0;
height: auto;
width: auto;
}
/* 見出しのテキストの前にアイコンを挿入 */
.tab-content h3::before {
content: "";
width: 5px; /* アイコンの幅 */
height: 20px; /* アイコンの高さ */
background-color: #393f50; /* アイコンの色 */
margin-right: 10px; /* アイコンとテキストの間の余白 */
border-radius: 2px; /* アイコンの角を少し丸くする */
}
/*
================================================================
関連記事セクションのグリッド表示調整【最終版】
================================================================
*/
/* 関連記事セクションのグリッド(.related-grid)に適用 */
.related-grid {
/* PCでもスマホでも、常に4列に固定する */
grid-template-columns: repeat(4, 1fr) !important;
/* 上下の隙間を少し調整 */
gap: 15px 10px !important;
}
/* 4列表示に合わせて、アイコンの角丸を調整 */
.related-grid .machine-grid-icon {
border-radius: 8px;
}
/* テキストラベルの基本スタイル */
.related-grid .machine-grid-label {
font-size: 12px;
width: 100%; /* 省略表示を正しく機能させるために幅を指定 */
}
/* --- ★★★【最重要】スマホ表示の時だけ、タイトルを2行で省略する設定 ★★★ --- */
@media screen and (max-width: 767px) {
.related-grid .machine-grid-label {
/* 複数行での省略表示を有効にするための設定（Webkit系ブラウザ用） */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2; /* 表示する行数を2行に指定 */
}
}
/* ▼▼ ピックアップ（説明文のみ表示版） ▼▼ */
/* グリッド全体の設定 */
.pickup-overlay-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 20px 0;
}
/* 各カードの基本設定 */
.pickup-overlay-item {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 16 / 9;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease-out;
}
.pickup-overlay-item:hover {
transform: translateY(-5px);
}
/* 背景画像 */
.pickup-overlay-item .pickup-overlay-item__bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform 0.3s ease;
}
.pickup-overlay-item:hover .pickup-overlay-item__bg-image {
transform: scale(1.05);
}
/* 文字を読みやすくするための黒いグラデーション */
.pickup-overlay-item .pickup-overlay-item__gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
z-index: 2;
}
/* カテゴリラベル */
.pickup-overlay-item .pickup-overlay-item__category {
position: absolute;
top: 10px;
left: 10px;
color: #fff !important;
padding: 3px 7px;
font-size: 11px;
font-weight: bold;
border-radius: 4px;
z-index: 3;
line-height: 1;
}
/* カテゴリごとの色分け設定 */
.pickup-overlay-item .category-hot { background-color: #e91e63; } /* 注目機種 */
.pickup-overlay-item .category-popular { background-color: #2196f3; } /* 人気機種 */
.pickup-overlay-item .category-new { background-color: #ff9800; } /* 新台 */
/* テキストコンテンツ全体のコンテナ */
.pickup-overlay-item .pickup-overlay-item__content {
position: relative;
z-index: 3;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end; /* 中身を下揃えに */
height: 100%;
}
/* ★説明文のスタイル */
.pickup-overlay-item p.pickup-overlay-item__desc {
font-size: 14px; /* フォントサイズを調整 */
font-weight: 600; /* 少し太字に */
line-height: 1.5;
color: #fff !important;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin: 0;
/* 長い説明文を2行で省略し「...」を表示する設定 */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ▼▼ レスポンシブ対応 ▼▼ */
@media (max-width: 768px) {
.pickup-overlay-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.pickup-overlay-item p.pickup-overlay-item__desc {
font-size: 13px; /* スマホではフォントを少し小さく */
}
.pickup-overlay-item .pickup-overlay-item__category {
font-size: 10px;
padding: 2px 5px;
top: 8px;
left: 8px;
}
.pickup-overlay-item .pickup-overlay-item__content {
padding: 10px;
}
}
/* ▼▼ タブ式ランキング（突破率縦並び版） ▼▼ */
/* ウィジェット全体 */
.ranking-widget {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 20px 0;
padding: 16px;
}
/* ★h2のスタイル指定は削除 */
/* タブボタン */
.ranking-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ranking-tabs__button {
flex-grow: 1; padding: 8px 12px; font-size: 14px; font-weight: bold;
color: #333; background-color: #f0f0f0; border: 1px solid #ddd;
border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.ranking-tabs__button.is-active {
background-color: #3381e8; color: #fff; border-color: #3381e8;
}
/* ランキングパネル */
.ranking-panels__panel { display: none; }
.ranking-panels__panel.is-active { display: block; }
/* 横スクロールラッパー */
.ranking-grid-wrapper { overflow-x: auto; }
/* 2カラムグリッド */
.ranking-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; min-width: 500px;
}
/* カラム共通 */
.ranking-column { list-style: none; padding: 0; margin: 0; }
.ranking-column--left { counter-reset: ranking-counter; }
.ranking-column--right {
counter-reset: ranking-counter 5;
padding-left: 16px; border-left: 1px solid #eee;
}
/* 縦リストアイテム */
.ranking-item {
display: flex; align-items: center; padding: 8px 0;
border-bottom: 1px solid #eee; text-decoration: none; color: inherit;
}
.ranking-column li:last-child .ranking-item { border-bottom: none; }
/* 順位番号 */
.ranking-item__number {
font-size: 18px; font-family: 'Georgia', serif; font-style: italic; font-weight: bold;
width: 30px; text-align: center; flex-shrink: 0;
}
.ranking-item__number::before {
counter-increment: ranking-counter; content: counter(ranking-counter);
}
.ranking-item__number.is-rank-1 { color: #d4af37; }
.ranking-item__number.is-rank-2 { color: #c0c0c0; }
.ranking-item__number.is-rank-3 { color: #cd7f32; }
.ranking-item__number:not(.is-rank-1):not(.is-rank-2):not(.is-rank-3) { color: #555; }
/* 機種画像 */
.ranking-item__image {
width: 50px; height: 50px; object-fit: cover;
border-radius: 4px; margin: 0 12px; flex-shrink: 0;
}
/* テキスト部分 */
.ranking-item__text { display: flex; flex-direction: column; }
.ranking-item__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
/* ★メーカー名と突破率を縦に並べるための設定 */
.ranking-item__maker,
.ranking-item__rate {
display: block; /* ブロック要素にして改行させる */
font-size: 12px;
}
.ranking-item__maker {
color: #777;
}
.ranking-item__rate {
font-weight: bold;
color: #e53935;
margin-top: 2px; /* メーカー名との間にわずかな余白 */
}
/* ▼▼ 新台導入日カレンダー（日付サイズ調整版） ▼▼ */
.calendar-widget {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin: 20px 0;
padding: 16px;
background: #fff;
}
.calendar-list {
list-style: none;
padding: 0;
margin: 0;
}
.calendar-group {
display: flex;
margin-bottom: 16px;
}
.calendar-group:last-child {
margin-bottom: 0;
}
.calendar-date {
width: 90px;
flex-shrink: 0;
text-align: center;
padding-right: 16px;
margin-right: 16px;
border-right: 1px solid #eee;
}
/* ★★★ 日付のフォントサイズを調整 ★★★ */
.calendar-date__day {
display: block;
font-size: 18px; /* 20pxから縮小 */
font-weight: bold;
color: #3381e8;
}
.calendar-date__weekday {
display: block;
font-size: 14px;
color: #555;
}
.calendar-machines {
flex-grow: 1;
}
.machine-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
text-decoration: none;
color: inherit;
}
.calendar-machines .machine-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.calendar-machines .machine-item:first-child {
padding-top: 0;
}
.machine-item__image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 4px;
margin-right: 12px;
flex-shrink: 0;
border: 1px solid #ddd;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.machine-item__info {
display: flex;
flex-direction: column;
}
.machine-item__title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 4px;
}
.machine-item__meta {
display: flex;
align-items: center;
gap: 8px;
}
.label {
color: #fff;
padding: 2px 6px;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
line-height: 1.2;
}
.label-slot { background-color: #e91e63; }
.label-pachinko { background-color: #2196f3; }
.label-maker {
font-size: 12px;
color: #777;
}
@media (max-width: 600px) {
.calendar-group {
flex-direction: column;
}
.calendar-date {
width: 100%;
border-right: none;
border-bottom: 1px solid #eee;
margin: 0 0 12px 0;
padding: 0 0 12px 0;
text-align: left;
}
.machine-item {
padding: 12px 0 !important;
}
}
/* SNSシェアボタン - 統合最適化版 */
.share-buttons-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px 0;
}

.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 6px;
  background-color: #1c1c1e;
  border: 1px solid #444;
  color: #fff !important;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.share-button:hover {
  transform: translateY(-2px);
}

.share-button__icon {
  margin-right: 6px;
  font-size: 1.1em;
  line-height: 1;
}

/* SNS個別スタイル */
.share-button--twitter {
  border-color: #555;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

.share-button--twitter:hover {
  background-color: #000;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.share-button--line {
  border-color: #06C755;
  color: #06C755 !important;
  text-shadow: 0 0 5px rgba(6, 199, 85, 0.7);
}

.share-button--line:hover {
  background-color: #06C755;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(6, 199, 85, 0.8);
}

.share-button--hatena {
  border-color: #00A4DE;
  color: #00A4DE !important;
  text-shadow: 0 0 5px rgba(0, 164, 222, 0.7);
}

.share-button--hatena:hover {
  background-color: #00A4DE;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(0, 164, 222, 0.8);
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
  .share-buttons-container {
    gap: 8px;
  }
  
  .share-button {
    flex-grow: 1;
    flex-basis: 0;
    padding: 9px 5px;
    font-size: 12px;
  }
  
  .share-button__icon {
    margin-right: 5px;
  }
}
/* LINEアイコンの応急処置 */
.icon-line::before {
content: ''; display: inline-block; width: 1.2em; height: 1.2em;
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.9,8.4c0-2.3-1.8-4.1-4.1-4.1H6.2c-2.3,0-4.1,1.8-4.1,4.1v7.2c0,2.3,1.8,4.1,4.1,4.1h5.3v-5.2H8.8v-2h2.7v-1.5c0-2.7,1.6-4.2,4.1-4.2l2.2,0v2h-1.3c-1.3,0-1.6,0.6-1.6,1.5v1.2h2.9l-0.4,2H16v5.2h1.8c2.3,0,4.1-1.8,4.1-4.1V8.4z"/></svg>');
background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* ▼▼ 人気解析ページウィジェット（シンプル最終版） ▼▼ */
/* カード全体のスタイル */
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__item {
position: relative;
display: block;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__item:last-child {
margin-bottom: 0;
}
/* 画像コンテナの隙間対策 */
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch {
display: block;
position: relative;
aspect-ratio: 16 / 9;
margin-bottom: 0;
padding-top: 0;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch::before {
content: none;
}
/* グラデーションとテキスト */
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch::after {
content: '';
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
z-index: 2;
pointer-events: none;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__contents {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 16px;
z-index: 3;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__contents h3 a {
color: #fff;
font-size: 16px;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
/* ★★★ ラベルの共通スタイル ★★★ */
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch__cat {
/* テーマのスタイルをリセット */
right: auto;
max-width: none;
/* 新しいスタイルを適用 */
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
display: inline-block;
width: auto;
height: auto;
border-radius: 4px;
padding: 3px 8px; /* パディングを直接指定 */
font-size: 11px;
font-weight: bold;
color: #fff;
background-color: #e91e63; /* デフォルトの色（赤） */
}
/* ★★★ カテゴリごとの色分け設定 ★★★ */
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch__cat.category-popular {
background-color: #2196f3; /* 人気機種（青） */
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch__cat.category-hot {
background-color: #e91e63; /* 注目機種（赤） */
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch__cat.category-new {
background-color: #ff9800; /* 新台（オレンジ） */
}
/* スマホ表示（2列化） */
@media screen and (max-width: 767px) {
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__item {
margin-bottom: 0;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__contents h3 a {
font-size: 13px;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .eyecatch__cat {
top: 8px; left: 8px;
font-size: 10px; padding: 2px 6px;
}
aside.widget-side h2.heading-widgetsimple + ol.widgetArchive .widgetArchive__contents {
padding: 10px;
}
}
/* ▼▼ サイドバー用 新台導入日カレンダー（見出し調整版） ▼▼ */
.new-machine-calendar {
margin-top: -10px;
}
.calendar-day-group {
margin-top: 15px;
}
/* ★★★ h3（日付）のデザインを調整 ★★★ */
.calendar-day-group__date {
font-size: 13px;
font-weight: 700;
color: #393f50;
background-color: transparent;
padding: 0 0 5px 5px;
border-bottom: 2px solid #393f50;
margin-bottom: 10px;
}
.machine-list-inner {
list-style: none;
padding: 0;
margin: 0;
}
.machine-card {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed #ddd;
text-decoration: none;
color: inherit;
}
.machine-list-inner li:last-child .machine-card {
border-bottom: none;
}
.machine-card__image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 4px;
margin-right: 10px;
flex-shrink: 0;
border: 1px solid #ddd;
}
.machine-card__info {
display: flex;
flex-direction: column;
}
.machine-card__title {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 5px;
}
.machine-card__meta {
display: flex;
align-items: center;
gap: 8px;
}
.label {
color: #fff;
padding: 2px 6px;
font-size: 10px;
font-weight: bold;
border-radius: 3px;
line-height: 1.2;
}
.label-slot { background-color: #e91e63; }
.label-pachinko { background-color: #2196f3; }
.label-maker {
font-size: 11px;
color: #777;
}
/* ▼▼ サイドバーカレンダーのタイトル色を強制修正 ▼▼ */
aside.widget .new-machine-calendar + h2.heading-widgetsimple,
aside.widget h2.heading-widgetsimple:has(+ .new-machine-calendar) {
background-color: #393f50 !important;
color: #fff !important;
}
/* ▼▼ サイドバー用 目次デザイン案1：階層スタイル ▼▼ */
/* PC表示でのみ表示 */
.widget-pc-only { display: none; }
@media only screen and (min-width: 992px) {
.widget-pc-only { display: block; }
}
/* 親コンテナ */
.sticky-widget-container { position: relative; min-height: 200px; }
/* 目次本体の基本スタイル */
#sidebar-toc-container .a-outline {
margin: 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #fff;
overflow: hidden; /* 角丸を適用 */
width: 100%;
}
/* 追従時のスタイル */
#sidebar-toc-container .a-outline.is-sticky { position: fixed; width: inherit; }
#sidebar-toc-container .a-outline.is-bottom { position: absolute; bottom: auto; width: 100%; }
/* 目次タイトル */
#sidebar-toc-container .toc_title {
padding: 12px 15px;
background: #393f50;
color: #fff;
font-size: 1.4rem;
font-weight: 700;
text-align: left;
}
/* 目次リスト */
#sidebar-toc-container ul {
list-style: none;
padding: 10px;
margin: 0;
}
#sidebar-toc-container ul li {
/* liの区切り線は不要なので削除 */
}
/* 各項目（リンク）のスタイル */
#sidebar-toc-container ul li a {
display: block;
padding: 8px 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: #444;
border-radius: 4px;
transition: background-color 0.2s, color 0.2s;
position: relative;
border-left: 3px solid transparent; /* ホバー時に表示される線の準備 */
}
/* ホバー時のスタイル */
#sidebar-toc-container ul li a:hover {
background-color: #f0f4f3;
color: #3381e8;
border-left-color: #3381e8; /* 左の線をアクセントカラーに */
}
/* アイコンのスタイル */
#sidebar-toc-container ul li a::before {
content: '▶'; /* アイコンとして使う文字 */
font-size: 10px;
margin-right: 8px;
color: #aaa;
transition: color 0.2s;
}
#sidebar-toc-container ul li a:hover::before {
color: #3381e8; /* ホバー時にアイコンも色を変える */
}
/* サブ項目（ulの中のul）のインデント */
#sidebar-toc-container ul ul {
padding: 5px 0 5px 15px; /* 左側に余白を作ってインデント */
}
/* ▼▼ 目次のアクティブハイライト用スタイル ▼▼ */
#sidebar-toc-container ul li a.is-active {
background-color: #e9eff5; /* 薄い青色の背景 */
color: #3381e8;
font-weight: 700; /* 少し太字に */
border-left-color: #3381e8;
}
#sidebar-toc-container ul li a.is-active::before {
color: #3381e8;
}
/* ▼▼ ページトップボタン（広告追従対応版） ▼▼ */
#bottomFooter__topBtn {
position: fixed; /* 基本は画面に固定 */
right: 10px;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
/* JavaScriptでbottomの位置が設定されるのを待ちます */
}
/* 表示状態のスタイル */
#bottomFooter__topBtn.is-visible {
opacity: 0.6;
visibility: visible;
}
#bottomFooter__topBtn.is-visible:hover {
opacity: 0.75;
}
/* フッターに到達した時のスタイル */
#bottomFooter__topBtn.is-absolute {
position: absolute;
}
/* ================================================================ */
/* ▼▼▼ フローティングボタン＆目次システム【最終完成版 Ver.1.1】▼▼▼ */
/* ================================================================ */
/* --- (1) ボタンの基本スタイルと配置 --- */
#floating-top-btn,
#floating-toc-trigger {
position: fixed !important;
right: 12px !important;
z-index: 999 !important;
margin: 0 !important;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.2s, bottom 0.3s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: #393f50;
color: #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
/* --- (2) ページトップボタン --- */
#floating-top-btn {
bottom: 150px !important;
width: 48px;
height: 48px;
}
#floating-top-btn::before {
border-color: #ffffff !important;
}
/* --- (3) 目次ボタン --- */
#floating-toc-trigger {
bottom: 92px;
z-index: 998;
width: 48px;
height: 48px;
padding: 0;
gap: 0;
font-size: 10px;
font-weight: bold;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* 目次テキストの位置調整 */
#floating-toc-trigger {
line-height: 1;
margin-top: 2px;
}
/* --- (4) 表示状態の制御（iOS Safari対応版） --- */
body.js-show-buttons:not(.js-hide-buttons) #floating-top-btn,
body.js-show-buttons:not(.js-hide-buttons) #floating-toc-trigger {
    opacity: 0.9;
    visibility: visible;
    /* transform を iOS Safari でのみ無効化 */
}

/* iOS Safari 以外でのみ transform を適用 */
@supports not (-webkit-touch-callout: default) {
    body.js-show-buttons:not(.js-hide-buttons) #floating-top-btn,
    body.js-show-buttons:not(.js-hide-buttons) #floating-toc-trigger {
        transform: translateY(0);
    }
}

#floating-top-btn:hover,
#floating-toc-trigger:hover {
opacity: 1;
background-color: #525a6e;
}
/* --- (5) PCでの表示調整 --- */
/* ★★★ PC表示で目次ボタンを非表示にする方法を変更 ★★★ */
@media screen and (min-width: 768px) {
/* display:noneではなく、opacityとvisibilityで制御することで、
トランジション（消えるアニメーション）が他のボタンと同期するようになります。 */
#floating-toc-trigger {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important; /* クリックもできなくする */
}
/* PCではトップボタンの位置を調整 */
#floating-top-btn {
bottom: 30px !important;
}
}
/* --- (6) 目次モーダル --- */
#floating-toc-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 99999;
display: flex; align-items: flex-end;
visibility: hidden; opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
#floating-toc-toggle:checked ~ .floating-container #floating-toc-modal {
visibility: visible; opacity: 1;
}
#floating-toc-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
#floating-toc-content {
position: relative; z-index: 1; width: 100%;
max-height: 70vh;
background-color: #f7f8fa;
border-radius: 16px 16px 0 0;
display: flex; flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
#floating-toc-toggle:checked ~ .floating-container #floating-toc-modal #floating-toc-content {
transform: translateY(0);
}
/* --- (7) スマホ用目次の新デザイン --- */
#floating-toc-header {
text-align: center; padding: 16px;
border-bottom: 1px solid #e0e0e0; flex-shrink: 0; position: relative;
padding-top: 24px;
}

/* 目次ヘッダーの上に横線を追加 */
#floating-toc-header::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background-color: #ccc;
border-radius: 2px;
z-index: 1;
}
#floating-toc-title { font-size: 16px; font-weight: bold; color: #333; }
#floating-toc-close {
position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
background: #e0e0e0; border: none; border-radius: 50%;
width: 30px; height: 30px; font-size: 20px; line-height: 30px;
text-align: center; cursor: pointer; color: #888;
}
#floating-toc-body { overflow-y: auto; padding: 0; color: #333; }
#floating-toc-body .a-outline { margin: 0; border: none; }
#floating-toc-body .toc_title { display: none; }
#floating-toc-body ul { padding: 0; list-style: none; }
#floating-toc-body li a {
display: flex; align-items: center;
padding: 14px 16px;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #333;
font-weight: 600;
font-size: 15px;
transition: background-color 0.2s;
}
#floating-toc-body li:last-child a { border-bottom: none; }
#floating-toc-body li ul { background-color: #fff; }
#floating-toc-body li ul li a { padding-left: 30px; font-size: 14px; font-weight: normal; }
#floating-toc-body li ul li ul li a { padding-left: 45px; }
#floating-toc-body li a::before {
content: '▶';
display: inline-block;
font-size: 10px;
color: #3381e8;
margin-right: 12px;
margin-left: 4px;
flex-shrink: 0;
}
#floating-toc-body li ul li a::before {
color: #aaa;
}
#floating-toc-body li a.is-active {
background-color: #e9eff5;
font-weight: 700;
color: #3381e8;
}
#floating-toc-body li a.is-active::before {
color: #3381e8;
}
/* モーダル表示中に背景スクロールを禁止 */
body.js-toc-opened {
overflow: hidden;
}

/* 1. 非表示キャプション（必須） */
.table-caption-hidden {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* テーブルスワイプシンプル＆確実版（角丸なし） */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  max-width: 100% !important;
}

.table-responsive table {
  min-width: 500px;
  margin: 0 !important;
}

/* スワイプヒント表示用 */
.swipe-hint {
  content: "← スクロールできます →";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 20px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.swipe-hint.fade-out {
  opacity: 0;
}

@media (min-width: 769px) {
  .swipe-hint { display: none; }
}




/* ===========================================
   フローティングボタン完全固定版（追加分）
   =========================================== */

/* フローティングボタン - 完全固定版 */
.floating-button {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 1000 !important;
    transform: none !important; /* 強制的にtransformを無効化 */
}

/* スマホ用の更に強い固定 */
@media (max-width: 768px) {
    .floating-button {
        position: fixed !important;
        right: 15px !important;
        bottom: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        transform: none !important;
    }
}

/* 全ての状態での固定を強制 */
.floating-button,
.floating-button:hover,
.floating-button:active,
.floating-button:focus {
    position: fixed !important;
    transform: none !important;
}



/* 画面復帰時対応 - 超強力固定版 */
.floating-button {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 9999 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    will-change: auto !important; /* GPU加速を無効化 */
}

/* iOS Safari 特殊対応 */
@supports (-webkit-touch-callout: none) {
    .floating-button {
        position: -webkit-sticky !important;
        position: sticky !important;
        position: fixed !important;
    }
}

/* 画面復帰時のアニメーション無効化 */
.floating-button.no-animation {
    transition: none !important;
    animation: none !important;
}

@media (max-width: 768px) {
    .floating-button {
        right: 15px !important;
        bottom: 15px !important;
        width: 50px !important;
        height: 50px !important;
    }
}



/* iOS Safari 専用対策 */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari でのみ適用される */
    #floating-top-btn,
    #floating-toc-trigger {
        position: -webkit-sticky !important;
        position: sticky !important;
        position: fixed !important;
        
        /* iOS での位置計算を強制 */
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        
        /* GPU レイヤーを強制作成してバグ回避 */
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
}

/* iPhone 専用の超強力固定 */
@media screen and (max-width: 768px) {
    #floating-top-btn,
    #floating-toc-trigger {
        position: fixed !important;
        transform: none !important;
        -webkit-transform: none !important;
        
        /* 全ての可能な位置指定をリセット */
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        
        /* iOS Safari のバグ回避 */
        -webkit-overflow-scrolling: auto !important;
    }
}


/* iOS Safari 画面復帰バグ対策（追加） */
@supports (-webkit-touch-callout: default) {
    /* iOS Safari でのみ適用 */
    #floating-top-btn,
    #floating-toc-trigger {
        /* transform を完全に無効化 */
        transform: none !important;
        -webkit-transform: none !important;
        
        /* GPU レイヤーを強制リセット */
        will-change: auto !important;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
    }
    
    /* 表示状態でも transform 無効 */
    body.js-show-buttons:not(.js-hide-buttons) #floating-top-btn,
    body.js-show-buttons:not(.js-hide-buttons) #floating-toc-trigger {
        transform: none !important;
        -webkit-transform: none !important;
    }
}



/* ========================================
   【緊急修正】bottomFooter__topBtn完全上書き
   ======================================== */

/* 既存のbottomFooter__topBtnを完全無効化 */
#floating-top-btn.bottomFooter__topBtn {
    /* 既存設定を強制上書き */
    bottom: 150px !important;
    right: 12px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    
    /* iOS Safari 特殊対応 */
    position: fixed !important;
    z-index: 999 !important;
    width: 48px !important;
    height: 48px !important;
}

/* スマートフォン用調整 */
@media screen and (max-width: 767px) {
    #floating-top-btn.bottomFooter__topBtn {
        bottom: 150px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* PC用調整 */
@media screen and (min-width: 768px) {
    #floating-top-btn.bottomFooter__topBtn {
        bottom: 30px !important;
    }
}

/* iOS Safari 専用の完全固定 */
@supports (-webkit-touch-callout: default) {
    #floating-top-btn.bottomFooter__topBtn {
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }
}

/* 表示状態での強制固定 */
body.js-show-buttons:not(.js-hide-buttons) #floating-top-btn.bottomFooter__topBtn {
    position: fixed !important;
    bottom: 150px !important;
    right: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    opacity: 0.9;
    visibility: visible;
}

@media screen and (min-width: 768px) {
    body.js-show-buttons:not(.js-hide-buttons) #floating-top-btn.bottomFooter__topBtn {
        bottom: 30px !important;
    }
}


.floating-button {
  position: fixed;
  /* 他のスタイル */

  /* 以下のいずれかを追加 */
  transform: translate3d(0, 0, 0);
}




/* 🎯 最終解決版：iOS Safari完全対応フローティングボタン */
.fixed-floating-btn {
    /* 基本配置：bottom計算を単純化 */
    position: fixed !important;
    bottom: 80px !important;  /* margin使わずbottomで直接指定 */
    right: 20px !important;
    
    /* iOS Safari対策：transform無効化 */
    transform: none !important;
    translate: none !important;
    
    /* レイヤー固定 */
    z-index: 9999 !important;
    
    /* サイズ・デザイン */
    width: 60px !important;
    height: 60px !important;
    
    /* iOS Safari専用：位置固定強化 */
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    
    /* 競合回避：既存スタイルリセット */
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
}

/* iOS Safari専用：さらなる位置安定化 */
@supports (-webkit-touch-callout: none) {
    .fixed-floating-btn {
        position: -webkit-sticky !important;
        position: sticky !important;
        bottom: 80px !important;
    }
}

/* サイドレールの <ins> が画面幅まで広がってクリックを邪魔するのを防ぐ */
ins.adsbygoogle[data-side-rail-status="displayed"]{
  pointer-events: none !important;          /* 親はクリック無効（下に透過） */
  width: 160px !important;                   /* 必要なら 300px など実サイズに変更 */
  height: auto !important;
  /* 余計な影響を避けたい場合は保険で右側を無効化 */
  right: auto !important;
}

/* 広告の実体(iframe)と「閉じる」ボタンだけは操作可能に戻す */
ins.adsbygoogle[data-side-rail-status="displayed"] iframe,
ins.adsbygoogle[data-side-rail-status="displayed"] .left-side-rail-dismiss-btn{
  pointer-events: auto !important;
}

/* 既存パッチを入れている場合の補完：aswift_* も同様に */
div[id^="aswift_"]{ pointer-events: none !important; }
div[id^="aswift_"] iframe{ pointer-events: auto !important; }




/* スクロールヒントの親要素の基準設定 */
.table-responsive {
  position: relative;
}

/* スクロールヒントのスタイル */
.scroll-hint {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 0 0 0 8px;
  /* ヒントがテーブル操作の邪魔にならないようにする */
  pointer-events: none;
  user-select: none;
  /* 表示・非表示のアニメーション */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* --- アニメーション型デザイン --- */
.scroll-hint--animated {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50% 0 0 50%; /* 左側だけ丸い形 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding-left: 4px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s;
}

/* アイコンを擬似要素で作成 */
.scroll-hint--animated::before {
  content: '»';
  /* アイコンが左右に動くアニメーション */
  animation: slide-horizontal 1.2s infinite ease-in-out;
}

@keyframes slide-horizontal {
  0% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}

/* 表示 */
.table-responsive.is-hint-active .scroll-hint--animated {
  opacity: 1;
}