@charset "utf-8";
/* pc.cssのスタイルを打ち消す */
/* min-width: 768px - max-width: 970px */

/* header */
header {
  height: 70px;
}
.wrap::before {
  top: 365px;
  background: url(/jp/ocean-forecast/lib/img/bg_contents_tb.webp) no-repeat;
  background-size: contain;
}
#headerWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 15px;
  background: rgba(8, 21, 47, 0);
	transition: all .5s ease;
}
#headerWrap:has(.menu.open) {
	background: rgba(8, 21, 47, 1);
}
#headerWrap .logo {
	width: 16vw;
}
#headerWrap .spHeader {
	display: flex;
	align-items: center;
	gap: 10px;
}
#headerWrap .spHeader .contactBtn {
  position: relative;
	width: 230px;
	height: 40px;
  z-index: 1;
}
#headerWrap .spHeader .contactBtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
	text-decoration: none;
	background: linear-gradient(90deg,rgba(255, 106, 0, 1) 0%, rgba(221, 157, 63, 1) 100%);
	border-radius: 100vmax;
  transition: all .5s ease;
}
#headerWrap .spHeader .contactBtn a:hover {
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#headerWrap .spHeader .contactBtn a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	border-radius: 100vmax;
	background: transparent;
	transition: all .5s ease;
}
#headerWrap .spHeader .contactBtn a::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	z-index: -1;
	border-radius: 100vmax;
	background: transparent;
	transition: all .5s ease;
}
#headerWrap .spHeader .contactBtn a:hover::before {
	background: linear-gradient(90deg,rgba(255, 106, 0, 1) 0%, rgba(221, 157, 63, 1) 100%);
}
#headerWrap .spHeader .contactBtn a:hover::after {
	background: #fff;
}

#headerWrap .spHeader #menuToggle {
	position: relative;
	width: 40px;
	height: 40px;
	background: url(/jp/ocean-forecast/lib/img/bg_toggle.svg) no-repeat;
	background-size: cover;
  cursor: pointer;
}
#headerWrap .spHeader #menuToggle div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	width: 16px;
	height: 16px;
	transition: all .5s;
}
#headerWrap .spHeader #menuToggle span {
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: #fff;
	border-radius: 100vmax;
	display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#headerWrap .spHeader #menuToggle span:nth-of-type(1) {
  top: 0;
}
#headerWrap .spHeader #menuToggle span:nth-of-type(2) {
  top: 7px;
}
#headerWrap .spHeader #menuToggle span:nth-of-type(3) {
  bottom: 0;
}
#headerWrap .spHeader #menuToggle.active div {
  -webkit-transform: translate(-50%, -50%) rotate(360deg);
  transform: translate(-50%, -50%) rotate(360deg);
}
#headerWrap .spHeader #menuToggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(7px) rotate(-45deg);
  transform: translateY(7px) rotate(-45deg);
}
#headerWrap .spHeader #menuToggle.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#headerWrap .spHeader #menuToggle.active span:nth-of-type(3) {
  opacity: 0;
}

#headerWrap .menu {
  display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	padding: 70px 16px 0;
	background: rgba(8, 21, 47, .9);
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
	z-index: -1;
  overflow: auto;
}
#headerWrap .menu.open {
	opacity: 1;
	visibility: visible;
}
#headerWrap .globalNavi ul {
	display: flex;
	flex-direction: column;
	align-items: center;
  gap: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#headerWrap .globalNavi li {
	position: relative;
	width: 100%;
}
#headerWrap .globalNavi li:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
#headerWrap .globalNavi a {
	display: flex;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	text-decoration: none;
	padding: 21px 16px;
}
#headerWrap .print {
	width: 260px;
	height: 50px;
	margin: 18px auto;
}
#headerWrap .print a {
  position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border: 2px solid #fff;
	border-radius: 100vmax;
	font-size: 14px;
  font-weight: bold;
	line-height: 1.0;
	color: #fff;
	text-decoration: none;
  transition: all .5s ease;
}
#headerWrap .print a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  width: 20px;
  height: 22px;
  background: url(/jp/ocean-forecast/lib/img/ico_print.svg) no-repeat;
  background-size: contain;
  transition: all .5s ease;
}
#headerWrap .print a:hover {
	color: #061D4A;
	background: #fff;
}
#headerWrap .print a:hover::after {
	background: url(/jp/ocean-forecast/lib/img/ico_print_hover.svg) no-repeat;
	background-size: contain;
}
#headerWrap .menu .contactBtn {
  position: relative;
	width: 100%;
	max-width: 260px;
	height: 50px;
	margin: 0 auto;
  z-index: 1;
}
#headerWrap .menu .contactBtn a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	border-radius: 100vmax;
	font-size: 14px;
  font-weight: bold;
	line-height: 1.0;
	color: #fff;
	text-decoration: none;
  background: linear-gradient(90deg, rgba(255, 106, 0, 1) 0%, rgba(221, 157, 63, 1) 100%);
  transition: all .5s ease;
}
#headerWrap .menu .contactBtn a:hover {
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#headerWrap .menu .contactBtn a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	border-radius: 100vmax;
	background: transparent;
	transition: all .5s ease;
}
#headerWrap .menu .contactBtn a::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	z-index: -1;
	border-radius: 100vmax;
	background: transparent;
	transition: all .5s ease;
}
#headerWrap .menu .contactBtn a:hover::before {
	background: linear-gradient(90deg,rgba(255, 106, 0, 1) 0%, rgba(221, 157, 63, 1) 100%);
}
#headerWrap .menu .contactBtn a:hover::after {
	background: #fff;
}

.contentWrap {
  padding-top: 90px;
}
.contentWrap::before {
  background: url(/jp/ocean-forecast/lib/img/bg_top_tb.webp) no-repeat;
  background-size: contain;
}
.contentWrap::after {
  display: none;
}
.headContents {
  padding-bottom: 150px;
  margin-bottom: 0;
  overflow: hidden;
}
.headContents .titleWrap {
  padding-top: 40px;
}
.headContents .titleWrap .mainTtl {
  font-size: 40px;
  padding-left: 8vw;
  margin-bottom: 58px;
}
.headContents .titleWrap .subTtl {
  width: 100%;
  max-width: 460px;
  height: 46px;
  font-size: 24px;
  padding-left: 8vw;
  margin-bottom: 20px;
}
.headContents .titleWrap .contactBtn {
  width: 100%;
  max-width: calc(235px + 8vw);
  height: 40px;
  padding-left: 8vw;
}
.headContents .titleWrap .contactBtn a {
  font-size: 14px;
}
.headContents .earthWrap {
  height: 400px;
  right: -25%;
}
.headContents .earthWrap::after {
  top: calc(50% + 40px);
  left: calc(50% + 60px);
  width: 380px;
  height: 380px;
}
.leadWrap {
  margin-bottom: 120px;
}
.leadWrap p {
  font-size: 16px;
  line-height: 2.6;
}
.featuresWrap {
  margin-bottom: 80px
}
.sectionTtlA {
  font-size: 36px;
  line-height: 1.2;
  padding-bottom: 26px;
  margin-bottom: 40px;
}
.sectionTtlB {
  font-size: 28px;
  margin-bottom: 30px;
}
.sectionTtlC {
  font-size: 20px;
  margin-bottom: 30px;
}
.pointList { 
  gap: 40px 54px;
  margin-bottom: 40px;
}
.pointList li {
  width: calc((100% - 54px) / 2);
  margin: 0;
}
.pointList .listImg figcaption {
  padding-left: 15px;
  font-size: 30px;
}

.serviceWrap {
  margin-bottom: 80px;
}
.serviceWrap .serviceImg {
  margin-bottom: 72px;
}
.serviceWrap .txtArea:has(.note) {
  gap: 16px;
  padding: 28px 35px 15px;
}
.serviceWrap .txtArea:has(.note) span::after {
  font-size: 12px;
}
.serviceWrap .txtArea .noteTtl {
  top: -27px;
  font-size: 16px;
  width: 245px;
	height: 54px;
}
.compareMovie::after {
  top: -850px;
}
.compareMovie .movieTitle {
  height: 54px;
  font-size: 24px;
  margin: 0 11px 20px;
}
.compareMovie .movieTitle span {
  width: 40%;
}
.compareMovie .movieDetails li {
  font-size: 16px;
  line-height: 1.75;
}
.fieldsWrap {
  margin-bottom: 80px;
}
.fieldsWrap::after {
  top: 155px;
}
.fieldList > li {
  gap: 40px;
}
.fieldList .fieldCircle {
  width: 190px;
}
.fieldList .fieldMain {
  width: calc(100% - 230px);
}
.fieldList .fieldMain p {
  font-size: 20px;
  line-height: 1.35;
}
.fieldList .fieldMain .fieldDetail li {
  font-size: 16px;
}

.specWrap {
  margin-bottom: 80px;
}
.specWrap .sectionTtlA {
  margin-bottom: 50px;
}
.specList > li {
  align-items: flex-start;
}
.specList > li .detailTtl {
  width: 160px;
  line-height: 1.7;
}
.specList > li .detail {
  width: calc(100% - 160px);
}
.specList > li .detail.flex {
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
}
.specList > li .detail p {
  line-height: 1.7;
}
.specList > li .detail p.ttl {
  font-size: 18px;
}
.specList > li .detail.source > ul > li {
  text-indent: inherit;
  padding-left: 0;
}
.mapWrap .mapTxt {
  font-size: 18px;
}
.mapWrap .mapNote {
  font-size: 14px;
  line-height: 2.0;
  margin-bottom: 40px;
}
.mapWrap .mapImg {
  max-width: 650px;
  margin: 0 auto 40px;
}
.sampleWrap .sampleTxt {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 55px;
}
.sampleDataBlock {
  gap: 12px;
  margin-bottom: 40px;
}
.sampleDataBlock .img {
  width: 50%;
}
.sampleDataBlock .data {
  width: 50%;
}
.sampleDataBlock .data li p:first-child {
  width: 30%;
}
.sampleWrap .downloadBtn {
  margin: 0 auto 18px;
}
.sampleWrap .downloadBtn a::after {
  right: 62px;
}
.howToMovie {
  max-width: 680px;
}
.howToMovie video {
  max-width: 100%;
}
.serviceOverviewWrap {
  margin-bottom: 160px;
}
.serviceOverviewWrap .sectionTtlA {
  margin-bottom: 30px;
}
.serviceOverviewWrap .sectionTtlB {
  margin-bottom: 15px;
}
.serviceOverviewWrap .flowGrid {
  gap: 6%;
}
.serviceOverviewWrap .flowBlock .number {
  margin-bottom: 40px;
}
.serviceOverviewWrap .flowBlock .img {
  margin-bottom: 30px;
}
.serviceOverviewWrap .flowBlock .ttl {
  font-size: 14px;
  margin-bottom: 8px;
}
.serviceOverviewWrap .flowBlock:not(:last-child)::after {
  right: -24%;
  top: 48%;
}
.sectionTtlC:has( + .priceWrap) {
  margin-bottom: 30px;
}
.serviceOverviewWrap .priceWrap {
  align-items: stretch;
  gap: 28px;
  margin-bottom: 110px;
}
.serviceOverviewWrap .priceBlock {
  display: flex;
  flex-direction: column;
}
.serviceOverviewWrap .licenseName {
  font-size: 16px;
  margin-bottom: 16px;
}
.serviceOverviewWrap .licenseDesc {
  font-size: 14px;
  line-height: 2.0;
  flex: 1;
}
.serviceOverviewWrap .priceDetail li {
  flex-direction: column;
  gap: 6px;
}
.serviceOverviewWrap .priceDetail li p {
  font-size: 14px;
  line-height: 2.0;
}
.serviceOverviewWrap .priceWrap + .sectionTtlB {
  margin-bottom: 30px;
}
.serviceOverviewWrap .priceTxtArea {
  margin-bottom: 30px;
}
.serviceOverviewWrap .priceTxtArea p {
  font-size: 18px;
}
.contactWrap .contactBox {
  gap: 60px;
  padding: 58px 30px 58px 40px;
}
.contactWrap .contactBox .contactBtn {
  width: 50%;
}
footer {
  height: 132px;
}
#footer {
  flex-direction: column;
  gap: 30px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 57, 200, 0));
	background-size: 100% 160%;
	background-position: 0% 160px;
}