@charset "utf-8";
/*
Theme Name: uragou-suisan
Description:
Version: 1.0
*/

/* Base Style
================================================== */
body {
	position: relative;
	background-color: var(--white);
	color: var(--mainNavy);
	font-size: var(--font16);
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

a,
button,
input {
	transition: color .3s, background .3s;
}

a:link {
	color: var(--textLink);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	a:hover {
		text-decoration-thickness: 2px;
	}
}

a:visited {
	color: var(--textVisited);
}

a:focus img {
	background-color: transparent;
}

:focus-visible {
	outline: 2px solid var(--borderFocus);
}

:focus:not(:focus-visible) { /*クリック操作時はフォーカス非表示*/
	outline: none;
}

sup {
	font-size: var(--font12);
	vertical-align: text-top;
	line-height: 1;
}

sub {
	font-size: var(--font12);
	vertical-align: text-bottom;
	line-height: 1;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}

#map-canvas img {
	max-width: none;
}

figcaption {
	margin-top: 6px;
	font-size: var(--font14);
	line-height: 1.75;
}

pre, code, kbd, samp, tt {
	font-family: 'Courier New', Courier, Monaco, monospace;
}

abbr[title], dfn[title] {
	border-bottom-color: #999;
	cursor: help;
}

input, select, textarea {
	color: #000;
	font-family: inherit;
	font-size: 100%;
}

input[type="submit"],
input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

::-webkit-input-placeholder {
	padding-top: 2px;
}

.new {
	padding-right: .5em;
	color: #d14900;
	font-size: 90%;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
}

.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.alignCenter {
	text-align: center;
}

.alignLeft {
	text-align: left;
}

.alignRight {
	text-align: right;
}

.icon-external-link,
.icon-new-window {
	display: inline-block;
	margin: 0 .25em;
	vertical-align: middle;
	text-indent: initial;
}



@media screen and (min-width: 768px) {
	.sp {
		display: none !important;
	}

	.br_pc {
	  display: inline-block;
	}

	.br_sp {
	  display: none;
	}
}

@media screen and (max-width: 767px) {
	.pc {
		display: none !important;
	}

	.br_pc {
		display: none;
	}

	.br_sp {
		display: inline-block;
	}
}

.pageTitle p,
#commonHeader p,
#commonFooter p {
	margin-bottom: 0;
}

#commonHeader ul,
#commonFooter ul,
#globalNav ul,
#breadcrumb ol,
#home ul,
#home ol {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}



/* Layout
================================================== */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

#commonFooter {
	margin-top: auto;
}

.inner,
main {
	width: calc(100% - 80px);
	max-width: 75em; /* 1200px */
	margin: 0 auto;
}

#content {
	margin: 0 auto;
}

body:not(#home) #content {
	max-width: 65.0em; /* 1040px */
}

#content .contentInner {
	/* width: calc(100% - 80px); */
	max-width: 67.5em; /* 1080px */
	margin: 0 auto;
}

#content.wide {
	max-width: 75em; /* 1200px */
}

.nallow {
	max-width: 60em; /* 960px */
	margin-right: auto;
	margin-left: auto;
}

.full {
	width: 100vw;
	margin-right: calc(-50vw - -50%);
	margin-left: calc(-50vw - -50%);
}

@media screen and (max-width: 1272px) {
	#content .contentInner,
	.inner,
	main {
		width: calc(100% - 48px);
	}
}

@media screen and (max-width: 767px) {
	#content .contentInner,
	.inner,
	main {
		width: auto;
		margin-right: var(--spMargin);
		margin-left: var(--spMargin);
	}
}


/* Block Skip
================================================== */
.skip a {
	display: block;
	height: 0;
	overflow: hidden;
}

.skip a:focus {
	height: auto;
}


/* Common Button
================================================== */
.linkBtn,
a.linkBtn {
	position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  min-height: 52px;
  padding: 13px 64px 13px 20px;
  color: var(--white);
  background: var(--mainBlue);
  border: 1px solid var(--mainBlue);
  font-size: var(--font16);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.linkBtn .linkBtn_text,
a.linkBtn .linkBtn_text {
  min-width: 0;
}

.linkBtn::after,
a.linkBtn::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: translateY(-50%) rotate(45deg);
}

/* JSで後付けされる外部リンクアイコン想定 */
.linkBtn .icon-external-link,
.linkBtn svg:last-child,
a.linkBtn .icon-external-link,
a.linkBtn svg:last-child {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

button.linkBtn:hover,
a.linkBtn:hover {
	color: var(--mainBlue);
}

button.linkBtn:hover::after,
a.linkBtn:hover::after {
  border-color: var(--mainBlue);
}

/* JSで後付けされる外部リンクアイコン想定 */
a.linkBtn:hover .icon-external,
a.linkBtn:hover svg:last-child {
  color: var(--mainBlue);
  fill: currentColor;
}

button.linkBtn::before,
a.linkBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
  z-index: -1;
}

button.linkBtn:hover::before,
a.linkBtn:hover::before {
  transform: scaleX(1);
}


/* Common Header
================================================== */
#commonHeader {
	background-color: var(--white);
}

body:not(#home) #commonHeader {
	background-color: var(--offWhite);
}

#commonHeader .inner {
	max-width: 75em;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
/*  Site ID */
#commonHeader .siteId {
	padding: 20px 0 10px;
}

#commonHeader .siteId > * {
  font-size: inherit;
}

/* Gloval Nav */
#globalNav a {
	display: block;
	color: var(--mainNavy);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	position: relative;
}

@media screen and (min-width: 768px) {
	#menuBtn,
	.focusTrap {
		display: none;
	}

	#globalNav .mainMenu {
		display: flex;
		gap: 20px;
	}

	#globalNav .mainMenu > li {
		flex: 1;
		position: relative;
	}

	#globalNav .mainMenu > li > a {
		height: 100%;
		min-height: 52px;
		margin-left: 1px;
		padding: 8px 2px 12px;
		display: grid;
  	place-items: center;
		text-align: center;
		background: linear-gradient(var(--mainBlue) 0 0) var(--p, 0) 100% /var(--d, 0) 5px no-repeat;
		white-space: nowrap;
		letter-spacing: .04em;
 		transition: .3s, background-position 0s .3s;
	}

	#globalNav .mainMenu > li:focus-within > a,
	#globalNav .mainMenu > li.current-menu-item > a,
	#globalNav .mainMenu > li > a:hover {
	  --d: 100%;
	  --p: 100%;
	}

	body.fixed #commonHeader {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 90;
		animation: slide-down 250ms ease-in-out 1 forwards;
	}

	@keyframes slide-down {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
 	}

	body.fixed #commonHeader .siteId {
		padding: 8px 0;
	}

	body.fixed #commonHeader .siteId img {
		width: 100px;
		height: auto;
	}

	body.fixed #globalNav .mainMenu > li > a {
		padding-top: 4px;
		padding-bottom: 4px;
		font-size: var(--font14);
	}
}

@media screen and (max-width: 767px) {
	#commonHeader {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 50;
		background-color: var(--offWhite);
	}

	#commonHeader .siteId img {
		width: clamp(68px, 12vw, 88px);
		height: auto;
	}

	#globalNav {
		transform: translateX(20px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: transform .3s ease, opacity .3s ease;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		max-width: 320px;
		max-height: 100vh;
		max-height: 100dvh;
		padding-top: 78px;
		padding-bottom: 32px;
		background-color:rgba(47,127,159,.9);
		overflow-y: auto;
		z-index: 90;
	}

	.focusTrap {
		display: none;
	}

	body.menuOpen .focusTrap {
		display: block;
	}

	body.menuOpen #globalNav {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		z-index: 100;
	}

	body.menuOpen::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 60;
		background-color: rgba(0,0,0,.5);
	}

	#globalNav .mainMenu {
		margin: 0;
	}

	#globalNav .mainMenu li a {
		padding: 12px var(--spMargin) 12px calc(var(--spMargin) + 44px);
		color: var(--offWhite);
		font-size: var(--font15);
		letter-spacing: .04em;
	}

	#globalNav .mainMenu > li.current-menu-item > a::before {
		position: absolute;
    content: '';
		top: 50%;
		left: calc(var(--spMargin) + 20px);
		transform: translateY(-50%);
		width: 6px;
		height: 20px;
		background-color: var(--offWhite);
	}

	#globalNav .subMenu {
		margin: 30px auto 24px;
	  padding: 0 24px;
	}

	#globalNav .subMenu a.linkBtn {
		padding: 8px 48px 8px 12px;
    min-height: unset;
  	background-color: var(--offWhite);
	}

	#globalNav .subMenu a.linkBtn::after {
		border-color: var(--mainNavy);
	}

	#globalNav .snsMenu {
		margin: 30px auto 24px;
	  padding: 0 24px;
	}
}

.snsMenu .icon-external-link {
	display: none;
}

/* Menu button
-------------------------------------------------- */
#menuBtn {
	position: fixed;
	top: 20px;
	right: 10px;
	width: 44px;
	height: 44px;
	z-index: 99;
	border: transparent;
	border-radius: 4px;
	z-index: 101;
}

@media screen and (max-width: 767px) {
	#menuBtn {
		right: 2.34375vw;
	}
}

#menuBtn button {
	width: 100%;
	height: 100%;
	vertical-align: top;
	position: relative;
}

#menuBtn::after,
#menuBtn button::before,
#menuBtn button::after {
	content: '';
	position: absolute;
	width: 28px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 2px solid #00A0E9;
	cursor: pointer;
	transition: top .15s, transform .15s;
}

#menuBtn::after {
	top: calc(40% - 1px);
}

#menuBtn button::before {
	top: 18%;
}

#menuBtn button::after {
	top: calc(62% - 2px);
}

#menuBtn button span {
	position: absolute;
	bottom: 6%;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--font12);
	line-height: 1;
}

body.menuOpen #menuBtn::after,
body.menuOpen #menuBtn button::before,
body.menuOpen #menuBtn button::after {
	width: 32px;
	border-color: var(--offWhite);
}

body.menuOpen #menuBtn::after {
	width: 0;
}

body.menuOpen #menuBtn button::before,
body.menuOpen #menuBtn button::after {
	top: calc(40% - 1px);
	transition: top .15s, transform .15s;
}

body.menuOpen #menuBtn button::before {
	transform: translateX(-50%) rotate(-38deg);
}

body.menuOpen #menuBtn button::after {
	transform: translateX(-50%) rotate(38deg);
}


/* Splide 共通
================================================== */
.splide {
  position: relative;
}

.splide__slide {
  box-sizing: border-box;
}

.splide__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.splide_kv .splide__slide {
  aspect-ratio: 16 / 9;
}

/* .splide_fade .splide__slide {
  aspect-ratio: 2 / 1;
} */

.splide_kv .splide__slide img {
  object-fit: cover;
}

.splide__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.splide__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: none;
  padding: 0;
}

.splide__pagination__page {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #ccc;
  opacity: 1;
  margin: 0;
}

.splide__pagination__page.is-active {
  background: #000;
  border-color: #000;
  transform: none; /* Splideの拡大を無効化 */
}

.splide__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ccc;
  background: var(--white);
  cursor: pointer;
}

.splide__toggle svg {
  width: 18px;
  height: auto;
  fill: currentColor;
}

.splide__arrow {
  width: 44px;
  height: 44px;
  opacity: 1;
}

.splide__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.splide_kv .splide__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.splide_kv .splide__arrow--prev {
  left: 16px;
}

.splide_kv .splide__arrow--next {
  right: 16px;
}

@media screen and (max-width: 767px) {
  .splide__controls {
    gap: 12px;
    margin-top: 12px;
  }

  .splide__pagination {
    gap: 6px;
  }

  .splide__toggle {
    width: 40px;
    height: 40px;
  }

  .splide__arrow {
    width: 40px;
    height: 40px;
  }

  .splide_kv .splide__arrow--prev {
    left: 8px;
  }

  .splide_kv .splide__arrow--next {
    right: 8px;
  }
}

/* top フェードスライド */
.splide_fade {
	width: 100%;
	margin-top: 40px;
  position: relative;
	border-style: solid;
	border-color: var(--white);
	border-width: 20px 20px 40px 20px;
  border-radius: 5px;
  background: var(--white);
}

@media screen and (max-width: 479px), screen and (min-width: 768px) and (max-width: 900px) {
		.splide_fade {
		border-width: 16px 12px 40px 12px;
	}
}

.splide_fade .splide__track,
.splide_fade .splide__list,
.splide_fade .splide__slide {
  height: 100%;
}

.splide_fade .splide__slide {
  aspect-ratio: 3 / 4; /* 縦長 */
}

.splide_fade .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
	border-radius: 5px;
}

.splide_fade .splide__toggle {
  position: absolute;
	right: 0;
  bottom: -42px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--mainBlue);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
	transition: opacity .3s;
}

.splide_fade .splide__toggle__pause,
.splide_fade .splide__toggle.is-active .splide__toggle__play {
  display: none;
}

.splide_fade .splide__toggle__play,
.splide_fade .splide__toggle.is-active .splide__toggle__pause {
  display: inline-block;
}

.splide_fade .splide__toggle:hover {
	opacity: .7;
}

@media screen and (max-width: 767px) {
	.splide_fade .splide__toggle {
		padding: 16px 12px 32px 12px;
	}
}


/* Front Page
================================================== */
/* Key Visual */
#kv {
  position: relative;
  overflow: hidden;
	max-height: 880px;
  min-height: 520px;
	aspect-ratio: 1280 / 770;
}

#kv .kv_image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#kv .kv_image picture,
#kv .kv_image img {
	display: block;
	width: 100%;
	height: 100%;
}

#kv .kv_image img {
  object-fit: cover;
  object-position: center;
}

#kv .kv_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
	padding-inline: clamp(40px, 5vw, 64px);
	padding-top: clamp(32px, calc(18.75vw - 160px), 80px);
	text-align: right;
}

#kv .kv_layout {
	text-shadow: 0 1px 2px rgba(255, 255, 255, .8), 0 2px 4px rgba(255, 255, 255, .4);
}

#kv .catch_main {
  display: block;
  font-size: clamp(var(--font26), 5vw, var(--font48));
  line-height: 1.5;
  font-weight: 700;
}

#kv .catch_sub {
  display: block;
  margin-top: 24px;
	margin-right: 2em;
	font-weight: 700;
	font-size: clamp(var(--font16), 2vw, var(--font18));
}

@media screen and (max-width: 767px) {
	#kv {
		position: relative;
		aspect-ratio: unset;
    min-height: unset;
    max-height: unset;
		/* aspect-ratio: 1080 / 1218;
    min-height: auto;
    max-height: none; */
    overflow: visible;
	}

  #kv .kv_image {
    /* position: static; */
		position: relative;
		aspect-ratio: 1080 / 1218;
    min-height: auto;
    max-height: none;
  }

  #kv .kv_image img {
    object-position: 68% center;
  }

  #kv .kv_inner {
		position: relative;
		max-width: unset;
    height: auto;
    padding: 40px 34px 56px;
		background-color: var(--paleBlue);
		text-align: left;
  }

	#kv .catch_sub {
		margin-right: 0;
	}
}

/* Top Common */
#home section {
	padding-top: 120px;
	padding-bottom: 120px;
}

#home header h2 .en {
	display: block;
	margin-bottom: 56px;
	padding-left: 2.5em;
	font-size: var(--font18);
	font-weight: 700;
	position: relative;
}

#home header h2 .en::before {
	position: absolute;
	content: '';
	width: 2.0em;
	height: 2px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-color: var(--mainNavy)
}

#home header h2 .ja {
	font-size: clamp(var(--font32), calc(var(--font32) + 8 * ((100vw - 768px) / 432)), 40px);
	font-weight: 600;
}


/* About */
#homeAbout {
	background-color: var(--paleBlue);
}

#homeAbout .inner {
	display: grid;
	grid-template-columns: clamp(400px, 40vw, 482px) 1fr;
	align-items: start;
	gap: clamp(24px, 5vw, 120px);
}

#hohomeAboutme header h2 {
	margin: 0 0 160px;
}

#homeAbout .textWrap p {
	font-size: var(--font18);
	font-weight: 500;
}

#homeAbout .btn {
	margin-top: 120px;
}

@media screen and (max-width: 912px) {
	#homeAbout .textWrap p br {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	#home #homeAbout {
		padding-top: 0;
	}

	#homeAbout .inner {
		grid-template-columns: 1fr;
		gap: 80px;
	}
}


/* News */
#homeNews .inner {
	width: 100%;
	max-width: 64em;
	display: grid;
	grid-template-columns: clamp(200px, calc(-54.57px + 33.15vw), 320px) 1fr;
	align-items: start;
}

#homeNews ul {
	margin-top: 160px;
  padding-right: clamp(0px, calc((100vw - 1130px) * 1.0667), 160px);
  overflow: hidden;
}

#homeNews ul li:first-child{
	border-top: 1px dashed var(--mainNavy);
}

#homeNews ul li {
	border-bottom: 1px dashed var(--mainNavy);
}

#homeNews ul li a {
	display: block;
	padding: 16px;
	color: var(--black);
	text-decoration: none;
	transition: color .3s;
}

#homeNews ul li a .title {
	transition: font-weight .3s;
}

#homeNews ul li a .date {
	padding-right: 1em;
}

#homeNews ul li a:hover {
	color: var(--mainBlue);
}

#homeNews ul li a:hover .title {
	font-weight: 600;
}

@media screen and (max-width: 767px) {
	#homeNews .inner {
		margin: 0;
	  display: block;
	}

	#homeNews ul {
   margin-top: 0;
 }

 #homeNews ul li a .date {
	 display: block;
 }
}


/* Works */
#homeWorks {
	background-color: var(--lightBlue);
}

#homeWorks header.inner {
	max-width: 64em;
}

#homeWorks .textNote {
	width: 100%;
	max-width: 646px;
	margin: 0 auto;
	font-size: var(--font18);
	font-weight: 600;
}

#homeWorks ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 80px);
	margin-bottom: 80px;
}

#homeWorks li {
	display: flex;
	flex-direction: column;
}

#homeWorks ul li .boxWrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
	background-color: var(--white);
	color: var(--mainNavy);
	text-decoration: none;
}

#homeWorks ul li .boxWrap .image {
	display: block;
	aspect-ratio: 300 / 320;
  overflow: hidden;
  border-radius: 5px;
	overflow: hidden;
}

#homeWorks ul li .boxWrap .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

#homeWorks ul li .boxWrap .title {
	display: block;
	margin: 12px 0;
	font-size: var(--font22);
	font-weight: 600;
}

#homeWorks ul li .boxWrap .text {
	display: block;
	margin-bottom: 40px;
}

#homeWorks ul li .boxWrap .linkBtn {
	min-width: unset;
  max-width: 172px;
	margin-top: auto;
  margin-left: auto;
}

#homeWorks ul li .boxWrap:hover .linkBtn {
	color: var(--mainBlue);
}

#homeWorks ul li .boxWrap:hover .linkBtn::after {
  border-color: var(--mainBlue);
}

#homeWorks ul li .boxWrap:hover .linkBtn .icon-external,
#homeWorks ul li .boxWrap:hover .linkBtn svg:last-child {
  color: var(--mainBlue);
  fill: currentColor;
}

#homeWorks ul li .boxWrap .linkBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
  z-index: -1;
}

#homeWorks ul li .boxWrap:hover .linkBtn::before {
  transform: scaleX(1);
}

#homeWorks ul li a.boxWrap:hover .image img {
	transform: scale(1.075);
}

@media screen and (max-width: 1000px) {
	#homeWorks ul {
		gap: 20px;
	}

	#homeWorks ul li .boxWrap {
		padding: 20px;
	}
}

@media screen and (max-width: 767px) {
	#homeWorks ul {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	#homeWorks ul li .boxWrap .image {
		aspect-ratio: 400 / 240;
	}
}

@media screen and (max-width: 479px), screen and (min-width: 768px) and (max-width: 900px) {
	#homeWorks ul li .boxWrap {
		padding: 16px 12px;
	}
}

/* Crew */
#home #homeCrew {
	padding-top: 0;
	padding-bottom: 0;
  position: relative;
}

#home #homeCrew header h2 .en {
	width: fit-content;
  margin: 0 auto 56px;
}

#homeCrew {
  --crew-image-height: calc(100svh - 76px);
}

#homeCrew .crew_image {
  position: sticky;
  top: 76px;
  z-index: 1;

	height: var(--crew-image-height);
  overflow: hidden;
}

#homeCrew .crew_image img {
  width: 100%;
  height: auto;
  display: block;

	object-fit: contain;
}

#homeCrew .crew_textWrap {
  position: relative;
  z-index: 2;
	margin-top: 0px;
  padding: 0 0 16svh;

	padding-bottom: 0;
}

#homeCrew .crew_textBox {
  width: 100%;
	margin: 0 auto;
	padding: 80px 0;
	background-color:rgba(234,242,246,.85);
	border-radius: 0;
  text-align: center;

	min-height: 840px;
}

#homeCrew .crew_textBox p {
	font-size: var(--font18);
	font-weight: 500;
	text-shadow:
    -1px -1px 0 var(--paleBlue),
     0   -1px 0 var(--paleBlue),
     1px -1px 0 var(--paleBlue),
    -1px  0   0 var(--paleBlue),
     1px  0   0 var(--paleBlue),
    -1px  1px 0 var(--paleBlue),
     0    1px 0 var(--paleBlue),
     1px  1px 0 var(--paleBlue),
     0    0   10px rgba(234,242,246,.9);
}

#homeCrew .crew_textBox .btn {
	margin-top: 100px;
}

@media screen and (max-width: 767px) {
	#homeCrew .crew_image {
	  position: relative;
	  top: 0;
		height: auto;
	}

	#homeCrew .crew_textWrap {
		padding: 0;
	}

	#homeCrew .crew_spWrap {
		width: auto;
		margin-right: var(--spMargin);
		margin-left: var(--spMargin);
	}
}


/* Trial Fishing */
#homeTrial {
	position: relative;
	overflow: hidden;
}

#homeTrial::before {
  content: '';
  position: absolute;
  width: 110vw;
  aspect-ratio: 1440 / 1115;
  right: -30vw;
  top: 50%;
  transform: translateY(-50%);
  background: url(images/bg_circle01.jpg) no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}

#homeTrial .inner {
	max-width: 62em;
	display: grid;
	grid-template-columns: 1fr 1fr;
  justify-content: center;
	align-items: center;
	gap: 16px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#homeTrial .textWrap {
	width: 100%;
	max-width: 560px
}

#homeTrial .textWrap p {
	font-size: var(--font18);
	font-weight: 600;
}

#homeTrial .textWrap .btn {
	margin-top: 100px;
}

@media screen and (max-width: 767px) {
	#home section#homeTrial {
		padding-top: 180px;
	}

	#homeTrial::before {
		right: unset;
		left: -8vw;
		top: 260px;
		width: 72%;
	}

	#homeTrial .inner {
		display: block;
		overflow: unset;
	}

	#homeTrial .textWrap p {
		text-shadow: -2px -2px 0 var(--white), -2px 0 0 var(--white), -2px 2px 0 var(--white), 0 -2px 0 var(--white), 0 2px 0 var(--white), 2px -2px 0 var(--white), 2px 0 0 var(--white), 2px 2px 0 var(--white), -1px -2px 0 var(--white), 1px -2px 0 var(--white), -1px 2px 0 var(--white), 1px 2px 0 var(--white), -2px -1px 0 var(--white), 2px -1px 0 var(--white), -2px 1px 0 var(--white), 2px 1px 0 var(--white), 0 0 10px rgba(255,255,255,.9);
	}

	#homeTrial .image {
		position: absolute;
		bottom: -108px;
	  right: 0;
	  z-index: -1;
	  opacity: .2;
	}
}

@media screen and (max-width: 479px) {
	#homeTrial::before {
		width: 88%;
	}
}

/* Instagram */
#homeInsta #sb_instagram .icon-external-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#homeInsta .btn {
	margin-top: 100px;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#homeInsta .btn {
		margin-top: 64px;
	}
}


/* pageTitle (下層ページヘッダー)
================================================== */
.pageTitle {
	margin-right: calc(-50vw + 50%);
	margin-left: calc(-50vw + 50%);
	height: 300px;
	overflow: hidden;
	position: relative;
	background: transparent;
}

.pageTitle .pageTitle_bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

.pageTitle .pageTitle_inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 71.25em;
}

.pageTitle .en {
	margin-bottom: 10px;
	padding-left: 2.5em;
	font-size: var(--font18);
	font-weight: 600;
	position: relative;
}

.pageTitle .en::before {
	position: absolute;
	content: '';
	width: 2.0em;
	height: 2px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-color: var(--mainNavy)
}

.pageTitle h1 {
	font-size: var(--font48);
	font-weight: 600;
}

@media screen and (max-width: 767px) {
	.pageTitle {
		min-height: 120px;
	}

	.pageTitle h1 {
		font-size: clamp(26px, 5.5vw, 48px);;
	}
}

@media screen and (max-width: 479px) {
	.pageTitle {
		min-height: 100px;
	}

	.pageTitle .en {
		padding-left: 2.25em;
		font-size: var(--font16);
	}

	.pageTitle .en::before {
		width: 1.75em;
	}
}



/* Breadcrumb
================================================== */
#breadcrumb {
	margin: 0 calc(-50vw - -50%);
	padding: 8px 0 2px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	background-color: var(--white);
	white-space: nowrap;
	overflow-x: auto;
	font-size: var(--font14);
}

#breadcrumb .inner {
	max-width: 81em;
}

#breadcrumb a {
	color: var(--mainNavy);
}

#breadcrumb ol {
	display: flex;
	gap: 6px 12px;
	align-items: center;
}

#breadcrumb li + li::before {
	content: '\f105';
	font-family: icomoon;
	speak: never;
	margin-right: 12px;
}

#breadcrumb li:last-child {
	padding-right: 36px;
}

@media screen and (max-width: 767px) {
	#breadcrumb {
		display: none;
	}
}


/* ContentBody
================================================== */
.contentBody > section {
	padding-top: 120px;
	padding-bottom: 120px;
}

.contentBody > section h2 {
	margin-left: -1.25em;
}

#news .contentBody .articleHeader > h2 {
	margin-bottom: 16px;
}

#news .contentBody .articleHeader .postMeta {
	text-align: right;
}

.contentBody .bgBlue_wrap {
	background-color: var(--offWhite);
}

.contentBody .bgMistBlue_wrap {
	background-color: var(--mistBlue);
}

.contentBody .font_red {
	color: red;
}

.contentBody .add_attention {
	position: relative;
	padding-left: 1.75em;
}

.contentBody .add_attention::before {
	position: absolute;
	content: '';
	top: 4px;
	left: 0;
	width: 1.5em;
	height: 1.5em;
	background: url(images/icon_attention.svg) no-repeat center / contain;
}

.contentBody .crew_voice h3 {
	font-size: var(--font22);
	font-weight: 600;
}

.contentBody .h4fontSize {
	font-size: 24px;
}

@media screen and (max-width: 1160px) {
	.contentBody > section h2 {
		margin-left: 0;
	}
}

@media screen and (max-width: 767px) {
	.contentBody > section {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.contentBody .crew_voice h3 {
		font-size: var(--font18);
	}
}

@media screen and (max-width: 479px) {
  .contentBody .h4fontSize {
    font-size: var(--font20);
  }
}

/* DL Basic */
.contentBody .dl_wrap {
	width: 100%;
	max-width: 50em;
  margin: 0 auto;
}

.contentBody .dl_wrap > div {
	display: flex;
  gap: 2em;
  padding: 16px 0;
  border-bottom: 1px solid var(--mainBlue);
}

.contentBody .dl_wrap dt {
	flex: 0 0 160px;
  font-weight: 400;
}

.contentBody .dl_wrap dd {
	flex: 1;
  margin: 0;
}

@media screen and (max-width: 767px) {
	.contentBody .dl_wrap > div {
		flex-direction: column;
		gap: 0.5em;
	}

	.contentBody .dl_wrap dt {
		flex: none;
	}
}

/* DL FAQ */
.contentBody .dl_wrap.faq {
	max-width: 65em;
	color: var(--lightNavy);
}

.contentBody .dl_wrap.faq > div {
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.contentBody .dl_wrap.faq dt {
	flex: none;
	border-bottom: 1px dashed var(--mainBlue);
}

.contentBody .dl_wrap.faq dd,
.contentBody .dl_wrap.faq dt {
	padding: 16px 0 16px 2em;
	position: relative;
}

.contentBody .dl_wrap.faq dt::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 16px;
}

.contentBody .dl_wrap.faq dd::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 16px;
}

/* DL bosyu 募集要項 */
.contentBody .dl_wrap.bosyu {
	max-width: 60em;
	padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
	.contentBody .dl_wrap.bosyu {
		max-width: 60em;
	}
}


/* 体験乗船　採用までの流れ　Flow */
.contentBody .flow ol {
  counter-reset: flow-num;
  list-style: none;
  padding-left: 0;
}

.contentBody .flow ol li {
  counter-increment: flow-num;
	padding: 10px 0 10px 4.5em;
  margin-bottom: 48px;
	background-color: var(--offWhite);
  position: relative;
}

.contentBody .flow ol li::before {
	content: counter(flow-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
	bottom: 0;
  width: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
  color: var(--white);
  background: var(--mainBlue);
	font-size: var(--font22);
  font-weight: 600;
}

.contentBody .flow ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  background: var(--mainBlue);;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/* 体験乗船　アクセスのol */
.contentBody .accessWrap {
	margin-top: 80px;
	display: grid;
  grid-template-columns: .8fr 2fr;
	align-items: flex-start;
	position: relative;
}

.contentBody .accessWrap_text {
	position: relative;
}

.contentBody .accessWrap_text ol {
	width: 100%;
	max-width: 300px;
	list-style: none;
  padding-left: 0;
  margin: 0 auto;
}

.contentBody .accessWrap_text ol li {
	margin-bottom: 44px;
	padding: 12px;
	border: 1px solid var(--mainBlue);
	text-align: center;
	position: relative;
}

.contentBody .accessWrap_text ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  background: var(--mainBlue);;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.contentBody .accessWrap_comment {
	position: absolute;
	bottom: 0;
	left: 0;
}

@media screen and (max-width: 930px) {
	.contentBody .accessWrap_comment {
		bottom: -5em;
	}
}

@media screen and (max-width: 767px) {
	.contentBody .accessWrap {
		grid-template-columns: 1fr;
	}

	.contentBody .accessWrap_comment {
		position: relative;
		bottom: unset;
		left: unset;
		margin-top: 1.0em;
	}
}


/* 青いラインのボックス */
.boxBlueLine {
	margin-top: 80px;
	padding: 32px 112px 80px;
	border: 1px solid var(--mainBlue);
	background-color: var(--offWhite);
}

.boxBlueLine h3 {
	margin-bottom: 48px;
}

@media screen and (max-width: 1272px) {
	.boxBlueLine {
		padding-inline: 24px;
	}
}

@media screen and (max-width: 767px) {
	.boxBlueLine {
		margin-top: 64px;
		padding: 8px var(--spMargin) 32px;
	}

	.boxBlueLine h3 {
		margin-bottom: 32px;
	}
}


/* アコーディオン開閉　募集要項など */
.contentBody .accordion_item:first-child {
	margin-top: 80px;
}

.contentBody .accordion_item h3 {
	margin-bottom: 48px;
}

.contentBody .accordion_button {
  position: relative;
  display: block;
  width: 100%;
  padding: 1em 3em 1em 1em;
  border: 1px solid var(--mainBlue);
  background: var(--paleBlue);
  font-size: var(--font22);
  font-weight: bold;
  text-align: left;
  cursor: pointer;
	position: relative;
}

.contentBody .accordion_button::before,
.contentBody .accordion_button::after {
  content: "";
  position: absolute;
  top: 50%;
	right: 1.5rem;
	width: 24px;
	height: 3px;
  background: currentColor;
  transition: transform .3s ease;
}

.contentBody .accordion_button::before {
  transform: translateY(-50%);
}

.contentBody .accordion_button::after {
  transform: translateY(-50%) rotate(90deg);
}

.contentBody .accordion_button[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(0deg);
}

.contentBody .accordion_panel {
	overflow: hidden;
  height: 0;
  transition: height .3s ease;
}

.contentBody .accordion_content {
  padding: 0 1em 1em;
}

@media screen and (max-width: 767px) {
	.contentBody .accordion_button {
		font-size: var(--font18);
	}
}


/* タブコンテンツ */
.contentBody .wp_tabs {
  margin: 2em 0;
}

.contentBody .wp_tabs_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.contentBody .wp_tabs_tab {
	padding: 10px 1em;
  width: auto;
  min-width: auto;
	border-radius: 0 10px 0 0;
  border-bottom: none;
  background: var(--paleBlue);
	font-size: var(--font18);
	font-weight: 600;
  text-align: center;
	cursor: pointer;
	appearance: none;
}

.contentBody .wp_tabs_tab:first-child {
  background: var(--mistBlue);
}

.contentBody .wp_tabs_tab:nth-child(2) {
  background: var(--paleBlue);
}

.contentBody .wp_tabs_tab:last-child {
  background: var(--lightBlue);
}

.contentBody .wp_tabs_tab[aria-selected="true"] {
  background: var(--offWhite);
  position: relative;
}

.contentBody .wp_tabs_tab br {
	display: none;
}

.contentBody .wp_tabs_panel {
  border: 1px solid var(--offWhite);
  border-top: none;
  padding: 40px 40px 80px;
  background: var(--offWhite);
}

.contentBody .wp_tabs_panel[hidden] {
  display: none;
}

.contentBody .wp_tabs_panel h3,
.contentBody .wp_tabs_panel .tabCatch {
	font-size: var(--font40);
	font-weight: 600;
}

.contentBody .wp_tabs_panel .gridWrap {
	display: grid;
	grid-template-columns: 56% 38%;
	justify-content: space-between;
}

@media screen and (max-width: 1272px) {
	.contentBody .wp_tabs_panel {
	  padding: 40px 24px 80px;
	}
}

@media screen and (max-width: 767px) {
	.contentBody .wp_tabs_tab {
		padding: 12px 1.5em;
		font-size: var(--font16);
	}

	.contentBody .wp_tabs_panel {
	  padding: 32px var(--spMargin) 48px;
	}

	.contentBody .wp_tabs_panel h3,
	.contentBody .wp_tabs_panel .tabCatch {
		font-size: var(--font28);
	}

	.contentBody .wp_tabs_panel .gridWrap {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media screen and (max-width: 680px) {
	.contentBody .wp_tabs_tab {
  	padding-inline: 1em;
	}
}

@media screen and (max-width: 628px) {
	.contentBody .wp_tabs_tab br {
		display: inline-block;
	}

	.contentBody .wp_tabs_tab {
  	padding-inline: 1.5em;
	}
}

@media screen and (max-width: 440px) {
	.contentBody .wp_tabs_panel h3,
	.contentBody .wp_tabs_panel .tabCatch {
		font-size: var(--font24);
	}
}

@media screen and (max-width: 440px) {
	.contentBody .wp_tabs_tab {
  	padding-inline: 1em;
	}
}

@media screen and (max-width: 388px) {
	.contentBody .wp_tabs_tab {
  	padding-inline: .75em;
	}
}

@media screen and (max-width: 360px) {
	.contentBody .wp_tabs_tab {
  	padding-inline: .35em;
	}
}

/* ボックスコンテナ　採用情報など */
.contentBody .boxContainer {
	margin-top: 120px;
}

.contentBody .boxContainer .boxInner {
  max-width: 75em;
  margin: 0 auto;
	display: flex;
  flex-direction: column;
  gap: 80px;
  position: relative;
	z-index: 1;
	overflow: visible;
}

.contentBody .boxContainer .boxInner::before {
	content: "";
  position: absolute;
	top: -64px;
	bottom: -48px;
  left: 5%;
  right: 5%;
  background: var(--mistBlue);
  z-index: -1;
}

.contentBody .boxContainer .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

.contentBody .boxContainer .box.box_top .text {
	margin-left: 18%;
}

.contentBody .boxContainer .box.box_bottom .text {
	margin-right: 18%;
}

.contentBody .boxContainer .image img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 1272px) {
	.contentBody .boxContainer .boxInner::before {
		left: 24px;
	  right: 24px;
	}
}

@media screen and (max-width: 767px) {
	.contentBody .boxContainer .boxInner::before {
		left: var(--spMargin);
	  right: var(--spMargin);
	}

	.contentBody .boxContainer .box {
	  grid-template-columns: 1fr;
	}

	.contentBody .boxContainer .box.box_bottom .text {
		order: 1;
	}

	.contentBody .boxContainer .box.box_bottom .image {
		order: 2;
	}

	.contentBody .boxContainer .box.box_top .text,
	.contentBody .boxContainer .box.box_bottom .text {
		margin: 0 auto;
    padding: 0 calc(var(--spMargin) + 16px);
	}
}


/* Form Control
================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	max-width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--mainBlue);
	border-radius: 4px;
	background-color: var(--white);
	font-size: var(--font18);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
	width: 100%;
	max-width: 600px;
}

textarea {
	width: 100%;
  max-width: 100%;
	height: 10em;
}

input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
}

input[type="radio"] + span,
input[type="checkbox"] + span {
	display: inline-block;
	padding-left: 30px;
	font-size: var(--font18);
	position: relative;
	cursor: pointer;
}

input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
	content: '';
	position: absolute;
	top: calc(1em - 10px);
	left: 0px;
	height: 20px;
	width: 20px;
	border: 1px solid var(--mainBlue);
	background-color: var(--white);
}

input[type="radio"] + span::before {
	border-radius: 50%;
}

input[type="checkbox"] + span::before {
	border-radius: 4px;
}

input[type="radio"] + span::after,
input[type="checkbox"] + span::after {
	content: '';
	position: absolute;
	top: 1em;
	left: 10px;
	border: 0;
	transition: .1s;
}

input[type="radio"] + span::after {
	border-radius: 50%;
}

input[type="checkbox"] + span::after {
	height: 0;
	width: 0;
	transform: rotate(-45deg);
}

input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before {
	border-color: var(--mainBlue);
}

input[type="radio"]:checked + span::after {
	top: calc(1em - 6px);
	left: 4px;
	border: 6px solid var(--mainBlue);
}

input[type="checkbox"]:checked + span::after {
	top: calc(1em - 5px);
	left: 4.5px;
	height: 8px;
	width: 12px;
	border: 3px solid var(--mainBlue);
	border-top: 0;
	border-right: 0;
}

input[type="radio"]:focus-visible + span::before,
input[type="checkbox"]:focus-visible + span::before {
	border: 2px solid var(--borderFocus);
}

span:has(select) {
	display: inline-block;
	max-width: 100%;
	position: relative;
}

span:has(select)::after {
	content: '';
	position: absolute;
	top: calc(1em + 10px);
	right: 16px;
	width: 12px;
	height: 12px;
	border: 6px solid transparent;
	border-top-color: var(--mainBlue);
	z-index: 1;
  pointer-events: none;
}

@media (-ms-high-contrast:active) {
	span:has(select)::after {
		content: '\25BC';
		transform: scaleY(.625);
		top: calc(50% - .625em);
		border: 0;
	}
}

span:has(select) select {
	padding-right: 42px;
	position: relative;
	z-index: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
	background-color: #ededed;
	color: #6a6a6a;
}

input[type="radio"]:disabled + sapn::before,
input[type="checkbox"]:disabled + span::before {
	background-color: #ededed;
}

input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span {
	cursor: default;
}

::placeholder {
	color: #767676;
}

:disabled::placeholder,
.error::placeholder {
	color: #6a6a6a;
}

input.error,
select.error,
textarea.error,
input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid  {
	border-color: #c00;
	background-color: #fbe7e8;
}

@media (-ms-high-contrast:active) {
	input.error,
	select.error,
	textarea.error,
	input.wpcf7-not-valid,
	select.wpcf7-not-valid,
	textarea.wpcf7-not-valid {
		border-width: 2px;
	}
}

.error input[type="radio"] + span::before,
.error input[type="checkbox"] + span::before,
.wpcf7-not-valid input[type="radio"] + span::before,
.wpcf7-not-valid input[type="checkbox"] + span::before {
	border-color: #c00;
}

input[type="submit"],
input[type="button"] {
	max-width: 100%;
	padding: 8px 48px;
	border: 1px solid var(--mainBlue);
	background-color: var(--mainBlue);
	color: var(--white);
	font-size: var(--font18);
}

/* Contact Form
================================================== */
.contactForm {
	margin-top: 80px;
	padding: 80px 0;
	background-color: var(--paleBlue);
}

.contactForm .wp-block-group__inner-container {
	width: 100%;
  max-width: 65em;
  margin: 0 auto;
}

.contactForm .to_confirm button {
  width: 100%;
	max-width: 100%;
	margin-top: 64px;
}

.contactForm dl {
	margin-bottom: 0;
}

.contactForm dl > div {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.contactForm dt {
	margin-top: 0;
	padding-top: 16px;
}

.contactForm dd {
	padding: 8px 0 16px;
}

.contactForm .required {
	margin-left: .75em;
	padding: 2px 8px;
	border-radius: 5px;
	background-color: var(--white);
	font-size: var(--font12);
	color: var(--textAlert);
}

.contactForm fieldset {
	padding-top: 16px;
	border-top: 2px solid var(--borderGray);
}

.contactForm fieldset:not(:last-of-type) {
	margin-bottom: 36px;
}

.contactForm legend {
	padding-right: 12px;
	font-size: var(--font18);
	font-weight: 500;
}

.contactForm fieldset dl {
	border-bottom: 0;
}

.contactForm fieldset dt:first-child {
	border-top: 0;
}

.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm input[type="tel"],
.contactForm input[type="number"],
.contactForm input[type="password"],
.contactForm select,
.contactForm textarea {
	margin-bottom: .25em;
}

.contactForm dt em {
	color: var(--textAlert);
	font-size: var(--font14);
	font-style: normal;
}

.contactForm dt .any {
	font-size: var(--font14);
}

.contactForm dd label {
	display: inline-block;
}

.contactForm .comment {
	display: block;
	margin-bottom: .25em;
	color: var(--textGray);
}

#form_select option[value="-"]{
  font-weight: bold;
  background:#f3f3f3;
}

.wpcf7-radio,
.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 36px;
	margin-top: 9px;
}

.wpcf7-list-item {
	margin-left: 0;
}

p:has(.wpcf7-acceptance) {
	margin-bottom: 40px;
	padding-top: 36px;
}

.contactForm .submit {
	margin-top: 36px;
	text-align: center;
}

.contactForm .submit input {
	border-radius: 9999px;
}

.wpcf7 .wpcf7-submit:disabled {
	border-color: #767676;
	background-color: #767676;
}

.wpcf7 .submit .has-spinner {
	margin-left: 48px;
}

.wpcf7-spinner {
	margin-right: 0;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0;
}

.wpcf7 form.invalid .wpcf7-response-output {
	border: 2px solid #c00;
	color: #c00;
}

.wpcf7 form.validating .wpcf7-response-output {
	display: none;
}

.wpcf7-turnstile {
	margin-top: 52px;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.contactForm dl > div {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.wpcf7-radio,
	.wpcf7-checkbox {
		margin-top: 0;
	}
}


/* CommonFooter
================================================== */
#trial-fishing #commonFooter .footer_cta {
	display: none;
}

#commonFooter .footer_cta {
	position: relative;
}

#commonFooter .footer_cta {
	padding: 80px 0;
	background: url(images/bg_footer.jpg) no-repeat center;
	background-size: cover;
}

#commonFooter .footer_cta p {
	font-weight: 600;
	text-align: center;
	text-shadow: 0px 1px 4px rgba(255,255,255,.8);
}

#commonFooter .footer_cta .ctaTitle {
	margin-bottom: 32px;
	font-size: var(--font40);
}

#commonFooter .footer_cta .ctaText {
	margin-bottom: 48px;
	font-size: var(--font18);
}

#commonFooter .footer_cta .btn {
	text-align: center;
}

#commonFooter .footer_navi {
	padding: 64px 0;
	background-color: var(--mainBlue);
	color: var(--white);
}

#commonFooter .footer_navi .inner {
	display: grid;
	grid-template-columns: 1fr 44%;
	justify-content: space-between;
	gap: 40px;
}

#commonFooter .footer_company a {
	display: block;
}

#commonFooter .footer_company p {
	max-width: 320px;
  margin-top: 30px;
	font-size: var(--font14);
}

#commonFooter .footer_company p.footTel {
	margin-top: 10px;
}

#commonFooter .footerNav ul {
	column-count: 2;
}

#commonFooter .footerNav ul li {
	margin-bottom: 12px;
  break-inside: avoid;
}

#commonFooter .footerNav ul li a {
	padding: 4px 0;
	color: var(--white);
	font-weight: 500;
	text-decoration: none;
	letter-spacing: .04em;
}

#commonFooter .footerNav ul li a:hover {
	text-decoration: underline;
}

#commonFooter .snsMenu {
	width: 256px;
  margin: 8px 0 16px auto;
}

#commonFooter #copyright {
	width: 256px;
  margin: 0 0 0 auto;
}

@media screen and (max-width: 1240px) {
	#commonFooter #copyright,
	#commonFooter .snsMenu {
		width: 170px;
	}
}

@media screen and (max-width: 860px) {
	#commonFooter .footer_navi .inner {
		grid-template-columns: 1fr 56%;
	}
}

@media screen and (max-width: 767px) {
	#commonFooter .footer_cta {
		padding: 32px 0;
	}

	#commonFooter .footer_cta .ctaTitle {
		font-size: clamp(24px, 3.58vw, 40px);
	}

	#commonFooter .footer_cta .ctaText {
		font-size: var(--font16);
	}

	#commonFooter .footer_navi {
		padding: 32px 0;
	}

	#commonFooter .footer_navi .inner {
		display: flex;
		flex-direction: column;
	}

	#commonFooter .footer_navigation,
	#commonFooter .footer_company .image {
		text-align: center;
	}

	#commonFooter .footer_company .image img {
		width: 120px;
		height: auto;
	}

	#commonFooter .footer_company p {
		max-width: 100%;
	}

	#commonFooter .footer_company p.footTel {
		text-align: center;
	}

	#commonFooter .snsMenu {
		width: 100%;
	  margin: 8px auto 16px;
	}

	#commonFooter #copyright {
		width: 100%;
	  margin: 0 auto;
	}
}

@media screen and (max-width: 479px) {
	#commonFooter .footer_cta .ctaText {
		text-align: left;
	}
}


/* Scroll top
================================================== */
#scrollTop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	margin-bottom: 0;
	display: none;
}

#scrollTop a {
	display: block;
	transition: opacity .3s.
}

#scrollTop a:hover {
	opacity: .7
}

#scrollTop a img {
	border: 1px solid var(--white);
	border-radius: 40px;
}

@media screen and (max-width: 1200px) {
	#scrollTop a img {
		width: 88px;
		height: auto;
		border-radius: 32px;
	}
}

@media screen and (max-width: 767px) {
	#scrollTop {
		right: 3.75%;
	}

	#scrollTop a img {
		width: 64px;
		border-radius: 24px;
	}
}


/* Animation
================================================== */
/* for トップキービジュアル */
.js_fv .kv_image {
  overflow: hidden;
}

.js_fv .kv_image img {
  transform: scale(1.12);
  transition: transform 3s ease-out;
}

.js_fv.is_active .kv_image img {
  transform: scale(1);
}

.js_fv h1, /* 下層ページトップタイトル */
.js_fv .en, /* 下層ページトップタイトルen */
.js_fv .catch_main,
.js_fv .catch_sub {
  opacity: 0;
  transform: translateY(10px);
}

.js_fv h1, /* 下層ページトップタイトル */
.js_fv .catch_main {
  transition:
    opacity .1s ease,
    transform 1s ease;
}

.js_fv .en, /* 下層ページトップタイトルen */
.js_fv .catch_sub {
  transition:
    opacity 1s ease .3s,
    transform 1s ease .3s;
}

.js_fv.is_active h1, /* 下層ページトップタイトル */
.js_fv.is_active .en, /* 下層ページトップタイトルen */
.js_fv.is_active .catch_main,
.js_fv.is_active .catch_sub {
  opacity: 1;
  transform: translateY(0);
}

/* fot FadeUP */
.js_fadeup {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .1s ease,
    transform .2s ease;
}

.js_fadeup.is_show {
  opacity: 1;
  transform: translateY(0);
}

#homeTrial .image {
  transition-delay: .3s;
}

/* fot Stagger */
.js_stagger_item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.js_stagger_item.is_show {
  opacity: 1;
  transform: translateY(0);
}


/* Adminbar
================================================== */
#wpadminbar {
	height: 6px !important;
	overflow: hidden;
	opacity: 0.1;
	transition: all 0.3s ease-in-out;
}

#wpadminbar:hover {
	height: auto !important;
	filter: alpha(opacity=100);
	opacity: 1;
}


/* Clearfix
================================================== */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}