@charset "UTF-8";
:root {
--whiteArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--redArrow: url('data:image/svg+xml;utf8,')
no-repeat center;
--redCrown: 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;
--pen: url('data:image/svg+xml;utf8,')
no-repeat center;
--pinkQuote: url('data:image/svg+xml;utf8,')
no-repeat center;
}
/*---基本設定-----------*/
html {
font-size: 4vw;
}
body {
font-family: "YakuHanJPs", "Roboto", "BIZ UDPGothic", "Helvetica Neue", Arial,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 4vw;
font-weight: 500;
color: #444;
position: relative;
background-color: white;
-webkit-text-size-adjust: 100%;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p,
dt,
dd,
li {
line-height: 1.5;
}
html,
body {
height: 100%;
}
img {
image-rendering: -webkit-optimize-contrast;
}
.pc{
display: none;
}
/*--PARTS-------------*/
.wrap {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.fa-star,
.fa-star-half-alt {
color: #ffc107;
}
.icon {
display: block;
width: 1em;
height: 1em;
margin-right: 0.5em;
}
.btn .icon {
fill: white;
}
.btn-light .icon {
fill: #666;
}
.btn {
display: block;
text-align: center;
box-shadow: 0 3px 2px #cdcdcd;
margin-bottom: 1em;
border-radius: 0.4em;
padding: 1em 0;
line-height: 1;
font-weight: bold;
color: #fff;
margin-right: auto;
margin-left: auto;
width: 100%;
font-family: inherit;
font-size: 1em;
border: none;
position: relative;
cursor: pointer;
transition-duration: .3s;
}
.btn:hover{
transform: scale(0.9);
opacity: 0.8;
box-shadow: 0 4px 3px #333;
}
.btn-green {
background: linear-gradient(#ffc800 0%, #ca731a 50%, #f39d00 100%);
color: white;
}
.btn-red {
background: linear-gradient(#ff0200 0%, #ca0100 50%, #ff0100 100%);
}
.btn-red-strong {
box-shadow: 0 3px 2px #cdcdcd;
border: 1px #c1c1c1 solid;
background: #ff5454;
background: -moz-linear-gradient(to bottom, #7eff94 0%, #0a8224,#55ff42 100%)!important;
background: -webkit-linear-gradient(to bottom, #7eff94 0%, #0a8224,#55ff42 100%)!important;
background: linear-gradient(to bottom, #7eff94 0%, #0a8224,#55ff42 100%)!important;
}
.btn-red-strong::after {
content: none;
}
/*.btn-yellow リニューアル前{
background: linear-gradient(#ffbc58 0%, #df9100 50%, #ffbc58 100%);
}*/
.btn-yellow {
background: linear-gradient(#ffb5b5 0%, #bb4848 50%, #ff8a8a 100%);
}
.btn-blu {
background: linear-gradient(#0db4e6 0%, #1d69b7 50%, #0092d8 100%);
/* width: 23em; */
}
.btn-red{
background: linear-gradient(#ff2f00 0%, #d10000 50%, #ff5200 100%);
}
.btn-sitelink {
position: relative;
justify-content: center;
line-height: 1.4;
min-height: 4em;
display: flex;
align-items: center;
font-size: 1.1em;
background: linear-gradient(to bottom, #02ff48, #138400,#044a00);
margin: 1em auto;
border-radius: 0.5em;
overflow: hidden;
}
.btn-sitelink::before{
content: "AD";
position: absolute;
left: 1em;
mix-blend-mode: overlay;
color: #ddd;
border: 1px #ddd solid;
line-height: 1;
padding: 0.1em 0.2em;
font-size: 80%;
font-weight: normal;
}
.btn-sitelink::after{
content: "";
background: var(--whiteArrow);
background-size: contain;
display: block;
width: 1em;
height: 1em;
transform: rotate(90deg);
position: absolute;
right: .5em;
}
.btn-sitelink figure {
display: none;
}
.btn-sitelink svg{
display: none;
}
.btn-sitelink .icon{
margin-top: -0.2em;
width: 1.5em;
height: 1.5em;
margin-right: 0.5em;
}
.btn-sitelink i {
position: absolute;
left: 2.75em;
top: 50%;
transform: translateY(-50%);
font-size: 2em;
}
.btn-sitelink > img {
position: absolute;
left: 4.9em;
top: 48%;
transform: translateY(-50%);
width: 2em;
height: 2em;
display: none;
}
.btn-light {
background: none;
border: 2px #666 solid;
color: #666;
box-shadow: none;
}
.btn-light i {
color: #666;
}
.btnArea a:nth-child(5) {
margin: 2.5em 0 2.5em 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
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;
}
.select_wrap {
overflow: hidden;
border: 1px #ccc solid;
display: block;
border-radius: 0.25em;
background-color: #fff;
position: relative;
z-index: 0;
}
.select_wrap::after {
content: "";
background: url(../img/arrow_circle.svg) no-repeat center;
background-size: contain;
width: 1em;
height: 1em;
display: block;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
right: 0.5em;
filter: brightness(0.5);
}
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;
}
.site_free .document_image {
margin-bottom: 1em;
}
.site_free .form_inline.ta-c {
display: flex;
align-items: center;
justify-content: space-between;
}
.site_free .form_inline.ta-c .btn-blu {
margin: 0;
}
.after_resultlist {
margin-bottom: 2em;
}
.after_resultlist .pa-1 {
padding: 0 1em;
}
.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;
}
.box {
background-color: rgba(230, 230, 230, 0.5);
padding: 1em;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1em;
}
table th,
table td {
padding: 0.25em 0.5em;
border: 1px #ccc solid;
background-color: #fff;
line-height: 1.6;
}
table thead th {
background-color: #60a868;
color: #fff;
}
table tbody th,
table tbody tr + td {
background-color: #eee;
font-weight: normal;
padding: 0.5em;
}
table td {
padding: 0.5em;
}
table .total th,
table .total td {
border-top: 4px #ccc double;
}
em {
background: linear-gradient(transparent 50%, #c4fcd0 50%);
}
strong {
color: #ff8125;
}
a {
color: #f44336;
text-decoration: none;
}
/* list */
ul.mark {
padding: 0.5em 1em 0.5em 1.8em;
margin: 1em 0;
border: solid 1px #c4ecff;
}
ul.mark li {
position: relative;
}
ul.mark li::before {
content: "";
display: inline-block;
margin-right: 0.8em;
margin-left: -1em;
width: 0.5em;
height: 0.5em;
background-color: #98d1e4;
border-radius: 100%;
vertical-align: top;
margin-top: 0.45em;
}
/*ul.mark strong{
color: #535353;
}*/
ul.check {
padding: 2.5em 1em 1em 1.8em;
margin: 2em 0 1em;
background-color: #6faec4;
color: #fff;
position: relative;
}
ul.check::before{
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: 32%;
background-position: center left 1.2em;
background-image: url(../img/icon/pen_icon.svg);
width: 4em;
height: 2em;
left: 0em;
top: 0;
background-color: #1387a4;
border-bottom-right-radius: 30em;
}
ul.check li::before{
content: "";
display: inline-block;
margin-right: 0.8em;
margin-left: -1em;
width: 0.5em;
height: 0.5em;
background-color: #fff;
border-radius: 100%;
vertical-align: top;
margin-top: 0.45em;
}
ul.number {
position: relative;
border: solid 1px #c4ecff;
padding: 0.5em;
margin: 1em 0;
}
ul.number span {
position: absolute;
top: auto;
left: 0.5em;
background: #3eb8d0;
color: #fff;
width: 1.5em;
text-align: center;
}
ul.mark li,
ul.number li {
margin: 0.4em 0;
}
ul.number li{
margin: 0.5em 0;
border-bottom: solid 1px #ccc;
padding-bottom: 0.5em;
padding-left: 2.5em;
}
ul.mark li a,
ul.number li a{
color: #2191c7;
text-decoration: underline;
}
ul.mark.kaime{
display: flex;
padding: .5rem 1rem;
flex-wrap: wrap;
}
ul.mark.kaime li{
padding-left: 1rem;
width: calc(100%/2);
font-size: .9rem;
}
.jump {
-webkit-animation: 0.8s jump ease-out infinite;
animation: 0.8s jump ease-out infinite;
}
.svg{
display: inline-block;
width: 1em;
height: 1em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
vertical-align: top;
margin-right: 0.3em;
}
.svg.beginner{
background-image: url(../img/icon/beginner_icon.svg);
}
.svg.osusume{
background-image: url(../img/icon/hart_icon.svg);
}
@-webkit-keyframes jump {
20% {
-webkit-transform: translateY(-10px);
}
}
@keyframes jump {
20% {
transform: translateY(-10px);
}
}
.linkArea {
margin: 1em 0;
}
.linkArea a {
text-decoration: none;
font-weight: bold;
color: #ff9a00;
display: flex;
align-items: center;
}
.linkArea a::before {
content: "";
background: var(--whiteArrow);
background-size: 70% 70%;
background-color: #ff9a00;
border-radius: 50%;
width: 1.2em;
height: 1.2em;
flex-shrink: 0;
transform: rotate(90deg);
margin-right: 0.2em;
}
.linkArea-check {
border: 2px #f44336 solid;
padding: 1em 0.5em 0.5em;
position: relative;
display: flex;
justify-content: center;
}
.linkArea-check::before {
content: "CHECK!!";
position: absolute;
top: -1em;
line-height: 1;
padding: 0.5em 1em;
left: 50%;
transform: translateX(-50%);
background-color: #f44336;
color: #fff;
font-size: 80%;
font-weight: bold;
border-radius: 2em;
}
.linkArea-check a {
position: relative;
color: #f44336;
padding-left: 1.5em;
display: block;
}
.linkArea-check a::before {
position: absolute;
left: 0;
top: auto;
}
.scroll {
overflow-x: scroll;
margin-bottom: 2em;
}
.scroll::before {
content: "▼ スクロールしてご覧ください。▼";
display: block;
text-align: center;
margin-bottom: 0.5em;
}
.scroll table {
table-layout: auto;
width: 700px;
font-size: 90%;
}
.more {
text-align: right;
margin: 0;
}
.more span {
display: inline-block;
font-size: 80%;
background-color: #999;
color: #fff;
padding: 0.5em 1em;
border-radius: 2em;
}
.h_img{
max-width: 600px;
height: auto;
margin: 1em auto 2.5em;
position: relative;
}
.h_img img{
border: solid 1px #ebebeb;
}
.h_img figcaption{
position: absolute;
bottom: 0.2em;
left: 0;
background: #333;
padding: 0.5em 1em;
color: #fff;
}
.reverse{
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
.bannerArea {
max-width:500px;
margin: 1em auto;
}
.bannerArea a {
display: block;
}
.bannerArea a img {
}
/*=============================
.btn-trigger
=============================*/
.btn-trigger {
position: relative;
width: 1.5em;
height: 1.5em;
cursor: pointer;
z-index: 10;
}
.btn-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background-color: #000;
border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
display: inline-block;
transition: all .5s;
box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
top: 0;
}
.btn-trigger span:nth-of-type(2) {
top: 9px;
}
.btn-trigger span:nth-of-type(3) {
bottom: 0;
}
/*=============================
#btn08
=============================*/
#btn08.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
#btn08.active span:nth-of-type(2) {
opacity: 0;
}
#btn08.active span:nth-of-type(3) {
-webkit-transform: translateY(-9px) rotate(315deg);
transform: translateY(-9px) rotate(315deg);
}
/*--記事ページパーツ------------------------------------------*/
.document h1,
.h1 {
font-size: 1.4em;
font-weight: bold;
padding: 0 0.7em;
line-height: 1.2;
margin-top: 0.7em;
margin-bottom: 0.5em;
}
.document h2,
.h2 {
color: #fff;
font-weight: bold;
font-size: 1.2em;
padding: 0.5em 1em;
background: linear-gradient(
135deg,
#eee 16%,
#3f4f5c 16%,
#6e7a85 32%,
#ff293a 32%,
#ff7883 48%,
#006cb7 48%,
#419ddc 64%,
#ffbc00 64%,
#ffdd44 80%,
#09874f 80%,
#0bdd81 96%,
#00ff8f
);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.8), 0 -1px 1px rgba(0, 0, 0, 0.8),
0 1px 1px rgba(0, 0, 0, 0.8), -1px 0px 1px rgba(0, 0, 0, 0.8),
1px 0px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8),
-1px 1px 1px rgba(0, 0, 0, 0.8), 1px -1px 1px rgba(0, 0, 0, 0.8),
1px 1px 1px rgba(0, 0, 0, 0.8);
}
.document h3,
.h3 {
margin: 2em 0 1em
}
.document h3 span,
.h3 span {
font-size: 1.25em;
font-weight: 900;
display: inline;
line-height: 1.2;
padding: 0.2em 0;
color: #286ea1;
border-bottom: solid 0.1em #69a3b4;
width: 100%;
display: block;
}
.document h4 {
font-weight: bold;
margin-bottom: 0.5em;
border-left: 3px #558cbd solid;
background: #eeefff;
padding: 0.5em;
}
.document details summary{
border: solid 3px #aeaeae;
margin: 1.5em auto;
padding: 1em;
font-size: 1.1em;
background: #286ea1;
color: #fff;
font-weight: bold;
}
.document article .btnArea{
max-width: 500px;
}
.document article .btn{
display: flex;
justify-content: center;
}
.document .line{
width: 90%;
max-width: 450px;
margin: 1em auto 2em;
display: block;
box-shadow: 0 0.2em 0.2em rgb(0 0 0 / 30%);
transition-duration: .3s;
border: solid 1px #ccc;
}
.document .line:hover{
transform: scale(0.9);
}
.postdate {
margin: 0.5em 0;
padding: 0 1.1em;
font-size: 0.8em;
text-align: center;
}
.postdate span {
display: inline-flex;
align-items: center;
border: 1px #333 solid;
padding: 0 0.75em;
line-height: 1.6;
margin-right: 0.2em;
border-radius: 2em;
opacity: 0.8;
font-size: 90%;
vertical-align: bottom;
}
.postdate span i {
margin-right: 0.2em;
}
.postdate span svg {
fill: #333;
}
.document_image {
display: block;
padding: 0 1em;
min-height: 194px;
margin-bottom: 1em;
}
.document_image img {
display: block;
border: solid 1px #ebebeb;
}
.site .document_image img,
.site_free .document_image img {
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.5);
}
.site .btn,
.site_free .form_table + .btn,
.site_free .site_linkNav .btn,
.site-review .site_linkNav .btn,
.after_resultlist .btn {
display: flex;
align-items: center;
justify-content: center;
}
.site .btn-sitelink,
.site_free .site_linkNav .btn-sitelink,
.site-review .site_linkNav .btn-sitelink,
.after_resultlist .btn-sitelink {
padding-left: 1em;
}
.site .btn-sitelink svg,
.site_free .site_linkNav .btn-sitelink svg,
.site-review .site_linkNav .btn-sitelink svg,
.after_resultlist .btn-sitelink svg {
width: 2em;
height: 2em;
margin-right: 1em;
}
.site .btn .icon:nth-of-type(2),
.site_free .btn .icon:nth-of-type(2) {
transform: rotate(90deg);
}
.document_image + .btnArea {
margin-top: 1em;
}
.document_lead {
padding: 1em;
}
.document_lead p{
margin-bottom: 1em;
}
.document_lead .btn,
.to_today,
.to_this_surefire,
.to_this_stadium,
.to_this_stadium {
display: flex;
align-items: center;
justify-content: center;
}
.document_lead .btn svg:nth-of-type(2),
.to_today svg:nth-of-type(2),
.to_this_surefire svg:nth-of-type(2),
.to_this_stadium svg:nth-of-type(2),
.to_this_stadium svg:nth-of-type(2) {
transform: rotate(90deg);
}
.document h2 ~ div {
padding: 1em;
}
.document dl {
margin: 0.5em 0 1em 0;
}
.document dl dt {
font-weight: bold;
font-size: 1.1em;
}
.document dl dd {
padding-left: 1em;
}
.document_writer {
padding: 1px 1em 0.5em;
background-color: #f0f0f0;
font-size: 90%;
}
.document_writer > div {
position: relative;
padding: 0.5em;
}
.document_writer figure {
position: absolute;
top: 1em;
width: 5em;
}
.document_writer dl {
padding-left: 5.5em;
}
.document_writer dl dt {
display: flex;
align-items: center;
line-height: 1;
}
.document_writer dl dt::before {
content: "";
background: var(--pen);
background-size: contain;
width: 1em;
height: 1em;
display: block;
margin-right: 0.25em;
}
.document_writer dl dd {
margin-top: 0.55em;
padding-left: 0;
}
.document_writer + .document_parentnav {
padding-top: 0;
}
.document_notice {
border: 1px #ccc solid;
padding: 1em;
color: #666;
}
.document_index {
padding: 0 1em 1em;
margin-top: 1em;
}
.document_index > ul {
position: relative;
padding: 0.5em 1em;
border: 1px #ccc solid;
}
.document_index > ul::before {
content: "目次";
position: absolute;
top: -0.5em;
line-height: 1;
background-color: #fff;
padding: 0 0.5em 0 1.5em;
left: 50%;
transform: translateX(-50%);
letter-spacing: 1em;
}
.document_index a {
color: #444;
text-decoration: underline;
}
.document_index > ul > li {
position: relative;
padding-left: 1em;
margin: 0.75em 0;
}
.document_index > ul > li::before {
content: "";
width: 0.6em;
height: 0.6em;
position: absolute;
top: 0.4em;
left: 0;
background-color: #444;
border-radius: 100%;
}
.document_index > ul > li > ul > li {
position: relative;
padding-left: 0.75em;
margin: 0.5em 0;
}
.document_index > ul > li > ul > li::before {
content: "";
width: 0.2em;
height: 0.2em;
position: absolute;
top: 0.6em;
left: 0;
background-color: #444;
border-radius: 100%;
}
.osusume_content{
display: flex;
margin: 1em auto;
}
.osusumebox h3{
font-weight: bold;
border-bottom: solid 0.15em #bfd9ff;
padding-bottom: 0.5em;
color: #ff6920;
text-align: center;
}
.osusume_content figure{
width: 50%;
margin-right: 1em;
}
.osusume_content p{
width: 50%;
font-size: 0.9em;
}
.document .banner{
width: auto;
height: auto;
box-sizing: border-box;
max-width: 100%;
margin: 1rem auto;
display: block;
}
.link{
color: #0094ff;
text-decoration: underline;
transition-duration: .3s;
}
.link:hover{
opacity: 0.7;
cursor: pointer;
}
.mark .link{
color: #0089ff;
text-decoration: underline;
font-weight: bold;
}
.site_picup h3{
border-bottom: solid 2px #fdcfae;
font-weight: bold;
font-size: 1.2em;
color: #ff9040;
}
.site_picup a{
color: #333;
}
.site_picup a.btn{
color: #fff;
}
.site_picup .btn_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.site_picup .btn_box li{
width: calc(100%/2 - 0.2em);
}
.site_picup .btn_box li:last-child{
width: 100%;
}
/*--助手と博士------------------------------------------*/
.balloon {
background-repeat: no-repeat;
background-position: left top;
background-size: 4em;
padding-left: 5em;
margin: 0.8em 0;
min-height: 4em;
display: flex;
align-items: center;
}
.balloon p {
color: #fff;
padding: 0.75em;
border-radius: 1em;
position: relative;
margin-bottom: 0;
}
.balloon p strong {
color: #fff;
font-weight: bold;
}
.balloon p em {
color: #fff;
}
.balloon p::before {
content: "";
position: absolute;
top: 1em;
left: -0.8em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.5em 1em 0.5em 0;
z-index: -1;
}
.balloon.joshu {
background-image: url(../img/icon_jyoshu.png.webp);
}
.no-webp .balloon.joshu {
background-image: url(../img/icon_jyoshu.png);
}
.balloon.joshu.smile {
background-image: url(../img/icon_jyoshu_smile.png.webp);
}
.no-webp .balloon.joshu.smile {
background-image: url(../img/icon_jyoshu_smile.png);
}
.balloon.joshu.odoroki {
background-image: url(../img/icon_jyoshu_odoroki.png.webp);
}
.no-webp .balloon.joshu.odoroki {
background-image: url(../img/icon_jyoshu_odoroki.png);
}
.balloon.joshu.sad {
background-image: url(../img/icon_jyoshu_namida.png.webp);
}
.no-webp .balloon.joshu.sad {
background-image: url(../img/icon_jyoshu_namida.png);
}
.balloon.joshu.angry {
background-image: url(../img/icon_jyoshu_ikari.png.webp);
}
.no-webp .balloon.joshu.angry {
background-image: url(../img/icon_jyoshu_ikari.png);
}
.balloon.joshu p {
background-color: #ff9800;
margin-bottom: 0.5em;
}
.balloon.joshu p::before {
border-color: transparent #ff9800 transparent transparent;
}
.balloon.hakase {
background-image: url(../img/icon_hakase.png.webp);
}
.no-webp .balloon.hakase {
background-image: url(../img/icon_hakase.png);
}
.balloon.hakase.smile {
background-image: url(../img/icon_hakase_smile.png.webp);
}
.no-webp .balloon.hakase.smile {
background-image: url(../img/icon_hakase_smile.png);
}
.balloon.hakase.sad {
background-image: url(../img/icon_hakase_namida.png.webp);
}
.no-webp .balloon.hakase.sad {
background-image: url(../img/icon_hakase_namida.png);
}
.balloon.hakase.angry {
background-image: url(../img/icon_hakase_ikari.png.webp);
}
.no-webp .balloon.hakase.angry {
background-image: url(../img/icon_hakase_ikari.png);
}
.balloon.hakase.odoroki {
background-image: url(../img/icon_hakase_odoroki.png.webp);
}
.no-webp .balloon.hakase.odoroki {
background-image: url(../img/icon_hakase_odoroki.png);
}
.balloon.hakase p {
background-color: #558cbd;
}
.balloon.hakase p::before {
border-color: transparent #558cbd transparent transparent;
}
.kokuban{
position: relative;
}
.kokuban .balloon.hakase p{
background-color: #fff;
color: #333;
text-shadow: none;
font-weight: bold;
}
.kokuban .balloon.hakase .contentBar{
display: block;
position: absolute;
bottom: 1em;
left: 0.5em;
width: 15.5em;
margin-left: 6em;
background-color: #008c93;
padding: 0.5em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
z-index: 2;
text-align: center;
text-shadow: none;
}
.kokuban .balloon.hakase .contentBar.active{
background-color: #333;
color: transparent;
}
.kokuban .balloon.hakase .contentBar.active::after{
content: "閉じる ▲";
color: #fff;
font-weight: bold;
text-shadow: none;
}
/*右側*/
.right {
background-position: top right;
position: relative;
padding-left: 0;
}
.right p {
margin-left: auto;
margin-right: 5em;
}
.balloon.joshu.right p::before {
border-color: transparent transparent transparent #ff9800;
left: auto;
right: -0.7em;
border-width: 0.5em 0 0.5em 1em;
}
.balloon.hakase.right p::before {
border-color: transparent transparent transparent #558cbd;
left: auto;
right: -0.8em;
border-width: 0.5em 0 0.5em 1em;
}
/*--SEARCHBOX------------------------------------------*/
.searchBox {
display: none;
background-color: rgba(255, 255, 255, 0.9);
padding: 0.5em;
position: fixed;
top: 3em;
left: 0;
width: 100%;
z-index: 2;
}
.searchBox.open {
top: 0;
}
.searchBox form {
display: table;
width: 100%;
}
.searchBox form > div {
display: table-cell;
}
.searchBox .btnArea {
padding-left: 0.25em;
width: 5em;
}
.searchBox form button {
background-color: #b23030;
color: #fff;
-webkit-appearance: none;
font-family: inherit;
font-weight: bold;
padding: 0.5em 1em;
display: block;
border-radius: 0.3em;
width: 100%;
font-size: 1em;
border: none;
line-height: 1;
cursor: pointer;
}
.searchBox_close {
color: #fff;
width: 5em;
margin: 1em auto 0;
font-size: 90%;
border: 1px #fff solid;
text-align: center;
border-radius: 2em;
opacity: 0.8;
}
.searchBox .input_search {
background: var(--search);
background-size: 1.6em;
background-position: 0.4em;
padding: 0.5em 1em 0.5em 2.5em;
border-color: #444;
border-radius: 0.5em;
}
/*--黒板------------------------------*/
.kokuban {
color: #fff;
background-color: #054033;
padding: 1em 1em 1em 1.5em;
padding-bottom: 2em;
}
.kokuban h3 {
margin: 1em 0 0.5em 0;
font-weight: bold;
width: fit-content;
padding: 0.2em;
font-size: 1.1em;
line-height: 1;
color: #ffc500;
}
.kokuban ul.mark li::before {
background-color: rgb(255 255 255);
width: 0.4em;
height: 0.4em;
margin-right: 0.6em;
}
.kokuban ul.mark {
background: transparent;
margin: 0;
padding: 0;
border: unset;
border-bottom: solid 1px #ffffff73;
}
/*--的中実績------------------------------*/
.jisseki li {
margin-bottom: 0.5em;
}
.jisseki li figure {
float: left;
width: 4em;
height: 4em;
margin: 0 1em 1em 0;
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.7);
}
.jisseki_course {
margin-bottom: 0.25em;
}
.jisseki_course span {
display: block;
font-size: 1.1em;
font-weight: bold;
}
#jisseki_area a {
display: block;
}
.jisseki_race {
position: relative;
text-align: center;
float: left;
margin: 0 1.5em 0 0;
}
.jisseki_race::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
width: 1em;
height: 1em;
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(90deg);
right: -1.3em;
}
.jisseki_race:last-of-type {
margin-right: 0;
}
.jisseki_race:last-of-type::after {
content: none;
}
.jisseki_race span {
display: block;
font-weight: bold;
font-size: 110%;
line-height: 1;
}
.jisseki_get {
display: flex;
align-items: center;
justify-content: center;
margin: 0.7em 0 0;
line-height: 1;
}
.jisseki_get i {
margin: 0 0.5em;
}
.jisseki_get img {
margin: 0 0.5em;
width: 1em;
height: 1em;
}
.jisseki_get span {
font-size: 1.6em;
font-weight: bold;
color: #f44336;
}
.jisseki_readmore {
width: fit-content;
margin: 0 auto;
cursor: pointer;
}
.jisseki_readmore span {
text-align: center;
padding: 0.5em 1em;
border: 2px #ccc solid;
border-radius: 0.4em;
color: #999;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.jisseki_readmore img {
width: 1em;
height: 1em;
filter: brightness(0.5);
margin-right: 0.2em;
}
/*--記事内サイトリンク------------------------*/
.site_banner a {
display: block;
border: 2px #f44336 solid;
position: relative;
line-height: 1.5;
padding: 0.5em 1em 0.5em 6.5em;
font-weight: bold;
}
.site_banner figure {
position: absolute;
left: 2.75em;
top: 0.25em;
height: 3.5em;
width: 3.5em;
overflow: hidden;
border-radius: 100%;
}
.site_banner a i {
position: absolute;
left: 0.5em;
top: 0.75em;
font-size: 1.6em;
}
/*--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: italic;
font-weight: bold;
border: 1px solid;
}
.c1 {
background-color: white;
color: #333;
border-color: #aaa;
}
.c2 {
background-color: #333;
border-color: #333;
}
.c3 {
background-color: #f00;
border-color: #f00;
}
.c4 {
background-color: #00f;
border-color: #00f;
}
.c5 {
background-color: #ff0;
border-color: #ff0;
color: #333;
}
.c6 {
background-color: #080;
border-color: #080;
}
.todaylist_tip .c\(,
.todaylist_tip .c\( ~ * {
display: none;
}
/*--RESPONSIVE------------------------------*/
.noSP {
display: none;
}
.forTAB {
display: none;
}
.forPC {
display: none;
}
/*--ANIMATION------------------------------*/
.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;
}
}
article.active {
opacity: 1;
}
article > section p {
margin-bottom: 0.5em;
}
.topBtn {
position: fixed;
bottom: 0;
right: 0.5em;
z-index: 90;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
padding: 0.6em;
transition: 0.4s bottom;
}
.topBtn.active {
bottom: 5em;
cursor: pointer;
}
.topBtn svg {
fill: white;
width: 100%;
height: 100%;
}
.topBtn img{
width: 25px;
}
.document_floatmenu a{
position: fixed;
bottom: 5.6em;
left: 0.3em;
z-index: 50;
background: #b23130d6;
color: #fff;
height: 3em;
width: 6em;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9em;
}
.document_floatmenu a::before{
content: "";
display: inline-block;
background-image: url(../img/icon/book_icon.svg);
background-size: contain;
background-repeat: no-repeat;
width: 1.2em;
height: 1.1em;
margin-right: 0.3em;
}
#mainMenu{
position: fixed;
z-index: 50;
width: 100%;
height: 100vh;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
background-color: rgba(31, 20, 11, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: none;
z-index: 1000;
}
#mainMenu .close{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
color: transparent;
}
#mainMenu .close::before{
content: "× 閉じる";
position: absolute;
right: 1em;
top: 0.6em;
color: #fff;
font-weight: bold;
border: solid 2px #fff;
padding: 0.5em 0.8em;
border-radius: 5em;
}
#mainMenu nav{
width: 90%;
margin: 0 auto;
background: #fff;
padding: 1em 0.5em;
position: relative;
transform: translateY(4em);
max-width: 1000px;
}
#mainMenu a{
color: #333;
}
/*------------------------------------------*/
header {
padding-top: 3.3em;
}
.header {
background-color: rgba(255, 255, 255, 0.9);
z-index: 50;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0.5em;
display: flex;
align-items: center;
}
.header > div {
line-height: 1;
}
.header .logo {
display: block;
width: 5em;
}
.header .logo img {
display: block;
}
.header .line_icon {
width: 8em;
margin-left: 0.5em;
}
.header .line_icon img {
display: block;
}
.header .twitter_icon {
margin-left: 0.3em;
}
.header .searchBtn,
.header .menuBtn {
width: 1.5em;
height: 1.5em;
cursor: pointer;
}
.header .searchBtn {
margin: 0 0.5em 0 auto;
}
.news-banner {
display: block;
height: 35px;
width: 100%;
background: #000;
overflow: hidden;
padding-top: 0.2em;
font-weight: bold;
}
.news-banner__content {
display: inline-block;
color: #fff;
line-height: 30px;
padding-left: 100%;
white-space: nowrap;
animation: animate-banner 14s linear infinite;
}
.news-banner__content > * {
display: inline-block;
}
.news-banner__content span {
color: #ffe300;
animation: new 2s ease-in-out infinite;
margin-right: 0.5em;
}
.news-banner__content .icon {
transform: rotate(90deg);
margin-left: auto;
fill: white;
display: inline-block;
margin-top: 0.2em;
vertical-align: top;
margin-left: 0.5em;
}
@keyframes new {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/*--フッター----------------------------------------*/
footer {
background-color: #d54b4b;
order: 2;
font-weight: bold;
text-shadow: 0 0 0.1em black;
}
.footermenu {
padding: 1em;
text-align: center;
color: #fff;
}
.footermenu li a {
display: block;
border-radius: 0.2em;
overflow: hidden;
line-height: 1;
}
.footermenu_boatrace a {
padding: 0.2em 2em;
background-color: #fff;
}
.footermenu_teleboat a {
padding: 0.5em 2em;
background-color: #444;
}
.footer_stadium {
padding: 0 1em 2em;
}
.footer_stadium p {
text-align: center;
color: #fff;
}
.footer_stadium p span {
padding: 0 1em;
display: inline-block;
background-color: #d54b4b;
}
.footer_stadium ul {
border: 1px rgba(255, 255, 255, 0.3) solid;
padding: 1em;
margin-top: -0.8em;
}
.footer_stadium ul li {
float: left;
width: 33.3333%;
}
.footer_stadium li a {
display: flex;
align-items: center;
color: white;
padding: 0.5em;
}
.footer_stadium li a::before {
content: "";
background: var(--hand);
background-size: contain;
display: block;
width: 1.2em;
height: 1.2em;
margin-right: 0.25em;
transform: scale(-1, 1);
}
footer dl img {
width: 7em;
}
.footer_contact {
background-color: #fff;
padding-top: 1em;
padding-bottom: 5.5em;
color: black;
text-align: center;
}
.footer_contact ul {
margin: 0.5em 0;
}
.footer_contact ul li {
display: inline-block;
}
.footer_contact ul li:nth-of-type(n + 2) {
border-left: 1px black solid;
}
.footer_contact li a {
color: #333;
padding: 0 1em;
text-shadow: none;
font-weight: normal;
}
.footer_copyright {
font-size: 80%;
color: #666;
text-shadow: none;
font-weight: normal;
}
.footerNav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #b23030;
z-index: 100;
}
.footerNav img {
width: 5em;
}
.footerNav li {
float: left;
width: calc(100% / 6);
}
.footerNav li a {
display: block;
position: relative;
padding: 0;
text-align: center;
font-size: 90%;
border-right: 1px #fff solid;
color: #fff;
}
.footerNav li:last-of-type a {
border-right: none;
}
.footerNav p {
padding-bottom: 0.5em;
padding-top: 2.5em;
font-size: 0.8em;
letter-spacing: -0.05em;
white-space: nowrap;
}
.footerNav .fukidashi {
position: absolute;
width: 4em;
height: 4em;
top: -1.8em;
z-index: 1;
left: 50%;
transform: translateX(-50%);
}
.footerNav svg {
width: 2em;
height: 2em;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -144%);
z-index: 2;
}
.footerNav li:nth-of-type(1) svg {
fill: #fe3030;
}
.footerNav li:nth-of-type(2) svg {
fill: #ffcd0e;
}
.footerNav li:nth-of-type(3) svg {
fill: #03cd5f;
}
.footerNav li:nth-of-type(4) svg {
fill: #0c96bb;
}
.footerNav li:nth-of-type(5) svg {
fill: #ff9800;
}
.footerNav li:nth-of-type(6) svg {
fill: #9a9a9a;
}
/*--MAIN----------------------------------------*/
main {
display: block;
}
/*--SIDE----------------------------------------*/
#sideMenuBg {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
}
body.standby {
overflow: hidden;
}
.side_menu {
position: fixed;
top: 3.4em;
right: -100%;
z-index: 100;
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
display: flex;
flex-direction: column;
height: 100vh;
font-weight: bold;
}
.side_menu.slide {
right: 0%;
}
.side_menu .icon {
margin-right: 0;
}
.side_menu_close {
line-height: 1;
padding: 0 0.5em;
cursor: pointer;
margin-left: auto;
}
.side_menu_close svg {
fill: #b40001;
width: 2.5em;
height: 2.5em;
}
.side_menu ul {
overflow-y: auto;
}
.side_menu li a {
display: block;
color: white;
position: relative;
padding: 0.8em 4em 0.8em 2em;
text-align: right;
z-index: 1;
font-size: 1.2em;
overflow: hidden;
}
.side_menu li:nth-of-type(1),
.side_menu li:nth-of-type(7),
.side_menu li:nth-of-type(13) {
background-color: #ababab;
}
.side_menu li:nth-of-type(2),
.side_menu li:nth-of-type(8) {
background-color: #3f4f5c;
}
.side_menu li:nth-of-type(3),
.side_menu li:nth-of-type(9) {
background-color: #f4525f;
}
.side_menu li:nth-of-type(4),
.side_menu li:nth-of-type(10) {
background-color: #419ddc;
}
.side_menu li:nth-of-type(5),
.side_menu li:nth-of-type(11) {
background-color: #ffb000;
}
.side_menu li:nth-of-type(6),
.side_menu li:nth-of-type(12) {
background-color: #01b365;
}
.side_menu li svg {
fill: #444;
width: 3em;
height: 3em;
position: absolute;
right: 0;
top: 0;
line-height: 1;
opacity: 0.5;
z-index: -1;
}
.side_menu li i {
text-shadow: none;
}
.side_ranking section {
padding: 0.5em 1em;
border-bottom: 1px #ccc solid;
}
.side_ranking section:last-of-type {
border-bottom: 0;
}
.side_ranking h3 {
display: flex;
align-items: center;
color: #ba0a0c;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 0.7em;
}
.side_ranking h3::before {
content: "";
background: var(--redCrown);
background-size: contain;
display: block;
width: 1.5em;
height: 1.5em;
margin-right: 0.2em;
}
.side_ranking .btn {
display: flex;
align-items: center;
justify-content: center;
}
.side_ranking li {
position: relative;
}
.side_ranking h4 {
font-weight: bold;
font-size: 1.2em;
position: relative;
padding: 0 5em 0 4.5em;
line-height: 1.2;
}
.side_ranking h4::before {
content: "";
position: absolute;
top: -0.5em;
left: 0;
width: 4em;
height: 4em;
background-size: auto 100%;
background-position: center top;
background-repeat: no-repeat;
z-index: 3;
}
.side_ranking li:nth-of-type(1) h4::before {
background-image: url(../img/ranking1.png.webp);
}
.side_ranking li:nth-of-type(2) h4::before {
background-image: url(../img/ranking2.png.webp);
}
.side_ranking li:nth-of-type(3) h4::before {
background-image: url(../img/ranking3.png.webp);
}
.no-webp .side_ranking li:nth-of-type(1) h4::before {
background-image: url(../img/ranking1.png);
}
.no-webp .side_ranking li:nth-of-type(2) h4::before {
background-image: url(../img/ranking2.png);
}
.no-webp .side_ranking li:nth-of-type(3) h4::before {
background-image: url(../img/ranking3.png);
}
.side_ranking figure {
min-height: 4em;
padding-right: 6em;
padding-left: 5.5em;
}
.side_ranking figure img {
width: 5.5em;
position: absolute;
top: -0.5em;
right: 0em;
}
.side_ranking_recommend figure {
margin-bottom: 0.5em;
}
.side_ranking_free p {
line-height: 1.1;
}
.side_ranking_free figcaption span {
font-size: 1.3em;
display: inline-block;
text-align: right;
width: 5em;
font-weight: bold;
color: #ff4f4e;
}
.side_ranking figure ~ div {
display: flex;
}
.side_ranking section .btn-red-strong {
margin-right: 0.5em;
}
.side_ranking section i::before {
padding-right: 0.5em;
}
.side_ranking section i.fa-star::before {
padding-right: 0;
}
.side_ranking section li {
padding-bottom: 1em;
}
/*--PAGENATION----------------------------------------*/
.pagenation {
text-align: center;
}
.pagenation li {
display: inline-block;
margin: 1em 0;
margin-right: 0.25em;
color: #fff;
background: #ccc;
border-radius: 0.3em;
}
.pagenation li button{
background: none;
border:none;
color: #fff;
padding: 0.5em;
font-size: 1.1em;
}
.pagenation li.choice{
background: #1ba2ff;
}
.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;
}
/*--パンくずリスト--------------------------------------------- */
.breadcrumb {
background-color: #b40001;
}
.breadcrumb ul {
display: flex;
flex-wrap: wrap;
padding: 0 0.5em;
}
.breadcrumb li {
line-height: 1;
}
.breadcrumb a {
color: white;
font-size: 0.75em;
display: flex;
align-items: center;
padding: 0.5em;
}
.breadcrumb li:nth-of-type(1) a {
padding-left: 0;
}
.breadcrumb a::after {
content: "";
background: var(--whiteArrow);
background-size: contain;
display: block;
width: 1em;
height: 1em;
transform: rotate(90deg);
margin-left: 0.5em;
}
.breadcrumb li:last-of-type a {
pointer-events: none;
padding-left: 0;
}
.breadcrumb li:last-of-type a::after {
display: none;
}
/*--引用--------------------------------------------- */
.quote {
padding: 2em 1.75em 1em 1.75em;
position: relative;
margin-bottom: 0.5em;
background-color: #f0f0f0;
}
.quote > *:last-of-type {
margin: 0;
}
.quote p em {
background: linear-gradient(transparent 50%, #58ffd896 50%);
}
/*--ボタンエリア--------------------------------------------- */
.btnArea {
margin-left: auto;
margin-right: auto;
}
.btnArea.mwdt-500px {
max-width: 100%;
}
/*--クチコミ一覧--------------------------------------------- */
.reviewlist h3 {
font-weight: bold;
font-size: 1.3em;
color: #fd2f00;
line-height: 1.2;
margin-bottom: 0.2em;
}
.reviewlist h3 i{
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-right: 0.2em;
background-image: url(../img/arrow_circle_orange.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align:top;
}
.reviewlist .star i{
display: inline-block;
width: 1em;
height: 1em;
background-image: url(../img/star_icon.svg);
background-repeat: no-repeat;
background-size: contain;
}
.reviewlist ul {
padding: 1em;
}
.document.site.site-review .reviewlist ul {
padding: 0;
}
.reviewlist .rootReviewList{
min-height: 4500px;
}
.reviewlist .rootReviewList li {
position: relative;
margin: 1em 0;
}
.reviewlist li:last-of-type {
margin-bottom: 0;
}
.reviewlist li > dl {
position: absolute;
left: 1em;
top: 0.8em;
z-index: 1;
}
.reviewlist li > dl dt img {
display: block;
margin: 0 auto;
width: 2.5em;
height: 2.5em;
}
.reviewlist li > dl dd {
font-size: 0.65em;
letter-spacing: -0.05em;
white-space: nowrap;
}
.reviewlist .review_user.joshu dt,
.reviewlist .review_user.hakase dt {
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
width: 3em;
height: 3em;
}
.reviewlist .review_user.hakase dt img,
.reviewlist .review_user.joshu dt img {
visibility: hidden;
}
.reviewlist .review_user.joshu dt {
background-image: url(../img/icon_jyoshu.png.webp);
}
.reviewlist .review_user.joshu-smile dt {
background-image: url(../img/icon_jyoshu_smile.png.webp);
}
.reviewlist .review_user.joshu-sup dt {
background-image: url(../img/icon_jyoshu_odoroki.png.webp);
}
.reviewlist .review_user.joshu-sad dt {
background-image: url(../img/icon_jyoshu_namida.png.webp);
}
.reviewlist .review_user.hakase dt {
background-image: url(../img/icon_hakase.png.webp);
}
.reviewlist .review_user.hakase-smile dt {
background-image: url(../img/icon_hakase_smile.png.webp);
}
.reviewlist .review_user.hakase-sup dt {
background-image: url(../img/icon_hakase_odoroki.png.webp);
}
.reviewlist .review_user.hakase-sad dt {
background-image: url(../img/icon_hakase_namida.png.webp);
}
.no-webp .reviewlist .review_user.joshu dt {
background-image: url(../img/icon_jyoshu.png);
}
.no-webp .reviewlist .review_user.joshu-smile dt {
background-image: url(../img/icon_jyoshu_smile.png);
}
.no-webp .reviewlist .review_user.joshu-sup dt {
background-image: url(../img/icon_jyoshu_odoroki.png);
}
.no-webp .reviewlist .review_user.joshu-sad dt {
background-image: url(../img/icon_jyoshu_namida.png);
}
.no-webp .reviewlist .review_user.hakase dt {
background-image: url(../img/icon_hakase.png);
}
.no-webp .reviewlist .review_user.hakase-smile dt {
background-image: url(../img/icon_hakase_smile.png);
}
.no-webp .reviewlist .review_user.hakase-sup dt {
background-image: url(../img/icon_hakase_odoroki.png);
}
.no-webp .reviewlist .review_user.hakase-sad dt {
background-image: url(../img/icon_hakase_namida.png);
}
.reviewlist .review_user.joshu dt i,
.reviewlist .review_user.hakase dt i {
opacity: 0;
}
.reviewlist .review_user.joshu dd,
.reviewlist .review_user.hakase dd {
opacity: 0;
}
.reviewlist li{
margin-bottom: 1em;
position: relative;
}
.reviewlist .review_balloon {
background-color: #efefef;
padding: 1em;
position: relative;
border-radius: 1em;
width: 100%;
}
.reviewlist .review_balloon a {
display: flex;
align-items: center;
padding-left: 4em;
}
.reviewlist .review_balloon figure {
display: flex;
align-items: center;
margin-left: 1em;
}
.reviewlist .review_balloon figure img {
width: 3em;
margin-right: 0.5em;
}
.reviewlist .review_balloon figcaption p {
line-height: 1;
color: black;
display: flex;
align-items: center;
}
.reviewlist .review_balloon figcaption span {
display: flex;
align-items: center;
margin-right: 0.5em;
}
.reviewlist .review_balloon figcaption span svg,
.site-review .review_balloon p span svg {
fill: #fbd431;
margin-right:0;
}
.reviewlist .review_balloon p {
margin: 0;
display: flex;
align-items: center;
}
.site-review .review_balloon p span {
display: flex;
align-items: center;
margin-right: 0.5em;
}
.review_content {
padding-top: 1em;
font-size: 90%;
}
.document.site.site-review .review_content {
padding-top: 2em;
}
.site-review .reviewlist li > dl {
margin: 0;
left: 1em;
top: 0.5em;
}
.site-review .review_balloon p:nth-of-type(1) {
padding-left: 3.5em;
}
.site-review .reviewlist li > dl dd {
line-height: 1;
padding: 0;
}
.site_reviewlist li:nth-child(n+4){
display: none;
}
/*--買い目一覧--------------------------------------------- */
.betlist {
position: relative;
}
.betlist.out::after,
.betlist.hit::after {
content: "";
width: 3em;
height: 3em;
position: absolute;
right: 0.5em;
top: -0.7em;
background-size: cover;
filter: drop-shadow(0 0.1em 0.1em black);
}
.betlist.hit::after {
background-image: url(../img/mark_hit.png.webp);
}
.no-webp .betlist.hit::after {
background-image: url(../img/mark_hit.png);
}
.betlist.out::after {
background-image: url(../img/mark_out.png.webp);
}
.no-webp .betlist.out::after {
background-image: url(../img/mark_out.png);
}
.betlist dl {
overflow: hidden;
position: relative;
margin: 0;
}
.betlist dl dt {
font-size: 90%;
background-color: #f0f0f0;
padding: 0.25em 0.25em 0.25em 2em;
position: relative;
font-weight: bold;
}
.betlist dl dt span a {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #b40001;
color: white;
line-height: 1;
width: 1.8em;
height: 1.8em;
text-align: center;
border-radius: 0.2em;
}
.betlist dl dt span a svg {
fill: white;
}
.betlist dl dd {
position: relative;
display: table;
width: 100%;
border-bottom: 1px #ccc solid;
padding: 0.5em 0;
}
.betlist_type {
position: absolute;
top: 0;
left: 0;
width: 1.4em;
line-height: 1.6;
text-align: center;
background-color: #f4525f;
color: #fff;
padding: 0.2em;
height: 12em;
font-weight: bold;
}
.betlist_tip {
display: table-cell;
padding: 0.5em 0 0.5em 2em !important;
vertical-align: middle;
width: 60%;
}
.betlist_tip p {
display: inline-block;
margin: 0 0.75em 0.3em 0;
line-height: 1;
font-size: 90%;
}
.betlist_result {
display: table-cell;
vertical-align: middle;
}
.betlist_result p {
margin: 0;
text-align: center;
}
.betlist_gain {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 20%;
font-weight: bold;
}
.betlist + .pa-1.mv-1.mwdt-500px.mh-a {
max-width: initial;
padding: 0 1em;
}
/*--予想タイプ背景色--------------*/
.bettype-1 {
background-color: #f4525f;
text-shadow: 0 0 0.1em black;
}
.bettype-2 {
background-color: #419ddc;
text-shadow: 0 0 0.1em black;
}
.bettype-3 {
background-color: #fdcf00;
text-shadow: 0 0 0.1em black;
}
.bettype-4 {
background-color: #01b365;
text-shadow: 0 0 0.1em black;
}
/*-----------siteLinkNav --------------*/
.site_linkNav {
padding: 1em;
}
/*--categorynav----------------------------------------*/
.document_parentnav {
padding: 1em 0;
}
.document_parentnav h2 {
position: relative;
background: none;
text-align: center;
text-shadow: none;
color: #333;
width: fit-content;
margin: 0 auto;
border: 1px #333 solid;
border-radius: 0.4em;
font-size: 1em;
display: flex;
align-items: center;
cursor: pointer;
}
.document_parentnav h2::before {
content: "";
background: url(../img/arrow_circle.svg) no-repeat center;
background-size: contain;
display: block;
width: 1.3em;
height: 1.3em;
filter: brightness(0.3);
margin-right: 0.2em;
}
.document_parentnav h2 ~ div {
display: none;
}
.column .document_parentnav h2 ~ div {
padding: 0;
}
.document_parentnav > div {
padding-top: 1em !important;
}
.document_parentnav .table * {
vertical-align: initial;
line-height: 1;
}
.document_parentnav .table p {
margin: 0;
}
.categorynav li {
border-bottom: 1px #ccc solid;
border-top: 1px #ccc solid;
margin-bottom: -1px;
width: 100%;
}
.categorynav li > div {
position: relative;
padding: 0.75em;
max-width: 700px;
margin: 0 auto;
}
.categorynav li div{
display: flex;
}
.categorynav li figure {
width: 30%;
margin-right: 1em;
}
.categorynav li dl {
margin: 0;
width: 70%;
}
.categorynav li dl dt {
font-size: 1em;
margin-bottom: 0.5em;
}
.categorynav li dd {
padding: 0;
font-size: 80%;
margin-bottom: 0.5em;
}
.categorynav li a {
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #333;
}
.categorynav li span {
display: flex;
align-items: center;
color: white;
background-color: #12b366;
line-height: 1;
padding: 0.5em 0.7em;
border-radius: 0.5em;
font-size: 80%;
position: absolute;
right: 0.5em;
bottom: 0.5em;
}
.categorynav li span img {
width: 1em;
height: 1em;
transform: rotate(-90deg);
margin-right: 0.2em;
}
.categorynav li p{
font-size: 60%;
text-align: right;
color: #7e7e7e;
}
.categorynav li p .icon{
display: inline-block;
vertical-align: top;
margin-top: 0.15em;
}
.categorynav .table > p {
margin-bottom: 0;
display: flex;
align-items: center;
}
.categorynav + form {
margin-top: 1em;
}
/*--categorynav----------------------------------------*/
.lum-gallery-button {
display: none;
}
.lum-lightbox {
z-index: 100;
overflow-y: auto;
}
.lum-lightbox-inner {
overflow-y: auto;
}
.lum-lightbox-inner img {
max-width: 500px;
max-height: initial;
background-color: #fff;
margin: 0 auto;
}
.lum-close-button {
top: -0.7em;
right: 0;
opacity: 0.75;
filter: drop-shadow(0 0 0.1em black);
}
.lum-close-button:before,
.lum-close-button:after {
transform: none;
background: none;
}
.lum-close-button:after {
content: none;
}
/*--photoArea----------------------------------------*/
.photoArea {
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}
.photoArea figure {
display: inline-block;
margin-bottom: 1em;
width: 35%;
float: left;
margin-right: 1em;
position: relative;
z-index: 2;
}
.photoArea figure img {
border: 1px #ccc solid;
position: relative;
}
.photoArea figure a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
background-color: #333;
}
.photoArea figure a::before {
content: "";
background: url(../img/zoom.png) no-repeat center;
background-size: 1.5em 1.5em;
background-color: black;
position: absolute;
right: 0;
top: 0;
width: 2.5em;
height: 2.5em;
opacity: 0.7;
z-index: 2;
}
.photoArea::after{
content: "";
clear: both;
display: block;
}
.photoArea figcaption {
font-size: 80%;
line-height: 1.2;
margin-top: 0.5em;
text-align: center;
}
.photoArea figure ~ * {
text-align: left;
}
.photoArea .mark{
margin-left: 40%;
}
.photoArea .quote:before,.photoArea blockquote::before{
left: 8.5em;
}
.quote,blockquote {
position: relative;
margin: 1em auto 1.3em;
border-radius: 0.5em;
background: #f5fafc;
padding: 2em 1.75em 1em 1.75em;
}
.quote:before,blockquote::before {
content: "";
background: var(--pinkQuote);
background-size: contain;
width: 1.2em;
height: 1.2em;
position: absolute;
top: 0.5em;
left: 0.5em;
filter: hue-rotate(234deg);
}
.quote_from {
padding: 0.5em 1em;
text-align: right;
border-top: 1px dotted #ff6766;
position: relative;
font-size: 80%;
font-style: italic;
}
.quote_from:before {
content: "";
border-top: 1px solid #333;
width: 1.8em;
display: inline-block;
height: 0.3em;
}
.site_calcreview p {
display: flex;
align-items: center;
justify-content: center;
}
.site_calcreview svg:last-of-type {
margin-right: 0.2em;
}
.site_calcreview p svg {
fill: #ffc107;
margin: 0;
}
.line_banner_pc {
display: none;
}
.line_banner_header {
margin-left: 0.5em;
width: 9em !important;
}
.line_banner_header img {
display: block;
}
.stadium_today {
display: block;
margin: 0 auto;
text-align: center;
background: rgb(231, 55, 37);
background: linear-gradient(
0deg,
rgba(231, 55, 37, 1) 0%,
rgba(244, 42, 17, 1) 50%,
rgba(255, 104, 79, 1) 51%,
rgba(247, 82, 52, 1) 100%
);
box-shadow: 0 0.1em 0.2em rgb(0, 0, 0, 0.5);
color: white;
padding: 1em;
border-radius: 5px;
font-weight: bold;
}
.stadium_today span {
background-color: #fc9c03;
padding: 0.2em 0.5em;
margin-right: 0.5em;
}
.review_star {
font-weight: bold;
}
.review_star span {
display: flex;
align-items: center;
}
.review_star svg {
fill: #ffc107;
width: 1.5em;
height: 1.5em;
}
.document_lead .balloon + .btn-yellow {
max-width: 500px;
margin: 0 auto 1em;
}
.to_today {
margin: 0 auto 1em;
width: calc(100% - 2em);
}
.report_rate table,
.review_data table {
margin-bottom: 0.5em;
font-weight: bold;
}
.review_data th,
.report_rate th {
background-color: #b40001;
color: white;
font-weight: bold;
line-height: 1;
}
.review_data td,
.report_rate td {
font-size: 1.2em;
}
.review_data td {
display: flex;
align-items: center;
}
.review_data td span {
margin-right: 0.2em;
display: flex;
align-items: center;
}
.review_data td span svg {
fill: #ffc107;
}
#moreBtn{
padding: 1em;
}
#moreBtn .btn {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
#moreBtn .btn img {
width: 1em;
height: 1em;
margin-right: 0.1em;
}
.reviewlist > div > .btn-sitelink {
padding-left: 6em;
margin-top: 1em;
}
.reviewlist > div > .btn-sitelink svg {
width: 2em;
height: 2em;
margin-right: 0.2em;
}
.report_rate p {
margin: 0;
line-height: 1;
}
.report_rate tr:nth-of-type(2) p:nth-of-type(2) {
font-weight: normal;
font-size: 0.8em;
margin-top: 0.5em;
}
.report_rate td span {
font-size: 0.8em;
font-weight: normal;
}
.site_calcreview .btn {
max-width: 500px;
margin: 0.5em auto 0;
}
.site_free .report_rate .mb-0 {
margin-bottom: 0.5em;
line-height: 1.4;
}
.site_free .report_rate .mb-0 + p {
margin-bottom: 0.5em;
}
.site_free #result_total + .form_table {
margin: 1em auto 2em;
}
.site_free .site_linkNav {
padding: 0;
}
.line_PR img {
display: block;
box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
margin: 0.5em 0 1em;
}
.line_PR .btn {
display: flex;
align-items: center;
justify-content: center;
}
.line_PR a:nth-of-type(1) {
margin: 0.5em 0 1em;
}
.free .line_PR {
margin-bottom: 2em;
}
.snslinks li {
line-height: 1;
}
.snslinks li:nth-of-type(n + 2) {
border-left: none !important;
margin-left: 0.5em;
}
.snslinks a {
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.snslinks svg {
width: 2em;
height: 2em;
margin: 0;
}
.line_icon {
fill: #06c755;
}
.twitter_icon {
fill: #00acee;
}
.to_this_surefire,
.to_this_stadium {
margin-bottom: 3em;
width: calc(100% - 2em);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0.5em 1em;
}
section + .tags {
margin-bottom: 1em;
}
.tags button {
border: none;
background: #b23030;
box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.4);
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
color: white;
font-size: 0.8em;
line-height: 1;
padding: 0.5em 0.8em 0.5em 0.5em;
display: flex;
align-items: center;
cursor: pointer;
}
.tags button::before {
content: "";
display: block;
width: 0.5em;
height: 0.5em;
background: white;
border-radius: 50%;
margin-right: 0.5em;
}
.excellence_comment {
margin-bottom: 1em;
}
.youtube {
width: 100%;
aspect-ratio: 560/315;
margin: 1rem auto;
}
.youtube iframe {
width:100%;
height: 100%;
}
/*アニメーション*/
/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes shiny {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(25deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(25deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(25deg); opacity: 0; }
}
.reportLink {
margin-bottom: 1em;
}
.reportLink a {
display: block;
color: inherit;
border: 1px #1d6bb9 solid;
padding: 1em;
}
.reportLink figure {
}
.reportLink figure img {
}
.reportLink h3 {
line-height:1.4;
font-weight: 900;
font-size: 1.4em;
margin: 1rem 0;
}
.reportLink h3 ~ p {
}
.reportLink h3 ~ p span {
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1em;
margin-top:.5rem;
margin-bottom: 0;
}