@charset "UTF-8";
/* 記事内の口コミを投稿するボタンここから */
.pageend.post_review {
margin:20px 0;
}
.pageend.post_review a {
display: block;
text-align: center;
font-size: 1.6rem;
padding: 12px;
text-decoration: none;
}
.pageend.post_review a:after {
vertical-align: -5px;
}
@media screen and (max-width: 738px) {
.pageend.post_review a {
font-size: 1.5rem;
padding: 14px;
}
.pageend.post_review a:after {
vertical-align: -3px;
margin-left: 7px;
}
}
/* 記事内の口コミを投稿するボタンここまで */
/* 内容の誤りを報告する ここから */
#top .error-link {
color: #777;
border-color: #d7d7d7;
font-size: 1.2rem;
}
.error-link:before {
display: inline-block;
vertical-align: -1px;
}
.error-link:after {
display: none;
}
/* 内容の誤りを報告する ここまで */
/* recapchaの位置調整ここから */
#top .grecaptcha-badge {
bottom: 120px !important;
}
/* recapchaの位置調整ここまで */
/* コメント欄ここから */
#comments {
    margin: 32px;
    background-color: #f8f9fa; /* 少しクリーンなグレーに変更 */
    padding: 32px;
    border-radius: 8px;
}

/* 見出し */
#respond > div {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 24px;
    color: #333;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 12px;
}

/* 入力フォーム（テキストエリア） */
.comment-respond textarea {
    line-height: 1.6;
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    resize: vertical;
}

/* 入力中のフォーカス時（青く光る） */
.comment-respond textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* コメント投稿に関するご案内（カード風） */
.comment-guidance {
    background-color: #ffffff;
    border-left: 4px solid #cce3f5;
    padding: 20px;
    margin: 32px 0;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.comment-guidance > div {
    font-weight: bold;
    font-size: 1.6rem;
    color: #333;
}

.comment-guidance > p {
    line-height: 1.6;
    letter-spacing: 1pt;
    font-size: 1.5rem;
    margin-top: 12px;
    color: #555;
}

.comment-guidance > p + p {
    margin-top: 16px;
}

.comment-guidance a {
    color: #1a73e8;
    text-decoration: none;
}

.comment-guidance a:hover {
    text-decoration: underline;
}

/* プライバシーポリシー同意チェック */
.comment-privacy-check {
    margin: 28px 0 32px;
}

.comment-privacy-check label {
    display: flex;
    align-items: center;
    width: fit-content;
    font-weight: bold;
    line-height: 1.4;
    cursor: pointer;
}

#privacy_agree {
    width: 18px;
    height: 18px;
    margin: 0 12px 0 0;
    cursor: pointer;
}

/* 送信ボタン（有効時） */
#submit {
    background-color: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 32px;
    font-size: 1.6rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 送信ボタン（ホバー時） */
#submit:hover:not(:disabled) {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

/* 送信ボタン（無効時） */
#submit:disabled {
    background-color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.8;
}

/* 承認待ちメッセージ */
.comment-awaiting-moderation {
    font-style: normal;
    line-height: 1.4;
}

/* スマホ対応 */
@media screen and (max-width: 738px) {
    #comments {
        margin: 32px 16px;
        padding: 20px;
    }
    .comment-guidance {
        padding: 16px;
    }
    #submit {
        width: 100%;
    }
}
/* コメント欄ここまで */
/* 任意の場所短縮表示ここから */
.accordion-block {
overflow: hidden;
position: relative;
}
.accordion-block::before {
content: "";
position: absolute;
left: -1px;
bottom: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 30%, #fff 100%);
height: 60px;
width: calc(100% + 1px);
z-index: 1;
}
.see-more {
position: absolute;
width: 220px;
text-align: center;
font-size: 16px;
color: #fa224d;
border: 2px solid;
border-radius: 22px;
line-height: 40px;
bottom: 8px;
z-index: 1;
left: 0;
right: 0;
margin: 0 auto;
}
.see-more::after {
content: "\ea45";
font-family: "icomoon";
font-size: 16px;
color: #fa224d;
position: absolute;
margin-left: 10px;
}
.accordion-block.active-block {
height: auto !important;
}
.accordion-block.active-block::before {
display: none;
}
.accordion-block.h600 {
height: 600px;
}
@media screen and (min-width: 739px) {
.see-more {
cursor: pointer;
}
.accordion-block.pcnone {
height: fit-content;
}
.accordion-block.pcnone:before {
display: none;
}
.accordion-block.pcnone div.see-more {
display: none;
}
.accordion-block {
height: 450px;
}
}
@media screen and (max-width: 738px) {
.accordion-block {
height: 350px;
}
}
/* 任意の場所短縮表示ここまで */
/* ミニタイトルここから */
.pink-circle {
position: relative;
display: inline-block;
background-color: #1778c9;
color: #ffffff;
padding: 5px 15px;
border-radius: 6px;
font-weight: bold;
font-size: 16px;
margin-top: 18px;
}
.pink-circle:before {
content: "";
position: absolute;
top: 99%;
left: 32px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid #1778c9;
}
/* ミニタイトルここまで */
/* 口コミここから */
.kuchi-slider {
overflow: auto;
display: flex;
padding-bottom: 10px;
margin-top: 20px;
}
}
.kuchi-slider, .kuchikomi .kuchi-box, .kuchikomi .kuchi-right, .kuchikomi .kuchi-spec, .kuchikomi .kuchi-more {
margin-top: 0;
}
.content div.kuchi-right {
flex: 1;
margin-top: 0px;
}
.content div.kuchi-spec {
margin-top: 0px;
}
.kuchi-spec span {
display: inline-block;
background-color: #f9f9f9;
padding: 0 12px;
border-radius: 18px;
font-size: 14px;
}
.kuchi-spec span+span {
margin-left: 4px;
}
.kuchi-list .kuchi-spec span {
margin: 4px 4px 0 0;
}
.kuchikomi p {
margin-top: 0px;
}
.review-summary+p {
display: block;
margin-top: 8px;
}
.review-label {
font-size: 1.3rem;
font-weight: bold;
}
.kuchikomi .review-summary {
font-weight: bold;
font-size: 1.6rem;
line-height: 1.4;
margin-top: 0px;
}
.kuchikomi {
min-width: 400px;
border: 1px solid #d3d3d3;
padding: 20px;
position: relative;
overflow: hidden;
margin-top: 15px;
}
.kuchi-date {
text-align: right;
font-size: 14px;
color: #797979;
}
.kuchi-list div.kuchikomi {
border-bottom: 12px solid whitesmoke;
}
.kuchi-slider .kuchikomi {
margin-top: 0;
}
.kuchi-slider .kuchikomi+.kuchikomi {
margin-left: 12px;
}
.kuchi-slider .kuchikomi .kuchi-box {
display: flex;
flex-direction: column;
height: 100%;
}
.kuchi-inner {
display: flex;
gap: 16px;
}
.kuchi-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-size: 100%;
overflow: hidden;
}
.content .starList {
color: #ffc000;
display: flex;
align-items: center;
font-size: 1.5rem;
}
.star-text {
font-size: 1.4rem;
font-weight: 700;
display: inline-block;
margin-left: 4px;
color: #191919;
}
.kuchi-label {
color: #fff;
background-color: #ff6b78;
display: inline-block;
font-size: 1.4rem;
line-height: 1;
padding: 6px 20px;
border-radius: 4px;
margin-bottom: 8px;
}
.bad+.kuchi-right .kuchi-label {
background-color: #0099cc;
}
.verygood+.kuchi-right .kuchi-label {
background-color: #ff3e50;
}
.normal+.kuchi-right .kuchi-label {
background-color: #fbd17e;
color: #000;
}
.kuchi-button {
-webkit-appearance: none;
border: none;
padding: 50px 0 8px;
display: block;
width: 100%;
background: linear-gradient(180deg, #ffffff00 10%, #f9fdff 85%);
color: #3694de;
text-decoration: underline;
cursor: pointer;
}
.kuchi-button:after {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px #3694de;
border-right: solid 2px #3694de;
position: absolute;
top: 62%;
transform: rotate(45deg);
margin-left: 8px;
}
@media screen and (max-width: 738px) {
.kuchikomi {
min-width: 300px;
padding: 15px;
}
.kuchi-icon {
width: 45px;
height: 45px;
}
.kuchi-inner {
display: flex;
gap: 7px;
}
.kuchi-spec {
font-size: 1.2rem;
}
.content .starList {
font-size: 1.3rem;
}
}
/* 口コミここまで */
/* リストデザインここから */
.content ul, .content ol {
border: 1px solid #000;
padding: 24px;
margin-top: 20px;
text-align: left;
}
.content ul li {
position: relative;
padding-left: 12px;
}
.content ol li {
position: relative;
padding-left: 24px;
}
.content ul li + li, .content ol li + li {
margin-top: 5px;
}
.content ul li:before {
position: absolute;
top: 10px;
left: 0;
display: inline-block;
width: 4px;
height: 4px;
content: "";
border-radius: 100%;
background-color: #000;
margin-right: 8px;
}
.content ol li::before {
counter-increment: item;
content: counter(item) ".";
font-weight: bold;
color: #1778c9;
font-style: italic;
margin-right: 8px;
position: absolute;
left: 0px;
top: 0px;
}
.content ul > li > span, .content ol > li > span {
display: inline-block;
}
@media screen and (max-width: 738px) {
.content > ul:not([class]), .content > ol:not([class]) {
padding: 20px;
}
.content ul li, .content ol li {
line-height: 1.5;
}
.content ul li:before {
top: 10px;
}
}
/* リストデザインここまで */
/* 画像入りリストここから */
.content .imagelist {
background-color: #fff;
padding: 0;
counter-reset: step;
border: none;
margin: 30px 0;
}
.content .imagelist li {
padding-left: 32px;
padding-bottom: 24px;
margin-top: 0;
}
.content ol.imagelist li:before {
content: "";
width: 3px;
background: #fff4d0;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 5px;
margin: 0;
}
.list-step:after {
content: counter(step);
counter-increment: step;
display: inline-block;
font-size: 1.4rem;
}
.list-step {
font-size: 1.4rem;
font-weight: bold;
color: #ffc100;
}
.imagelist .list-title {
font-size: 2rem;
font-weight: bold;
margin-top: 0;
}
.imagelist .list-main {
border-bottom: dashed 1px #ccd5db;
padding-bottom: 12px;
margin-top: 8px;
}
.list-ircle {
border-color: #aea5a0;
}
.content .imagelist>li:last-of-type {
padding-bottom: 0;
}
.imagelist li:first-of-type .list-ircle, .imagelist li:last-of-type .list-ircle {
background-color: #ffc100;
}
.imagelist .list-ircle {
border: 3px solid #ffc100;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
left: 0;
top: 5px;
margin-top: 0;
}
.content .imagelist li:last-of-type:before {
display: none;
}
.content .imagelist li:last-of-type .list-title {
line-height: 1.2;
}
.content .imagelist .board2-list li {
padding: 0;
}
.content .imagelist .board2-list li:first-of-type {
margin-top: 0;
}
.content .imagelist .board2-list li+li {
margin-top: 10px;
}
@media screen and (max-width: 738px) {
.imagelist .list-title {
font-size: 1.7rem;
}
.imagelist .list-main {
margin-top: 4px;
}
.content .imagelist li {
padding-left: 24px;
}
}
/* 画像入りリストここまで */
/* 文字入りリスト1ここから */
.board {
border: 1px solid #1778c9;
margin: 28px auto;
background-color: #1778c9;
}
.campaign .board-title:before {
font-family: 'icomoon';
content: "\e923";
margin-right: 5px;
color: #ffc100;
}
.campaign div.board-title {
text-align: center;
font-weight: bold;
color: #ffc100;
padding-top: 15px;
font-size: 18px;
}
.board.campaign {
border: 3px solid #ffc100;
border-radius: 15px;
background: #fffaf5;
}
.campaign ul.board-list {
background: none;
padding-top: 10px;
}
.content .board-title {
color: #fff;
padding: 5px 15px;
}
.content .board-list {
padding: 24px;
background-color: #fff;
border: none;
margin: 0;
}
ul.board-list li {
padding-left: 12px;
line-height: 1.5;
}
ul.board-list li:before {
position: absolute;
top: 10px;
left: 0;
display: inline-block;
width: 4px;
height: 4px;
content: "";
border-radius: 100%;
background-color: #000;
margin-right: 8px;
}
.board-list li + li {
margin-top: 16px;
}
@media screen and (max-width: 738px) {
.board-title {
line-height: 1.4;
}
}
/* 文字入りリスト1ここまで */
/* 文字入りリスト2ここから */
#top .board2 {
margin: 28px auto;
}
.board2-title {
width: fit-content;
margin-left: 20px;
position: relative;
z-index: 1;
background-color: #1778c9;
padding: 3px 15px;
color: #fff;
top: -5px;
}
#top .board2 ul, #top .board2 ol {
padding: 35px 24px 24px 24px;
}
.content .board2-list {
margin-top: -24px;
border-color: #1778c9;
}
.content ul.board2-list li {
padding-left: 12px;
line-height: 1.6;
}
ol.board2-list li {
padding-left: 32px;
}
@media screen and (max-width: 738px) {
.content .board2-list {
padding: 40px 20px 16px 20px;
}
.content .board2-list li {
line-height: 1.4;
padding-left: 32px;
}
.board2-title {
padding: 5px 15px;
line-height: 1.4;
margin-left: 12px;
max-width: 93%;
}
}
/* 文字入りリスト2ここまで */
/* メリット・デメリット黒板 ここから */
.merit-box-group {
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin-top: 28px;
}
.content .merit-box.merit {
background: #FFF9F9;
}
.content .merit-box.demerit {
background: #F5FAFE;
margin-top: 0;
}
.merit-box {
position: relative;
width: 100%;
margin-bottom: 20px;
}
#top .merit-box > div {
padding: 10px;
font-weight: bold;
text-align: center;
line-height: 1.9;
}
.merit-box.merit > div {
background: #ffd3db;
color: #ff4f6e;
}
.merit-box.demerit > div {
background: #c6e5ff;
color: #1778c9;
}
.content .merit-box ul {
padding: 27px;
margin: 0;
border: none;
}
.merit-box ul li {
padding-left: 24px;
line-height: 1.6;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
.merit-box ul li:last-of-type {
padding-bottom: 0;
border: none;
}
.merit-box ul li + li {
margin-top: 12px;
}
.merit-box ul li::before {
font-family: "icomoon";
font-size: 1.6rem;
position: absolute;
background: none;
width: auto;
height: auto;
}
.merit-box.merit ul li::before {
content: "\ea57";
color: #ff4f6e;
left: 0;
top: 0;
}
.merit-box.demerit ul li::before {
content: "\e90f";
color: #1778c9;
font-size: 1.2rem;
left: 2px;
top: 3px;
}
.merit-box ol {
padding: 12px 16px;
margin: 0 !important;
}
.merit-box ol li + li {
margin-top: 12px;
}
.merit-box ol li::before {
counter-increment: item;
content: counter(item) ".";
font-weight: bold;
color: #fa224d;
font-size: 1.7rem;
font-style: italic;
line-height: 1.33;
margin-right: 8px;
}
.merit-box.demerit ol li::before {
color: #2d7fe9;
}
@media screen and (max-width: 738px) {
.merit-box-group {
display: block;
}
.merit-box-group > .merit-box {
max-width: 100%;
margin-bottom: 15px;
}
}
/* メリット・デメリット黒板 ここまで */
/* コメントここから */
#top .ico {
margin: 0;
width: 90px;
height: 90px;
border: none;
border-radius: 50%;
}
#top .cha1 .ico {
float: left;
margin-right: 15px;
width: 80px;
height: 80px;
}
#top .cha2 .ico {
float: right;
margin-left: 15px;
}
#top .ico+div {
width: calc(100% - 105px);
padding: 3px;
border-radius: 4px;
float: left;
margin-top: 0;
position: relative;
}
#top .ico+div:before {
content: "";
position: absolute;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
top: 20px;
}
#top .cha1 .ico+div:before {
border-right: 8px solid #f8f8f8;
left: -8px;
}
#top .cha1 .ico+div:after {
border-right: 10px solid #fff;
left: -4px;
}
#top .cha2 .ico+div:before {
border-left: 8px solid #f8f8f8;
right: -8px;
}
#top .cha2 .ico+div:after {
border-left: 10px solid #fff;
right: -4px;
}
.bghanten {
transform: scale(-1, 1);
}
.gra {
background-color: #f8f8f8;
}
@media screen and (max-width: 738px) {
#top .ico {
width: 60px;
height: 60px;
}
#top .cha1 .ico {
width: 55px;
height: 55px;
}
#top .ico+div {
width: calc(100% - 75px);
}
}
#top .interview {
margin: 3rem 0;
overflow: hidden;
}
#top .interview .bgwhite {
padding: 12px;
border-radius: 3px;
line-height: 1.6;
}
#top .interview .bgwhite+p {
display: none;
}
/* コメントここまで */
/* 公式ボタンここから */
#top .content .official a {
max-width: 80%;
height: 70px;
display: block;
text-align: center;
border-radius: 40px;
overflow: hidden;
border-bottom: none;
margin: 0 auto;
position: relative;
color: #fff;
padding: 20px 0px;
background: #4caf50;
box-shadow: 2px 2px 6px #a3a3a3;
font-weight: bold;
font-size: 18px;
transition-duration: .4s;
}
div.official a {
text-decoration: none;
}
div.official {
text-align: center;
margin: 20px 0px;
}
.official a:after {
content: "";
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 24px;
margin-top: -6px;
}
#top .content .official a:hover {
transform: scale(1.1);
}
@media screen and (max-width: 738px) {
#top .content .official a {
max-width: 92%;
}
}
/* 公式ボタンここまで */
/* アフィリンクボタン ここから */
div.afi {
text-align: center;
margin: 30px 0px 20px 0px;
}
div.afi a {
text-decoration: none;
}
#top .content .afi a {
max-width: 85%;
display: block;
text-align: center;
border-radius: 10px;
overflow: hidden;
border-bottom: none;
margin: 0 auto;
position: relative;
color: #fff;
padding: 20px 0px;
background: #ffc100;
background-size: 200% auto;
box-shadow: 0 3px 0 0 #e6ac00;
font-weight: bold;
font-size: 18px;
transition: background-position 0.4s ease-out;
line-height: 30px;
}
#top .content .afi a:hover {
background-position: 100% 0;
}
.afi a:after {
content: "";
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 24px;
margin-top: -6px;
}
span.micro-copy {
padding: 6px 20px;
border-radius: 25px;
position: relative;
top: -5px;
z-index: 1;
font-size: 18px;
font-weight: bold;
}
span.micro-copy::before {
content: "";
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-40deg);
display: inline-block;
border-style: solid;
border-width: 22px 4px 0 4px;
border-color: #ffc100 transparent transparent transparent;
left: -14px;
top: 6px;
position: relative;
}
span.micro-copy::after {
content: "";
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(40deg);
display: inline-block;
border-style: solid;
border-width: 22px 4px 0 4px;
border-color: #ffc100 transparent transparent transparent;
left: 7px;
top: 6px;
position: relative;
}
.content a.table-bt {
    font-weight: bold;
    text-decoration: none;
    color: #fff !important;
    border-radius: 30px;
    background: #ffc100;
    padding: 8px 15px;
    box-shadow: 2px 2px 2px #d3d3d3;
}
@media screen and (max-width: 738px) {
#top .content .afi a {
max-width: 97%;
}
span.micro-copy {
font-size: 16px;
}
}
/* アフィリンクボタン ここまで */
/* テーブルレイアウトここから */
table {
margin: 20px 0px;
width: 100%;
border-top: 1px solid #1778c9;
border-left: 1px solid #1778c9;
border-collapse: collapse;
border-spacing: 0;
}
table thead {
background-color: #1778c9;
color:#fff;
}
table thead th {
font-weight: bold;
}
table td, table th {
font-size: 1.4rem;
font-weight: normal;
line-height: 1.6;
text-align: left;
padding: 10px;
vertical-align: middle;
}
table td {
border-bottom: 1px solid #1778c9;
border-right: 1px solid #1778c9;
}
td.column-1 {
background: #ffffff;
color: #1778c9;
font-weight: bold;
}
table thead + tbody .row-2 td {
border-top: none;
}
table th+ th {
border-left: 1px solid #fff;
}
.icon-new-tab {
border: none;
}
.tablepress-table-description {
display: block;
}
table.shadow img {
margin-bottom: 5px;
box-shadow: 2px 2px 2px #d3d3d3;
border-radius: 5px;
}
tr.row-1 {
border-bottom: 1px solid #1778c9;
border-right: 1px solid #1778c9;
}
.aline-center, .aline-center th, .aline-center td {
text-align: center;
}
@media screen and (max-width: 738px) {
table td,table th {
padding: 7px;
}
table th {
line-height: 1.4;
}
}
/* テーブルレイアウトここまで */
/* 画像引用元ここから */
cite {
font-style: normal;
}
.quote {
font-size: 1.2rem;
color: #aaa;
line-height: 1.4;
margin-top: 5px;
}
table + span p.quote {
margin-bottom: 15px;
}
#top .quote cite a {
text-decoration: none;
border-bottom: none;
font-weight: normal;
padding-bottom: 0;
color: #aaa;
}
@media screen and (max-width: 738px) {
.quote {
line-height: 1.2;
}
}
/* 画像引用元ここまで */
/* 目次ここから */
.outline__title {
font-size: 2.4rem;
font-weight: bold;
}
.content .outline {
display: block;
border: 1px solid #666666;
padding: 30px 40px;
margin: 40px 0px;
}
.content .outline__switch + .outline__list {
margin-left: 0;
background-color: transparent;
margin-bottom: 0;
}
.content .outline__link {
display: inline-block;
color: #191919;
line-height: 1.6;
font-size: 1.6rem;
text-decoration: none;
border: none;
position: relative;
}
.outline__list-2 > li {
border-top: 1px solid rgba(47, 47, 47, 0.1);
padding: 16px 0;
margin-top: 0;
}
#top .outline__list-3 {
padding: 0 0 0 8px;
background-color: transparent;
border: none;
margin: 0;
}
#top .outline__list-3 > li {
margin-top: 8px;
padding-left: 0;
}
.content .outline__switch + .outline__list li {
padding-left: 30px;
}
label.outline__switch {
vertical-align: 3px;
margin-left: 8px;
}
.content .outline__number {
border-radius: 50%;
color: #1778c9;
width: 2.2rem;
height: 2.2rem;
line-height: 1.5;
text-align: center;
font-size: 1.5rem;
padding: 0;
position: absolute;
left: -30px;
letter-spacing: 0;
}
.outline__list-3 .outline__number {
display: none;
}
.outline__list-2 > li > a {
font-weight: bold;
}
.outline__list-3 > li a:before {
position: absolute;
top: 9px;
left: -16px;
display: inline-block;
content: "";
width: 5px;
height: 5px;
background-color: #1778c9;
border-radius: 100%;
}
.content ul li.outline__item::before {
display: none;
}
@media screen and (max-width: 738px) {
.content .outline {
padding: 20px 30px;
}
.content .outline__number {
top: 0;}
.outline__title {
font-size: 2rem;
}
span.outline__title.icon-list2:before {
width: 40px;
line-height: 40px;
}
#top .content .outline__switch + .outline__list {
margin-top: 0;
background-color: transparent;
}
.content .outline__link {
line-height: 1.4;
}
#top .outline__list-3 {
padding-left: 0;
}
#top .outline__list-3 > li {
margin-top: 12px;
}
.outline__list-3 > li a:before {
top: 6px;}
.outline__list-3 .outline__link {
font-size: 1.4rem;
vertical-align: top;
}
}
/* 目次ここまで */
/* この記事書いた人ここから */
.profile {
    font-size: 1.4rem;
    border-top: 2px solid #666666;
    border-bottom: 2px solid #666666;
    margin: 0 32px;
    padding: 30px 20px;
    background: #fff;
    position: relative;
}
#top .profile .profile__name {
border: none;
color: #191919;
font-size: 1.6rem;
margin-top: 12px;
}
#top .profile .profile__name a {
font-weight: bold;
color: #191919;
}
.profile__author img {
    box-shadow: 0px 0px 10px #dbdbdb;
}
.profile__text {
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1;
    font-weight: bold;
}
#top .profile ul {
background-color: transparent;
margin-top: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#top .profile li {
margin-top: 0;
}
#top .profile li:before {
display: none;
}
.profile .profile-title {
font-size: 1.6rem;
line-height: 1;
margin: 28px 0 12px;
}
#top .profile-list li {
line-height: 1;
margin-left: 12px;
}
#top .profile-list>li:nth-of-type(n+5) {
margin-top: 8px;
}
#top .profile-list li a {
text-decoration: none;
color: #191919;
border-bottom: none;
font-weight: normal;
}
#top .profile-description {
line-height: 1.8;
margin-bottom: 12px;
}
.profile .basic-data li {
line-height: 1;
margin-top: 0;
}
.profile .basic-data li+li {
margin-left: 12px;
padding-left: 12px;
border-left: 1px solid #ccc;
}
.profile .basic-data li:before {
display: none;
}
.sns-list {
justify-content: right;
}
.sns-list li+li {
margin-left: 6px;
}
#top .sns-list a {
display: block;
text-decoration: none;
color: #fa224d;
border: 1px solid #fa224d;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
#top .sns-list a:before {
margin-left: 1px;
}
@media screen and (min-width: 739px) {
    .profile {
        display: flex;
        justify-content: space-evenly;
    }
}
@media screen and (max-width: 738px) {
.profile {
margin: 0 16px;
}
#top .profile .profile__name {
font-size: 1.8rem;
padding: 16px 0 20px;
margin-top: 0;
}
#top .profile ul {
justify-content: center;
}
#top .profile ul.profile-list {
justify-content: left;
}
#top .profile-description {
text-align: left;
}
}
/* この記事書いた人ここまで */
/* 記事のQ&Aここから */
.qa {
margin: 20px 0px;
}
.qa > div {
background: #e7e7e7;
padding: 15px;
}
.qa > div + div {
margin-top: 20px;
}
.postContents .question {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.75;
background-size: 35px;
background-position: left 12px;
display: block;
position: relative;
padding: 7px 0 7px 40px;
color: #1878c9;
}
.postContents .question::before {
content: "Q";
font-family: sans-serif;
padding: 9px;
background: #1878C9;
border-radius: 30px;
color: white;
font-size: 1.6rem;
font-weight: normal;
position: absolute;
left: 0;
top: 5px;
width: 30px;
height: 30px;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
h3.question::after {
display: none;
}
#top .postContents .answer {
padding: 15px;
margin-top: 10px;
background: white;
border-radius: 10px;
}
.answer+p {
display: none;
}
.answer-text+p {
margin: 0;
}
@media screen and (max-width: 738px) {
.postContents .question {
line-height: 1.5;
}
}
/* 記事のQ&Aここまで */
/* SPで表示、PCで非表示ここから */
@media screen and (min-width: 739px) {
.sp-display {
display: none;
}
}
/* SPで表示、PCで非表示ここまで */
/* PCで表示、SPで非表示ここから */
@media screen and (max-width: 738px) {
.pc-display {
display: none;
}
}
/* PCで表示、SPで非表示ここまで */
/* hoverイベントここから */
@media screen and (min-width: 739px) {
.content .quote a:hover {
font-weight: normal;
text-decoration: underline;
color: #aaa;
}
.outline a:hover {
color: #1a73e8;
}
}
/* hoverイベントここまで */
/* トップへボタンここから */
.pageTop {
margin-top: 30px;
padding: 0 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
line-height: 1;
}
.pageTop__btn {
display: -ms-flexbox;
display: flex;
padding: 10px 14px;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
min-width: 115px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 1.4rem;
text-decoration: none;
}
.bottomMenu__item.is_active, .pageTop__btn {
background-color: #1778c9;
color: #fff;
}
.pageTop__btn:after {
display: block;
width: 7px;
height: 7px;
border-style: solid;
border-width: 1px;
border-color: #fff #fff transparent transparent;
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
content: '';
}
@media screen and (min-width: 739px) {
.pageTop {
padding: 0;
max-width: 830px;
margin: 30px auto 0;
}
}
/* トップへボタンここまで */
/* 全体設定ここから */
#top .radius0 {
border-radius: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
#top .mt0 {
margin-top: 0 !important;
}
#top .mt5, #custom .mt5 {
margin-top: 5px;
}
#top .mt10 {
margin-top: 10px;
}
#top .mt15 {
margin-top: 15px;
}
#top .mt20, #custom .mt20 {
margin-top: 20px;
}
#top .mt30 {
margin-top: 30px;
}
#top .mb0 {
margin-bottom: 0;
}
#top .mb5, #custom .mb5 {
margin-bottom: 5px;
}
#top .mb10, #custom .mb10 {
margin-bottom: 10px;
}
#top .mb15 {
margin-bottom: 15px;
}
#top .mb20 {
margin-bottom: 20px;
}
#top .mb25 {
margin-bottom: 25px;
}
#top .mb30 {
margin-bottom: 30px;
}
#main .ml0 {
margin-left: 0;
}
#top .ml15 {
margin-left: 15px;
}
#top .ml20 {
margin-left: 20px;
}
#top .ml30 {
margin-left: 30px;
}
#top .mr15 {
margin-right: 15px;
}
#top .mr5 {
margin-right: 5px;
}
#top .mr20 {
margin-right: 20px;
}
#top .pt0 {
padding-top: 0;
}
#top .pt5 {
padding-top: 5px;
}
#top .pt10 {
padding-top: 10px;
}
#top .pb0 {
padding-bottom: 0;
}
#top .pb5 {
padding-bottom: 5px;
}
#top .pb10 {
padding-bottom: 10px;
}
#top .pl0 {
padding-left: 0;
}
#top .pl15 {
padding-left: 15px;
}
#top .pl20 {
padding-left: 20px;
}
#top .pr15 {
padding-right: 15px;
}
#top .pr20 {
padding-right: 20px;
}
#top .pd10 {
padding: 10px;
}
#top .ht950 {
height: 950px;
}
#top .inlineblock, #custom .inlineblock {
display: inline-block;
}
#top .block {
display: block;
}
small {
line-height: 1.6;
}
.underline {
text-decoration: underline;
}
#top .tdeco-none {
text-decoration: none;
}
#top .black {
font-weight: bold;
}
#top .red {
font-weight: bold;
color: red;
}
 .double-circle {
color: red;
font-size: 25px;
font-weight: bold;
}
 .circle {
color: orange;
font-size: 25px;
font-weight: bold;
}
 .triangle {
color: green;
font-size: 25px;
font-weight: bold;
}
.cross {
color: blue;
font-size: 25px;
font-weight: bold;
}
#top .fwn {
font-weight: normal;
}
@media screen and (max-width: 738px) {
#top .spmt0 {
margin-top: 0;
}
#top .spmt5 {
margin-top: 5px;
}
#top .spmt8 {
margin-top: 8px !important;
}
#top .spmt10 {
margin-top: 10px;
}
#top .spmt15 {
margin-top: 15px;
display: inline-block;
}
#top .spmt20 {
margin-top: 20px;
display: inline-block;
}
#top .spmt25 {
margin-top: 25px;
}
#top .spmt30 {
margin-top: 30px;
}
#top .spmb0 {
margin-bottom: 0;
}
#top .spmb5 {
margin-bottom: 5px;
}
#top .spml0 {
margin-left: 0 !important;
}
#top .spmb10 {
margin-bottom: 10px;
}
#top .spmb15 {
margin-bottom: 15px;
}
#top .spmb20 {
margin-bottom: 20px;
}
#top .spmb25 {
margin-bottom: 25px;
}
#top .spmr15 {
margin-right: 15px;
}
#top .spmr5 {
margin-right: 5px;
}
#top .spmr20 {
margin-right: 20px;
}
.sp-align-right {
text-align: right;
}
.sp-align-left {
text-align: left;
}
.sp-align-center {
text-align: center;
}
#top .spf11 {
font-size: 1.1rem;
}
#top .spf12 {
font-size: 1.2rem;
}
.spf11.inlineblock {
line-height: 1.2;
}
}
/* 全体設定ここから */
/* PCで改行しないここから */
@media screen and (min-width: 739px) {
br.pcnone {
display: none;
}
}
/* PCで改行しないここまで */
/* テーブルスクロールここから */
.scroll {
overflow-x: auto;
overflow-y: hidden;
display: block;
width: 100%;
margin: 10px 0px;
}
.scroll table {
margin: 10px 0px 8px 0px;
}
.scroll .column-1 {
position: sticky;
left: 0;
}
.scroll th.column-1 {
background: #1778c9;
border-bottom: 1px solid #1778c9;
}
.scroll th.column-1:before {
border-left: 1px solid #373737;
}
.scroll::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.scroll::-webkit-scrollbar-track {
border-radius: 5px;
background: #eee;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666;
}
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.scroll span.blink {
font-size: 14px;
color: #6f6f6f;
font-weight: bold;
display: block;
text-align: right;
margin-top: 10px;
animation: blinking 1s ease-in-out infinite alternate;
}
.pink-circle + .accordion-block {
margin-top: -10px;
}
@media screen and (min-width: 739px) {
.scroll span.blink {
display: none;
}
}
@media screen and (max-width: 738px) {
.pink-circle + .scroll table {
margin-top: 8px;
}
.sp-scroll {
overflow: auto;
}
.sp-scroll table {
white-space: nowrap;
margin-bottom: 8px;
}
.sp-scroll .column-1 {
position: sticky;
left: 0;
}
.sp-scroll th.column-1 {
background: #373737; 
}
.sp-scroll .column-1:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border-left: 1px solid #e5e5e5;
}
.sp-scroll th.column-1:before {
border-left: 1px solid #373737;
}
}
/* テーブルスクロール　ここまで */
@media screen and (min-width: 739px) {
.w700 table {width: 700px !important;}
.w800 table {width: 800px !important;}
.w900 table {width: 900px !important;}
.w1000 table {width: 1000px !important;}
.w1100 table {width: 1100px !important;}
.w1200 table {width: 1200px !important;}
.w1300 table {width: 1300px !important;}
.w1400 table {width: 1400px !important;}
.w1500 table {width: 1500px !important;}
.w1600 table {width: 1600px !important;}
.w1700 table {width: 1700px !important;}
.w1800 table {width: 1800px !important;}
.w1900 table {width: 1900px !important;}
.w2000 table {width: 2000px !important;}
}
@media screen and (max-width: 738px) {
.sw400 table {width: 400px !important;}
.sw500 table {width: 500px !important;}
.sw600 table {width: 600px !important;}
.sw700 table {width: 700px !important;}
.sw800 table {width: 800px !important;}
.sw900 table {width: 900px !important;}
.sw1000 table {width: 1000px !important;}
.sw1100 table {width: 1100px !important;}
.sw1200 table {width: 1200px !important;}
.sw1300 table {width: 1300px !important;}
.sw1400 table {width: 1400px !important;}
.sw1500 table {width: 1500px !important;}
}
/* テーブルスクロールここまで */
/*タブ切り替えここから*/
* {
box-sizing: border-box;
}
.tab {
width: 100%;
margin-top: 25px;
background-image: linear-gradient(to right, rgba(20, 20, 20, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(20, 20, 20, .04) 1px, transparent 1px);
background-size: 18px 18px, 18px 18px;
}
.tab-label {
display: flex;
flex-wrap: wrap;
}
.label {
text-align: center;
width: calc(100% / 2);
padding: 10px;
background-color: #f9f9f9;
cursor: pointer;
font-weight: bold;
color: #191919;
}
.label.active {
background-color: #1778c9;
color: #fff;
font-weight: bold;
}
.tab-txt {
padding: 0px 13px;
}
.txt {
display: none; 
}
.txt.show {
display: block; 
}
/*タブ切り替えここまで*/
/* スキップボタンここから */
.skip-btn,.mokuji-btn {
margin: 20px 0;
}
.skip-btn a,.mokuji-btn a {
color: #373737 !important;
display: block;
text-align: center;
text-decoration: none !important;
padding: 15px 0;
font-size: 1.4rem;
font-weight: bold;
transition: 0.5s;
border: 2px solid #373737 !important;
border-radius: 6px;
box-shadow: 2px 2px 2px #373737;
margin-bottom: 40px;
}
.skip-btn a::after,.mokuji-btn a::after {
font-family: "icomoon";
font-size: 16px;
margin-left: 10px;
vertical-align: -2px;
}
.skip-btn a::after {
content: "\ea45";
}
.mokuji-btn a::after {
content: "\ea43";
}
@media screen and (min-width: 739px) {
.skip-btn a:hover, .mokuji-btn a:hover {
transform: translateY(-8px);
}
}
@media screen and (max-width: 738px) {
.mokuji-btn a {
margin-top: 30px;
}
}
/* スキップボタンここまで */
/* キャンペーンショートコードここから */
.board.campaign ul li {
display: inline-grid;
width: 46%;
text-align: center;
margin: 10px;
}
.board.campaign ul li:before {
display: none;
}
.campaign span.bold.red {
font-size: 20px;
margin-top: 10px;
}
.campaign span.red {
font-size: 18px;
margin-top: 10px;
}
span.bold.orenge {
color: #ffffff;
background: #ffc100;
padding: 3px 7px;
margin-bottom: 10px;
}
.campaign small {
margin-top: 10px;
font-size: 12px;
color: #939393;
}
@media screen and (max-width: 738px) {
.board.campaign ul li {
width: 94%;
padding-left: 0px;
}
}
/* キャンペーンショートコードここまで */
/* PR枠ここから */
.pr-speech {
font-weight: bold;
border-bottom: 2px dotted #ffa5b7;
width: auto;
padding-bottom: 10px;
}
.pr-box {
font-size: 14px;
}
/* PR枠ここまで */
/* HTML5パカパカここから */
details summary {
list-style: none;
cursor: pointer;
position: relative;
padding: 16px 40px 16px 16px;
border: 1px solid #666666;
margin: 20px 0px 10px 0px;
}
details summary::-webkit-details-marker {
display: none;
}
details summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.3s ease;
}
details[open] summary::after {
transform: translateY(-50%) rotate(135deg);
}
details > div {
padding: 15px;
margin-bottom: 20px;
}
/* HTML5パカパカここまで */
/* 個別キャンペーンエリアここから */
.cmpareatitle .board-title {
background-color: #ff8800;
background-image: repeating-linear-gradient(141deg, transparent, transparent 15px, #ffffff1f 16px, #ffffff1f 29px);
color: white;
font-weight: bold;
padding: 12px;
font-size: 1.8rem;
text-align: center;
line-height: 1.5em;
}
.board.cmpareatitle {
background-color: #ff8902;
}
.cmpareatitle .board-title:before {
font-family: 'icomoon';
content: "\e923";
margin-right: 5px;
}
.cmparea {
background: white;
text-align: center;
padding: 15px;
}
#top .cmparea .red {
font-size: 3.2rem;
line-height: 1.5em;
}
/* 個別キャンペーンエリアここまで */
/*実質料金表ここから*/
a.price img {
box-shadow: 4px 4px 11px #b9b9b9;
margin-top: 20px !important;
}
/*実質料金表ここまで*/
/*その他ここから*/
table.tfixed {
table-layout: fixed;
}
table.spf10 * {
font-size: 1.0rem;
}
table.spf11 * {
font-size: 1.1rem;
}
table.spf12 * {
font-size: 1.2rem;
}
/*その他ここまで*/
/*導入の口コミリストここから*/
.merit-box.kuchi ul li.maru::before {
content: "\e9e2";
color: #ff4476;
}
.merit-box.kuchi ul li.batsu::before {
content: "\e9e6";
color: #2d7fe9;
}
/*導入の口コミリストここまで*/
/*毎月ランキングここから*/
li.first {
background-image: url(https://drive-net.jp/broadband/wp-content/uploads/first-list.png);
}
li.second {
background-image: url(https://drive-net.jp/broadband/wp-content/uploads/second-list.png);
}
li.third {
background-image: url(https://drive-net.jp/broadband/wp-content/uploads/third-list.png);
}
.month li {
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 15px 10px;
background-repeat: no-repeat;
background-size: 45px;
background-position: 27px 15px;
padding-left: 40px;
background-color: #fff5f7;
border-radius: 10px;
padding-top: 12px;
}
.afi-month a {
text-decoration: none;
color: #fff !important;
background: linear-gradient(90deg, rgba(255, 112, 30, 1) 0%, rgba(255, 191, 48, 1) 100%);
font-weight: bold;
padding: 10px 15px;
border-radius: 25px;
box-shadow: 2px 2px 6px #cfcfcf;
}
.month div.label.active {
background-color: #fa224d;
}
.month div.tab-txt {
border: 2px solid #fa224d;
padding: 15px 20px;
}
.month small {
background: #fff6a7;
padding: 2px 4px;
border-radius: 4px;
}
.month-li {
text-align: center;
}
ul.month-ul {
margin-top: 0px;
}
ul.month-ul li {
margin: 4px 0px 8px 0px;
display: flex;
justify-content: flex-start;
border: none;
padding: 0px;
}
.pr-box + .pink-circle {
margin-bottom: 20px;
}
@media screen and (min-width: 739px) {
.month-li img {
margin-bottom: 20px;
}
.month-li {
margin-bottom: 20px;
}
}
@media screen and (max-width: 738px) {
.month li {
display: block;
align-items: center;
background-position: 7px 17px;
margin: 15px 0px 20px 0px;
background-size: 33px;
padding: 10px 5px 5px 40px;
line-height: 40px;
}
.afi-month {
text-align: right;
}
.month span.bold.red {
font-size: 16px!important;
}
.month small {
font-size: 12px;
}
.month div.tab-txt {
padding: 5px 15px;
}
.month-li {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.afi-month a {
font-size: 15px;
}
.month-li img {
width: 45%;
}
}
/*毎月ランキングここまで*/
/*料金外部リンクここから*/
a.price::after {
content: "\ea7f";
font-family: icomoon;
}
/*料金外部リンクここまで*/
/*インフォボックスここから*/
.info-box {
display: flex;
align-items: center;
position: relative;
padding: 14px 16px 14px 60px;
background-color: #fdecef;
border-radius: 2px;
line-height: 1.7;
color: #333;
margin: 20px 0px;
}
.info-box p+p {
margin-top: 5px;
}
div.info-text {
border-left: 1px solid #f26b8a;
padding-left: 15px;
}
.info-box::before {
content: "!";
position: absolute;
border-radius: 50%;
color: #ffffff;
background: #f26b8a;
font-weight: bold;
display: flex;
width: 21px;
height: 21px;
align-items: center;
justify-content: center;
left: 20px;
top: auto;
font-family: "icomoon";
}
/*インフォボックスここまで*/
/*ポイントボックスここから*/
.point-box {
display: flex;
align-items: center;
position: relative;
padding: 14px 16px 14px 60px;
background-color: #FFF5F0;
border-radius: 2px;
line-height: 1.7;
color: #333;
margin: 20px 0px;
}
.point-box p+p {
margin-top: 5px;
}
div.point-text {
border-left: 1px solid #FFA538;
padding-left: 15px;
}
.point-box::before {
content: "\e923";
position: absolute;
border-radius: 50%;
color: #FFA538;
font-weight: bold;
display: flex;
width: 21px;
height: 21px;
align-items: center;
justify-content: center;
left: 20px;
top: auto;
font-family: "icomoon";
font-size: 2rem;
}
/*ポイントボックスここまで*/
/*はてなボックスここから*/
.ques-box {
display: flex;
align-items: center;
position: relative;
padding: 14px 16px 14px 60px;
background-color: #edfaea;
border-radius: 2px;
line-height: 1.7;
color: #333;
margin: 20px 0px;
}
.ques-box p+p {
margin-top: 5px;
}
div.ques-text {
border-left: 1px solid #319e34;
padding-left: 15px;
}
.ques-box::before {
content: "?";
position: absolute;
border-radius: 50%;
color: #ffffff;
background: #4caf50;
font-weight: bold;
display: flex;
width: 21px;
height: 21px;
align-items: center;
justify-content: center;
left: 20px;
top: auto;
font-family: "icomoon";
}
/*はてなボックスここまで*/
/*メモボックスここから*/
.blockquote-box {
display: flex;
align-items: center;
position: relative;
padding: 14px 16px 14px 60px;
background-color: #f9f9f9;
border-radius: 2px;
line-height: 1.7;
color: #333;
margin: 20px 0px;
}
.blockquote-box p+p {
margin-top: 5px;
}
.blockquote-box::before {
content: "\e9f8";
position: absolute;
border-radius: 50%;
color: #757575;
font-weight: bold;
display: flex;
width: 21px;
height: 21px;
align-items: center;
justify-content: center;
left: 20px;
top: auto;
font-family: "icomoon";
font-size: 2rem;
}
div.blockquote-text {
border-left: 1px solid #b7b7b7;
padding-left: 20px;
}
/*メモボックスここまで*/
/* おすすめリストここから */
.osusume {
    border: 3px solid #7b7b7b;
    background: #fbfbfb;
    padding: 12px;
    border-radius: 15px;
    margin: 28px 0px;
}
.osusume > div {
    padding: 10px 15px 5px 15px;
    font-weight: bold;
    color: #434343;
}
.osusume ul {
padding: 16px;
margin-top: 0;
border: none;
}
.osusume ul li {
padding: 0px 0px 5px 12px;
line-height: 1.6;
border-bottom: 1px dashed #cfcfcf;
}
.osusume ul li + li {
margin-top: 12px;
}
.osusume ul li::before {
font-family: "icomoon";
font-size: 1.6rem;
position: absolute;
left: 0;
}
.osusume ul li.maru, .osusume ul li.batsu {
padding-left: 24px;
width: auto;
height: auto;
left: 0;
top: 0px;
background: none;
}
.osusume ul li.maru, .osusume ul li.batsu {
padding-left: 24px;
}
.osusume ul li.maru::before {
content: "\e9e2";
color: #ff4476;
width: auto;
height: auto;
left: 0;
top: 0px;
background: none;
}
.osusume ul li.batsu::before {
content: "\e9e6";
color: #2d7fe9;
width: auto;
height: auto;
left: 0;
top: 0px;
background: none;
}
/* おすすめリストここまで */
/*フッターここから*/
footer {
width: 100%;
background-color: #000;
}
.footerNav__item__cont {
transition: all .8s;
max-height: 0;
overflow: hidden;
position: relative;
background-color: #f5f5f5;
}
.footerNav__list {
padding: 18px 20px;
}
.footerNav__list li {
line-height: 22.4px;
}
.footerNav__menu {
margin-top: 8px;
margin-bottom: 25px;
}
.footerNav__menu__item {
border-left: 1px solid #000;
padding-left: 10px;
}
footer a {
background-color: transparent;
color: inherit;
text-decoration: none;
cursor: pointer;
font-size: 1.4rem;
line-height: 22px;
}
.footer__txt {
font-size: 12px;
font-size: 1.2rem;
text-align: center;
padding: 20px 10px;
background-color: #fff;
color: #777;
margin: 0;
line-height: 19.2px;
}
.footerNav__item__cont.is_open {
max-height: 300px;
}
@media screen and (min-width: 739px){
footer {
background-color: #1778c9;
}
.footerNav {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px 0 5px;
color: #fff;
}
.footerLink__inner, .footerNav {
max-width: 830px;
margin: 0 auto;
}
.footerNav__item__ttl {
font-weight: 700;
font-size: 1.6rem;
line-height: 25.6px;
}
.footerNav__item__cont {
background-color: transparent;
max-height: inherit;
}
.footerNav__list {
padding: 20px 0 0;
}
.footerNav__menu__item {
border-left: 1px solid #fff;
}
.footerLink .footerNav__item__ttl {
display: none;
}
.footerLink {
background-color: #f5f5f5;
}
.footerLink__inner {
padding: 15px 0;
}
.footerLink__inner .footerMenu__link {
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
font-size: 1.2rem;
padding-top: 0;
}
.footerNav__list {
padding: 20px 0 0;
}
.footerMenu__link__item:first-child {
margin-left: 0;
}
.footerMenu__link__item {
margin-left: 20px;
}
.footerMenu__link__item>a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
color: #777;
text-decoration: none;
font-size: 1.2rem;
line-height: 19.2px;
}
.footerMenu__link__item>a:before {
width: 4px;
height: 4px;
border-style: solid;
border-width: 1px;
border-color: #777 #777 transparent transparent;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-right: 9px;
}
.footerMenu__link__item>a:before {
display: block;
content: '';
}
}
@media screen and (max-width: 738px) {
.footerNav__item__ttl {
color: #fff;
background-color: #1778c9;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 50px;
padding: 16px 20px;
font-size: 1.4rem;
line-height: 22.6px;
}
.footerNav__item__ttl:after {
display: block;
content: '';
width: 7px;
height: 7px;
border-style: solid;
border-width: 1px;
border-color: #fff #fff transparent transparent;
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.footerNav__item__ttl.is_open:after {
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
/*フッターここまで*/
/*フローティングバナーここから*/
div#sp-floating img {
vertical-align: middle;
}
div#sp-floating {
position: fixed;
bottom: 0;
z-index: 2;
}
div.ocnflowting {
display: flex;
width: 100%;
height: 80px;
justify-content: center;
}
div.ocnflowting img {
width: 290px;
box-shadow: 0 2px 7px #00000080;
}
/*フローティングバナーここまで*/
/* 評価テーブルここから */
table.rating-table tr {
border-top: 1px solid #1778c9;
border-left: 1px solid #1778c9;
}
table.rating-table {
width: 100%;
font-size: 14px;
font-weight: normal;
border: 1px solid #e5e5e5;
background-color: #fff;
}
table.rating-table tr th {
font-variant: diagonal-fractions;
text-align: center;
font-weight: bold;
}
table.rating-table td.column-1 {
text-align: center;
}
table.rating-table tr.row-7 td.column-2 {
background: #fff6da;
text-align: center;
font-weight: bold;
font-size: 17px;
}
table.rating-table td .starList {
margin-left: 4px;
justify-content: center;
}
table.rating-table tr.row-2 td.column-1 .starList {
font-size: 24px;
}
@media screen and (max-width: 738px) {
table.rating-table tr.row-2 td.column-1 .rating-score {
font-size: 20px;
}
table.rating-table tr.row-2 td.column-1 .starList {
font-size: 20px;
}
}
@media screen and (min-width: 739px) {
table.rating-table td {
width: 50%;
}
}
/* 評価テーブルここまで */
/* 横ランキングテーブルここから */
table.yoko-ranking td {
text-align: center;
}
/* 横ランキングテーブルここまで */
/* ランキングの選定基準ここから */
div.rc {
    border: 1px solid #666666;
    background: #f8fcff;
    padding: 20px;
    margin-top: 40px;
}
.rc-title {
    font-weight: bold;
    display: block;
    text-align: center;
}
div.rc-title:before, div.rc-title:after {
    content: '';
    display: inline-block;
    width: 45px;
    height: 3px;
    vertical-align: middle;
    border-top: solid 1px #1778c9;
    border-bottom: solid 1px #1778c9;
}
div.rc-title:before {
    margin-right: 10px;
}
div.rc-title:after {
    margin-left: 10px;
}
.rc-mini-title {
    font-weight: bold;
    display: block;
}
.rc-wrap {
    margin: 20px 0px;
}
span.rc-num {
    border-radius: 50%;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    background: #dcf0ff;
    color: #1778c9;
    margin-right: 10px;
    display: inline-flex;
    width: 20px;
    height: 20px;
    justify-content: center;
}
summary.rc-summary {
    margin: 5px 0px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
}
span.rc-tag {
    display: block;
    font-size: 13px;
    color: #1778c9;
    background: #dcf0ff;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 25px;
    width: fit-content;
}
img.aligncenter.size-full.wp-image-50987 {
    border-radius: 10px;
    width: 90%;
    margin: 20px auto;
}
.rc-item ul {
    margin-bottom: 20px;
}
span.rc-score {
    display: inline-block;
}
/* ランキングの選定基準ここまで */
.eyecatch-main {
  width: 100%;
}
.eyecatch-main img {
  width: 100%;
  height: auto;
  display: block;
}
.page-id-51311 main {
    margin-left: auto;
    margin-right: auto;
}
.category main {
    margin-left: auto;
    margin-right: auto;
}
.home .archive__item img {
    width: 100%;
    height: auto;
}

.home .archive__item .archive__title {
    font-size: 1.3rem;
}
.home .archive__item h2 {
    font-size: 1.4rem;
}
.home main {
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
}