/**/
/**/
/* -------------------------------------------- BASE SETTING */
/* CLEARFIX */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/**/
/**/
/* FONT SETTING (local) */
@font-face {
font-family: 'HelveticaNeue-medium';
src: url('../fonts/HelveticaNeue_medium.eot'), url('../fonts/HelveticaNeue_medium.woff') format('woff'), url('../fonts/HelveticaNeue_medium.woff2') format('woff2');
font-style: normal;
font-weight: 500;
}
.HelveticaNeue-medium {
font-family: 'HelveticaNeue-medium';
font-style: normal;
font-weight: 500;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
position: relative;
font-size: 50.78125%;
min-height: 100%;
width: 100%;
}
@media (min-width: 576px) {
html {
font-size: 50.78125%;
}
.container {
max-width: 100%;
}
}
@media (min-width: 768px) {
html {
font-size: 50.78125%;
}
.container {
max-width: 100%;
}
}
@media (min-width: 992px) {
.container {
max-width: 1210px !important;
}
}
@media (min-width: 1270px) {
html {
font-size: 62.5%;
}
.container {
max-width: 1210px;
}
}
body {
min-width: 100%;
min-height: 100%;
color: rgba(35, 24, 21, 1.00);
-webkit-text-size-adjust: 100%;
background-color: rgba(22, 76, 142, 1.00);
-webkit-font-smoothing: antialiased;
font-family: tbudgothic-std, sans-serif;
font-style: normal;
font-weight: 400; /*400,700,900*/
font-size: 1.6rem;
word-wrap: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphenates: auto;
hyphens: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
letter-spacing: 0.01em;
line-height: normal;
vertical-align: middle;
}
@media all and (-ms-high-contrast:none) {
body, .win11 {
font-family: "メイリオ", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif !important;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a:link {
color: rgba(0, 85, 242, 1.00);
text-decoration: none;
}
a:hover {
color: rgba(0, 85, 242, 1.00);
text-decoration: none;
}
a:visited {
color: rgba(0, 85, 242, 1.00);
text-decoration: none;
}
a.disabled {
pointer-events: none;
}
a, button, .btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
background-color: transparent;
}
a:link, a:visited, a:hover, a:active, button {
outline: none;
}
a:hover, button:hover {
cursor: pointer;
}
button, .btn {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
a.tel {
color: rgba(35, 24, 21, 1.00) !important;
}
a.disabled {
pointer-events: none;
}
button {
border-radius: 0;
}
img {
margin: 0px;
padding: 0px;
border: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent; /* Firefox */
}
ul {
list-style-image: none;
list-style-type: none;
}
u {
text-decoration: none;
border-bottom: 1px solid;
padding-bottom: 0.01em;
}
u.under-bar {
margin-left: 0.2em;
margin-right: 0.2em;
display: inline-block;
}
.t-hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
position: relative;
}
/*HOVER*/ @media (min-width: 768px) {
.t-hover:hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
} /*HOVER*/
.scale-hover {
display: block !important;
overflow: hidden !important;
position: relative !important;
}
.scale-hover > img {
-moz-transition: -moz-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-o-transition: -o-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
position: relative !important;
}
/*HOVER*/ @media (min-width: 768px) {
.scale-hover img:hover, .hover-trigger:hover .scale-hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
} /*HOVER*/
/*HOVER*/ @media (min-width: 768px) {
.l-hover:hover:after, .t-hover:hover .l-hover:after {
width: 100%;
}
}
/*HOVER*/
.hide-text {
overflow-x: hidden !important;
overflow-y: hidden !important;
display: block !important;
text-indent: 1000% !important;
white-space: nowrap !important;
}
.text-nowrap {
white-space: nowrap !important;
}
.fixed {
position: fixed;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
a[href^="tel:"] {
cursor: default;
}
.sub {
font-size: 0.6em;
vertical-align: bottom;
position: relative;
top: -1em !important;
}
.sup {
font-size: 0.6em;
padding: 0 0.25em;
position: relative;
margin-top: -0.1em;
}
@media (min-width: 768px) {
.scroll-box, .scrollable {
overflow-x: auto;
scrollbar-base-color: rgba(238, 238, 238, 1.00);
scrollbar-face-color: rgba(35, 24, 21, 1.00);
}
.scroll-box::-webkit-scrollbar, .scrollable::-webkit-scrollbar {
width: 1.6rem;
}
.scroll-box::-webkit-scrollbar:horizontal {
height: 1.6rem;
}
.scroll-box::-webkit-scrollbar-track, .scrollable::-webkit-scrollbar-track {
background: rgba(238, 238, 238, 1.00);
border-radius: 0.8rem;
border: 2px solid white;
}
.scroll-box::-webkit-scrollbar-thumb, .scrollable::-webkit-scrollbar-thumb {
background: rgba(35, 24, 21, 1.00);
border-radius: 0.8rem;
border: 2px solid white;
}
}
/**/
/**/
/* HEADER SETTING -----------------------------------------------------*/
.header {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-color: rgba(22, 76, 142, 1.00);
width: 100%;
height: 7rem;
display: block;
padding: 0;
margin: 0 auto;
max-width: 1210px;
}
/*.header .container{position: relative;}*/
.header .logo {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.header .logo .mark {
width: 5.4rem;
height: 5.4rem;
overflow: hidden;
display: block;
position: absolute;
top: 0.8rem;
left: 2rem;
background: url("../images/logo_mark.png")no-repeat 50% 50%/auto 100%;
}
.header .logo span {
display: inline-block;
vertical-align: middle;
width: 22rem;
height: 3.4rem;
position: absolute;
left: 8.4rem;
top: 1.8rem;
}
.header .logo span img {
width: 100%;
height: auto;
}
.header #account {
position: absolute;
top: 1.5rem;
right: 0;
}
.header #account span.icon {
display: inline-block;
height: 4rem;
overflow: hidden;
margin-right: 1.6rem;
vertical-align: middle;
padding-left: 5.6rem;
font-size: 2rem;
line-height: 4rem;
color: white;
font-weight: 700;
background: url("../images/icon_account.svg")no-repeat 0% 50%/auto 100%;
}

.header #gps span.icon {
    display: inline-block;
    padding-left: 22em;
    padding-top: 0.6em;
}

.header #gps span.icon .gps-working {
    background: url("../images/gps-working.svg")no-repeat;
    width: 3em;
    height: 3em;
}

.header #gps span.icon .gps-problem {
    background: url("../images/gps-problem.svg")no-repeat;
    width: 3em;
    height: 3em;
}

.h-button-wrap{position: relative;max-width: 1210px;margin: 0 auto;}
.h-button {
width: 4.4rem;
height: 4.4rem;
position: absolute;
z-index: 10000;
border: none;
top: 1.3rem;
right: 2rem;
cursor: pointer;
}
.h-button.open{position: fixed!important;}
.bars {
display: block;
position: relative;
width: 4.4rem;
height: 4.4rem;
}
.bar {
width: 4.4rem;
height: 0.4rem;
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: white;
border-radius: 0.2rem;
}
.bar_top {
top: 1rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.bar_mid {
top: 50%;
transform: translate(-50%, -50%);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.bar_bottom {
bottom: 1rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.h-button.open .bar {
background-color: white !important;
}
.h-button.open .bar_top {
transform: translate(-50%, -50%) rotate(45deg);
top: 2.2rem;
}
.h-button.open .bar_mid {
opacity: 0;
}
.h-button.open .bar_bottom {
transform: translate(-50%, -50%) rotate(-45deg);
top: 2.2rem;
}
.navi-wrap {
width: 100%;
height: 100%;
z-index: 1001;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.60);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
display: none;
}
.navi-wrap .global-navi {
position: fixed;
top: 0;
/*	right: 0rem;*/
right: -30rem;
width: 30rem;
height: 100%;
padding: 8rem 1rem 1rem 1rem;
background: rgba(22, 76, 142, 1.00);
box-sizing: border-box;
z-index: 2
}
.navi-wrap .global-navi ul li {
display: block;
padding: 1rem 0rem;
margin: 0;
height: inherit;
border-bottom: 2px solid rgba(33, 65, 104, 1.00);
}
.navi-wrap .global-navi ul li.logout {
margin-top: 8rem;
}
.navi-wrap .global-navi ul li a {
color: white !important;
padding: 1.6rem;
font-size: 1.8rem;
line-height: 1.65em;
font-weight: 700;
display: block;
margin: 0;
text-align: right;
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 1349px) {
.header #account {

right: 8.4rem;
}
}
@media (max-width: 767px) {
.bar {
width: 4.4rem;
height: 3px;
border-radius: 1.5px;
}
}
@media (max-width: 320px) {
.navi-wrap .global-navi {
right: -28rem;
width: 28rem;
padding: 7rem 1rem 1rem 1rem;
}
}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- HEADER SETTING */
/**/
/**/
/* MAIN DASHBOARD SETTING ----------------------------------------------------- */
#main-dashboard {
/*
margin: 0 1.5rem;
border-radius: 1rem;
background: white;
position: relative;
*/
}
#main-dashboard .inner {
padding: 3rem;
border-radius: 1rem;
background: white;
position: relative;
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 1209px) {
#main-dashboard {
margin: 0;
border-radius: 0;
background:none;
}
}
@media (max-width: 767px) {}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- MAIN DASHBOARD SETTING */
/**/
/**/
/* CALENDAR SETTING ----------------------------------------------------- */
.calendar {}
.calendar-wrap {
position: relative;
width: 100%;
}
.cal-navi {
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.cal-navi a {
display: block;
width: 4rem;
height: 4rem;
overflow: hidden;
position: absolute;
top: 3rem;
text-indent: 100%;
white-space: nowrap;
z-index: 10;
}
.cal-navi .prev {
background: url("../images/icon_arrow_prev.svg")no-repeat 50% 50%/75%;
left: 3rem;
}
.cal-navi .next {
background: url("../images/icon_arrow_next.svg")no-repeat 50% 50%/75%;
right: 3rem;
}
.calendar h2 {
display: block;
padding: 0 0 2rem 0;
border-bottom: 2px solid rgba(22, 76, 142, 1.00);
text-align: center;
font-size: 2.2rem;
font-weight: 700;
line-height: 4rem;
color: rgba(22, 76, 142, 1.00);
}
.calendar table {
width: 100%;
color: rgba(22, 76, 142, 1.00);
}
.calendar table thead {}
.calendar table thead th {
height: 4.6rem;
vertical-align: middle;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4444em;
text-align: center;
}
.calendar table thead th:first-of-type {
color: rgba(243, 77, 77, 1.00);
}
.calendar table thead th:last-of-type {
color: rgba(88, 149, 224, 1.00);
}
.calendar table tbody {}
.calendar table tbody td {
height: 5.2rem;
vertical-align: middle;
font-size: 2.2rem;
line-height: 1.4444em;
text-align: center;
border-right: 1px solid rgba(221, 221, 221, 1.00);
border-bottom: 1px solid rgba(221, 221, 221, 1.00);
font-family: 'HelveticaNeue-medium';
font-style: normal;
font-weight: 500;
position: relative;
}
.calendar table tbody td:first-of-type {
color: rgba(243, 77, 77, 1.00);
}
.calendar table tbody td:last-of-type {
border-right: none;
color: rgba(88, 149, 224, 1.00);
}
.calendar table tbody tr:last-of-type td {
border-bottom: none;
}
.calendar table tbody td.blank {
background: rgba(238, 238, 238, 1.00);
}
.calendar table tbody td a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
vertical-align: middle;
color: inherit;
}
.calendar table tbody td .report {
background: rgba(157, 196, 243, 1.00);
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
position: relative;
}
/*HOVER*/ @media (min-width: 768px) {
.calendar table tbody td .report:not(.active):not(.today):hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
} /*HOVER*/
.calendar table tbody td .today {
background: rgba(22, 76, 142, 1.00) !important;
color: white;
}
.calendar table tbody td .active {
background: rgba(28, 181, 21, 1.00) !important;
color: white;
}

.calendar table tbody td .lunar {
    top: 1.8rem;
    left: 2.5rem;
    font-size: 1.4rem;
}

.calendar table tbody td .white {
	  color: white;
}

/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- CALENDAR SETTING */
/**/
/**/
/* PAYAO SELECT SETTING ----------------------------------------------------- */
.payao-select {
padding-top: 3rem;
padding-bottom: 1.6rem;
}
.payao-select h2 {
display: block;
padding: 0 0 2rem 0;
border-bottom: 2px solid rgba(22, 76, 142, 1.00);
text-align: center;
font-size: 2.2rem;
font-weight: 700;
line-height: 4rem;
color: rgba(22, 76, 142, 1.00);
}
.payao-select .select-button-wrap {
max-width: 55.6rem;
margin: 0 auto;
padding: 1.6rem 0 0 0;
}
.payao-select .select-button-wrap a {
width: 100%;
height: 6rem;
display: block;
}
.payao-select .select-button-wrap .select-button span {
display: table-cell;
vertical-align: middle;
height: 6rem;
width: 100%;
padding: 0 7.6rem 0 1.6rem;
font-weight: 700;
font-size: 2rem;
color: rgba(22, 76, 142, 1.00);
}
.payao-select .select-button-wrap .select-button {
border: 1px solid rgba(221, 221, 221, 1.00);
border-radius: 0.4rem 3rem 3rem 0.4rem;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
/*HOVER*/ @media (min-width: 768px) {
.payao-select .select-button-wrap .select-button:not(.active):hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
} /*HOVER*/
.payao-select .select-button-wrap .select-button.active {
background-color: rgba(28, 181, 21, 1.00) !important;
border: none;
position: relative;
}
.payao-select .select-button-wrap .select-button.active span {
color: white !important;
}
.payao-select .select-button-wrap .select-button.active:before {
content: "";
width: 0;
height: 0;
border-left: 1.2rem solid transparent;
border-right: 1.2rem solid transparent;
border-top: 1.2rem solid rgba(28, 181, 21, 1.00);
position: absolute;
transform: translate(-50%, 0%);
bottom: -1.2rem;
left: 50%;
z-index: 10;
}
.payao-select .select-button-wrap .condition-0 {
background: url("../images/icon_face_button_0.svg")no-repeat 100% 50%/ auto 100%;
}
.payao-select .select-button-wrap .condition-1 {
background: url("../images/icon_face_button_1.svg")no-repeat 100% 50%/ auto 100%;
}
.payao-select .select-button-wrap .condition-2 {
background: url("../images/icon_face_button_2.svg")no-repeat 100% 50%/ auto 100%;
}
.payao-select .select-button-wrap .active.condition-0 {
background: url("../images/icon_face_button_0a.svg")no-repeat 100% 50%/ auto 100% rgba(28, 181, 21, 1.00) !important;
}
.payao-select .select-button-wrap .active.condition-1 {
background: url("../images/icon_face_button_1a.svg")no-repeat 100% 50%/ auto 100% rgba(28, 181, 21, 1.00) !important;
}
.payao-select .select-button-wrap .active.condition-2 {
background: url("../images/icon_face_button_2a.svg")no-repeat 100% 50%/ auto 100% rgba(28, 181, 21, 1.00) !important;
}
.fishing-light-wrap{
max-width: 55.6rem;
margin: 0 auto;
padding: 1.6rem 0 0 0;
}


.fishing-light-wrap dl {
display: table;
width: 100%;
position: relative;
padding: 1.6rem 0 0 0;
}
.fishing-light-wrap dl dt {
display: table-cell;
vertical-align: middle;
position: relative;
}
.fishing-light-wrap dl dt strong {
display: inline-block;
font-size: 2.2rem;
font-weight: 700;
color: rgba(22, 76, 142, 1.00);
white-space: nowrap;
padding: 0 5.4rem 0 0;
}
.fishing-light-wrap dl dt strong:after {
position: absolute;
right: 2.6rem;
top: 50%;
transform: translate(0, -50%);
content: "";
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
width: 0;
height: 0;
border-top: 0.8rem solid transparent;
border-bottom: 0.8rem solid transparent;
border-left: 1rem solid rgba(22, 76, 142, 1.00);
}
.fishing-light-wrap dl dd {
display: table-cell;
vertical-align: middle;
padding: 0;
position: relative;
}
.fishing-light-wrap dl dd span {
display: inline-block;
font-size: 2.2rem;
font-weight: 700;
color: rgba(34, 34, 34, 1.00);
}

/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- PAYAO SELECT SETTING */
/**/
/**/
/* PAYAO SELECT SETTING ----------------------------------------------------- */
.position {
padding-top: 3rem;
}
.position h2 {
display: block;
padding: 0 0 2rem 0;
border-bottom: 2px solid rgba(22, 76, 142, 1.00);
text-align: center;
font-size: 2.2rem;
font-weight: 700;
line-height: 4rem;
color: rgba(22, 76, 142, 1.00);
margin: 0 0 1.6rem 0;
}
.full-map-area {
width: 100%;
height: 30rem;
position: relative;
border-radius: 1rem;
background: #eee;
overflow: hidden;
}
.half-map-area {
width: 100%;
height: 0rem;
position: relative;
padding: 100% 0 0 0;
border-radius: 1rem;
background: #eee;
overflow: hidden;
}
.position .timeline-button-wrap {
padding: 1.6rem 0 0 0;
}
.position .timeline-button-wrap .timeline-button {
width: 100%;
height: 6rem;
display: table;
border: 1px solid rgba(221, 221, 221, 1.00);
border-radius: 0.4rem;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
/*HOVER*/ @media (min-width: 768px) {
.position .timeline-button-wrap .timeline-button:not(.active):hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
} /*HOVER*/
.position .timeline-button-wrap .timeline-button span {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 6rem;
width: 100%;
padding: 0 1rem;
font-weight: 700;
font-size: 1.8rem;
color: rgba(22, 76, 142, 1.00);
}
.position .timeline-button-wrap .timeline-button.active {
background-color: rgba(28, 181, 21, 1.00) !important;
border: none;
}
.position .timeline-button-wrap .timeline-button.active span {
color: white !important;
}
.position h3 {
display: block;
padding: 3rem 0 2rem 0;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: rgba(22, 76, 142, 1.00);
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- POSITION SETTING */
/**/
/**/
/* CONDITIONS SETTING -----------------------------------------------------*/
.condition {
padding: 0.6rem 0 0 0;
}
.fishing-light-mode .condition {
padding: 3rem 0 0 0;
}

.condition dl {
display: table;
width: 100%;
position: relative;
padding: 1.6rem 0 0 0;
}
.condition dl dt {
display: table-cell;
width: 38%;
vertical-align: middle;
height: 6rem;
position: relative;
}
.condition dl dt strong {
display: inline-block;
font-size: 2.2rem;
font-weight: 700;
color: rgba(22, 76, 142, 1.00);
}
.condition dl dt strong:after {
position: absolute;
right: 2.6rem;
top: 50%;
transform: translate(0, -50%);
content: "";
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
width: 0;
height: 0;
border-top: 0.8rem solid transparent;
border-bottom: 0.8rem solid transparent;
border-left: 1rem solid rgba(22, 76, 142, 1.00);
}
.condition dl dd {
display: table-cell;
vertical-align: middle;
padding: 0 0 0 8rem;
height: 6rem;
position: relative;
}
.condition dl dd span {
display: inline-block;
font-size: 2.2rem;
font-weight: 700;
color: rgba(34, 34, 34, 1.00);
}
.condition dl dd.note {
padding: 0 0 0 0;
}
.condition dl dd.note span {
font-size: 1.6rem;
line-height: 1.65em;
}
.condition dl dd.note:before {
display: none !important;
}
.condition dl dd:before {
display: block;
content: "";
width: 6rem;
height: 6rem;
overflow: hidden;
background-repeat: no-repeat;
background-position: 0% 50%;
background-size: 6rem 6rem;
position: absolute;
top: 0;
left: 0;
}
.condition dl dd.direction-0:before {
background-image: url("../images/icon_direction.svg");
}
.condition dl dd.direction-1:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(45deg);
}
.condition dl dd.direction-2:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(90deg);
}
.condition dl dd.direction-3:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(135deg);
}
.condition dl dd.direction-4:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(180deg);
}
.condition dl dd.direction-5:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(-135deg);
}
.condition dl dd.direction-6:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(-90deg);
}
.condition dl dd.direction-7:before {
background-image: url("../images/icon_direction.svg");
transform: rotate(-45deg);
}
.condition dl dd.weather-0:before {
background-image: url("../images/icon_weather_0.svg");
}
.condition dl dd.weather-1:before {
background-image: url("../images/icon_weather_1.svg");
}
.condition dl dd.weather-2:before {
background-image: url("../images/icon_weather_2.svg");
}
.condition dl dd.weather-3:before {
background-image: url("../images/icon_weather_3.svg");
}
.condition dl dd.weather-4:before {
background-image: url("../images/icon_weather_4.svg");
}
.condition dl dd.waveheight-0:before {
background-image: url("../images/icon_waveheight_0.svg");
}
.condition dl dd.waveheight-1:before {
background-image: url("../images/icon_waveheight_1.svg");
}
.condition dl dd.waveheight-2:before {
background-image: url("../images/icon_waveheight_2.svg");
}
.condition dl dd.waveheight-3:before {
background-image: url("../images/icon_waveheight_3.svg");
}
.condition dl dd.condition-0:before {
background-image: url("../images/icon_face_0.svg");
}
.condition dl dd.condition-1:before {
background-image: url("../images/icon_face_1.svg");
}
.condition dl dd.condition-2:before {
background-image: url("../images/icon_face_2.svg");
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {
.condition {
padding: 3rem 0 0 0;
}
}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- CONDITIONS SETTING */
/**/
/**/
/* CATCH DATA SETTING -----------------------------------------------------*/
.catch-data {
padding: 3rem 0 0 0;
}
.catch-data h2 {
display: block;
padding: 0 0 2rem 0;
border-bottom: 2px solid rgba(22, 76, 142, 1.00);
text-align: center;
font-size: 2.2rem;
font-weight: 700;
line-height: 4rem;
color: rgba(22, 76, 142, 1.00);
margin: 0 0 1.6rem 0;
}
.catch-data .data-table {}
.catch-data .data-table table {
width: 100%;
}
.catch-data .data-table table thead:after {
content: "";
display: block;
background: white;
height: 0.6rem;
width: 100%;
}
.catch-data .data-table table thead th {
height: 4.4rem;
vertical-align: middle;
font-size: 1.6rem;
font-weight: 700;
color: white;
text-align: right;
background: rgba(22, 76, 142, 1.00);
padding: 0 1rem;
border-top: 1px solid rgba(22, 76, 142, 1.00);
border-right: 1px solid rgba(22, 76, 142, 1.00);
}
.catch-data .data-table table thead th:first-of-type {
border-left: 1px solid rgba(22, 76, 142, 1.00);
}
.catch-data .data-table table tbody {
border-top: 1px solid rgba(221, 221, 221, 1.00);
}
.catch-data .data-table table tbody th, .catch-data .data-table table tbody td {
border-bottom: 1px solid rgba(221, 221, 221, 1.00);
border-right: 1px solid rgba(221, 221, 221, 1.00);
height: 4.4rem;
vertical-align: middle;
font-size: 1.6rem;
font-weight: 700;
color: rgba(34, 34, 34, 1.00);
text-align: right;
padding: 0 1rem;
background: white;
}
.catch-data .data-table table tbody th {
border-left: 1px solid rgba(221, 221, 221, 1.00);
}
.catch-data .data-table table tbody tr:nth-child(even) th, .catch-data .data-table table tbody tr:nth-child(even) td {
background: rgba(242, 242, 242, 1.00) !important;
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {
.condition {
padding: 3rem 0 0 0;
}
}
/* BREAK POINT -----------------------------------------------------*/
/*----------------------------------------------------- CATCH DATA SETTING */
/**/
/**/
/* FOOTER SETTING -----------------------------------------------------*/
#footer {
display: block;
margin: 0;
padding: 0;
}
#footer .copyright {
display: block;
text-align: center;
width: 100%;
padding: 1rem 0;
}
#footer .copyright span {
line-height: 1em;
color: rgba(99, 155, 223, 1.00);
font-size: 1rem;
}
/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {} /*----------------------------------------------------- BREAK POINT*/
/*----------------------------------------------------- FOOTER SETTING */
/**/
/**/
/* COMMON SETTING ----------------------------------------------------- */
#content {
padding: 0 0.5rem;
position: relative;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}

/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {
}
/*----------------------------------------------------- BREAK POINT　*/