@charset "utf-8";

/* min-width: 768px - max-width: 970px */
.headerNaviWrap {
	display: none;
}
.headerWrap {
  padding: 0 40px;
  top: 0;
}
.headerLogoImgWrap {
	width: 25%;
	margin-top: 15px;
	z-index: 99;
}
.headerNaviList li a span.icon {
  width: 55px;
  height: 55px;
}
#spMenuBtn, #spMenuWrap {
	display: block;
}
#spMenuBtn {
  display: block;
	position: relative;
	width: 60px;
	height: 60px;
	margin-top: 15px;
	cursor: pointer;
	background: #0F3CAA;
	border-radius: 50px;
	z-index: 99;
}
#spMenuBtn span {
	position: absolute;
	width: 25px;
	left: 50%;
	transform: translateX(-50%);
	height: 3px;
	background: #fff;
	border-radius: 4px;
}
#spMenuBtn, #spMenuBtn span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#spMenuBtn span:nth-of-type(1) {
	top: 20px;
}
#spMenuBtn span:nth-of-type(2) {
	top: 30px;
}
#spMenuBtn.active span:nth-of-type(2) {
	top: 29px;
}
#spMenuBtn span:nth-of-type(3) {
	top: 40px;
}
#spMenuBtn.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
	background: #fff;
}
#spMenuBtn.active span {
	background: #0F3CAA;
}
#spMenuBtn.active span:nth-of-type(1) {
	top: 9px;
  -webkit-transform: translate( -50% , 20px) rotate(-45deg);
  transform: translate( -50% , 20px) rotate(-45deg);
}
#spMenuBtn.active span:nth-of-type(2) {
  -webkit-transform: translate( -50% , 0) rotate(45deg);
  transform: translate( -50% , 0) rotate(45deg);
}
#spMenuBtn.active span:nth-of-type(3) {
  opacity: 0;
}

#spMenuWrap {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	height: 100vh;
	background: #0F3CAA;
	z-index: 98;
	transform: translateX(-120%);
}
#spMenuWrap .menuContents {
	height: 100%;
}
#spMenuWrap.active {
	transform: translateX(0);
}

#spMenuWrap .menuUmiWrap {
	height: 50%;
	padding: 14% 20px 5%;
}
#spMenuWrap .menuUmiList li:not(:last-child) {
	margin-bottom: 20px;
}
#spMenuWrap .menuUmiList li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0 10px;
	width: 100%;
	text-decoration: none;
}
#spMenuWrap .menuUmiList li a::after {
	content:"";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: url(/lib/sea-pulse/img/common/img_arrow03.png) no-repeat;
	background-size: contain;
}
#spMenuWrap .menuUmiList li a span.icon {
	width: 18%;
}
#spMenuWrap .menuUmiList li a span.text {
	font-size: min(5.0vw, 20px);
	font-weight: bold;
	line-height: 1.0;
	color: #fff;
	transform: rotateZ(0.03deg);
}
#spMenuWrap .menuBannerWrap {
	height: 50%;
	padding-top: 6%;
	--bgColorB:
	radial-gradient(19.8px at 50% 28px,#212C53 99%,#0000 101%) calc(50% - 28px) 0/56px 100%,
	radial-gradient(19.8px at 50% -14px,#0000 99%,#212C53 101%) 50% 14px/56px 100% repeat-x;
	-webkit-mask: var(--bgColorB);
	mask: var(--bgColorB);
	background: var(--bgColorB);
}
#spMenuWrap .menuBannerWrap figure {
	width: 45%;
	margin: 0 auto 3%;
}
#spMenuWrap .menuBannerWrap figure:nth-child(3) {
	margin-bottom: 4%;
}
#spMenuWrap .menuBannerWrap figure:last-child {
	margin: 0 auto;
}

/* トップ */
.pageTopContentsWrap {
	max-width: 100vw;
	overflow: hidden;
}
.top .moveImgContainer.moveImg01 {
	width: 40%;
	top: 44%;
}
.homeNavi {
  z-index: 30;
}

.moveImgContainer.moveImg01 {
  top: 40%;
}

.suki .headerLogoImgWrap {
  width: 30%;
}

#newsSwiper .swiper-news-next {
	margin-left: 19.5%;
}
#newsSwiper .swiper-news-prev {
	margin-left: -19.5%;
}

/* template */
#templateSwiper {
	margin-bottom: 120px;
}
.templateSectionTitle {
	text-align: center;
}
.templateSectionTitle img {
	width: 80%;
}



/* suki */
.scrollContents01 {
	padding: 20% 0 0 0;
}
.scrollContents01 .mainTitleBg {
	width: 100%;
	height: unset;
	top: auto;
	bottom: -14%;
}
.scrollContents01 .mainTitleBg img {
	width: 100%;
	height: unset;
}
.scrollContents02 {
	padding-top: 25%;
}
.scrollContents03 {
	padding-top: 25%;
}
.scrollContents11 {
	display: flex;
	width: 90%;
	margin: 0 auto;
}

.activityBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: fit-content;
	min-height: 75%;
	background: rgba(19, 46, 60, 0.3);
	border-radius: 30px;
	padding: 8% 10%;
}
.activityBox .activityTitle {
	font-size: min(4.5vw, 20px);
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 4%;
	transform: rotateZ(0.03deg);
}
.activityBox .activitySubTitle {
	font-size: min(3.4vw, 16px);
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 3%;
	transform: rotateZ(0.03deg);
}

.activityFlex {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}
.activityFlex .imgArea {
	width: 70%;
	margin: 0 auto 4%;
}
.activityFlex .movieArea {
	width: 100%;
	margin: 0 auto 4%;
}
.activityFlex .movieArea iframe {
	width: 100%;
	height: 100%;
}
.activityFlex .textArea {
	width: 100%;
}
.activityFlex .textArea p {
	font-size: min(2.6vw, 12px);
	font-weight: bold;
	color: #fff;
	line-height: 1.8;
	margin-bottom: 5%;
	transform: rotateZ(0.03deg);
}
.activityFlex .textArea .linkBtn {
	margin-left: auto;
	width: 40vw;
}


#cloudBgWrap img {
	width: 80%;
}
#sangoBgWrap {
	width: 44%;
}
#fishBgWrap01 {
	width: 24%;
}
#shipImgWrap {
	width: 30%;
}
#fishBgWrap02 {
	width: 24%;
	z-index: 11;
}
#vinylBgWrap {
	width: 24%;
	z-index: 11;
}
#squidBgWrap {
	width: 21%;
	z-index: 11;
}
#whaleBgWrap {
	width: 50%;
	z-index: 11;
}
#fishBgWrap03 {
	width: 20%;
	z-index: 11;
}
#fishBgWrap04 {
	width: 20%;
}
#sunkenShipBgWrap {
	width: 55%;
}


/* ブログ */

.blog .pagerWrap .pagerList .linkPrev, .blog .pagerWrap .pagerList .linkNext {
	flex-direction: column;
}
.blog .summary .summaryText {
	width: 100%;
}

/* ブログ一覧 */

.blogList .blogListBox .blogListItem {
	width: calc((100% - 30px) / 2);
	cursor: pointer;
}

.blogList .templateActivityWrap {
	margin-bottom: 270px;
}

/* かわちゃんTOP */
.kawachanTop .templateMainImgArea {
	padding: 140px 50px 0;
}

.kawachanTop .moveImgContainer.moveImg01 {
	position: absolute;
	bottom: -80px;
	left: -170px;
	width: 230px;
	height: 190px;
}
.kawachanTop .moveImgContainer.moveImg03 {
	position: absolute;
	top: -52px;
	right: 0;
	width: 188px;
	height: 142px;
}
.kawachanTop .moveImgContainer.moveImg04 {
	position: absolute;
	top: -118px;
	left: calc(50% - 135px);
	width: 268px;
	height: 204px;
}
.kawachanTop .moveImgContainer.moveImg05 {
	position: absolute;
	top: -112px;
	right: -11px;
	width: 167px;
	height: 160px;
}
.kawachanTop .titleAreaWrap::after {
	position: absolute;
	bottom: -12px;
	left: -6px;
	width: 192px;
	height: 160px;
}
.listA {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.listA li {
	width: calc((100% - 30px) / 2);
}

.kawachanTop .clubBox .boxBottom ul li {
	width: 100%;
}

.kawachanTop .linkBtn a {
	font-size: 16px;
	line-height: 1.6;
}
.tbNone {
	display: none;
}

.templateActivityWrap.introduction .linkBtn a {
	padding: 22px 80px 22px 15px;
}

.kawachanTop .linkBtn a {
	padding: 20px 80px 20px 10px;
}

.kawachanTop .linkBtn a::after {
	line-height: 1;
}

#newsSwiper .swiper-slide .newsBox a {
	height: 400px;
}

.kawachanTop .moveImgContainer.moveImg01 {
	left: -168px;
}

.kawachanTop .clubBox .boxTop p {
	margin-bottom: 70px;
}

.btnD a {
	font-size: 16px;
}

.blogList .templateMainImgArea h1.mainTitle {
	top: 147px;
}
.blogList .templateMainImgArea p.mainTitle {
	top: 149px;
}

.blogList .templateMainImgArea h1.mainImgFish {
	bottom: -30px;
	right: 0vw;
}

.blogList .blogListBox .blogListItem.new::after {
	width: 180px;
	height: 99px;
	top: -99px;
	left: 50%;
}

.blog .templateMainImgArea h1.mainTitle {
	top: 140px;
	width: 90vw;
}
.blog .templateMainImgArea p.mainTitle {
	top: 142px;
	width: calc(90vw + 2px) ;
}

.blog .summary .summaryWrap .imgPerson {
	margin-top: -40px;
}


.pagerWrap .pagerList.left:only-child .linkPrev,
.pagerWrap .pagerList.right:only-child .linkNext {
  display: flex; 
  flex-direction: row;
}

.meguriichiTop .philosophy .philosophyWrap {
	padding: 50px;
	margin-bottom: 80px;
	display: flex;
	padding: 100px 120px;
	gap: 30px;
	flex-direction: column;
	font-family: "Noto Serif JP", serif;
	letter-spacing: 0.02em;
	writing-mode: initial;
}

.meguriichiTop .philosophyTitle {
	font-size: 30px;
	line-height: 2;
	font-weight: 700;
	display: flex;
	gap: 20px;
	flex-direction: column;
	letter-spacing: 0.1em;
}

.meguriichiTop .philosophySentense {
	font-size: 120x;
	font-weight: 500;
	font-size: 20px;
	display: flex;
	flex-direction: column;
}

.meguriichiTop .companyName {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	text-align: right;
}


.linkBtnWrap {
	display: flex;
	gap: 30px;
	flex-direction: column;
}

.linkBtnWrap .linkBtn a {
	justify-content: center;
	font-size: 14px;
}

.meguriichiTop .philosophy .philosophyWrap {
	padding: 80px 120px;
	gap: 40px;
}

.linkBtnWrap .linkBtn a {
	padding: 2% 60px 2% 20px;
}

.meguriichiTop #keyVisual .inner .listImg li.img.img03 {
	top: calc(50% + 150px);
	left: calc(50% - 430px);
}