@charset "UTF-8";
:root {
--main-color: #008bd5;
--sub-color:#36bdef;
}
/*---基本設定-----------*/
html {
font-size: 4vw;
}
body {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo,sans-serif;
font-size: 4vw;
font-weight: 400;
color: #444;
position: relative;
background-color: #fffcf4;
-webkit-text-size-adjust: 100%;
}
body.fixed {
overflow: hidden;
}
p,
dt,
dd,
li {
line-height: 1.5;
}
html,
body {
height: 100%;
}
body {
background-image: url(../img/bg01.png);
background-size: 20px;
background-attachment: fixed;
}
.wrap {
width: 100%;
overflow-x: clip;
min-height: 100%;
position: relative;
padding-bottom: 0;
padding-top: 3rem;
}
/*--SVG設定--------------------------------------------*/
.icon {
position: static;
width: 1em;
height: 1em;
opacity: 1;
vertical-align: text-top;
}
:root {
--whiteArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--whiteArrow2: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackArrow2: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashArrow2: url('data:image/svg+xml;utf8,')
no-repeat center;
--redArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--orangeArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--redCrown: url('data:image/svg+xml;utf8,')
no-repeat center;
--search: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashSearch: url('data:image/svg+xml;utf8,')
no-repeat center;
--whiteSearch: url('data:image/svg+xml;utf8,')
no-repeat center;
--hand: url('data:image/svg+xml;utf8,')
no-repeat center;
--search: url('data:image/svg+xml;utf8,')
no-repeat center;
--link: url('data:image/svg+xml;utf8,')
no-repeat center;
--blueLink: url('data:image/svg+xml;utf8,')
no-repeat center;
--redCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--whiteCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--orangeCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--skyblueCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashCircle_down: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackComment: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackCaret: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackPen: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackHand_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--skull: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashQuote_left: url('data:image/svg+xml;utf8,')
no-repeat center;
--thumbs_down: url('data:image/svg+xml;utf8,')
no-repeat center;
--ashQuote_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--blackArrowCircle_right: url('data:image/svg+xml;utf8,')
no-repeat center;
--redCheck: url('data:image/svg+xml;utf8,')
no-repeat center;
}
/* LPの的中実績表示 */
.site .latest {
padding: 0 0 0.1em 0;
}
.site .latest h3 {
margin: 0.5em 0.5em 0 0.5em;
}
.site .latest ul {
background: white;
margin: 0 0.5em 0.5em 0.5em;
padding: 0.25em 0 0.25em 0;
}
.site .latest ul li {
padding: 0.25em 1em 0 1em;
}
.site .latest li div {
display: flex;
margin: 0.25em;
}
.site .latest li span {
border-left: 0.25em solid #008bd5;
padding: 0 0 0 0.25em;
}
.site .latest li div dl {
margin: 0 0.5em 0 0;
position: relative;
}
.site .latest li div dl:nth-child(2)::before {
content: "→";
position: absolute;
top: -0.1em;
}
.site .latest li div dl:nth-child(2) dd {
position: absolute;
left: 1.5em;
}
.site .latest li div dl:nth-child(2) dt {
margin: 0 0 0 1.45em;
}
.site .latest li div p {
margin: 0 0 0 0.25em;
}
/* 文字の真ん中に線 */
.sen {
text-decoration: line-through;
}
/* SG開催中の記事リンク */
.sg_link {
width: 100%;
margin: 0;
z-index: 100;
display: none;
position: fixed;
top: 2.4em;
left: 0;
}
.sg_link a {
padding: 0.6em 0.5em;
background-color: #001440;
color: white;
display: block;
font-size: 90%;
}
.sg_link a span {
color: #fff;
border: solid 1px;
padding: 0.1em 0.2em;
border-radius: 0.3em;
margin-right: 0.5em;
background: #ff9000;
animation: blink 1s ease-in-out infinite alternate;
}
.sg_link a i {
background: var(--whiteArrow);
background-size: contain;
display: inline-block;
transform: rotate(90deg);
width: 1em;
height: 1em;
vertical-align: top;
margin-top: 0.2em;
margin-left: 0.5em;
}
/*SGリンクここまで-----------------------------------------*/
.ranking_osusume_btnArea > .btn svg {
position: static;
}
.abl {
position: absolute;
left: 0;
}
.abr {
position: absolute;
right: 0;
}
.voice_content::before {
content: "" !important;
}
.voice_content::after {
content: "" !important;
}
/*--PARTS-------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="month"],
textarea {
width: 100%;
display: block;
padding: 0.75em;
border: 1px #ccc solid;
border-radius: 0.25em;
font-size: 1em;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
opacity: 0.5;
}
input[type="number"],
input[type="date"],
input[type="month"] {
width: auto;
}
.select_wrap {
overflow: hidden;
border: 1px #ccc solid;
display: block;
border-radius: 0.25em;
background-color: #fff;
position: relative;
z-index: 0;
padding-right: 2rem;
}
.select_wrap::after {
content: "";
background: var(--ashCircle_down);
background-size: contain;
width: 1em;
height: 1em;
transform: rotate(90deg);
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 0.5em;
color: #ccc;
margin-top: -0.5em;
opacity: 0.7;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
width: 100%;
border-radius: 0.25em;
padding: 0.75em;
font-size: 1em;
position: relative;
z-index: 3;
border: none;
}
.form_checkbox li {
display: inline-block;
}
.form_checkbox input {
display: none;
}
.form_checkbox label {
display: inline-block;
text-align: center;
background-color: #ddd;
padding: 0.5em 1em;
border-radius: 0.2em;
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
}
.form_checkbox input:checked + label {
background-color: #18a1dc;
color: #fff;
}
.form_inline > * {
display: inline-block;
vertical-align: top;
}
.form_row {
margin-bottom: 1em;
}
.form_row > label {
margin-bottom: 0.5em;
font-weight: bold;
}
.form_row > div > label {
padding: 0 0.25em;
line-height: 2.8;
}
ul.notice li {
position: relative;
line-height: 1.6;
padding-left: 1.5em;
margin: 1em 0;
}
ul.notice li::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
ul.check {
padding: 3em 1em 1em;
background-color: #ffecb3;
position: relative;
border: 2px #ffc107 solid;
margin: 1rem 0;
}
ul.check::before {
content: "CHECK POINT";
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background-color: #ffc107;
color: #fff;
padding: 0.5rem 0;
}
ul.check li {
padding-left: 1.5em;
position: relative;
margin: 0.5rem 0;
}
ul.check li::before {
content: "";
background: var(--redCheck);
background-size: contain;
width: 1em;
height: 1em;
display: block;
position: absolute;
top: 3px;
left: 0;
color: #ff9800;
}
ul.check2 {
padding: 3em 1em 1em;
background-color: #ffecb3;
position: relative;
border: 2px #ffc107 solid;
margin: 0 0 1rem 0;
}
ul.check2::before {
content: "CHECK POINT";
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background-color: #ffc107;
color: #fff;
padding: 0.5em 0;
}
ul.check2 li {
padding-left: 1.5em;
position: relative;
margin: 0.5rem 0;
}
ul.check2 li::before {
content: "";
background: var(--redCheck);
background-size: contain;
width: 1em;
height: 1em;
display: block;
position: absolute;
top: 3px;
left: 0;
color: #ff9800;
}
ul.check3 {
padding: 3em 1em 0.35em;
background-color: #f7e6ff;
position: relative;
border: 2px #c74dff solid;
margin: 0 0 1rem 0;
}
ul.check3::before {
position: absolute;
content: "要注意ポイント";
top: 0;
left: 0;
width: 100%;
text-align: center;
background-color: #c74dff;
color: #fff;
padding: 0.5em 0;
}
ul.check3 li {
padding-left: 1.5em;
position: relative;
margin: 0.5rem 0;
padding: 0.5em 0 0.5em 1.5em;
}
ul.check3 li::before {
position: absolute;
content: "";
background: var(--skull);
background-size: contain;
width: 1em;
height: 1em;
display: block;
top: 0.55rem;
left: 0;
}
.box {
background-color: rgba(230, 230, 230, 0.5);
padding: 1em;
}
table {
font-size: 1rem;
border-collapse: collapse;
width: 100%;
}
table th,
table td {
padding: 0.25em 0.5em;
border: 1px #ccc solid;
background-color: #fff;
line-height: 1.6;
}
table th {
background-color: #eee;
}
table.default {
margin: 1.5rem auto;
width: auto;
}
table.default tbody th,
table.default tbody tr + td {
background-color: #eee;
font-weight: normal;
padding: 0.5em;
}
table.default td {
padding: 0.5em;
}
table.default thead th,
table.default thead td {
padding: 0.25em;
background-color: var(--main-color);
color: #fff;
font-size: 90%;
font-weight: bold;
text-align: center;
}
table.default .total th,
table.default .total td {
border-top: 4px #ccc double;
}
table.clear th,
table.clear td {
border: none;
}
table.clear {
width: auto;
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 0px 0.5em;
}
table.auto {
width: auto;
}
em {
background: linear-gradient(transparent 50%, #ffc107 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFC107',GradientType=0 );
}
.em {
background: linear-gradient(transparent 60%, #ffc107 60%);
font-weight: bold;
}
strong {
color: #dd0f00;
font-size: 1.05em;
}
.quote strong {
color: #d91406;
}
a {
color: #dd0f00;
text-decoration: none;
}
.innerLink {
color: #0072af;
text-decoration: underline;
position: relative;
margin: 0 0 0 1em;
}
.innerLink::before {
content: "";
background: var(--blueLink);
position: absolute;
top: 0;
left: -1em;
background-size: contain;
display: block;
width: 1em;
height: 1em;
line-height: 1;
}
.lsp {
letter-spacing: 0.1em;
padding-left: 0.1em;
}
/* list */
ul.mark li {
position: relative;
padding-left: 1.5em;
}
ul.mark li::before {
content: "";
position: absolute;
top: 0.5em;
left: 0.5em;
width: 0.5em;
height: 0.5em;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 100%;
}
ul.mark-flex {
display: flex;
flex-wrap: wrap;
gap: 0 1.25em;
}
ul.mark-flex li {
padding-left:1em;
}
ul.mark-flex li::before {
left:0;
}
ul.number {
position: relative;
padding-left: 1.5em;
}
ul.number span {
position: absolute;
top: auto;
left: 0;
}
ul.mark li,
ul.number li {
margin: 0.5em 0;
}
.btn {
border: none;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
padding: 1em 0;
border-radius: 0.2em;
background:#11ad00;
font-size: 1em;
line-height: 1;
font-weight: bold;
color: #fff;
box-shadow: 0 .2rem .1rem #000;
border: none;
}
.btn-inline {
display: inline-block;
width: auto;
padding-left: 1.5em;
padding-right: 1.5em;
}
.btn-org {
background: #f90;
}
.btn-blu {
background: #008bd5
}
.btn-red {
background: #f44336
}
.btn-sub {
box-shadow: none;
background: #eee;
color: #333;
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
gap: .5em;
}
.btn-sub::before {
display: block;
content:"";
width: 1.2em;
height: 1.2em;
background: no-repeat url(../img/icon/circle-chevron-right-solid_blk.svg) center/contain;
opacity: .5;
}
.btn-ic-right::after {
content: "";
position: absolute;
top: 16px;
right: 1em;
background: var(--whiteArrow2);
background-size: contain;
display: block;
width: 1em;
height: 1em;
line-height: 1;
}
.btn-ad::before {
content: "AD";
position: absolute;
right: 0;
top: 0;
font-weight: normal;
font-size: .8rem;
line-height: 1;
background-color: #00000088;
padding: 0.2em 0.2em 0.2em 0.4em;
mix-blend-mode: multiply;
opacity: 1;
border-top-right-radius: .2rem;
}
.jump {
-webkit-animation: 0.8s jump ease-out infinite;
animation: 0.8s jump ease-out infinite;
}
@-webkit-keyframes jump {
20% {
-webkit-transform: translateY(-10px);
}
}
@keyframes jump {
20% {
transform: translateY(-10px);
}
}
ul.listlink {
overflow: hidden;
margin: -1em;
}
ul.listlink li {
border-bottom: 1px #ccc solid;
}
ul.listlink li:last-of-type {
border: none;
}
ul.listlink li a {
display: block;
padding: 1em;
text-decoration: none;
position: relative;
}
ul.listlink li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f054";
position: absolute;
top: auto;
right: 1em;
opacity: 0.5;
}
dl.check dt {
position: relative;
font-weight: bold;
}
dl.check dd {
margin-bottom: 1em;
}
.wrap {
position: relative;
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
}
/*.wrap.slide {
right: 16em;
}*/
nav.default li {
border-bottom: 1px #ccc dotted;
}
nav.default a {
text-decoration: none;
display: block;
padding: 0.75em 0;
position: relative;
}
nav.default a i {
color: #18a1dc;
font-size: 1.25em;
display: inline-block;
vertical-align: middle;
margin-right: 0.25em;
}
nav.default a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f054";
position: absolute;
top: 50%;
margin-top: -0.5em;
line-height: 1;
right: 0.5em;
color: #ccc;
}
i[class^="star"] {
display: block;
width: 1em;
height: 1em;
background: no-repeat url(../img/star.svg) center top/auto 100%;
}
i.star-half {
background-image: url(../img/star_half.svg)
}
i.star-null {
background-image: url(../img/star_null.svg)
}
.pageMes {
width: 80%;
text-align: center;
top: 30%;
left: 10%;
background-color: rgba(0, 104, 186, 0.5);
position: absolute;
z-index: 100;
height: 20%;
color: #fff;
display: table;
font-size: 1.2em;
}
.pageMes > * {
display: table-cell;
vertical-align: middle;
}
a.simple {
border-bottom: 1px #f00 solid;
}
.linkArea {
margin: 1em 0;
}
.linkArea a {
text-decoration: none;
font-weight: bold;
color: #ff5722;
background: linear-gradient(to bottom, transparent 95%, #ff5722 95%);
}
.linkArea a::before {
content: "";
background: var(--orangeCircle_right);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-top;
margin: 0 6px 0 0;
}
.linkArea_skyblue a::before {
content: "";
background: var(--skyblueCircle_right) !important;
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-top;
margin: 0 6px 0 0;
}
.scroll {
overflow-x: scroll;
position: relative;
margin: 1.5rem 0;
}
.scroll::before {
content: "↓ スクロールしてご確認ください。 ↓";
font-size: 90%;
color: #008bd5;
position: sticky;
top: 0;
left: 0;
width: 100%;
display: block;
text-align: center;
margin-bottom: .2em;
}
.scroll table {
table-layout: auto;
width: auto;
margin-left: auto;
margin-right: auto;
font-size: 100%;
white-space: nowrap;
margin: 0.5rem auto 0 !important;
}
.more {
text-align: right;
margin: 0.5em 0 0 0;
}
.more span {
display: inline-block;
font-size: 80%;
background-color: #206cdf;
color: #fff;
padding: 0.5em 1em;
border-radius: 2em;
}
.newmark::after {
content: "NEW";
display: inline-block;
font-size: 80%;
line-height: 2;
background-color: #f44336;
color: #fff;
padding: 0 0.5em;
vertical-align: middle;
}
.anchor {
display: block;
padding-top: 5em;
margin-top: -5em;
}
.admark {
}
.admark::after {
content: "AD";
font-size: 80%;
line-height: 1;
padding: 0.1em 0.25em;
border: 1px #008bd5 solid;
color: #008bd5;
margin-left: 0.2em;
display: inline-block;
vertical-align: text-bottom;
}
.youtube {
width: 100%;
aspect-ratio: 560/315;
margin: 1rem auto;
}
.youtube iframe {
width:100%;
height: 100%;
}
dl.tips {
background-color: #f0f0f0;
padding: 1rem;
}
dl.tips > div {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: .5rem auto;
}
dl.tips dt {
}
dl.tips dd {
display: flex;
justify-content: space-between;
width: 10rem;
}
dl.tips dd span {
text-align: right;
min-width: 4.5rem;
}
dl.tips dd span:last-of-type {
}
dl.tips .c1 {
background-color: #fff;
}
/*--SEARCHBOX------------------------------------------*/
.search {
display: none;
background-color: #008bd5;
color: #fff;
position: fixed;
top: 3rem;
left: 0;
width: 100%;
z-index: 92;
}
.search button {
margin-top: .5rem;
}
/*--LIGHT BOX------------------------------------------*/
.lightbox {
text-align: center;
margin: 1em 0;
}
.lightbox a {
position: relative;
display: block;
width: 15em;
height: 15em;
margin: 0 auto;
text-decoration: none;
position: relative;
overflow: hidden;
border: 1px #ccc solid;
background-color: #333;
}
.lightbox a::after {
content: "";
background: var(--ashSearch);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
position: absolute;
top: 40%;
left: 40%;
font-size: 3em;
opacity: 0.7;
}
.jisseki_picture a::after {
top: 30% !important;
left: 30% !important;
}
.lightbox img {
object-fit: cover;
width: 100%;
height: 100%;
}
.lightbox figcaption {
font-size: 80%;
margin-top: 0.5em;
display: flex;
align-items: baseline;
justify-content: center;
text-align: left;
}
.lightbox figcaption::before {
content: "";
background: var(--blackCaret);
background-size: contain;
margin-right: 0.5em;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-top;
}
.smartphoto-arrow-left,
.smartphoto-arrow-right {
background: none !important;
}
.smartphoto-arrow-left a,
.smartphoto-arrow-right a {
background: none !important;
position: relative;
}
.smartphoto-arrow-left a::after,
.smartphoto-arrow-right a::after {
position: absolute;
top: 50%;
margin-top: -0.5em;
line-height: 1;
font-size: 2em;
width: 1em;
height: 1em;
opacity: 0.8;
}
.smartphoto-arrow-right a::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
display: inline-block;
transform: rotate(90deg);
background-color: #444;
right: 0.1em;
}
.smartphoto-arrow-left a::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
display: inline-block;
transform: rotate(-90deg);
background-color: #444;
left: 0.1em;
}
/*--WRITER------------------------------------------*/
.writer {
border: none;
}
.writer h2 {
text-align: center;
padding-top: 1em;
background: none;
color: #444;
font-size: 1em;
}
.writer h2 + div {
position: relative;
padding-left: 7em;
}
.writer h2 + div figure {
position: absolute;
width: 5em;
top: 0;
left: 1em;
}
.writer {
width: 96%;
max-width: 500px;
display: table;
margin: 1rem auto;
padding: 0 0.75em;
position: relative;
}
.writer input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.writer-v2 dl ~ p,
.writer_notice {
margin: 1em auto;
max-width: 500px;
font-size: 13px;
padding: 0 1em 0 2.5em;
position: relative;
}
.writer-v2 dl ~ p::before,
.writer_notice::before {
content: "※";
position: absolute;
top: auto;
left: 1em;
}
.writer figure {
display: table-cell;
width: 20%;
}
.writer dl {
display: table-cell;
padding-left: 0.75em;
font-size: 0.9em;
}
.writer dt {
font-weight: bold;
font-size: 1.1em;
}
.writer dt::before {
content: "";
background: var(--blackPen);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
margin-right: 0.5em;
}
section h2 ~ div > .writer {
padding: 1rem;
border: 1px #ccc solid;
width: 100%;
}
section h2 ~ div > .writer_notice {
color: #008bd5;
font-size: 90%;
margin: .5rem auto 1rem;
}
/*--COURCE COLOR------------------------------*/
.c1,
.c2,
.c3,
.c4,
.c5,
.c6 {
display: inline-block;
line-height: 1;
padding: 2px;
width: calc(1em + 4px);
color: #fff;
text-align: center;
font-style: normal;
}
.c1 {
background-color: #f0f0f0;
color: #333;
}
.c2 {
background-color: #333;
}
.c3 {
background-color: #F44336;
}
.c4 {
background-color: #2196F3;
}
.c5 {
background-color: #FFC107;
color: #333;
}
.c6 {
background-color: #4caf50;
}
.blinking {
-webkit-animation: blink 0.5s ease-in-out infinite alternate;
-moz-animation: blink 0.5s ease-in-out infinite alternate;
animation: blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------------------------------------------*/
.dialog {
display: none;
position: fixed;
top: 20%;
left: 10%;
width: 80%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
color: #fff;
}
.dialog > div {
padding: 1em;
}
.message {
position: fixed;
top: 20%;
left: 50%;
width: 14em;
color: #fff;
text-align: center;
padding: 2em 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
margin-left: -7em;
}
.categoryNav {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.categoryNav h2 {
margin: 0;
}
.categoryNav > div {
padding: 0;
}
.categoryNav ul li {
background-color: #fff;
border-bottom: 1px #ccc solid;
width: 100%;
min-height: 120px;
}
.categoryNav ul li:last-of-type {
border-bottom: 0px;
}
.categoryNav ul li a {
text-decoration: none;
color: inherit;
padding: 1em 1em 1em 6.5em;
position: relative;
display: block;
width: 100%;
}
.categoryNav ul li a figure {
width: 5em;
vertical-align: top;
position: absolute;
top: 1em;
left: 1em;
}
.categoryNav .uptime {
font-size: 80%;
color: #666;
}
.categoryNav dl {
text-align: justify;
}
.categoryNav dt {
font-weight: bold;
margin-bottom: 0.5em;
}
.ranking_free .ranking_site p {
margin: 0;
}
.ranking_free .ranking_site_name {
font-weight: bold;
}
.ranking_free .ranking_site_spec {
font-size: 90%;
}
.ranking_free .ranking_site_spec span {
font-size: 90%;
background-color: #999;
color: #fff;
padding: 0 0.25em;
display: inline-block;
vertical-align: bottom;
margin: 0 0.2em;
}
.ranking_free tbody tr th {
background-color: #f44336;
color: #fff;
}
.ranking_free tbody tr:nth-of-type(n + 4) th {
background-color: #f90;
}
.ranking_free tbody tr:nth-of-type(n + 6) th {
background-color: #8bc34a;
}
.ranking_free tbody tr:nth-of-type(n + 11) th {
background-color: #36bdef;
}
.ranking_free tbody tr:nth-last-of-type(-n + 3) th {
background-color: #333;
}
.ranking_free .ranking_site a {
display: block;
color: inherit;
position: relative;
}
.ranking_free .ranking_site a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f201";
position: absolute;
top: 50%;
margin-top: -1em;
line-height: 1;
right: -0.25em;
background-color: #009fe8;
width: 1.5em;
text-align: center;
line-height: 1.5;
border-radius: 100%;
color: #fff;
padding: 0.2em;
}
/*-- ranking aside----------------------------*/
.ranking_aside ul li {
position: relative;
background-color: #fff;
padding: 1em;
border-bottom: 1px #ccc dotted;
}
.ranking_aside ul li:last-of-type {
border-bottom: none;
}
.ranking_aside ul li::before {
content: "";
width: 3.5em;
height: 5em;
position: absolute;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center top;
left: 0.5em;
top: 0.5em;
z-index: 10;
}
.ranking_aside ul li:nth-of-type(1)::before {
background-image: url(../img/award_1.png);
}
.ranking_aside ul li:nth-of-type(2)::before {
background-image: url(../img/award_2.png);
}
.ranking_aside ul li:nth-of-type(3)::before {
background-image: url(../img/award_3.png);
}
.ranking_aside ul li figure {
width: 5em;
position: absolute;
left: 3.5em;
top: 1em;
}
.ranking_aside dt {
padding-left: 8em;
min-height: 6em;
}
.ranking_aside dt .text p {
margin-bottom: 0 !important;
}
.ranking_aside dt .name {
font-size: 1.2em;
font-weight: bold;
}
.ranking_aside dd .btnArea {
display: flex;
align-items: center;
gap: .5rem;
}
.ranking_aside dd .btnArea a.btn-grn::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
background: no-repeat url(../img/icon/square-arrow-up-right-solid_wht.svg) center/contain;
margin-right: .5em;
}
.ranking_aside dd .btnArea a:not(.btn-grn)::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
background: no-repeat url(../img/icon/circle-chevron-right-solid_wht.svg) center/contain;
margin-right: .5em;
}
/*--------------------------------------------*/
.mainnav {
position: fixed;
top: 3rem;
right: -100%;
background-color: rgba(0, 0, 0, 0.8);
height: 100%;
color: #fff;
width: 100%;
z-index: 100;
transition: right 0.3s;
backdrop-filter: blur(1rem);
}
.mainnav.slide {
right: 0;
}
.mainnav .menu ul {
display: flex;
flex-wrap: wrap;
}
.mainnav .menu li {
line-height: 1.4;
font-size: 90%;
position: relative;
width: 50%;
}
.mainnav .menu li a {
padding: 1em 2em 1em 1em;
border-bottom: 1px #000 solid;
display: block;
text-decoration: none;
color: inherit;
position: relative;
}
.mainnav .menu li a i {
margin-right: 0.5em;
}
.mainnav .menu li a svg {
margin-right: 0.5em;
fill: #444;
}
/*
.mainnav .menu li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f054";
position: absolute;
top: auto;
right: 0.5em;
opacity: 0.8;
}
*/
.slide .menu li a::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
display: block;
width: 1em;
height: 1em;
transform: rotate(90deg);
margin-left: 0.5em;
position: absolute;
top: 13px;
right: 4px;
}
.mainnav .sitemenu li a {
padding: 1.5em 1.5em 1.5em 4.25em;
border-bottom: 1px #ccc inset;
line-height: 1;
}
.mainnav .sitemenu li a figure {
width: 3em;
position: absolute;
left: 0.5em;
top: 0.5em;
}
.mainnav .sitemenu li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f138";
position: absolute;
top: auto;
right: 0.5em;
opacity: 0.8;
}
.mainnav .blogmenu li a {
padding: 1em 2em 1em 6.25em;
border-bottom: 1px #ccc inset;
line-height: 1;
position: relative;
}
.mainnav .blogmenu li a figure {
width: 5em;
position: absolute;
left: 0.5em;
top: 0.5em;
}
.mainnav .blogmenu li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f138";
position: absolute;
top: 50%;
right: 0.5em;
opacity: 0.8;
margin-top: -0.5em;
}
.blogmenu_date {
font-size: 85%;
line-height: 1;
}
.blogmenu_title {
font-size: 1.1em;
font-weight: bold;
margin-top: 0.2em;
line-height: 1.4;
}
.blogmenu_content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
font-size: 90%;
}
.menu_title {
font-weight: bold;
text-align: center;
color: #fff;
background-image: url(../img/iron01.jpg);
background-size: cover;
padding: 0.5em 0;
position: relative;
}
.menu_title::before,
.menu_title::after {
content: "";
position: absolute;
top: 50%;
height: 2em;
width: 2em;
background-image: url(../img/pin.png);
background-size: cover;
margin-top: -0.8em;
opacity: 0.8;
}
.menu_title::before {
left: 0.5em;
}
.menu_title::after {
right: 0.25em;
}
.menu ul.reviewmenu li a {
padding: 0.25em 2em 0.25em 0.5em;
border-bottom: 1px #ccc inset;
}
.menu ul.reviewmenu li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f138";
position: absolute;
top: 50%;
right: 0.5em;
opacity: 0.8;
margin-top: -0.5em;
}
.reviewmenu .review_user {
display: none;
}
.reviewmenu .review_content {
background: none;
border-radius: 0;
width: 100%;
height: 1.6em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
}
.reviewmenu .review_date {
right: 3em;
}
.linkmenu {
background-color: hsla(201, 100%, 26%, 0.5);
padding: 2em 0.5em;
width: 100%;
margin: 0;
position: inherit;
padding-bottom: 15em;
color: #fff;
}
.linkmenu li {
text-align: center;
}
.linkmenu li a {
display: block;
text-align: left;
color: inherit;
overflow: hidden;
border-radius: 0.2em;
}
.linkmenu .boatrace a {
background-color: #fff;
padding: 0.5em;
border: 1px #ccc solid;
text-align: center;
}
.linkmenu .boatrace img {
height: 2em;
width: auto;
}
.linkmenu .teleboat a {
background-color: #333;
padding: 0.5em;
border: 1px #ccc solid;
text-align: center;
}
.linkmenu .teleboat img {
height: 2em;
width: auto;
}
.linkmenu .stadiumlink li {
float: left;
width: 50%;
}
.linkmenu .stadiumlink li a {
font-size: 90%;
display: block;
padding: 0.5em;
position: relative;
}
.linkmenu .stadiumlink li a::before {
content: "";
background: var(--whiteCircle_right);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: text-top;
margin: 0 4px 0 0;
}
/*--------------------------------------------*/
article {
position: relative;
/*
opacity: 0;
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
*/
}
/*
article.active {
opacity: 1;
}
*/
article.slide {
right: 16rem;
}
article > section {
margin: 2rem auto;
position: relative;
}
article > section > div {
background-color: #fff;
padding: 1px 1rem;
}
article > section > div > figure {
margin-top: 1rem;
}
article > section p {
margin: 1.25rem 0;
}
.introduction {
width: 96%;
margin: 0 auto;
max-width: 500px;
padding: 0 1em;
}
.topBtn {
position: fixed;
bottom: 5rem;
right: 1rem;
z-index: 20;
display: none;
width: 3rem;
height: 3rem;
border-radius: .5rem;
background: no-repeat url(../img/icon/arrow-top_wht.svg) center/55% #333;
}
h1 {
font-size: 1.4em;
font-weight: 900;
letter-spacing: 0em;
line-height: 1.2;
padding: 0.5em;
}
h1 + .document_date {
display: flex;
align-items: flex-start;
margin-bottom: 1rem !important;
font-size: 90%;
padding: 0 1rem;
gap: 1rem;
}
h1 + .document_date span {
}
h2 {
font-weight: 900;
font-size: 1.25rem;
color: #008bd5;
background-image: url(../img/h2_nami.webp), url(../img/h2_turnmark.webp), url(../img/h2_clock.webp);
background-size: auto .75rem, 1.5rem auto, auto 2.5rem;
background-position: left bottom, right .5rem bottom .4rem, left .5rem bottom .5rem;
position: relative;
line-height: 1.25;
background-repeat: repeat-x, no-repeat, no-repeat;
padding: 0.5rem 2rem 1rem 3.5rem;
/* background-color: #fff; */
min-height: 3rem;
display: flex;
flex-wrap: wrap;
align-items: center;
word-break: break-word;
}
h2 i {
display: none;
}
h2 svg {
display: none;
}
h2 .icon {
display: none;
vertical-align: baseline;
}
h3 {
font-weight: bold;
font-size: 1.1rem;
border-left: 2px #008bd5 solid;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 0.5em;
}
h4 {
text-align: center;
margin-bottom: 0.5em;
font-weight: bold;
color: #ff5722;
font-size: 1.1em;
}
.border {
border: 1px #fffcf4 solid;
}
.goRanking {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
}
.goRanking a {
max-width: 400px;
margin: 0 auto;
}
.goRanking a::after {
top: 50%;
margin-top: -0.5em;
}
.goRanking a span {
background-color: #ff5722;
display: inline-block;
padding: 0.5em;
margin-right: 0.2em;
border-radius: 1em;
}
.footerNav {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background-color: #333;
z-index: 200;
}
.footerNav ul {
display: flex;
align-items: stretch;
justify-content: flex-start;
}
.footerNav ul li {
width:20%;
}
.footerNav ul li a {
display: block;
color: #fff;
font-size: 80%;
line-height: 1;
padding: 3rem 0 0.5rem;
text-align: center;
background: no-repeat center top .75rem / auto 2em;
}
.footerNav ul li:nth-of-type(1) a {
background-image: url(../img/icon/crown-sharp-solid_ylw.svg);
}
.footerNav ul li:nth-of-type(2) a {
background-image: url(../img/icon/newmark_grn.svg);
}
.footerNav ul li:nth-of-type(3) a {
background-image: url(../img/icon/thumbs-up-solid_blu.svg);
}
.footerNav ul li:nth-of-type(4) a {
background-image: url(../img/icon/comment-solid_org.svg);
}
.footerNav ul li:nth-of-type(5) a {
background-image: url(../img/icon/chart-line-up-solid_red.svg);
}
.footerNav ul li a span {
display: none;
}
/*------------------------------------------*/
header {
line-height: 1;
z-index: 50;
background-color: #008bd5;
/* background-repeat: repeat-x; */
/* background-size: auto 0.75em; */
/* background-position: left 101%; */
position: fixed;
width: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.header_buttons {
display: flex;
align-items: center;
justify-content: flex-start;
}
header .searchBtn {
width: 3rem;
height: 3rem;
background: no-repeat url(../img/icon/magnifying-glass-solid_wht.svg) center/1.5rem;
}
header .backBtn {
display: none;
position: absolute;
top: 0;
right: 2em;
padding: 0.5em;
}
header .menuBtn {
width: 3rem;
height: 3rem;
background: no-repeat url(../img/icon/bars-sharp-solid_wht.svg) center/1.5rem;
}
.header_logo {
height: 3em;
}
.header_logo > a {
display: flex;
align-items: center;
height: 100%;
padding-left: .5rem;
}
.header_logo > a img {
width: auto;
height: 1.5rem;
}
/*--フッター----------------------------------------*/
footer {
text-align: center;
padding: 1em 0 6em;
background-color: #005786;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #fff;
}
footer ul {
padding: 0.75em 0;
}
footer li {
display: inline-block;
text-align: center;
}
footer li:nth-of-type(n + 2) {
border-left: 1px #fff solid;
padding-left: 0.2em;
}
footer li a {
display: inline-block;
color: inherit;
padding: 0 0.5em;
}
footer .copyright {
font-size: 80%;
color: #ccc;
}
/*--PAGENATION----------------------------------------*/
.pagenation {
text-align: center;
}
.pagenation li {
display: inline-block;
margin-right: 0.25em;
}
.pagenation li a {
display: block;
text-align: center;
text-decoration: none;
background-color: #36bdef;
color: #fff;
line-height: 1;
padding: 0.5em;
border-radius: 4px;
}
.pagenation li.active a {
background-color: #035886;
pointer-events: none;
}
/*--RANKING--------------------------------------------- */
.ranking {
padding: 0 0 1em;
}
.ranking > div {
padding: 0;
}
.ranking li {
display: block;
width: 100%;
border-bottom: 1px #36bdef dotted;
position: relative;
background-color: #fff;
padding: 1em;
}
.ranking li:last-of-type {
border: none;
}
.ranking li a::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f054";
position: absolute;
top: 50%;
transform: translateY(-0.5em);
right: 0.5em;
}
.ranking li figure {
position: absolute;
width: 5em;
height: 5em;
top: 1em;
left: 0.5em;
}
.ranking li::before {
width: 2em;
text-align: center;
display: block;
line-height: 2;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #fff;
}
.ranking li:nth-of-type(1)::before,
.ranking li:nth-of-type(2)::before,
.ranking li:nth-of-type(3)::before {
background-size: auto 100%;
background-repeat: no-repeat;
width: 3em;
height: 4em;
background-position: center top;
top: -0.25em;
left: -0.75em;
}
.ranking li:nth-of-type(1)::before {
content: "";
background-image: url(../img/medal_1.png);
}
.ranking li:nth-of-type(2)::before {
content: "";
background-image: url(../img/medal_2.png);
}
.ranking li:nth-of-type(3)::before {
content: "";
background-image: url(../img/medal_3.png);
}
.ranking .stastus {
position: absolute;
background-color: #9e9e9e;
color: #fff;
padding: 0.5em;
line-height: 1;
font-size: 80%;
top: 1em;
right: 1em;
}
.ranking dt {
padding-left: 5em;
}
.ranking dt .name {
font-size: 1.2em;
font-weight: bold;
}
.ranking dt .star {
font-weight: bold;
}
.ranking dt .star i {
color: #f90;
font-size: 90%;
display: inline-block;
vertical-align: middle;
position: relative;
top: -0.2em;
}
.ranking .btnArea .btn::after {
content: "";
}
.ranking dd {
line-height: 1.4;
font-size: 90%;
background-color: #fff3cd;
padding: 0.5em;
position: relative;
color: #444;
}
.ranking-bad dd {
background-color: #ccc;
}
.ranking-bad li:nth-of-type(1)::before {
content: "";
background: none;
}
.ranking-bad li:nth-of-type(2)::before {
content: "";
background: none;
}
.ranking-bad li:nth-of-type(3)::before {
content: "";
background: none;
}
/*--JISSEKI--------------------------------------------- */
.jisseki {
background-color: #f0f0f0;
}
.jisseki h3 {
text-align: center;
border: none;
background-color: #008bd5;
color: #fff;
margin: 0;
}
.jisseki > div {
padding: 0;
}
.jisseki li {
width: 100%;
padding: 0.5em 1em;
}
.jisseki_readmore {
background-color: #f0f0f0;
text-align: center;
padding: 1em 0;
}
.jisseki_readmore span::before {
content: "";
background: var(--blackArrowCircle_right);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
opacity: 0.7;
vertical-align: text-top;
}
.jisseki li figure {
width: 6em;
height: 6em;
float: left;
margin-right: 0.75em;
margin-bottom: 0;
}
.jisseki li figure > a {
width: 100%;
height: 100%;
position: relative;
}
.jisseki li figure > a svg {
position: absolute;
top: 13px;
left: 15px;
z-index: 2;
opacity: 0.7;
background-color: black;
border-radius: 100%;
padding: 0px 2px 1px 3px;
height: 32px;
width: 26px;
}
.jisseki_course {
font-size: 90%;
}
.jisseki_course span {
font-weight: bold;
font-size: 1.1em;
display: block;
}
.jisseki_race {
display: inline-block;
text-align: center;
font-size: 90%;
padding-right: 1em;
position: relative;
}
.jisseki_race::after {
content: "";
background: var(--orangeArrow);
background-size: contain;
display: block;
width: 1em;
height: 1em;
transform: rotate(90deg);
margin-left: 0.5em;
line-height: 1;
position: absolute;
bottom: 2px;
right: -3px;
opacity: 0.5;
}
.jisseki_race:last-of-type {
padding-right: 0;
}
.jisseki_race:last-of-type::after {
content: "";
background: none;
}
.jisseki_race span {
font-weight: bold;
font-size: 1.4em;
color: #dd0f00;
display: block;
line-height: 1;
margin-top: 0.2em;
}
.jisseki_get {
font-size: 1.2em;
text-align: center;
}
.jisseki_get span {
font-weight: bold;
color: #dd0f00;
font-size: 1.6em;
}
.jisseki p {
margin-bottom: 0;
}
.jisseki_comment {
background-color: #f0f0f0;
padding: 0.75em;
position: relative;
margin-top: 5px;
}
.jisseki_comment::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #f0f0f0 transparent;
top: -10px;
left: 50%;
margin-left: -10px;
}
/*--SIDEMENU--------------------------------------------- */
.sidemenu .ranking {
margin: 0 auto;
}
/*--パンくずリスト--------------------------------------------- */
.breadcrumb {
padding: 0.25em;
background-color: #0072af;
}
.breadcrumb li {
display: inline-block;
line-height: 1;
position: relative;
margin-right: 1em;
}
.breadcrumb li a {
color: #fff;
font-size: 70%;
line-height: 2;
display: inline-block;
padding: 0 0.5em;
vertical-align: top;
}
.breadcrumb .longbrd {
margin-right: 2em;
}
.breadcrumb .longbrd a {
overflow-x: hidden;
max-width: 11em;
white-space: nowrap;
}
.breadcrumb .longbrd::after {
right: -1.8em;
}
.breadcrumb .longbrd::before {
content: "...";
position: absolute;
right: -1.1em;
top: 0.6em;
font-size: 70%;
color: #fff;
}
.breadcrumb li::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
display: block;
transform: rotate(90deg);
width: 1em;
height: 1em;
position: absolute;
right: -16px;
top: 3px;
}
.breadcrumb li:last-of-type {
pointer-events: none;
}
.breadcrumb li:last-of-type::after {
display: none;
}
.quote {
padding: 1.75em;
position: relative;
margin-bottom: 0.5em;
background-color: #f0f0f0;
color: #1c1c1c;
}
.quote > *:last-of-type {
margin: 0;
}
.quote::before,
.quote::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;
color: #999;
}
.quote::before {
content: "";
background: var(--ashQuote_left);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
position: absolute;
top: 0.5em;
left: 0.5em;
}
.quote::after {
content: "";
background: var(--ashQuote_right);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
position: absolute;
bottom: 0.5em;
right: 0.5em;
}
.quote_from {
font-size: 80%;
max-width: calc(80% - 3em);
margin-left: auto !important;
font-style: italic;
position: relative;
display: table;
}
.quote_from::before {
content: "";
width: 2em;
height: 1px;
background-color: #333;
position: absolute;
top: 0.6em;
left: -2.5em;
}
dl.default {
margin: 1em 0;
}
dl.default dd {
padding-left: 1.2em;
}
dl.default dt:before {
font-family: "Font Awesome 5 Pro";
content: "\f024";
color: skyblue;
padding-right: 0.3em;
}
dl.default dt {
padding-bottom: 0.1em;
font-weight: bold;
margin: 0.5em 0;
}
.voice {
background-color: #f0f0f0;
padding: 1em 1em 0.5em;
}
.voice_user {
font-size: 0.8em;
font-style: italic;
}
.btnArea {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.section_image {
width: 100%;
padding: 1em;
background-color: #fff;
text-align: center;
}
.section_image img {
max-width: 500px;
}
.minus {
font-size: 0.9em;
}
.plus {
font-weight: bold;
color: #f44336;
}
.plus::before {
content: "+";
}
.site_admin .sitelist dd {
position: fixed;
overflow-y: scroll;
top: 6em;
height: 80%;
left: 32em;
padding: 2em;
border: solid 1px #22566e;
}
/*-------------------------------*/
.site_award {
display: table;
margin: 0 auto;
}
.site_award > dl {
display: table-row;
}
.site_award dt {
display: table-cell;
padding-right: 1em;
}
.site_award dt i {
font-size: 1.6em;
display: inline-block;
vertical-align: middle;
margin-right: 0.25em;
}
.site_award dd {
display: table-cell;
line-height: 1;
font-weight: bold;
}
.site_award dd span {
font-size: 2em;
}
/*人気のコラム、検証レポート追加 */
.index_report > div {
padding: 0em;
}
.pop_p {
font-weight: 600;
}
figure.zoom {
position: relative;
overflow: hidden;
width:12rem;
max-width: 250px;
margin: 1rem auto;
}
figure.zoom::after {
content: "";
display: block;
width: 3rem;
height: 3rem;
position: absolute;
top: 3rem;
left: calc(50% - 1.5rem);
background: no-repeat url(../img/icon/magnifying-glass-plus.svg) center/cover;
filter: drop-shadow(0 .2rem .2rem #666);
cursor: pointer;
}
figure.zoom img {
width: 100%;
object-fit: cover;
cursor: pointer;
border: 1px #ccc solid;
}
figure.zoom figcaption {
font-size: .8rem;
display: table;
margin: .5em auto 0;
}
figure.zoom + figure.zoom, figure.zoom:has( + figure.zoom ) {
width: calc( ( 100% - 1rem ) / 2);
display: block;
/* vertical-align: top; */
margin-bottom: 1rem;
float: left;
}
figure.zoom + figure.zoom {
margin-left: 1rem;
}
figure.zoom + figure.zoom + * {
clear: both;
}
.zoomArea {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(.1rem);
z-index: -200000;
opacity: 0;
overflow: hidden;
}
.zoomArea.active {
z-index: 2000;
opacity: 1;
}
#zoomArea figure {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#zoomArea figure img {
transform-origin: center;
width: auto;
opacity: 0;
transition: opacity .3s;
}
.zoomArea button {
width: 2.5rem;
height: 2.5rem;
appearance: none;
border: none;
background-color: transparent;
filter: drop-shadow(0 .1em .3em #000);
cursor: pointer;
}
.zoomArea_buttons {
position: absolute;
bottom: 1rem;
left: 0;
display: flex;
width: 100%;
justify-content: center;
gap: 2rem;
}
.zoomArea_buttons button {
background: no-repeat center/cover url(../img/icon/magnifying-glass-minus.svg);
}
.zoomArea_buttons button:last-of-type {
background-image: url(../img/icon/magnifying-glass-plus.svg);
}
.zoomArea_close {
position: absolute;
top: 1rem;
right: 1rem;
background: no-repeat center/cover url(../img/icon/circle-xmark-regular.svg);
}
/* 的中実績のスライド */
.swiper-results {
overflow: hidden;
}
.swiper-results dl {
text-align: center;
transition-timing-function: linear;
}
.swiper-results dl div {
display: table;
width: auto;
padding: 0 1rem;
background-color: #f0f0f0;
border-right: .25em #fff solid;
border-left: .25em #fff solid;
}
.swiper-results dl dt {
}
.swiper-results dl dt > * {
display: block;
}
.swiper-results dl dt em {
background: none;
font-size: 1.1em;
}
.swiper-results dl dd {
}
.swiper-results dl dd p {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
gap: 0 2rem;
line-height: 1.2;
}
.swiper-results dl dd p span {
display: block;
padding-left: 2.2em;
background: no-repeat url(../img/hitmark.webp) left top/auto 2em;
position: relative;
}
.swiper-results dl dd p span:nth-of-type(n+2) {
padding-left: 2em;
position: relative;
}
.swiper-results dl dd p span:nth-of-type(n+2)::before {
content: "";
display: block;
position: absolute;
top: .75em;
left: -1.5em;
width: 1em;
height: 1em;
background-color: #ccc;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.swiper-results dl dd strong {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -.025em;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media (max-width: 374px) {
} /*■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media (min-width: 768px) {
.forSP {
display: none;
}
html,body {
font-size: 15px;
}
.form_table {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0 1em;
}
.form_row {
display: table-row;
}
.form_row > * {
display: table-cell;
vertical-align: top;
}
.form_row > label {
padding: 0.75em 0;
}
h1 {
display: flex;
justify-content: center;
}
h1 br {
display: none;
}
h1 + .document_date {
justify-content: center;
}
article > section {
max-width: 700px;
margin: 2em auto;
}
.sidemenu {
max-width: 700px;
width: 96%;
margin: 0 auto;
}
.sidemenu .ranking {
width: 100%;
margin: 2em auto;
}
.ranking > div {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.ranking li:nth-child(-n + 3) figure {
width: 150px;
left: 6em;
}
.ranking li dl {
text-align: left;
}
.ranking li:nth-child(-n + 3) dl {
padding-left: 17em;
}
.ranking li:nth-child(-n + 3) dt {
padding-left: 0;
}
.ranking dt .btnArea {
margin-left: 0;
}
.ranking li:nth-of-type(-n + 3)::before {
width: 5em;
height: 7em;
top: 0.25em;
left: 0.25em;
}
.ranking .btnArea > p {
display: inline-block;
width: 128px;
margin: 0 2px 1em;
}
.linkmenu {
text-align: center;
margin-top: 2em;
padding-bottom: 16em;
}
.linkmenu li {
display: inline-block;
}
.linkmenu .stadiumlink li {
width: 25%;
}
.ranking li {
min-height: 8em;
}
.section_image {
padding-top: 2em;
}
.ranking_free tbody tr th {
width: 3em;
}
.ranking_free .ranking_site {
padding: 0.75em 0.5em;
}
.ranking_free .ranking_site_spec {
font-size: 100%;
position: absolute;
top: 0em;
right: 3em;
text-align: left;
width: 200px;
}
.topBtn {
color: rgba(0, 0, 0, 0.5);
z-index: 110;
}
.ranking_aside ul li figure {
width: 7em;
position: absolute;
left: 3.5em;
top: 1em;
}
.ranking_aside dt {
padding-left: 11em;
min-height: auto;
}
.ranking_aside dd {
padding-left: 10em;
margin-top: 0.5em;
}
.siteLink {
width: 500px;
margin: 0 auto 2.5em;
}
.jisseki > div {
max-width: 100%;
}
.jisseki ul {
text-align: center;
margin: 0 auto;
}
.jisseki li {
width: 300px;
text-align: left;
margin: 10px;
vertical-align: top;
background-color: #fff;
display: inline-block;
}
.jisseki li.jisseki_readmore {
text-align: center;
background: none;
}
.jisseki li.jisseki_readmore span {
border: 1px #666 solid;
padding: 0.5em 1em;
border-radius: 2em;
display: inline-block;
margin-top: 2em;
}
.breadcrumb li::after {
top: 0.3em;
}
.index_report {
width: 100%;
}
.linkAreaB {
margin: 0 0 1em 2em;
}
.lightbox {
float: left;
margin-right: 1rem;
margin-bottom: 1rem;
margin-top: 0;
width: 17rem;
}
.lightbox a {
width: 17rem;
height: 17rem;
}
.lightbox a::after {
background: var(--whiteSearch);
font-size: 1.5em;
top: 85%;
left: 85%;
background-color: black;
border-radius: 100%;
padding: 1px 2px 0px 0px;
opacity: 0.7;
height: 1.2em;
width: 1.2em;
}
.clearfix .lightbox ~ ul.mark,
.clearfix .lightbox ~ .quote {
margin-left: 18em;
}
.smartphoto-arrow-left a::after,
.smartphoto-arrow-right a::after {
width: 1.5em;
height: 1.5em;
}
.scroll::before {
content: none;
}
/* ■■■ zoom回り込み処理 ■■■ */
figure.zoom {
float: left;
margin: 0 2rem 1rem 0;
}
div:has( figure.zoom ) h3 {
clear: both;
}
*:has( + figure.zoom ):after {
content: "";
clear: both;
display: block;
}
p + figure.zoom {
clear: left;
}
figure.zoom + ul, figure.zoom + dl {
margin-left: 18rem;
width: auto !important;
}
} /*■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media (min-width: 1024px) {
.anchor {
padding-top: 8em;
margin-top: -8em;
}
.forSP {
display: none !important;
}
.wrap {
padding-bottom: 0;
}
.scroll {
overflow: auto;
}
.scroll-always {
overflow-x: auto;
}
h2 {
}
h3 {
margin: 2em 0;
}
.categoryNav {
width: 100%;
max-width: 100%;
margin-top: 3em;
}
.categoryNav ul {
text-align: center;
margin-top: 2em;
}
.categoryNav ul li {
display: inline-block;
vertical-align: top;
width: 300px;
min-height: 370px;
border: none;
margin: 0.25em;
}
.categoryNav ul li {
width: 240px;
vertical-align: top;
margin: 10px;
height: 360px;
}
.categoryNav ul li a {
display: block;
padding: 1em;
height: 100%;
}
.categoryNav ul li a::after {
content: "";
}
.categoryNav ul li a > * {
display: block;
}
.categoryNav ul li a figure {
width: 150px;
margin: 0 auto 0.5em;
position: static;
}
.categoryNav ul li a dd {
text-align: left;
}
.categoryNav .more {
text-align: center;
position: absolute;
bottom: 1em;
left: 0;
width: 100%;
}
.sidemenu {
max-width: 100%;
width: 100%;
text-align: center;
padding: 1em 0;
margin-top: 2em;
}
.ranking {
text-align: center;
}
.ranking ul {
margin-top: 1em;
text-align: center;
}
.ranking li {
float: left;
width: 32%;
margin: 1% 2% 1% 0;
vertical-align: top;
border: none;
}
.ranking li:nth-of-type(-n + 3) {
width: 100%;
margin: 1% 0;
}
.ranking li:nth-of-type(n + 4) .btnArea > p {
display: block;
width: 100%;
}
.ranking li:last-of-type {
margin-right: 0;
}
.ranking li:nth-of-type(n + 4) dd {
min-height: 120px;
}
.linkmenu {
background-color: hsla(201, 100%, 26%, 0.5);
padding: 2em;
width: 100%;
margin: 0;
position: inherit;
padding-bottom: 10em;
color: #fff;
}
.linkmenu ul {
max-width: 1000px;
margin: 0 auto;
}
.linkmenu .stadiumlink li {
width: 20%;
}
.section_image {
padding: 2em 0 0;
margin-bottom: -2em;
}
footer dl {
display: table;
margin: 0 auto 1em;
}
footer dl > * {
display: table-cell;
vertical-align: middle;
padding: 0 0.5em;
}
.sidemenu > .clearfix {
width: 100%;
margin: 3em auto 2em;
max-width: 1200px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.ranking_aside {
width: calc( (100% - 4rem) / 3);
}
.ranking_aside ul li figure {
width: 6em;
}
.ranking_aside dt {
padding-left: 9em;
text-align: left;
min-height: 6em;
}
.ranking_aside dd {
padding: 0;
}
.goRanking {
display: block;
width: 200px;
background: none;
bottom: 1em;
left: 2em;
}
.goRanking a {
max-width: 100%;
border-radius: 3em;
}
.goRanking a::after {
content: "";
}
.goRanking a span {
display: block;
margin: 0 auto 1em;
width: 8em;
}
footer {
padding-bottom: 1em;
}
.index_report > h2 {
}
.index_report {
margin-top: 1em;
background: none;
}
.index_report ul {
margin-top: 0;
margin-bottom: 3rem;
}
.linkAreaB {
margin: 0 0 1em 9em;
}
.ranking_osusume_btnArea > .btn svg {
position: absolute;
left: 0.5em;
}
} /*■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media (max-width: 767px) {
.forPC {
display: none;
}
}
dl.turnmark dt {
font-weight: 600;
position: relative;
padding-left: 1.5em;
font-size: 1.1em;
margin: 0.5em 0;
display: inline-block;
}
dl.turnmark dt::before {
background-image: url(../img/turnmark.png);
content: "";
width: 1.2em;
height: 1.4em;
background-size: cover;
position: absolute;
left: 0;
top: -0.1em;
background-position: center;
}
dl.turnmark dd {
display: inline-block;
font-weight: 600;
position: relative;
font-size: 1.1em;
margin: 0.5em 0;
display: inline-block;
}
.lead_accordion + label {
padding: 0 1em;
max-width: 700px;
margin: 1em auto 0;
text-align: left;
word-break: break-word;
word-wrap: break-word;
display: block;
}
.lead_accordion + label p::after {
content: "";
background: var(--redCircle_right);
background-size: contain;
transform: rotate(-90deg);
width: 1em;
height: 1em;
display: inline-block;
text-align: center;
line-height: 1;
padding: 0.2em;
vertical-align: middle;
}
.lead_accordion:checked + label p::after {
transform: rotate(90deg);
}
.lead_accordion + label + div {
max-width: 700px;
margin: 0 auto;
height: 0;
opacity: 0;
visibility: hidden;
padding: 0 1em;
margin-top: 0.5em;
transform: translateY(-1em);
transition: 0.3s;
}
.lead_accordion:checked + label + div {
height: auto;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.freelist + .ta-c {
white-space: nowrap;
letter-spacing: -0.04em;
font-size: 0.9em;
margin-top: 2em;
}
.freelist + .ta-c span {
margin-right: 0;
}
.free_btn {
margin-bottom: 2em;
}
.ranking_aside li:nth-of-type(n + 4)::before {
background-image: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: white;
font-weight: bold;
width: 2em;
height: 2em;
}
.ranking_aside li:nth-of-type(4)::before {
content: "4";
background-color: #f44336;
}
.ranking_aside li:nth-of-type(5)::before {
content: "5";
background-color: #ff9900;
}
.ranking_aside li:nth-of-type(n + 4) figure {
width: 4.5em;
left: 1em;
}
.ranking_aside li:nth-of-type(n + 4) dt {
padding-left: 5em;
}
@media (min-width: 768px) {
.lead_accordion + label,
.lead_accordion + label + div {
padding: 0;
}
.lead_accordion + label + div {
margin-top: 0;
}
.lead_accordion + label p::after,
.lead_accordion:checked + label p::after {
content: none;
}
.lead_accordion + label + div {
height: auto;
opacity: 1;
visibility: visible;
transform: none;
}
.freelist + .ta-c {
margin-top: 1em;
font-size: 1em;
letter-spacing: normal;
}
.ranking_aside ul {
display: flex;
flex-wrap: wrap;
}
.ranking_aside li:nth-of-type(-n + 3) {
width: 100%;
}
.ranking_aside li:nth-of-type(n + 4) {
width: 50%;
}
.ranking_aside li:nth-of-type(n + 4) figure {
width: 6em;
}
.ranking_aside li:nth-of-type(n + 4) dl {
min-height: 5em;
}
.ranking_aside li:nth-of-type(n + 4) dt {
padding-left: 6.5em;
min-height: 6.5em;
}
.ranking_aside li:nth-of-type(n + 4) dd {
padding-left: 0;
}
.ranking_osusume_btnArea > .btn svg {
position: absolute;
left: 0.5em;
}
}
@media (min-width: 1024px) {
.ranking_aside ul {
display: block;
}
.ranking_aside li:nth-of-type(n + 4) {
width: 100%;
}
.pa-1 {
padding-bottom: 2em;
}
.sg_link a {
height: 35px;
padding: 0.56em 0.5em;
}
.sg_link {
top: 93px;
left: 50%;
text-align: center;
width: 50%;
}
}
/* adArea 2023/07/26追加 */
.adArea {
margin: 1em !important;
background-color: #fff !important;
padding: 1em !important;
border: 1px #eee solid;
}
section > div > .adArea {
margin: 2em auto !important;
background-color: #e8f1f5 !important;
}
.adArea figure {
margin-bottom: 0.5em;
float: left;
width: 7rem;
height: 7rem;
margin-right: 1rem;
}
.adArea figure img {
object-fit: cover;
width: 100%;
height: 100%;
}
.adArea dl {
}
.adArea dt {
font-size: 1.4rem;
font-weight: 600;
line-height: 1.2;
/* text-align: justify; */
margin-bottom: .8em;
}
.adArea dd {
text-align: justify;
}
.adArea dd > div {
margin-top: .5rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
/*
.adArea dd a {
display: block;
color: inherit;
background-color: #eee;
line-height: 2;
padding: 0.5em 1em;
border-radius: 2em;
text-align: center;
}
.adArea dd a.adArea_link {
display: flex;
align-items: center;
background-color: rgba(17, 173, 0, 1);
color: #fff;
margin-bottom: .5rem;
justify-content: center;
font-weight: 700;
}
*/
.adArea dd a:not(.btn-sub)::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
background: no-repeat url(../img/icon/square-arrow-up-right-solid_wht.svg) center/contain;
margin-right:.5em;
}
@media( min-width:768px ) {
.adArea {
max-width: 700px;
margin: 2em auto !important;
}
.adArea dl {
flex: 1;
}
.adArea figure {
width: 332px;
height: auto;
}
.adArea dd > div {
/* display: flex; */
clear: both;
/* align-items: center; */
/* justify-content: center; */
flex-direction: row-reverse;
}
}
/* 実績 */
.jissekilist div {
padding: .25em 0;
border-bottom: 1px solid #ccc;
}
.jissekilist dt {
color: #008bd5;
font-weight: 700;
}
.jissekilist dt em {
font-size: inherit;
}
.jissekilist dd {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
}
.jissekilist dd p {
display: flex;
align-items: center;
margin:0;
}
.jissekilist dd span {
display: block;
text-align: center;
line-height: 1.2;
font-size: 90%;
position: relative;
}
.jissekilist dd span:nth-of-type(n+2) {
padding-left: 1em;
}
.jissekilist dd span:nth-of-type(n+2)::before {
content: "";
display: inline-block;
width: .8em;
height: 1em;
background-color: #008bd5;
clip-path: polygon(0 0,100% 50%,0 100%);
margin-top: 1e;
position: absolute;
left: 0.2em;
top: .5em;
opacity: .5;
}
.jissekilist dd strong {
font-weight: 700;
font-size: 2em;
padding-left: 1em;
background: no-repeat url(../img/hitmark.webp) left top/auto 90%;
display: block;
}
@media( min-width:768px ) {
.jissekilist {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.jissekilist div {
width: 48%;
}
}
/* 2024-08-06 新レポートリンク */
div.reportLink {
margin: 1rem 0;
padding: 0 1rem;
}
div.reportLink>a {
display: block;
background-color: #fff;
color: inherit;
padding: 1rem;
}
div.reportLink>a>dl>dd::after {
content: "続きを見る";
margin-left: auto;
display: block;
text-align: center;
color: #fff;
background-image: url(../img/icon/circle-chevron-right-solid_wht.svg), linear-gradient(to top, #0072af, #36bdef);
background-size: 1.2em, cover;
background-repeat: no-repeat;
background-position: center right 1em, center;
line-height: 1;
padding: 1em;
border-radius: .2em;
font-size: 1.1rem;
font-weight: 900;
margin-top: .5rem;
}
div.reportLink>a>dl>dt {
font-size: 1.25rem;
line-height: 1.4;
margin: .5rem 0;
font-weight: 700;
text-decoration: underline;
}
@media( min-width: 768px) {
div.reportLink {
padding: 0;
width: 700px;
margin: 0 auto;
}
div.reportLink>a {
display: flex;
align-items: flex-start;
gap: 1rem;
}
div.reportLink>a>figure {
width: 20rem;
}
div.reportLink>a>dl {
flex: 1;
}
div.reportLink>a>dl>dt {
margin-top: 0;
}
}
@media( min-width: 1024px) {
div.reportLink {
margin-bottom: 3rem;
}
}
/* commonRanking
汎用ランキング
2024-10-26
*/
.commonRanking {
counter-reset: list-item;
}
.commonRanking>li {
counter-increment: list-item; /* カウンターの値を増やす */
padding: 1rem 0;
border-bottom: 1px #ccc dotted;
}
.commonRanking>li::after {
content:"";
display: block;
clear: both;
}
.commonRanking>li>a {
display: block;
color: inherit;
position: relative;
padding-left: .5rem;
}
.commonRanking>li>a::after {
content:"詳細を見る";
display: block;
font-size: 80%;
background-color: #008bd5;
color: #fff;
padding: 0.5em 1em;
border-radius: 2em;
width: 10em;
text-align: center;
margin-left: auto;
margin-top: 1em;
}
.commonRanking>li>a>figure {
}
.commonRanking>li>a>figure>img {
float: left;
width: 6em;
height: 6em;
margin-right: 1rem;
}
.commonRanking>li>a>figure>figcaption {
font-size: 1.2rem;
font-weight: 700;
}
.commonRanking>li>a>dl {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
.commonRanking>li>a>dl>div {
display: flex;
align-items: baseline;
gap: .25em;
}
.commonRanking>li>a>dl>div>dt {
font-size: 90%;
}
.commonRanking>li>a>dl>div>dd {
}
.commonRanking>li>a>dl>div>dd em {
font-size: 1.25em;
}
.commonRanking>li:nth-of-type(-n+3) a::before {
content: "";
background-image: url(../img/award_1.png);
width: 3rem;
height: 4rem;
position: absolute;
z-index: 10;
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
top: -.5rem;
left: -.5rem;
}
.commonRanking>li:nth-of-type(2) a::before {
background-image: url(../img/award_2.png);
}
.commonRanking>li:nth-of-type(3) a::before {
background-image: url(../img/award_3.png);
}
.commonRanking>li:nth-of-type(4) a::before,
.commonRanking>li:nth-of-type(5) a::before {
content: counter(list-item);
position: absolute;
z-index: 10;
top: -.5rem;
left: -.5rem;
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
color: #fff;
}
.commonRanking>li:nth-of-type(4) a::before {
background-color: #F44336;
}
.commonRanking>li:nth-of-type(5) a::before {
background-color: #FF9800;
}