@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
} ul, ol {
list-style: none;
}
* {
box-sizing: border-box;
}
html {
color: #282e66;
font-family: 'Noto Sans JP', Hiragino Sans, Hiragino Kaku Gothic ProN, YuGothic, Meiryo, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1;
}
body {
background: #f4f4f4;
overscroll-behavior: none;
}
.content-wrapper {
padding-top: 68px;
}
.main-title {
display: flex;
flex-flow: column;
background: #ffffff;
height: 160px;
margin: 50px 62px 30px 62px;
align-items: center;
justify-content: center;
}
.main-title p {
margin-top: 16px;
}
.contents {
position: relative;
display: flex;
justify-content: center;
padding: 0px 62px 80px 62px;
}
.contents section {
width: 100%;
}
.entries-title {
font-size: 18px;
line-height: 24px;
font-weight: 800;
margin-bottom: 26px;
}
a {
transition: .3s;
color: #282e66;
text-decoration: none;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4 {
font-size: 12px;
}
.pc-only {
display: block!important;
}
.pc-tablet-only {
display: block!important;
}
.sp-tablet-only {
display: none!important;
}
.sp-only {
display: none!important;
}
.pc-tablet-only-flex {
display: flex!important;
}
.sp-only-flex {
display: none!important;
} table {
border-collapse: collapse;
border-spacing: 0;
}
table thead td, table thead th {
background-color: #fbfdff;
}
table th, table td {
padding: 19px;
}
table td {
word-break: break-all;
} .single-content ul, .single-content ol {
padding: 0 0 0 18px;
list-style: disc;
}
.single-content ol {
list-style: decimal;
}
.single-content li {
margin: 0 0 8px 0;
line-height: 21px;
}
.single-content li:last-child {
margin: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
.dropdown .dropdown-list {
padding: 16px 0;
border-radius: 4px;
background-color: #fff;
filter: drop-shadow(0 0 2px rgba(66, 69, 153, 0.72));
} .checkbox {
height: 40px;
line-height: 40px;
}
.checkbox input[type='checkbox'] {
display: none;
}
.checkbox input[type='checkbox']+label {
display: block;
padding-left: 25px;
background: url(//macloud.jp/media/wp-content/themes/matoz/img/checkbox.png) no-repeat left center;
background-size: 20px;
cursor: pointer;
}
.checkbox input[type='checkbox']+label:hover {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/checkbox_hover.png);
}
.checkbox input[type='checkbox']:checked+label, .checkbox input[type='checkbox']:checked:hover+label {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/checkbox_checked.png);
} .dropdown {
display: inline-block;
position: relative;
}
.dropdown.open .dropdown-list {
display: block;
}
.dropdown.open .dropdown-toggle {
border-color: #282e66;
}
.dropdown .dropdown-toggle {
display: inline-block;
position: relative;
min-width: 140px;
height: 40px;
padding: 0 32px 0 14px;
border: 1px solid #c5c8e6;
border-radius: 6px;
line-height: 40px;
cursor: pointer;
}
.dropdown .dropdown-toggle:hover {
border-color: #282e66;
}
.dropdown .dropdown-toggle .material-icons {
position: absolute;
top: 50%;
right: 10px;
margin-top: -7px;
font-size: 14px;
}
.dropdown .dropdown-list {
display: none;
position: absolute;
top: 100%;
min-width: 100%;
}
.dropdown .dropdown-list-item {
display: block;
padding: 16px 24px;
}
.dropdown .dropdown-list-item:hover {
background-color: #f0f5fd;
} input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='search'] {
width: 488px;
height: 40px;
padding: 0 16px;
border: 1px solid #c5c8e6;
border-radius: 6px;
outline: none;
font-size: 14px;
line-height: 40px;
font-family: 'Noto Sans JP', Hiragino Sans, Hiragino Kaku Gothic ProN, YuGothic, Meiryo, sans-serif;
}
input[type='text']:hover, input[type='email']:hover, input[type='password']:hover, input[type='url']:hover, input[type='number']:hover, input[type='search']:hover {
border-color: #282e66;
}
input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, input[type='url']:focus, input[type='number']:focus, input[type='search']:focus {
border-color: #282e66;
}
input[type='text'].small, input[type='email'].small, input[type='password'].small, input[type='url'].small, input[type='number'].small, input[type='search'].small {
display: block;
width: 239px;
float: left;
}
input[type="search"] {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/search.svg);
background-repeat: no-repeat;
background-position: calc(100% - 12px) 10px;
background-size: 20px;
padding: 10px 12px;
}
input[type="search"]:hover,
input[type="search"]:focus {
background-image: none;
}
textarea {
padding: 8px 16px;
border: 1px solid #c5c8e6;
border-radius: 6px;
outline: none;
font-size: 14px;
line-height: 1.8;
resize: none;
}
label+input[type='file'] {
display: none;
}
.form-block-title {
font-size: 18px;
font-weight: bold;
}
.form-group {
position: relative;
}
.form-group.has-error * {
border-color: #e6213a;
}
.form-group.has-error .error-message {
display: initial !important;
}
.form-group::after {
display: block;
clear: both;
content: '';
}
.form-group .form-title {
font-weight: bold;
letter-spacing: 1.7px;
}
.form-group .form-title .error-message {
display: none;
margin-left: 10px;
color: #e6213a;
font-weight: normal;
}
.form-group .form-value {
margin-top: 10px;
}
.form-group .form-value.inline .checkbox, .form-group .form-value.inline .radio {
margin-left: 20px;
float: left;
}
.form-group .form-value.inline .checkbox:first-child, .form-group .form-value.inline .radio:first-child {
margin-left: 0;
}
.form-group .form-value.inline::after {
display: block;
clear: both;
content: '';
}
.form-group .has-button input {
display: block;
float: left;
}
.form-group .has-button button {
margin-left: 10px;
float: left;
}
.form-group .has-button::after {
display: block;
clear: both;
content: '';
}
.date div, .period div {
float: left;
}
.date div input, .period div input {
display: block;
width: 72px;
float: left;
}
.date .year::after, .date .month::after, .date .day::after, .period .year::after, .period .month::after, .period .day::after {
display: block;
margin: 0 10px;
float: left;
line-height: 40px;
}
.date .year::after, .period .year::after {
content: '年';
}
.date .month::after, .period .month::after {
content: '月';
}
.date .day::after, .period .day::after {
content: '日';
}
.period span {
display: block;
float: left;
line-height: 40px;
}
.period span+.year {
margin-left: 10px;
}
.input-with input {
width: 360px;
float: left;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-with .example {
width: 144px;
height: 40px;
padding-right: 10px;
float: left;
border: 1px solid #c5c8e6;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background-color: #fbfcff;
color: #9194b1;
line-height: 38px;
text-align: right;
}
.input-with .example::before {
display: block;
margin: 0 8px;
float: left;
content: '表示例:';
}
.input-with .example:empty::after {
content: '-';
}
.input-with::after {
display: block;
clear: both;
content: '';
}
.radio {
height: 40px;
line-height: 40px;
}
.radio input[type='radio'] {
display: none;
}
.radio input[type='radio']+label {
display: block;
padding-left: 25px;
background: url(//macloud.jp/media/wp-content/themes/matoz/img/radio.png) no-repeat left center;
background-size: 20px;
cursor: pointer;
}
.radio input[type='radio']+label:hover {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/radio_hover.png);
}
.radio input[type='radio']:checked+label, .radio input[type='radio']:checked:hover+label {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/radio_checked.png);
}
.entries::after {
display: block;
clear: both;
content: '';
}
#wpfront-scroll-top-container {
bottom: 80px !important;
right: 15px !important;
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.material-icon-before {
font-style: normal;
line-height: 1;
margin: 0 3px 0 0;
font-size: 16px;
vertical-align: top;
}
.material-icon-before:before {
display: inline-block;
width: 20px;
font-family: Material Icons, sans-serif;
font-size: 17px;
font-weight: 400;
content: attr(data-icon);
}
@media screen and (max-width: 1170px) {
.pc-only {
display: none!important;
}
.sp-tablet-only {
display: block!important;
}
.content-wrapper {
padding-top: 48px;
}
.main-title {
margin: 50px 30px 30px 30px;
}
.main-title p {
font-size: 12px;
}
.material-icon-before:before {
width: 23px;
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
.pc-tablet-only {
display: none!important;
}
.sp-only {
display: block!important;
}
.pc-tablet-only-flex {
display: none!important;
}
.sp-only-flex {
display: flex!important;
}
body {
padding-top: 48px;
}
section {
min-height: 1210px;
}
.content-wrapper {
padding-top: 0;
}
.contents {
display: block;
padding: 0 15px;
}
.main-title {
margin: 20px 15px;
height: 80px;
}
.main-title h1 img {
width: 100px;
}
.main-title p {
margin-top: 8px;
}
.entries-title {
margin-bottom: 20px;
}
}

.article-content #toc_container {
width: 100% !important;
border-radius: 5px;
border: none;
padding: 20px;
font-size: 15px;
background: #f2f2f5;
}
.article-content #toc_container li {
line-height: 26px;
}
.article-wrapper {
width: 989px;
position: relative;
order: 1;
}
article {
background: #fff;
}
article .article-nav {
position: absolute;
left: 30px;
line-height: 26px;
}
.article-content {
max-width: 860px;
margin: auto;
padding: 90px 30px;
order: 1;
}
.article-content .category {
font-weight: bold;
}
.article-content .category a:hover {
transition: .3s;
opacity: .5;
}
.article-content .category .material-icons {
margin-right: 12px;
}
.article-content .single-title {
margin: 40px 0;
font-size: 30px;
line-height: 48px;
font-weight: bold;
color: #282e66;
}
.article-content .single-content img {
width: 100%;
height: auto;
border: 1px solid #e3e3e3;
}
.article-content .single-content a {
color: #0016d9;
}
.article-content .single-content a:hover {
opacity: .5;
}
.article-content .single-content p {
margin-bottom: 30px;
color: #282E66;
font-size: 14px;
line-height: 28px;
}
.article-content .single-content p strong {
font-weight: bold;
}
.article-content .single-content p>strong:only-child {
font-size: 18px;
}
.article-content .single-content h2 {
color: #282e66;
font-size: 24px;
line-height: 36px;
font-weight: bold;
position: relative;
margin: 50px 0 30px 0;
padding: 0 0 4px 32px;
border-bottom: 2px solid #2a2c71;
}
.article-content .single-content h2 strong {
font-weight: bold;
}
.article-content .single-content h2 span {
position: relative;
font-weight: 800 !important;
}
.article-content .single-content h2::before, .article-content .single-content h2::after {
content: "";
position: absolute;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
background: none;
border: 2px solid #424599;
}
.article-content .single-content h2::before {
top: -8px;
left: 0;
}
.article-content .single-content h2::after {
top: 6px;
left: 6;
border: 2px solid #e6213a;
}
.article-content .single-content h3 {
font-size: 18px;
font-weight: bold;
line-height: 28px;
margin-bottom: 30px;
padding: 10px 15px;
color: #282e66;
background: #f2f2f5;
border-left: 3px solid #424599;
}
.article-content .single-content h4 {
font-size: 17px;
font-weight: bold;
line-height: 26px;
margin-bottom: 12px;
color: #282e66;
}
.article-content .single-content h4 span {
font-size: 17px !important;
font-weight: bold !important;
}
.article-content .single-content table {
width: 100%;
table-layout: fixed;
}
.article-content .single-content table tr:first-child, .article-content .single-content table td:first-child {
background: #f2f2f5;
}
.article-content .single-content table tr:first-child span, .article-content .single-content table td:first-child span {
font-weight: bold !important;
}
.article-content .single-content table td:first-child {
width: 150px;
}
.article-content .single-content table td {
padding: 16px;
border: 1px solid #e8e8e8;
font-size: 13px;
line-height: 20px;
}
.article-content .share-box {
padding: 25px;
height: 112px;
margin-top: 20px;
background: #f4f4f4;
}
.article-content .share-box .text {
float: left;
font-size: 16px;
font-weight: bold;
line-height: 32px;
}
.article-content .share-box .share-button-box {
float: right;
}
.article-content .subhead {
width: 100%;
display: flex;
justify-content: left;
color: #9396b4;
font-weight: bold;
}
.article-content .tag-list {
margin-top: 80px;
line-height: 28px;
}
.article-content .tag-list ul {
margin-top: 15px;
}
.article-content .tag-list ul::after {
display: block;
clear: both;
content: '';
}
.article-content .tag-list ul li {
margin-right: 15px;
float: left;
}
.article-content .tag-list ul a:hover {
transition: .3s;
opacity: .5;
}
.article-content .share {
margin-top: 30px;
}
.article-content .share .share-buttons {
margin-top: 15px;
}
.article-content .share .share-buttons::after {
display: block;
clear: both;
content: '';
}
.article-content .share .share-buttons .share-button {
display: block;
width: calc(100% / 3);
height: 56px;
float: left;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 56px;
text-align: center;
}
.article-content .share .share-buttons .share-button.tweet {
background: #55acee;
}
.article-content .share .share-buttons .share-button.facebook {
background: #315096;
}
.article-content .share .share-buttons .share-button.hatena {
background: #008fde;
}
.article-content .share .share-buttons a:hover {
transition: .3s;
opacity: .5;
}
.recommend-links {
background: #fff;
margin-top: 20px;
padding: 30px;
}
.recommend-links .subhead {
font-size: 16px;
font-weight: 800;
margin-bottom: 20px;
}
.recommend-links .entry {
height: 336px;
margin-bottom: 0;
}
.article-content .category {
font-size: 18px;
display: flex;
align-items: center;
} .article-bottom-pr {
width: 100%;
padding: 30px;
background: #424599;
}
.article-bottom-pr .content {
position: relative;
width: 100%;
color: #fff;
}
.article-bottom-pr .ma-logo {
width: 100%;
display: flex;
justify-content: center;
margin: 28px 0 10px 0;
}
.article-bottom-pr .ma-logo img {
width: 150px;
}
.article-bottom-pr .message {
width: 100%;
display: inline-block;
margin-top: 5px;
text-align: left;
}
.article-bottom-pr .message h1 {
width: 100%;
text-align: center;
font-size: 24px;
}
.article-bottom-pr .detail {
width: 100%;
text-align: center;
margin-top: 39px;
}
.article-bottom-pr .detail a {
width: 100%;
}
.contents .author-profile-box {
background: #ffffff;
padding: 30px;
margin-bottom: 40px;
}
.contents .author-profile-content {
padding: 30px;
border: 1px solid #AFB5CC;
}
.contents .author-profile-content.article-author-profile {
margin: 50px 0 20px 0;
}
.contents .author-profile-content .profile-title {
font-size: 16px;
font-weight: 800;
margin: 0 0 30px 0;
color: #282e66;
padding: 0;
border: none;
}
.contents .author-profile-content .profile-title:before,
.contents .author-profile-content .profile-title:after {
content: none;
}
.contents .author-profile-content p {
font-size: 14px;
line-height: 26px;
margin-bottom: 0;
}
.contents .author-profile-info {
display: flex;
margin-bottom: 20px;
}
.contents .author-profile-info.article-author-profile {
margin-bottom: 40px;
}
.contents .profile-icon {
width: 64px;
height: 64px;
min-width: 64px;
margin-right: 16px;
border-radius: 50%;
overflow: hidden;
}
.contents .profile-icon img {
width: 100%;
height: inherit;
border: none;
}
.contents .profile-info p{
font-size: 12px;
line-height: 14px;
margin-bottom: 16px;
}
.contents .profile-info .profile-name {
font-size: 16px;
line-height: 16px;
font-weight: 800;
background: none;
margin: 0;
padding: 0;
border-left: none;
}
.contents .profile-info .profile-name a {
color: #282E66;
}
.contents .entries-title .author-name {
font-size: 24px;
}
@media screen and (max-width: 767px) {
.article-wrapper {
width: 100%;
margin-bottom: 30px;
}
article {
margin-top: 20px;
}
article .tag-list, article .share, article .share-box, article .recommend-links {
margin-right: 15px;
margin-left: 15px;
}
.article-content {
padding: 40px 0;
}
.article-content .category {
margin: 0 20px;
}
.article-content .category .material-icons {
font-size: 20px;
vertical-align: -.2em;
}
.article-content .single-title {
margin: 20px 15px;
font-size: 24px;
line-height: 38px;
}
.article-content .single-content {
margin: 0;
padding: 0 15px;
}
.article-content .single-content p {
margin-bottom: 20px;
}
.article-content .single-content p>img {
width: calc(100% + 30px);
margin-right: -15px;
margin-left: -15px;
}
.article-content .single-content h2 {
margin-top: 60px;
margin-bottom: 30px;
font-size: 22px;
line-height: 27px;
}
.article-content .single-content table td {
font-size: 12px;
}
.article-content .single-content table td:first-child {
width: 30%;
}
.article-content .share-box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
.article-content .share-box .text {
font-size: 14px;
line-height: 24px;
}
.article-content .share .share-buttons .share-button {
font-size: 12px;
}
.article-content .share .share-buttons .share-button span:nth-child(2) {
display: none;
}
.recommend-links .entry {
height: auto;
}
.recommend-links .entry .entry-data {
padding: 30px;
}
.article-nav {
display: none;
}
.article-bottom-pr .ma-logo {
width: 100%;
display: flex;
justify-content: flex-start;
margin: 28px 0 10px 0;
}
.article-bottom-pr .ma-logo img {
width: 120px;
}
.article-bottom-pr .message h1 {
width: 100%;
text-align: left;
font-size: 24px;
line-height: 30px;
}
.author-profile-box {
padding: 15px;
}
.contents .author-profile-content {
padding: 30px 20px;
}
.contents .profile-icon {
width: 56px;
height: 56px;
min-width: 56px;
}
.contents .author-profile-content p {
font-size: 12px;
line-height: 20px;
}
.contents .author-profile-content .profile-title {
margin-bottom: 20px;
}
.contents .author-profile-info.article-author-profile {
margin-bottom: 20px;
}
}
.wp_social_bookmarking_light {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.wp_social_bookmarking_light div {
margin: 0 8px 0 0;
}
.wp_social_bookmarking_light div:last-child {
margin: 0;
}
.wp_social_bookmarking_light div.wsbl_facebook_like {
margin: 0;
position: relative;
left: -4px;
}
.wsbl_twitter {
background: #000;
border-radius: 3px;
height: 20px;
}
.consulting-apply-btn i {
font-size: 18px;
}
.red-shiny a {
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
border-bottom: solid 5px #ba1a2e ;
border-radius: 5px;
background-color: #e6213a ;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.red-shiny {
display: block;
width: 100%;
margin-bottom: 1em;
}
.red-shiny a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
.red-shiny:active {
border-bottom: none;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(4px);
-ms-transform: translateY(4px);
transform: translateY(4px);
}
.red-shiny a:before {
display: block;
position: absolute;
z-index: -1;
left: -30%;
top: -50%;
content: "";
width: 100px;
height: 100px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(67%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
animation: shiny 3s infinite linear;
-webkit-animation: shiny 3s infinite linear;
-moz-animation: shiny 3s infinite linear;
}
@keyframes shiny {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes shiny {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes shiny {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes shiny {
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes shiny {
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

.btn {
display: inline-block;
height: 40px;
padding: 0 30px;
border-radius: 6px;
outline: none;
font-size: 14px;
font-weight: bold;
line-height: 40px;
cursor: pointer;
}
.btn:disabled {
border-color: #b7bbce;
background-color: #b7bbce;
cursor: not-allowed;
}
.btn:disabled:hover {
border-color: #b7bbce;
background-color: #b7bbce;
}
.btn-default {
border: 1px solid #4a509e;
background-color: #4a509e;
color: #fff;
}
.btn-default:hover {
background-color: #4d56d6;
}
.btn-default:active {
background-color: #3f4dc7;
}
.btn-ghost {
border: 1px solid #545ca3;
background-color: #fff;
color: #545ca3;
}
.btn-ghost:hover {
background-color: #f6f8fe;
}
.btn-ghost:active {
background-color: #f6f8fe;
}
.btn-caution {
border: 1px solid #e6213a;
background-color: #e6213a;
color: #fff;
}
.c-caution:hover {
background-color: #ef4258;
}
.btn-caution:active {
background-color: #d40520;
}
.btn-ghostcaution {
border: 1px solid #e6213a;
background-color: #fff;
color: #d93c48;
}
.btn-ghostcaution:hover {
background-color: #fef7f7;
}
.btn-ghostcaution:active {
background-color: #fef7f7;
} .mac-btn {
position: relative;
width: 100%;
height: 50px;
font-size: 16px;
color: #fff;
cursor: pointer;
background: #e6213a;
border-radius: 5px;
transition: .3s;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.mac-btn.blue {
margin: 10px 0 0 0;
background: #799be6;
}
.mac-btn:hover {
opacity: 0.7;
transition: 0.3s;
} .more {
display: block;
padding: 16px 0;
background: #fff;
text-align: center;
cursor: pointer;
}
.more.inactive {
display: none;
}
.more .material-icons {
margin-right: 8px;
font-size: 20px;
vertical-align: -.2em;
}
.more.loading {
height: 52px;
line-height: 20px;
}
.more.loading .material-icons {
display: none;
}
.more.loading .guidance {
animation: blink 1.5s ease-in-out infinite alternate;
}
.more:hover {
transition: .3s;
cursor: pointer;
opacity: .5;
}
#page_top {
position: fixed;
bottom: 15px;
right: 15px;
z-index: 2;
}
@media screen and (max-width: 767px) {
#page_top {
position: fixed;
bottom: 75px;
right: 15px;
}
} #page_top a {
background-color: #000;
color: #fff;
text-align: center;
text-decoration: none;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
opacity: 0.7;
transition: 0.3s;
}
#page_top i {
color: #fff;
font-size: 40px;
}
#page_top a:hover {
opacity: 0.4;
}
 .mac-contact__wrapper {
animation: open .5s ease-in 1s forwards;
opacity: 0;
visibility: hidden;
z-index: 9;
position: relative;
}
.mac-contact {
width: 272px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 17px;
background: #282e66;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .09);
position: fixed;
bottom: 15px;
right: 15px;
z-index: 20;
transition: 0.4s;
border-radius: 5px;
}
.mac-contact.left {
right: 75px;
}
@media screen and (max-width: 767px) {
.mac-contact.left {
right: 15px;
}
}
@media screen and (max-width: 767px) {
.mac-contact {
right: 15px;
}
}
@keyframes open {
to {
opacity: 1;
visibility: visible;
}
}
.mac-contact:hover {
opacity: 0.7;
transition: 0.3s;
}
.mac-contact p {
width: 230px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.mac-contact p {
width: 200px;
}
}
.mac-contact i {
width: 50px;
height: 50px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #6F75AF;
}
.mac-contact-panel {
width: 272px;
background: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .09);
position: fixed;
right: 15px;
bottom: -500px;
z-index: 20;
transition: 0.4s;
opacity: 0;
visibility: hidden;
}
.mac-contact-panel.left {
right: 75px;
}
@media screen and (max-width: 767px) {
.mac-contact-panel.left {
right: 15px;
}
}
.mac-contact-panel.open {
opacity: 1;
visibility: visible;
bottom: 15px;
}
.mac-contact-panel__cont {
padding: 20px;
}
.mac-contact-panel__cont .mac-btn {
font-size: 14px;
height: 44px;
font-weight: 700;
background: #E6213A;
border-radius: 44px;
}
.mac-contact-panel__cont .mac-btn.blue {
background: #4A509E;
margin: 8px 0 0 0;
}
@media screen and (max-width: 767px) {
.mac-contact-panel__cont {
padding: 15px;
}
}
.mac-contact-panel__head {
width: 100%;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 17px;
background: #282e66;
}
.mac-contact-panel__head p {
width: 100%;
font-size: 14px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 16px;
}
.mac-contact-panel__head i {
min-width: 46px;
height: 46px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer
}
.mac-contact-panel__head i.remove {
min-width: 25px;
height: 25px;
border: 1px solid #fff;
border-radius: 3px;
font-size: 24px;
}
.mac-contact-panel__head i:hover {
opacity: 0.7;
transition: 0.3s;
}
.mac-contact-panel__cover {
width: 100%;
}
.mac-contact-panel__advisor {
padding: 15px 0 0 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.mac-contact-panel__advisor p {
margin: 0;
font-size: 10px;
display: flex;
}
@media screen and (max-width: 767px) {
.mac-contact-panel__advisor p {
font-size: 11px;
}
}
.mac-contact-panel__advisor a {
font-size: 14px;
color: #0016d9;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.mac-contact-panel__advisor a {
font-size: 14px;
}
}
.mac-contact-panel__advisor a:hover {
opacity: 0.7;
transition: 0.3s;
}
.mac-contact-panel__advisor img {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 8px 0 0;
}

.entry {
width: calc(100% / 4 - 12px);
margin: 0 15px 15px 0;
position: relative;
height: 363px;
float: left;
background: #fff;
}
.entry:nth-child(4n) {
margin-right: 0;
}
.entry .thumbnail-box {
width: 100%;
height: 170px;
background-position: center;
background-size: cover;
}
.entry .thumbnail-box img {
width: 100%;
height: 100%;
}
.entry .thumbnail-box:hover {
transition: .3s;
opacity: .5;
}
.entry h2 {
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 72px;
margin-top: 20px;
font-size: 14px;
font-weight: bold;
line-height: 24px;
}
.entry .date {
margin-top: 16px;
color: #7e82a6;
font-size: 12px;
}
.entry .arrow {
position: absolute;
right: 30px;
bottom: 30px;
}
.entry .entry-data {
padding: 30px;
}
.entry .entry-data a:hover {
transition: .3s;
opacity: .5;
}
.entry .entry-data h2:hover {
transition: .3s;
opacity: .5;
}
.entry .post-categories {
font-size: 12px;
font-weight: bold;
}
.entry .post-categories .material-icons {
margin-right: 8px;
font-size: 14px;
vertical-align: -.17em;
}
.recommend-list-wrapper {
background: #ffffff;
margin: 30px 62px 30px 62px;
padding: 30px;
}
.recommend-list-title {
font-size: 16px;
line-height: 16px;
font-weight: 800;
margin-bottom: 20px;
}
.recommend-post-list {
display: flex;
align-items: center;
justify-content: space-between;
}
.recommend-post-list .recommend-post {
width: calc(100% / 4 - 16px);
height: 280px;
}
.recommend-post-list .recommend-post:nth-child(4n) {
display: none;
}
.recommend-post-list .recommend-post .thumbnail-box {
width: 100%;
height: 168px;
background-position: center;
background-size: cover;
}
.recommend-post-list .recommend-post .recommend-posts-data {
background: #282E66;
padding: 20px 30px;
height: 112px;
}
.recommend-post-list .recommend-post .recommend-posts-data h2 {
color: #ffffff;
font-size: 14px;
font-weight: 800;
line-height: 24px;
height: 72px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.recommend-post-list .pr-block {
width: 280px;
height: 280px;
margin: 0;
}
.recommend-post-list .pr-block .thumbnail-box {
height: 280px;
}
.recommend-post-list .recommend-post:hover,
.recommend-post-list .pr-block:hover {
transition: .3s;
opacity: .5;
}
@media screen and (min-width: 1700px) {
.recommend-post-list .recommend-post:nth-child(4n) {
display: block;
}
.recommend-post-list .recommend-post {
width: calc(100% / 5 - 16px);
height: 280px;
}
}
@media screen and (max-width: 1700px) {
.entry {
width: calc(100% / 3 - 11px);
}
.entry:nth-child(4n) {
margin-right: 15px;
}
.entry:nth-child(3n) {
margin-right: 0;
}
}
@media screen and (max-width: 1317px) {
.recommend-post-list .recommend-post .recommend-posts-data {
padding: 20px;
}
}
@media screen and (max-width: 1170px) {
.entry {
width: calc(100% / 2 - 8px);
}
.entry:nth-child(3n) {
margin-right: 15px;
}
.entry:nth-child(2n) {
margin-right: 0;
}
.contents {
padding: 0px 30px 80px 30px;
}
.recommend-list-wrapper {
margin: 50px 30px 80px 30px;
}
.recommend-post-list {
flex-wrap: wrap;
}
.recommend-post-list .recommend-post {
width: calc(100% / 2 - 20px);
height: 320px;
margin-bottom: 20px;
}
.recommend-post-list .recommend-post .thumbnail-box {
height: 192px;
}
.recommend-post-list .recommend-post .recommend-posts-data {
height: 128px;
}
.recommend-post-list .recommend-post.pr-block .thumbnail-box {
height: 320px;
}
}
@media screen and (max-width: 1024px) {
.entry {
width: 100%;
height: 343px;
}
.entry .entry-data {
padding: 15px;
}
}
@media screen and (max-width: 767px) {
.entry {
width: 100%;
margin: 0 0 20px 0 !important;
}
.contents {
padding: 0 15px;
margin-bottom: 30px;
}
.contents section .entry {
width: 100%;
margin-bottom: 15px;
}
.contents section .entry h2 {
font-size: 16px;
}
.recommend-list-wrapper {
margin: 30px 15px;
padding: 40px 15px;
}
.recommend-post-list .recommend-post {
width: 100%;
height: 252px;
margin-bottom: 20px;
}
.recommend-post-list .recommend-post .recommend-posts-data {
height: 84px;
}
.recommend-post-list .recommend-post .recommend-posts-data h2 {
height: 44px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.recommend-post-list .recommend-post.pr-block {
margin-bottom: 0;
}
.recommend-post-list .recommend-post .thumbnail-box {
height: 168px;
}
.recommend-post-list .recommend-post.pr-block .thumbnail-box {
height: 252px;
}
}

.service-footer {
position: relative;
background: #37394d;
}
.service-footer a:hover {
transition: .3s;
opacity: .5;
}
.service-footer__content {
max-width: 1040px;
padding: 0 20px;
margin: 0 auto;
}
.service-footer .footer-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 50px 0;
}
.service-footer .footer-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.footer-section:last-child .footer-list {
text-align: right;
}
.service-footer .footer-section__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 20px;
}
.service-footer .footer-section__heading .link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.2em;
color: #fff;
}
.service-footer .footer-section__body {
padding-left: 8px;
}
.service-footer .footer-list__item {
padding-bottom: 16px;
}
.service-footer .footer-list__item .link {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
font-size: 14px;
font-weight: 300;
line-height: 1.2em;
color: #fff;
white-space: nowrap;
}
.service-footer .footer-list__item_size_small .link {
font-size: 12px;
}
.service-footer .footer-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 0 0 50px 0;
}
.service-footer .logo a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.service-footer .logo img {
width: 130px;
}
.service-footer .copyright {
font-size: 11px;
font-weight: 300;
line-height: 1.2em;
color: #fff;
z-index: 2;
}
.service-footer .footer-bottom .copyright {
margin: 0 0 0 10px;
}
.service-footer .decoration {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
height: 130px;
}
@media screen and (max-width: 1024px) {
.service-footer .footer-top {
display: block;
}
.service-footer .footer-section {
margin-bottom: 24px;
}
.footer-section:last-child {
margin: 0;
}
.footer-section:last-child .footer-list {
text-align: left;
}
}

.scroll-stop {
overflow: hidden; }
.header {
position: fixed;
top: 0;
z-index: 50;
width: 100%;
height: 68px;
padding: 16px 24px;
background: #fff;
-webkit-box-shadow: 0 0 4px 0 rgba(16, 18, 76, 0.11);
box-shadow: 0 0 4px 0 rgba(16, 18, 76, 0.11);
-webkit-transition: background-color .3s ease-out;
transition: background-color .3s ease-out;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.header__left {
margin-right: auto;
display: flex;
align-items: center;
}
.header__logo {
display: block;
margin-right: 30px;
}
.header__logo img {
width: 130px;
height: 20px;
}
.header .nav-menu {
height: 36px;
position: relative;
display: inline-block;
width: 100%;
}
.nav-menu .new-annotation {
display: inline-flex;
padding: 2px;
margin-left: 10px;
font-size: 10px;
font-weight: 700;
line-height: 10px;
color: #ffffff;
background-color: #e6213a;
border-radius: 4px;
}
.nav-menu__logo {
display: none;
}
.menu-first-level-wrap {
position: relative;
height: 100%;
margin-right: 20px;
font-size: 12px;
font-weight: 700;
line-height: 12px;
color: #12152e;
vertical-align: top;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.header .menu-first-level-wrap:hover {
color: #696C86;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.menu-first-level {
color: #12152e;
height: 36px;
cursor: default;
padding: 12px 17px 12px 0;
line-height: 12px;
}
.menu-first-level:hover {
color: #696c86;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
cursor: pointer;
}
.menu-first-level.has-second-level {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/common/menu-arrow-down.svg);
background-position: right -2px center;
background-repeat: no-repeat;
background-size: 13px 6px;
}
.menu-first-level.has-second-level:hover {
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/common/menu-arrow-down.svg);
}
.menu-second-level-wrap {
position: absolute;
top: 34px;
left: 0;
display: none;
width: 206px;
}
.menu-first-level:hover + .menu-second-level-wrap,
.menu-second-level-wrap:hover {
display: block;
height: auto;
}
.menu-second-level {
padding: 24px;
background: #fff;
border: 1px solid #ededed;
border-radius: 5px;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
}
.menu-second-level-item {
width: 100%;
font-size: 12px;
font-weight: 700;
line-height: 12px;
color: #12152e;
padding-bottom: 17px;
}
.menu-second-level-item:last-child {
padding: 0;
}
.menu-second-level-item a {
color: #12152e;
}
.menu-first-level-wrap:not(.has-second-level),
.menu-second-level-item a:hover {
color: #D61F36;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
cursor: pointer;
}
.menu-first-level-wrap :not(.menu-first-level.has-second-level) .new-annotation:hover {
color: #ffffff;
}
.header__right {
display: flex;
align-items: center;
}
.header__consulting_apply:hover,
.nav-menu__consulting_apply:hover {
transition: .3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.header__consulting_apply img,
.nav-menu__consulting_apply img {
width: 182px;
height: 36px;
}
#header__close {
position: fixed;
top: 0;
right: -48px;
z-index: 50;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 48px;
height: 48px;
cursor: pointer;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#header__close i {
font-size: 24px;
color: #101548;
}
.header__close-area {
position: fixed;
top: 0;
right: 0;
z-index: 1;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100vh;
background: #000;
opacity: .7;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.header .sub-header__close {
position: fixed;
top: 0;
right: -60px;
z-index: 50;
display: none;
width: 60px;
height: 60px;
}
.header .sub-header__close i {
font-size: 30px;
color: #fff;
}
.header__sign-in.base-btn {
float: right;
width: 100px;
min-width: 100px;
height: 30px;
margin: 0 0 0 13px;
font-size: 13px;
border-radius: 30px;
}
.header__sign-up.base-btn {
float: right;
width: 100px;
min-width: 100px;
height: 30px;
margin: 0 0 0 13px;
font-size: 13px;
border-radius: 30px;
}
#header__open {
display: none;
}
#header__close-area {
position: fixed;
top: 0;
right: 0;
z-index: 1;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100vh;
background: #000;
opacity: 0.7;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
} .breadcrumb-list {
justify-content: flex-start;
padding: 30px 62px;
}
.breadcrumb-list ol,
.breadcrumb-list ol li {
display: flex;
align-items: center;
font-size: 12px;
}
.breadcrumb-list li:last-child {
font-weight: 700;
color: #12152e;
}
.breadcrumb-list ol li:not(:first-child) {
margin-left: 4px;
}
.breadcrumb-list ol li:not(:last-child):after {
margin-left: 4px;
font-family: Material Icons, sans-serif;
font-size: 18px;
color: #9194b1;
content: "\e409";
}
.breadcrumb-list li a:hover {
transition: .3s;
opacity: .5;
}
.nav-menu__consulting_apply {
display: none;
}
.header__help {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 36px;
margin-right: 16px;
font-size: 12px;
font-weight: bold;
color: #12152e;
white-space: nowrap;
}
.header__help:hover {
color: #696c86;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
cursor: pointer;
}
@media screen and (max-width: 1170px) {
.header {
height: 48px;
padding: 0;
}
.header__logo {
margin: 0 auto 0 0;
padding: 16px;
}
.header__logo img {
width: 107px;
height: 16px;
}
.header .header__left {
padding: 0;
}
.header .nav-menu {
position: fixed;
top: 0;
right: -100%;
z-index: 50;
display: block;
width: 100%;
height: 100%;
padding-bottom: 15px;
overflow: auto;
background: #fff;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.header .nav-menu__logo {
display: block;
width: 100%;
padding: 16px 14px;
margin-bottom: 42px;
}
.header__menu-other {
padding: 0 150px 0 0;
}
.header .nav-menu__logo img {
width: 107px;
height: 16px;
}
.header__consulting_apply {
display: none;
}
#header__open {
position: relative;
width: 48px;
min-width: 48px;
height: 48px;
color: #12152e;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.header .nav-menu {
position: fixed;
top: 0;
right: -100%;
z-index: 50;
display: block;
width: 100%;
height: 100%;
padding-bottom: 15px;
overflow: auto;
background: #fff;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.header .nav-menu.open {
right: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.menu-first-level-wrap {
height: auto;
padding: 0;
margin: 0;
font-size: 14px;
display: block;
}
.header .menu-first-level-wrap:hover {
opacity: 1;
color: #12152e;
}
.header .nav-menu.open + #header__close {
right: 0;
}
.header .nav-menu.open ~ #header__close-area {
display: block;
}
.menu-first-level-wrap .menu-first-level {
height: 46px;
font-size: 14px;
padding: 16px 20px;
background-position: right 30px center;
display: block;
width: 100%;
}
.menu-first-level:hover + .menu-second-level-wrap,
.menu-second-level-wrap:hover {
display: none;
}
.menu-first-level.nav-menu__item.open + .menu-second-level-wrap {
display: block;
}
.menu-first-level.has-second-level.open {
background-color: #FAFBFF;
}
.menu-first-level {
width: 100%;
justify-content: left;
}
.menu-second-level-wrap {
position: relative;
top: 0;
width: 100%;
}
.menu-second-level {
box-shadow: unset;
padding: 0;
border: none;
}
.menu-second-level-item,
.menu-second-level-item:last-child {
font-weight: 400;
padding: 0;
}
.menu-second-level-item a {
display: block;
padding: 16px 30px;
}
.nav-menu__consulting_apply {
display: flex;
justify-content: center;
margin-top: 24px;
}
.breadcrumb-list {
padding: 30px;
}
.header__help {
display: none;
}
}

.side-content {
width: 352px;
margin-left: 24px;
margin-bottom: 50px;
order: 2;
}
.search-form {
width: 100%;
margin-bottom: 18px;
}
.search-form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
color: #12152E;
border: 1px solid #AFB5CC;
height: 40px;
background-color: #ffffff;
}
.search-form input::placeholder {
color: #282e66;
transition: 0.3s;
}
.search-form input:focus::placeholder {
color: #c7c9d6;
}
.side-bar {
width: 350px;
min-width: 350px;
margin: 0 20px 0 0;
}
.side-bar a:hover {
transition: .3s;
opacity: .5;
}
.side-bar__list {
padding: 30px 0;
background: #fff;
}
.side-bar__list .title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
padding-left: 20px;
}
.side-bar__list .post-categories ul {
font-size: 16px;
}
.side-bar__list .post-categories ul li {
padding: 18px 20px;
}
.side-bar__list .post-categories ul li::before {
content: none;
}
.side-bar__list .post-categories ul li .count {
margin-left: 6px;
}
.side-bar__list ol {
width: 100%;
}
.side-bar__list ol::after {
display: block;
clear: both;
content: '';
}
.side-bar__list li {
counter-increment: step-counter;
display: flex;
align-items: center;
border-bottom: 1px solid #e3e3e3;
padding: 10px 20px;
}
.side-bar__list li:last-child {
margin-bottom: 20px;
}
.side-bar__list li::before {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
min-width: 30px;
height: 30px;
margin: 0 10px 0 0;
padding-top: 4px;
border-radius: 3px;
float: left;
background: #696f99;
color: #fff;
font-family: helvetica;
font-size: 16px;
font-weight: bold;
content: counter(step-counter);
box-sizing: border-box;
}
.side-bar__list li:nth-child(1)::before {
background: #e6a812;
}
.side-bar__list li:nth-child(2)::before {
background: #bcb6b6;
}
.side-bar__list li:nth-child(3)::before {
background: #b49448;
}
.side-bar__list li a {
width: 100%;
display: block;
padding: 0 20px 0 0;
float: left;
line-height: 22px;
}
.side-bar__buyers {
width: 100%;
}
.side-bar__buyers article a {
display: flex;
padding: 17px 20px;
border-bottom: 1px solid #e3e3e3;
}
.side-bar__buyers article img {
width: 70px;
min-width: 95px;
height: 70px;
object-fit: contain;
}
.side-bar__buyers article div {
padding: 0 0 0 10px;
width: calc(100% - 90px);
}
.side-bar__buyers .title {
width: 100%;
font-size: 13px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.side-bar__buyers .text {
width: 100%;
font-size: 12px;
line-height: 16px;
width: 100%;
display: block;
}
.side-bar__more {
width: calc(100% - 40px);
margin: 20px 0 0 20px;
padding: 15px 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #282e66;
border-radius: 5px;
font-size: 15px;
transition: 0.3s;
}
.side-bar__more:hover {
opacity: 1 !important;
background: #eff3fd;
color: #fff;
background: #292f65;
} .tagcloud {
margin: 20px 0 30px 0;
padding: 0 20px 14px 20px;
border-bottom: 1px solid #e3e3e3;
}
.tagcloud .tag-cloud-link {
color: #282E66;
margin-bottom: 6px;
font-size: 14px !important;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 5px;
background: #ebecf5;
font-weight: normal;
}
.pr-block {
width: 100%;
margin: 20px 0 0 0;
}
.pr-block img {
width: 100%;
}
@media screen and (max-width: 767px) {
.side-bar {
display: none;
}
.side-content {
width: 100%;
margin: 0 0 40px 0;
}
.search-form {
margin-bottom: 8px;
}
.side-content select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #12152E;
font-size: 14px;
width: 100%;
height: 40px;
border-color: #AFB5CC;
border-radius: 5px;
padding: 8px 12px;
background-color: #ffffff;
background-image: url(//macloud.jp/media/wp-content/themes/matoz/img/common/selectbox-arrow.svg);
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 13px 13px;
}
.side-content select::-ms-expand {
display: none;
}
}