@charset "UTF-8";

.mock_headingLv2 {
  background: #e5e5e8;
  border-radius: 100vh;
  padding: 12px 20px;
}

.mock_detailBlock,
.mock_descriptionBlock {
  border: solid 1px #bfc0c1;
  border-radius: 8px;
  padding: 20px;
}
.mock_detailBlock img,
.mock_descriptionBlock img {
  width: 100%;
}
.mock_detailBlock.mock_detailStack {
  padding: 0;
}
.mock_detailBlock.mock_detailStack > * {
  border-top: solid 1px #bfc0c1;
  padding: 20px;
}
.mock_detailBlock.mock_detailStack > *:first-of-type {
  border-top: none;
}
.mock_descriptionBlock {
  padding: 0;
}
.mock_descriptionBlock > dt {
  font-weight: 600;
  padding: 10px 20px;
  border-bottom: solid 1px #bfc0c1;
}
.mock_descriptionBlock > dd {
  padding: 20px;
}
.mock_descriptionBlock dd.mock_pdRelease {
  padding:0 10px;
}
.flexBox > .mock_descriptionBlock > dd:first-of-type {
  padding: 10px;
}

.flexBox .flex-item.fb49p5 {
  width: 49.5%;
}
.flexBox.flexCenter{
  justify-content: center;
}

.block-common-block ul.mock_numList {
  margin-left: 0;
}
.mock_numList {
  counter-reset: number 0;
}
.mock_numList > li,
.mock_attention > li,
p.mock_attention{
  text-indent: -1.5em;
  margin-left: 1.5em;
  margin-bottom: 0.8em;
}
.mock_numList > li::before {
	counter-increment: number 1;
  content: counter(number) ".\00a0";
  display: inline-block;
  width: 1.5em;
  text-align: right;
}
.mock_attention > li::before,
p.mock_attention::before {
  content: "※";
  display: inline-block;
  width: 1.5em;
  text-align: right;
}
.mock_bulletPoints > li,
p.mock_bulletPoint {
  text-indent: -0.5em;
  margin-left: 0.5em;
  margin-bottom: 0.8em;
}
.mock_bulletPoint > li::before,
p.mock_bulletPoint::before {
  content: "・";
  display: inline-block;
  width: 0.5em;
  text-align: center;
}

.pb110 { padding-bottom: 110px!important; }

.mock_btn {
  display: block;
  border: solid 1px #bfc0c1;
  border-radius: 6px;
  padding: 18px;
  width: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.3s ease;
}
.mock_btn:hover {
  opacity: 0.7;
}
.mock_btn > span {
  display: inline-block;
  position: relative;
  padding-left: 0.65em;
}
.mock_btn > span::before {
  position: absolute;
  left: 0;
  top: calc(50% - 0.3em);
  line-height: 1.1;
  content: "";
  display: inline-block;
  height: 100%;
  width: 0.6em;
  height: 0.6em;
  background: #000;
  clip-path: polygon(0% 25%, 0% 0%, 60% 50%, 0% 100%, 0% 75%, 31.5% 50%);
}

.mock_compassImage,
.mock_tachymImage,
.mock_timecalcImage,
.mock_timediffImage,
.mock_pulsmImage,
.mock_telemImage,
.mock_gmtImage {
  width: 400px;
  padding: 20px 25px 20px 0;
  margin:0 20px;
  position: relative;
}
.mock_tachymImage {
  width: 300px;
  padding: 20px 0;
}
.mock_pulsmImage {
  padding: 0;
  margin: 0;
}
.mock_telemImage,
.mock_gmtImage  {
  width: 300px;
  padding: 0;
}
.mock_yachtImage {
  position: relative;
  padding: 0;
  margin:0;
}
.mock_yachtImage1 {
  width: 100%;
}
.mock_yachtImage2 {
  padding-left: 130px;
}
.mock_yachtImage3 {
  padding-right: 130px;
}
.mock_yachtImage4,
.mock_yachtImage6 {
  padding-top: 30px;
}
.mock_tachymImage figure,
.mock_pulsmImage figure,
.mock_telemImage figure {
  width: 300px;
}
.mock_pulsmImage figure {
  width: 400px;
}
.mock_compassImage figure {
  width: 375px;
}
.mock_timecalcImage figure {
  width: 341px;
}
.mock_yachtImage1 figure {
  width: 210px;
  padding: 0;
  margin: 0 auto;
}
.mock_yachtImage2 figure {
  width: 234px;
  padding: 0;
  margin: 0 auto;
}
.mock_yachtImage3 figure {
  width: 248px;
  padding: 0;
  margin: 0 auto;
}
.mock_yachtImage4 figure {
  width: 147px;
  padding: 0;
  margin: 0 auto;
}
.mock_yachtImage5 figure {
  width: 183px;
  padding: 0;
  margin: 0 auto;
}
.mock_yachtImage6 figure {
  width: 175px;
  padding: 0;
  margin: 0 auto;
}
.mock_compassImage > span,
.mock_tachymImage > span,
.mock_timecalcImage > span,
.mock_yachtImage > span,
.mock_telemImage > span {
  position: absolute;
  font-weight: 600;
  font-size: 18px;
}
.mock_compassImage > span.mock_noon {
  top: -5px;
  left: 196px;
}
.mock_compassImage > span.mock_east {
  top: 296px;
  left: 22px;
}
.mock_compassImage > span.mock_west {
  top: 119px;
  right: 3px;
}
.mock_compassImage > span.mock_south {
  top: 27px;
  left: 113px;
  color: #ff0046;
}
.mock_compassImage > span.mock_north {
  bottom: 2px;
  right: 90px;
}
.mock_compassImage > span.mock_hourHand {
  top: 216px;
  left: 5px;
}
.mock_tachymImage > span.mock_1km {
  bottom: 0;
  right: 50%;
}
.mock_timecalcImage > span.mock_et {
  bottom: 33px;
  right: 31px;
  font-size: 18px;
}
.mock_yachtImage1 .mock_wind {
  top: -20px;
  left: calc(50% - 0.5em);
}
.mock_yachtImage1 .mock_starboardTack {
  top: 32px;
  left: calc(50% - 150px);
}
.mock_yachtImage1 .mock_portTack {
  top: 30px;
  left: calc(50% + 84px);
}
.mock_yachtImage2 .mock_wind {
  top: 17px;
  left: calc(50% + 65px - 0.25em);
}
.mock_yachtImage2 .mock_shift {
  top: -24px;
  left: calc(50% + 65px - 1em);
}
.mock_yachtImage2 .mock_realWind {
  top: 20px;
  right: 34px;
}
.mock_yachtImage2 .mock_startLine {
  top: 100px;
  right: 50px;
}
.mock_yachtImage2 .mock_startMark {
  bottom: 50px;
  right: -20px;
}
.mock_yachtImage2 .mock_yacht {
  bottom: 0;
  right: 105px;
}
.mock_yachtImage3 .mock_realWind {
  top: -20px;
  left: 210px;
}
.mock_yachtImage3 .mock_downwind {
  top: 70px;
  left: -3px;
}
.mock_yachtImage3 .mock_upwind {
  bottom: 113px;
  left: 234px;
}
.mock_yachtImage4 .mock_upwindMark {
  top: 3px;
  right: 70px;
}
.mock_yachtImage5 .mock_upwindMark {
  top: -22px;
  left: calc(50% - 2.3em);
}
.mock_yachtImage5 .mock_downwindMark {
  bottom: -95px;
  right: -41px;
}
.mock_yachtImage5 .mock_sideMark {
  bottom: -95px;
  left: -53px;
}
.mock_yachtImage6 .mock_upwindMark {
  top: 6px;
  right: 70px;
}
.mock_yachtImage6 .mock_sideMark {
  top: 85px;
  left: 5px;
}
.mock_yachtImage6 .mock_startLine {
  top: 85px;
  right: 19px;
}
.mock_yachtImage6 .mock_wind {
  top: 3px;
  left: 38px;
}
.mock_yachtImage6 .mock_downwindMark {
  bottom: 20px;
  left: 47px;
}
.mock_yachtImage > span > span {
  font-weight: normal;
  display: block;
  width: auto;
  white-space: nowrap;
  text-align: left;
}
.mock_telemImage > span {
  bottom: 116px;
  right: 52px;
}
.mock_gmtImage figcaption {
  border: solid 1px #bfc0c1;
  border-radius: 8px;
  text-align: center;
  margin: 10px -20px 0;
}
.mock_gmtImage figcaption > span {
  display: inline-block;
  padding: 4px 8px;
  width: 45%;
}
.mock_gmtImage figcaption > span:first-of-type {
  border-right: solid 1px #bfc0c1;
  width: 55%;
}
.mock_gmtImage figcaption > span:first-of-type::before {
  content: "● ";
  color: #0080ff;
} 
.mock_detailStack > div:first-of-type .mock_gmtImage figcaption > span:first-of-type::before {
  color: #ff7d00;
} 
.mock_detailStack > div:last-of-type .mock_gmtImage figcaption > span:first-of-type::before {
  color: #00b400;
} 
.mock_howtoTxt {
  margin-left: 20px;
  /*left: calc(50% + 84px);*/
}
.mock_gmtHowtoTxt {
  width: 484px;
}
.mock_gmtHowtoTxt dt{
  font-weight: 700;
  margin-bottom: 10px;
}

.mock_calcHowto > dl {
  display: flex;
  flex-direction: column;
}
.mock_calcHowto > dl > .mock_calcQA  {
   flex-grow: 1;
}
.mock_calcHowto dt {
  font-weight: 600;
}
.mock_calcHowto figure,
.mock_motorsportsImage figure,
.mock_skysportsImage figure {
  aspect-ratio: 172 / 61;
  overflow: hidden;
}
.mock_calcHowto.mock_unitCV1 figure {
  aspect-ratio: 43 / 19;
}
.mock_calcHowto.mock_unitCV2 figure {
  aspect-ratio: 430 / 143;
}
.mock_calcHowto.mock_msRow1 figure {
  aspect-ratio: 17 / 6;
}
.mock_calcHowto.mock_msRow2 figure {
  aspect-ratio: 3 / 1;
}
.mock_calcHowto.mock_ssRow1 figure,
.mock_calcHowto.mock_ssRow2 figure {
  aspect-ratio: 215 / 81;
}
.mock_calcHowto.mock_ssRow3 figure {
  aspect-ratio: 430 / 143;
}

.flexBox .mock_calcQA {
  padding: 0 20px 10px;
}

.mock_calcTable table {
  width: 100%;
  border: solid 1px #bfc0c1;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
}
.mock_calcTable th {
  text-align: center;
}
.mock_calcTable th,
.mock_calcTable td {
  border-left: solid 1px #bfc0c1;
  border-top: solid 1px #bfc0c1;
  padding: 6px 10px;
  white-space: nowrap;
  width: 15%;
}
.mock_calcTable th:first-of-type {
  border-left: none;
}
.mock_calcTable thead th {
  border-top: none;
}
.mock_calcTable thead th:last-of-type,
.mock_calcTable tr td:last-of-type {
  width: 55%;
}

.flexBox.mock_motorsportsImage .flex-item.fb48 {
  margin-right: 0;
}