/*----------------------------------------------------
reset
----------------------------------------------------*/
*{
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	-webkit-text-size-adjust: 100%;
}
ol, ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
}
img {
	vertical-align: bottom;
	width:100%;
	height: auto;
}
h1 {
	font-size: 1rem;
	margin-block-start: 0;
	margin-block-end: 0;
}
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
a {
	color: #fff;
	text-decoration: none;
}
a:link,
a:visited,
a:hover,
a:active{
	color: #004DA2;
}
a:focus {
	outline: none;
}

/*----------------------------------------------------
共通css
----------------------------------------------------*/
/* web fonts */
@font-face {
	font-family: "Oswald";
	src: url("/lib/font/Oswald-Medium.woff") format("woff");
	font-weight: normal;
}
@font-face {
	font-family: "Oswald";
	src: url("/lib/font/Oswald-Bold.woff") format("woff");
	font-weight: bold;
}
@font-face {
	font-family: "jost";
	src: url("/lib/en/font/Jost-Medium.woff") format("woff");
	font-weight: normal;
}
@font-face {
	font-family: "roboto";
	src: url("/lib/en/font/Roboto-Medium.woff") format("woff");
	font-weight: normal;
}
@font-face {
	font-family: "roboto";
	src: url("/lib/en/font/Roboto-Bold.woff") format("woff");
	font-weight: bold;
}

:root {
	--firstTtlFontSize: 8.3rem;
	--colorBlack: #222222;
	--mainColorBlue: #004DA2;
	--mainColorWhite: #fff;
	--opacityTransition: opacity 1s ease-in-out;
	--menuZindex: 10;
	--modalZindex: 11;
	--mostBigZindex: 100;
	--fontOswald: "Oswald", "roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--fontRoboto: "roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--fonJost: "jost", "roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--spFirstTtlFontSize: 3rem;

}
body {
	width: 100vw;
	height: 100vh;
	min-height: 800px;
	background-color: #fff;
	line-height: 1;
	color:var(--mainColorBlue);
	font-family: var(--fontRoboto);
	overflow:hidden;
}

#importantTheme .fp-scroller {
	height:100svh;
}
/*----------------------------------------------------
固定要素
----------------------------------------------------*/
nav{
	position: fixed;
	z-index: var(--menuZindex);
	transform: translateY(-150%);
	transition: transform 1s ease-in-out;
}
nav.show{
	transform: translateY(0);
}
nav ul{
	display: flex;
	font-size: 1.4rem;
}
nav ul li{
	position: relative;
	margin: 0 1rem;
	display: flex;
    align-items: center;
    text-align: center;
}

/*ナビのアンダーバー*/
nav a{
	font-weight: bold;
	padding: 0.3rem 0;
	display: flex;
}
nav a span{
	line-height: 1.2;
}

header{
	position: fixed;
	left: 0;
	top: 16px;
	z-index: var(--menuZindex);
	transform: translateY(-100%);
	transition: transform 1s ease-in-out;
}
header.show{
	transform: translateY(0);
}
header a{
	color: var(--mainColorBlue);
	display: flex;
	padding: 2rem;
}
header a svg{
	fill: var(--mainColorBlue);
	transition: all 1s ease-in-out;
}
header.white a svg{
	fill: #fff;
	transition: all 1s ease-in-out;
}
#lang{
	position: fixed;
	z-index: var(--menuZindex);
    display: flex;
    align-items: center;
    justify-content: center;
	transform: translateY(-400%);
	transition: transform 1s ease-in-out;
}
#lang.show{
	transform: translateY(0);
}
#lang1stV{
	position: fixed;
	z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lang .border,
#lang1stV .border{
    background-color: var(--mainColorBlue);
    display: inline-block;
	width: 2px;
	transition: background-color 1s ease-in-out;
}
#lang.white .border,
#lang1stV.white .border{
	background-color: #fff;
}
#lang a,
#lang1stV a{
	padding: 0 0.5rem;
	pointer-events: auto;
}
#lang a span,
#lang1stV a span{
	display: inline-block;
	font-weight: bold;
	color: #999;
}
#lang a.on,
#lang1stV a.on{
	pointer-events: none;
}
#lang a.on span,
#lang1stV a.on span{
	color: var(--mainColorBlue);
	transition: color 1s ease-in-out;
}
#lang.white a.on span,
#lang1stV.white a.on span{
	color: #fff;
}

#fullpage {
	transition-delay: 0.75s !important;
}
/*----------------------------------------------------
冒頭アニメーション
----------------------------------------------------*/
#firstAnimeSec{
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 100;
}
#firstAnimeSec .scene{
	position: fixed;
	display: flex;
	width: 100%;
	height: 100%;
}
#firstAnimeSec .bgArea{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
#firstAnimeSec .bgArea .bg{
	display: block;
	opacity: 1;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

#firstAnimeSec .bgArea .bg.bgScene1{
	background-image: url(/img/op_2.jpg);
	opacity: 0;
}
#firstAnimeSec .bgArea .bg.bgScene2{
	background-image: url(/img/op_3.jpg);
	opacity: 0;
}
#firstAnimeSec .bgArea .bg.bgScene3{
	background-image: url(/img/op_4.jpg);
	opacity: 0;
}
#firstAnimeSec .bgArea .bg.bgScene4{
	background-image: url(/img/op_5.jpg);
	opacity: 0;
}
#firstAnimeSec .bgArea .bg.bgShow{
	opacity: 1;
	transition: var(--opacityTransition);
	animation-duration: 5s;
	animation-name: scaleBg;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	z-index: 1;
}
@keyframes scaleBg {
	0% {
		scale: 1;
	}
	100% {
		scale: 1.1;
	}
}

#firstAnimeSec .contents{
	position: relative;
	margin: auto;
	z-index: 1;
	opacity: 1;
	transition: opacity 1s ease-in-out 6.5s;
}
#firstAnimeSec.fadeOut .contents {
	opacity: 0;
	transition: opacity 1s ease-in-out 6.5s;
}


#firstAnimeSec .scaleArea{
	animation-duration: 20s;
	animation-name: sceneTxtScale;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	transition: color .5s ease-in-out ;
	transform-origin: center;
}
@keyframes sceneTxtScale {
	0% {
		scale: 0.5;
	}
	100% {
		scale: 1;
	}
}

#firstAnimeSec .firstTxtArea{
	display: none;
	position: relative;
	width: 100vw;
	height: 270px;
	font-size: var(--firstTtlFontSize);
}
#firstAnimeSec .firstTxtArea._scene1{
	display: block;
}

#firstAnimeSec .h1Area{
	position: absolute;
	top: 17%;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	display: flex;
	opacity: 0;
}
#firstAnimeSec .firstTxtArea._scene1 .h1Area{
	opacity: 1;
}
#firstAnimeSec .txtOcean{
	padding-right: 0.2em;
}

#firstAnimeSec .h1Area .h1{
	width: fit-content;
	display: flex;
	white-space: nowrap;
	color: var(--mainColorBlue);
	font-family: var(--fontOswald);
	font-weight: bold;
	transition: color ease-in-out .5s;
}

/* 副題 */
#firstAnimeSec .h2Area{
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
	display:block;
	text-align: center;
	color: #fff;
	font-size: 0.4em;
	opacity: 0;
	white-space: nowrap;
}
#firstAnimeSec .h2Area span{
	display: inline-block;
	white-space: nowrap;
    padding-left: 0;
	font-family: var(--fonJost);
}

/* カウントダウン */
#firstAnimeSec .switchNumArea{
	position: relative;
    width: 0.5em;
	overflow: hidden;
	height: 1.1em;
}
#firstAnimeSec #switchNum{
	position: absolute;
	top: 0;
	transform: translateY(-80%);
	transition: transform cubic-bezier(.93,0,1,.77) .5s, color ease-in-out .5s;
}
#firstAnimeSec #switchNum._num2{
	transform: translateY(-60%);
}
#firstAnimeSec #switchNum._num3{
	transform: translateY(-40%);
}
#firstAnimeSec #switchNum._num4{
	transform: translateY(-20%);
}
#firstAnimeSec #switchNum._num5{
	transform: translateY(0);
}

#firstAnimeSec .firstTxtArea.nextShow{
	display: block;
}
#firstAnimeSec .firstTxtArea.sceneEnd{
	display: none;
}
#firstAnimeSec .firstTxtArea.nextShow,
#firstAnimeSec .firstTxtArea.sceneChange{
	animation-duration: .5s;
	animation-delay: 3s;
	animation-name: fadeOut;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#firstAnimeSec .firstTxtArea.nextShow .h1Area{
	animation-duration: .5s;
	animation-name: slideY, opacity;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
#firstAnimeSec .firstTxtArea.sceneChange .h1Area{
	animation-duration: .5s;
	animation-name: slideY;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes slideY {
	0% {
		top: 17%;
	}
	100% {
		top: 0;
	}
}

#firstAnimeSec .firstTxtArea.nextShow .h2Area,
#firstAnimeSec .firstTxtArea.sceneChange .h2Area{
	animation-duration: .5s;
	animation-delay: .2s;
	animation-name: opacity;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#firstAnimeSec .firstTxtArea.nextShow .h2Area span,
#firstAnimeSec .firstTxtArea.sceneChange .h2Area span{
	display: inline-block;
}
@keyframes txtWide {
	0% {
		letter-spacing: 0;
		padding-left: 0;
	}
	100% {
		letter-spacing: 0.4em;
		padding-left: 0.4em;
	}
}

#firstAnimeSec .readTxtArea {
	position: fixed;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 99999;
	opacity:0;
	background: #fff;
	font-family: var(--fonJost);
}
#firstAnimeSec .readTxtArea.on {
	animation: fadeIn 3000ms forwards;
}
#firstAnimeSec .readTxtArea.on p {
	position: absolute;
	width: fit-content;
	height: fit-content;
	inset: 0;
	margin: auto;
	color: #004DA2;
	opacity: 0;
	text-align: center;
	line-height: 130%;
	letter-spacing: 0.3rem;
	font-family: var(--fonJost);
	font-size: 5vw;
	animation: fadeInOut 5000ms 3000ms forwards;
}

@keyframes fadeInOut{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


/* スキップボタン */
#firstAnimeSec button.skipBtn{
	font-size: 1.3rem;
	color: var(--mainColorBlue);
	font-weight: bold;
	position: fixed;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	z-index: 1;
	padding: 0.5rem 1rem;
	transition: color 1s ease-in-out;

}
#firstAnimeSec button.skipBtn::after{
	opacity: 1;
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url(/img/arrow_blue.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: -0.3em;
	top: 0;
	bottom: 0;
	margin: auto;
}
#firstAnimeSec button.skipBtn.colorChange::after{
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

#firstAnimeSec button.skipBtn::before{
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-image: url(/img/arrow_white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: -0.3em;
	top: 0;
	bottom: 0;
	margin: auto;
}
/*----------------------------------------------------
.bgMist
----------------------------------------------------*/
.bgMist{
	position: fixed;
	z-index: 99999;
	inset: 0;
	display:none;
}
.bgMist .left,
.bgMist .right{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100svh;
	margin: auto;
}
.bgMist .left img,
.bgMist .right img{
	object-fit: cover;
	object-position: center center;
	height: 100svh;
	width: 100%;
}
.bgMist.show .left{
	animation: mistLeft 2500ms 1000ms forwards;
}
.bgMist.show .right{
	animation: mistRight 2500ms 1000ms forwards;
}
@keyframes mistLeft {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes mistRight {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*----------------------------------------------------
.mainBgArea
----------------------------------------------------*/

/*TOP背景切り替え*/
.mainbg {
	position: relative;
	z-index: -1;
}
.mainbg img{
	display: block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center center;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 1;
}
.mainbg .firstOnlyBg img{
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.mainbg .firstOnlyBg.show .right{
	animation: right 25s 5s forwards;
}
.mainbg .firstOnlyBg.show .top{
	animation: top 25s 10s forwards;
}
.mainbg .firstOnlyBg.show .bottom{
	animation: bottom 25s 15s forwards;
}
.mainbg .firstOnlyBg.show .left{
	animation: left 25s 20s forwards;
}
@keyframes right {
  0%{
		opacity: 0;
		transform: translateX(0%);
		scale:1.1;
	}
  5%{
		opacity: 1;
		transform: translateX(-1%);
		scale:1.1;
	}
  25%{
		opacity: 1;
		transform: translateX(-2%);
		scale:1.1;
	}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes top {
  0%{
		opacity: 0;
		transform: translateY(-1%);
		scale:1.1;
	}
  5%{
		opacity: 1;
		transform: translateY(0%);
		scale:1.1;
	}
  25%{
		opacity: 1;
		transform: translateY(1%);
		scale:1.1;
	}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes bottom {
  0%{
		opacity: 0;
		transform: translateY(0%);
		scale:1.1;
	}
  5%{
		opacity: 1;
		transform: translateY(-1%);
		scale:1.1;
	}
  25%{
		opacity: 1;
		transform: translateY(-2%);
		scale:1.1;
	}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes left {
  0%{
		opacity: 0;
		transform: translateX(-1%) scale(1.1);
	}
  5%{
		opacity: 1;
		transform: translateX(0%) scale(1.1);
	}
  25%{
		opacity: 1;
		transform: translateX(1%) scale(1.1);
	}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

.blurOverlay {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.4);
	position: fixed;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity .5s ease-in-out;
	z-index: 10;
}
.blurOverlay.on {
	opacity: 1;
	transition: opacity .5s ease-in-out;
}

.section {
	width: 100%;
	height: 100svh;
}

/*----------------------------------------------------
#top
----------------------------------------------------*/
#top{
	position: relative;
	width: 100%;
	height: 100svh;
}

.topH1Area{
	position: absolute;
	width: fit-content;
	height: fit-content;
	inset: 0;
	color: var(--mainColorWhite);
	display: flex;
	margin: auto;
	flex-direction: column;
	align-items: center;
	opacity: 1;
	top: -10%;
}
.topH1Area h1{
	font-size: 12.5vw;
	margin-bottom: 1vw;
	filter: drop-shadow(0 0 25px rgba(0,77,162,0.8));
	font-family: var(--fontOswald);
}
.topH1Area span{
    font-size: 3vw;
    letter-spacing: 0.2vw;
	filter: drop-shadow(0 0 10px rgba(0,77,162,1));
	font-family: var(--fonJost);
	text-align: center;
}

#top .contactBtn{
	opacity: 0;
	pointer-events: none;
	background-color: var(--mainColorBlue);
	border-radius: 300px;
	display: flex;
	align-items: center;
}
#top .contactBtn::after{
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-image: url(/img/arrow_white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
}
#top .contactBtn.show{
	pointer-events: auto;
	opacity: 1;
	animation-name: opacity;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
#top .contactBtn.show span{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	font-family: var(--fontRoboto);
}

@media (any-hover: hover) {
	#top .contactBtn:hover{
		background-color: #fff;
	}
	#top .contactBtn:hover span{
		color: var(--mainColorBlue);
	}
	#top .contactBtn:hover::after{
		background-image: url(/img/arrow_blue.svg);
	}
}

.scrollBtn{
	opacity: 0;
	font-family: var(--fontRoboto);
	color: var(--mainColorWhite);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	position:relative;
	width:fit-content;
	display: block;
}
.scrollBtn::before{
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-image: url(/img/arrow_white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(90deg);
	position: absolute;
	top: 20px;
	margin: auto;
	animation: updown 2s ease-in-out infinite;
	left: 0;
	right: 0;
}
@keyframes updown {
	0%{
		top: 20px;
	}
	50%{
		top: 30px;
	}
	100%{
		top: 20px;
	}
}
.scrollBtn p{
	font-size: 1rem;
	font-weight: bold;
	color: var(--mainColorWhite);
}

.scrollBtn.show{
	opacity: 1;
	transition: var(--opacityTransition);
}

/*----------------------------------------------------
#about
----------------------------------------------------*/
#about{
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: rgba(34, 34, 34, 0.5);*/
	z-index: var(--modalZindex);
	color: #fff;
	font-family: var(--fontRoboto);
}
#about .aboutTop .scrollBtn p{
	font-size:1rem;
	text-align: center;
}
#about .sliderWrap li:last-child .scrollBtn p{
	font-size: 1rem;
	text-align: center;
}
#about .sliderWrap li:last-child .scrollBtn{
	bottom: -15vh;
}

#about svg {
	overflow: visible;
}
	/*スライダ写真*/
	#about #aboutBgSlide {
		position: absolute;
		left: 0;
		/*アニメーションの指定*/
		transition:all 0.5s;
		transition-timing-function:ease;
		transition-delay:0.0s;
	}
	#about #aboutBgSlide.aboutSlideWrap1 {
		left: 0vw;
	}
	#about #aboutBgSlide.aboutSlideWrap2 {
		left: -100vw;
	}
	#about #aboutBgSlide.aboutSlideWrap3 {
		left: -200vw;
	}
	#about #aboutBgSlide.aboutSlideWrap4 {
		left: -300vw;
	}
	#about #aboutBgSlide.aboutSlideWrap5 {
		left: -400vw;
	}
/* ボタン */
#about button.blueBtn{
	position: relative;
	height: auto;
	font-size: 1.5rem;
	background-color: var(--mainColorBlue);
	color: #FFF;
	font-weight: bold;
	margin: auto;
	padding: 1rem 8rem;
	border-radius: 100vh;
	text-align: center;
}
#about button.blueBtn::after{
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-image: url(/img/arrow_white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
}
@media (any-hover: hover) {
	#about button.blueBtn:hover{
		background-color: #fff;
		color: var(--mainColorBlue);
	}
	#about button.blueBtn:hover::after{
		background-image: url(/img/arrow_blue.svg);
	}

}

/* ocean 5.0とはTOP */
#about .aboutTop {
	width:100vw;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	padding: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*アニメーションの指定*/
	transition:opacity 1s;
	transition-delay: 0.5s;
	opacity: 0;
}
#about.show .aboutTop {
	opacity: 1;
}
#about .aboutTop div.aboutBackColor {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.0);
	mix-blend-mode: multiply;
	z-index: -1;
	/*アニメーションの指定*/
	transition:all 0.5s;
}
#about.show .aboutTop div.aboutBackColor {
	background-color: rgba(0,0,0,0.7);
}
#about .aboutTop > div{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#about .aboutTop h3 {
	font-size: 3.5rem;
	margin-bottom: 2rem;
	text-align: center;
	font-weight: bold;
}
#about .aboutTop h3 span {
	font-size: 6.0rem;
	font-family: var(--fontOswald);
	font-weight: normal;
	margin-left: 0.5rem;
}
#about .aboutTop p {
	font-size: 1.5rem;
	margin-bottom: 4.0rem;
	line-height: 1.8;
	text-align: center;
}
#about .aboutSlide{
	width:100vw;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 100vw;
	margin: auto;
}
#about .aboutBgArea{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: #000;
}
#about .aboutBgArea::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(34, 34, 34, 0.2);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#about .aboutBgArea ul{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
}
#about .aboutBgArea ul li{
	margin: 0;
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	opacity: 0.6;
}
#about .aboutBgArea ul li img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
#about .nextBtn,
#about .backBtn{
	width: 20px;
	height: 40px;
	position: absolute;
	background-image: url(/img/about_arrow.svg);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	background-size: contain;
	z-index: 5;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
}
#about .backBtn{
	left: 2%;
	rotate: 180deg;
}
#about .nextBtn{
	right: 2%;
}
#about .satelliteArea {
	display: none;
	position: absolute;
	right: 25vh;
	bottom: 45vh;
	width: 10%;
}
#about .satelliteArea.on {
	display: block;
}
#about .satelliteImg{
	animation-name: satelliteMove;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	transform-origin: center;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
@keyframes satelliteMove{
	0%{
		transform: translate(0,0);
	}

	100%{
		transform: translate(100%,30%);
	}
}

#about .modalInner{
	position: absolute;
	margin: auto;
	inset: 0;
}
#about .contentsArea{
	position: absolute;
	margin: auto;
	inset: 0;
	padding: 60px;
	z-index: 2;
}

/* sliderWrap */
#about .sliderWrap {
	padding:11vh 0 0 0;
}
#about .sliderWrap ul {
	width: 100%;
	position:relative;
}
#about .sliderWrap li {
	width: 100%;
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#about .sliderWrap li h3{
	font-size: 7.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--fontOswald);
}
#about .sliderWrap li span{
	display: inline-block;
	font-size: 2.75rem;
	margin-bottom: 2rem;
	font-family: var(--fonJost);
	letter-spacing: 0.1em;;
}
#about .sliderWrap p{
	font-size: 1.5rem;
	margin-bottom: 1.0rem;
	line-height: 1.8;
	font-family: var(--fontRoboto);
}
#about .sliderWrap li p strong{
	font-size: 1.5em;
	font-family:var(--fontOswald);
}
#about .stepListArea{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	font-size: 1.5rem;
	width: 90%;
	justify-content: center;
	z-index: 2;
}
/*船*/
#about .waveWrap{
	position: relative;
	width: 100%;
	height: 77vh;
	height: 77svh;
	overflow: hidden;
}
#about .namisen{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/img/about_wave2.svg);
	background-repeat:repeat-x;
	background-size: 5%;
	background-position:left 0 bottom 0;
	animation-name:namiLoop;
	animation-duration:3s;
	animation-delay:0s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-direction:normal;
}
#about .floatItem {
position: absolute;
bottom: 0;
left: 60vw;
width: 100%;
height: 100%;
mask-image: url(/img/about_wave_mask.svg);
mask-repeat: repeat-x;
mask-position:left 0 bottom 0;
mask-size: 5%;
/* Chrome, Safari用 */
-webkit-mask-image: url(/img/about_wave_mask.svg);
-webkit-mask-repeat: repeat-x;
-webkit-mask-position:left 0 bottom 0;
-webkit-mask-size: 5%;
animation-name:maskLoop;
animation-duration:3s;
animation-delay:0s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:normal;
}
#about .floatItem img{
	width: 30%;
	position: absolute;
	bottom: 0;
	animation-name:funeLoop;
	animation-duration:3s;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-direction:normal;
}
#about .floatItem img.shipIcon3{
	bottom: -0.7rem;
}
@keyframes namiLoop {
    0% { background-position-x: 0%;}
	100% { background-position-x:5%;}
}
@keyframes maskLoop {
    0% { -webkit-mask-position:left 0 bottom 0;}
	100% { -webkit-mask-position:left 5% bottom 0 ;}
}
@keyframes funeLoop {
    0% { transform: translateY(1%);}
	50% {transform: translateY(5%);}
  100% { transform: translateY(1%);}
}
/* 魚の群れ */
#about .stepFish {
	width:100%;
	height:5vh;
	position: absolute;
	opacity: 0.5;
	bottom: 16vh;

}
#about .stepFish .fish1 {
	width:5%;
	position: absolute;
	left:12%;
	bottom:20%;
}
#about .stepFish .fish2 {
	width: 3%;
	position: absolute;
	left: 20%;
	bottom: -20%;
}
#about .stepFish .fish3 {
	width: 3%;
	position: absolute;
	left: 25%;
	bottom: 45%;
}
#about .stepFish .fish4 {
	width:5%;
	position: absolute;
	left:35%;
	bottom:0;
}
#about .stepFish .fish5 {
	width:3%;
	position: absolute;
	left:42%;
	bottom:50%;
}
#about .stepFish .fish6 {
	width:2%;
	position: absolute;
	left:45%;
	bottom:0;
}
#about .stepFish .fish7 {
	width:5%;
	position: absolute;
	right:40%;
	bottom:0;
}
#about .stepFish .fish8 {
	width:3%;
	position: absolute;
	right:35%;
	bottom:40%;
}
#about .stepFish .fish9 {
	width:2%;
	position: absolute;
	right:30%;
	bottom:0%;
}
#about .stepFish .fish10 {
	width:5%;
	position: absolute;
	right:20%;
	bottom:-20%;

}
#about .stepFish .fish11 {
	width:3%;
	position: absolute;
	right:12%;
	bottom:50%;

}
#about .stepFish .fish12 {
	width:2%;
	position: absolute;
	right:10%;
	bottom:0%;
}

/*年表*/
#about #oceanLine {
	position: relative;
	width: 100%;
	height: 15vh;
	height: 15svh;
	overflow: hidden;
}
#about #oceanLine .bar_line{
	position: absolute;
	bottom: 4rem;
	left: 0;
	width: 100%;
	height: 32px;
	background-image: url(/img/bar_line.svg);
	background-repeat:repeat-x;
	background-size: 100%;
	background-position:left 0 bottom 0;
	opacity: 0.5;
}
#about #oceanLine .bar_mask {
	position: absolute;
	bottom: 4rem;
	left: 0;
	width: 100%;
	height: 32px;
	mask-image: url(/img/bar_mask.svg);
	mask-repeat: repeat-x;
	mask-position:left 0 bottom 0;
	mask-size: 5%;
	/* Chrome, Safari用 */
	-webkit-mask-image: url(/img/bar_mask.svg);
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-position:left 0 bottom 0;
	-webkit-mask-size: 100%;
}

#about .stepList{
	display: flex;
	width: 123%;
	justify-content: space-between;
	position: absolute;
	bottom: 3vh;
	bottom: 3svh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
#about .stepList li{
	width:100%;
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	font-family: var(--fontOswald);
}
#about .stepList li button{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100%;
	position: absolute;
	bottom: 1.8rem;
}
#about .stepList .stepOcean{
	position: absolute;
	bottom: 4.5rem;
	white-space: nowrap;
	display: inline-block;
}
#about #oceanLine1 .stepOcean,
#about #oceanLine2 .stepOcean, 
#about #oceanLine3 .stepOcean, 
#about #oceanLine4 .stepOcean, 
#about #oceanLine5 .stepOcean {
	transform-origin: center;
	transition: all 0.6s 0.1s ease;
	transform: scale(1.0);
}
#about #oceanLine1.on .stepOcean,
#about #oceanLine2.on .stepOcean,
#about #oceanLine3.on .stepOcean,
#about #oceanLine4.on .stepOcean,
#about #oceanLine5.on .stepOcean {
	transform-origin: center;
	transition: all 0.6s 0.1s ease;
	transform: scale(1.3);
}
#about .stepList .era{
	position: absolute;
	bottom: 0;
	white-space: nowrap;
	display: inline-block;
	font-family: var(--fontOswald);
}
#about #oceanLine .line{
	position: absolute;
	top: 50%;
	width: 100%;
	background-color: #756485;
	/*height: 1px;
	background-color: #fff;*/
}
#about .stepListArea #line{
	width: 100%;
	height: 100%;
	content:"";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
#about .stepListArea #line span.ocean1,
#about .stepListArea #line span.ocean2,
#about .stepListArea #line span.ocean3,
#about .stepListArea #line span.ocean4,
#about .stepListArea #line span.ocean5 {
	width:100%;
	height:10vh;
	height:10svh;
	background-color: rgba(255, 255, 255, 1);
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
}
#about .stepListArea #line span.ocean1 {

	transform-origin: left;
	transition: all 0.6s 0.1s ease;
	transform: scaleX(0.018);
}
#about .stepListArea #line span.ocean2 {
	transform-origin: left;
	transition: all 0.6s 0.1s ease;
	transform: scaleX(0.263);
}
#about .stepListArea #line span.ocean3 {
	transform-origin: left;
	transition: all 0.6s 0.1s ease;
	transform: scaleX(0.509);
}
#about .stepListArea #line span.ocean4 {
	transform-origin: left;
	transition: all 0.6s 0.1s ease;
	transform: scaleX(0.755);
}
#about .stepListArea #line span.ocean5 {
	transform-origin: left;
	transition: all 0.6s 0.1s ease;
	transform: scaleX(1);
}
/*パラパラアニメ(ocean3.0と0.4)*/
#about .ocean3Animation {
	position:absolute;
	width:100%;
	max-width:440px;
	overflow: hidden;
	bottom:-4.3rem;
	animation-name:funeLoop;
	animation-duration:3s;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-direction:normal;
	}
#about .ocean4Animation {
	position:absolute;
	width:100%;
	max-width:150px;
	overflow: hidden;
	bottom:-10vh;
	bottom:-10svh;
	animation-name:funeLoop;
	animation-duration:3s;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-direction:normal;
	}
#about .ocean3Animation:after,
#about .ocean4Animation:after {
	content: "";
	display: block;
	padding-top: 100%;/*高さを確保*/
}
#about .ocean3Animation::before {
	content: '';
	animation: ocean3Animation_anime 3s steps(4) infinite; 
	position:absolute;
	bottom:0;
	left: 0;
	background-image: url("/img/ocean3anime.svg");
	display: inline-block;
	vertical-align:middle;
	width:80%;
	height:80%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*1コマ100% 4コマで400%*/
	}
#about .ocean4Animation::before {
	content: '';
	animation: ocean4Animation_anime 3s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("/img/ocean4anime.svg");
	display: inline-block;
	vertical-align:middle;
	width:70%;
	height:70%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*1コマ100% 4コマで400%*/
	}
@keyframes ocean3Animation_anime {
0% { 
	background-position:0; 
	}
100% { 
	background-position:133.33333%; 
	}
}
@keyframes ocean4Animation_anime {
0% { 
	background-position:0; 
	}
100% { 
	background-position:133.33333%; 
	}
}

/*----------------------------------------------------
#importantTheme
----------------------------------------------------*/

#importantTheme{
	position: relative;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 2;
	overflow:hidden;
}
#importantTheme .scrollBtn::before{
	background-image: url(/img/arrow_blue.svg);
}

#importantTheme .scrollBtn p{
	color: var(--mainColorBlue);
}

/*重要なテーマ背景1*/
#importantTheme .important_bg{
	position: absolute;
	width: 100%;
	top: 0;
}
#importantTheme .important_bg img{
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100vh;
}
#importantTheme .important_bg::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--mainColorBlue);
	mix-blend-mode: multiply;
}

/*重要なテーマリボルバー*/
#importantTheme #themeList{
	margin: auto;
	position: absolute;
	width: fit-content;
	height: fit-content;
	left: 0;
	right: 0;
	top: 33vh;
}
/*重要なテーマ文字部分*/
#importantTheme #themeList .themeH2{
	display: flex;
	flex-direction: column;
	text-align: center;
	font-family: var(--fontRoboto);
	font-weight: bold;
	font-size: 3rem;
	color: #fff;
	transition: opacity 1s ease-in-out;
	align-content: center;
	align-items: center;
	width: fit-content;
	margin: 0 auto 4rem;
	inset: 0;
	opacity:0;
	position: relative;
}
#importantTheme #themeList .themeH2.on{
	opacity: 1;
	transition: opacity 1000ms 2000ms;
}
#importantTheme #themeList .themeH2 span{
    font-size: 0.6em;
    display: inline-block;
    margin-bottom: 24px;
}
#importantTheme #themeItem{
	display: flex;
	justify-content: center;
	gap: 1rem;
	position: absolute;
	inset: 0;
	height: fit-content;
	z-index: 10;
	top: 47vh;
	opacity: 0;
	align-items: center;
}
#importantTheme #themeItem.on{
	opacity: 1;
	transition: opacity 1000ms;
}
#importantTheme #themeItem.btnList{
	top:13vh;
	transition: top 1000ms;
	scale: 0.9;
}
#importantTheme #themeItem.animate{
	animation-duration: 1s;
	animation-name: rotateScale;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes rotateScale {
	0% {
		scale: 1;
	}
	50% {
		scale: 0.7;
	}
	100% {
		scale: 1;
	}
}

#importantTheme #themeItem li {
	transform-origin: center;
	width: 18vh;
	height: 18vh;
	scale: 1;
}
#importantTheme #themeItem.btnList li {
	scale: 0.9;
	transition: scale 750ms;
}
#importantTheme #themeItem.btnList li.active {
	scale: 0.95;
	transition: scale 750ms;
}


/*リボルバー各項目*/
#importantTheme #themeItem li .itemWrap{
	opacity: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 200px;
	position: absolute;
	inset: 0;
	margin: auto;
	transform: rotateY(180deg);
	transition: transform 1s ease-in;
	z-index: 0;
}
#importantTheme #themeItem li .itemWrap.on{
	transform: rotateY(90deg);
	transition: transform .5s ease-in;
	opacity: 1;
}
#importantTheme #themeItem li .itemWrap.on.selfRotate{
	opacity: 1;
	transform: rotateY(0deg);
	transition: transform .7s ease-out;
	z-index: 1;
}
#importantTheme #themeItem.btnList li.active .itemWrap{
	background-color: #fff;
	color: var(--mainColorBlue);
	pointer-events: none;
	transition: all 750ms;
}
#importantTheme #themeItem.btnList li .itemWrap{
	background-color: var(--mainColorBlue);
	color: #fff;
	transition: all 750ms;
}

#importantTheme #themeItem li .itemWrap_B{
	opacity: 1;
	width: 100%;
	height: 100%;
	background-color: var(--mainColorBlue);
	border-radius: 200px;
	position: absolute;
	inset: 0;
	margin: auto;
	transform: rotateY(0deg);
	transition: transform 1s ease-in;
	z-index: 1;
}
#importantTheme #themeItem li .itemWrap_B.on{
	opacity: 1;
	transform: rotateY(90deg);
	transition: transform .5s ease-in .5s;
}
#importantTheme #themeItem li .itemWrap_B.on.selfRotate{
	opacity: 0;
	transform: rotateY(180deg);
	transition: transform 1s ease-out;
	z-index: 0;
}

#importantTheme #themeItem li .itemArea {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--fontRoboto);
	line-height: 1.3;
}
#importantTheme #themeItem li .itemWrap .itemArea span {
	color: #004da2;
	font-size: 18px;
	font-weight: bold;
	display: inline-flex;
}
#importantTheme #themeItem.btnList li .itemWrap .itemArea span {
	color: #fff;
	font-size: 16px;
}
#importantTheme #themeItem.btnList li.active .itemWrap .itemArea span {
	color: #004da2;
	font-size: 22px;
}
#importantTheme #themeItem li .itemWrap_B .itemArea span {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	display: inline-flex;
	text-align: center;
}

#importantTheme .importantContentsArea{
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 22vh);
	z-index: 9;

	background: linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.2)
		);

	-webkit-backdrop-filter: blur(5px); /* ぼかしエフェクト */
	backdrop-filter: blur(5px);
}

#importantTheme .innerSection {
	width: 100%;
	text-align: center;
	transition: opacity 1s ease-in-out;
	height: 100svh;
	position: absolute;
	top:100svh;
	transition: transform 1250ms ease-in-out;
}
#importantTheme .innerSection.prev {
	transform: translate(0, 0);
}
#importantTheme .innerSection.on {
	transform: translate(0, -100svh);
}
#importantTheme .innerSection.next {
	transform: translate(0, -200svh);
}
#importantTheme .innerSection.next.reset,
#importantTheme .innerSection.prev.reset {
	transition: unset;
}
#importantTheme .innerSection .firstAnimArea{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100svh;
}
#importantTheme .innerSection .contentsArea{
	position: absolute;
	width: 100%;
	height: 100svh;
	margin: auto;
	inset: 0;
	display:none;
}
#importantTheme .innerSection .contentsBg img{
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100vh;
}
#importantTheme .contents{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 22vh);
	display: none;
}

#importantTheme .contents h3{
	font-family: var(--fontRoboto);
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	position: absolute;
	margin: auto;
	top: 10vh;
	left: 0;
	right: 0;
	height: fit-content;
	z-index: 1;
}

#importantTheme .note{
	position: absolute;
	color: #fff;
	font-size: clamp(9px, 2.4vw, 12px);
	bottom: 3vh;
	right: 3vh;
}

#importantTheme .contentsInner {
	display: flex;
	position: absolute;
	inset: 0;
	top: 17vh;
	position: relative;
	pointer-events: none;
}
.contentsInner .elem{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}
.contentsInner span{
	font-family: var(--fontRoboto);
	display: inline-block;
	position: relative;
}
.contentsInner span.cap::after {
	content: '';
	width: 3em;
	height: 2px;
	background-color: #004DA2;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#importantTheme .themeTxtArea p{
    font-family: var(--fontRoboto);
	color: var(--colorBlack);
    font-size: 1.2rem;
    line-height: 1.5;
	text-align: left;
}
#importantTheme .innerSectionBtn{
	background-color: var(--mainColorBlue);
	border-radius: 300px;
	display: inline-block;
	line-height: normal;
	position: absolute;
	top: 57vh;
	left: 0;
	right: 0;
	width: fit-content;
	margin: auto;
}
#importantTheme .innerSectionBtn::after{
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-image: url(/img/arrow_white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
}
#importantTheme .innerSectionBtn span{
	font-family: var(--fontRoboto);
	color: #fff;
	display: inline-block;
	font-weight: bold;
}

@media (any-hover: hover) {
	#importantTheme .innerSectionBtn:hover::after{
		background-image: url(/img/arrow_blue.svg);
	}
	#importantTheme .innerSectionBtn:hover{
		background-color: #fff;
	}
	#importantTheme .innerSectionBtn:hover span{
		color: var(--mainColorBlue);
	}
}

#importantTheme .importantPopUp{
	pointer-events: none;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.7);
	font-family: var(--fontRoboto);
	z-index: 20;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
#importantTheme .importantPopUp.on{
	opacity: 1;
	pointer-events: auto;
}
#importantTheme .popUpContent{
	display: none;
}
#importantTheme .popUpContent.on{
	display: flex;
}

#importantTheme .importantPopUp h4{
	text-align: center;
	display: flex;
	flex-direction: column;
	font-weight: bold;
}

.importantPopUpInner{
	display: flex;
	justify-content: center;
}

.importantPopUp .clm{
    display: flex;
    flex-direction: column;
}
.importantPopUp .clm .imgArea{
    margin: 0 auto 2vh;
	width: 50%;
}
#importantTheme .importantPopUp p{
	font-family: var(--fontRoboto);
	color: var(--colorBlack);
	text-align: left;
	line-height: 1.5;
}

#importantTheme .importantPopUpCancelBtn{
	position: absolute;
	cursor: pointer;
	z-index: 10;
}
#importantTheme .importantPopUpCancelBtn::before,
#importantTheme .importantPopUpCancelBtn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--mainColorBlue);
}
#importantTheme .importantPopUpCancelBtn::before {
	transform: translate(-50%,-50%) rotate(45deg);
}

#importantTheme .importantPopUpCancelBtn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}

/* インジケーター */
#importantTheme #importantNavi{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 40svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 20px;
	z-index: 4;
	opacity: 0;
}
/* インジケーター */
#importantTheme #importantNavi.on{
	opacity: 1;
	animation-name: opacityFadeIn;
	animation-timing-function: linear;
	animation-duration: 1s;
}
@keyframes opacityFadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

#importantTheme #importantNavi li{
	background-color: rgba(0, 77, 162, 0.3);
	width: 20px;
	height: 20px;
	border-radius: 100px;
	transition: background-color 1s ease-in-out;
}
#importantTheme #importantNavi li.active{
	background-color: rgba(0, 77, 162, 1);
	transition: background-color 1s ease-in-out;
}

/*----------------------------------------------------
#reason
----------------------------------------------------*/
#reason{
	position: relative;
	width: 100%;
	height: 100svh;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	background-image: url(/img/bg_reason_1.jpg);
}
#reason::after{
	content:"";
	position: absolute;
	width: 100%;
	height: 100svh;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center;
	animation: changeBackground 15s infinite;
	z-index: 1;
}
@keyframes changeBackground {
	0% {
		background-image: url(/img/bg_reason_1.jpg);
	}
	33.33% {
		background-image: url(/img/bg_reason_2.jpg);
	}
	66.66% {
		background-image: url(/img/bg_reason_3.jpg);
	}
	100% {
		background-image: url(/img/bg_reason_1.jpg);
	}
}
#reason::before{
	content:"Why FURUNO?";
	font-size: 3rem;
	position: absolute;
	left: 0;
	right: 0;
	font-weight: bold;
	width: fit-content;
	height: fit-content;
	top: 21svh;
	margin: 0 auto;
	letter-spacing: 0.4rem;
	z-index: 3;
}

#reason .fp-scrollable{
	mask-image: linear-gradient(to bottom, transparent 27%, black 30%, black 80%, transparent 95%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 27%, black 30%, black 80%, transparent 95%);
	z-index: 2;
}
#reason .iScrollVerticalScrollbar{
	display: none;
}
#reason .readArea{
	width: 80%;
	margin: 35svh auto 50svh;
}
/* Chrome, Safari 対応 */
#reason .readArea::-webkit-scrollbar {
	display:none;
}
#reason p{
	font-family: var(--fontRoboto);
	color: var(--colorBlack);
	font-family: var(--fontRoboto);
	font-size: 1.5rem;
	line-height: 1.8;
	text-align: left;
	margin:0 0 2rem 0;
	font-weight: normal;
}
#reason p:last-child{
	margin-bottom: 0;
}


#reason .contactBtn{
	background-color: var(--mainColorBlue);
	border-radius: 300px;
	display: inline-block;
	line-height: normal;
}

#reason .contactBtn span{
	color: #fff;
	display: inline-block;
	font-weight: bold;
	font-family: var(--fontRoboto);
}

@media (any-hover: hover) {
	#reason .contactBtn:hover{
		background-color: #fff;
	}
	#reason .contactBtn:hover span{
		color: var(--mainColorBlue);
	}
}

/*----------------------------------------------------
#partner
----------------------------------------------------*/
#partner {
	z-index: 0;
}
#partner .partnerContentsBg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#partner .partnerContentsBg img{
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100vh;
	opacity: 0;
	/*アニメーションの指定*/
	animation-name: fadeIn;
	animation-duration:3s;
	animation-delay: 1.5s;
	animation-fill-mode:forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#partner .reasonInner {
margin: 0 auto;
}
#partner .partnerPart {
	display: flex;
	flex-direction: row;
	width: 100vw;
	height: 100vh;
	height: 100svh;
}

/* タイトル */
#partner .partnerPart .partnerTtl{
	width: 30%;
	height: 80vh;
	position: absolute;
	left: 0;
	bottom:2.75rem;
}
#partner .partnerPart .partnerTtl h2 {
	width: 100%;
	font-size: 2.5rem;
	position: absolute;
	top: 40%;
	left: 0;
	padding:0 0 0 2rem;
	text-align: left;
	font-weight:bold;
	transition:all 0.5s;
	transition-delay:0.0s;
	opacity: 0;
	letter-spacing: 0.2em;
}
#partner.show .partnerPart .partnerTtl h2 {
	opacity: 1;
}
/* 詳細 */
#partner .partnerPart .partnerWrap {
position: absolute;
bottom:2.75rem;
right: 0;
width: 70%;
height: 80vh;
}

#partner .partnerPart .partnerWrap .partnerBgColor {
	width: 0%;
	height: 100%;
	position: absolute;
	bottom:0;
	right:0;
	background-color: var(--mainColorBlue);
	mix-blend-mode: multiply;
	z-index: -1;
	/*アニメーションの指定*/
	transition:all 0.5s;
	transition-delay:0.5s;
	opacity: 0;
}
#partner.show .partnerPart .partnerWrap .partnerBgColor {
	/*アニメーションの指定*/
	width: 100%;
	opacity: 1;
}
#partner .partnerPart .partnerWrap .readArea {
	width: 100%;
	height: 80%;
	position: absolute;
	top: 0;
	left:0;
	z-index: 1;
	padding: 3rem;
}
#partner .partnerPart .partnerWrap .readArea p {
	color: #FFF;
	text-align: left;
	font-family: var(--fontRoboto);
	font-size: 1.2rem;
	line-height: 1.8;
	margin:0 0 1.5rem 0;
	/*アニメーションの指定*/
	transition:all 0.5s;
	transition-delay:1.0s;
	opacity: 0;
}
#partner.show .partnerPart .partnerWrap .readArea p {
	opacity: 1;
}

#partner .partnerBgGauss {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom:0;
	right:0;
	background-color:rgba(255,255,255,0.0);
	backdrop-filter: blur(0);
	z-index: -1;
	/*アニメーションの指定*/
	transition:all 0.5s;
	transition-delay:1.5s;
}
#partner.show .partnerBgGauss {
	background-color:rgba(255,255,255,0.2);
	backdrop-filter: blur(10px);
}
#partner .partnerPart .partnerWrap .partnerBtnBgColor {
	width: 0%;
	height: 20%;
	background-color: #FFF;
	position: absolute;
	bottom: -5px;
	right: 0;
	z-index: -1;
	/*アニメーションの指定*/
	transition:all 0.5s;
	transition-delay:0.5s;
	opacity: 0;
}
#partner.show .partnerPart .partnerWrap .partnerBtnBgColor {
	/*アニメーションの指定*/
	width: 100%;
	opacity: 1;
}

#partner .partnerPart .partnerWrap .contactBtn {
	display: flex;
	width: 100%;
	height: 20%;
	margin:0;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 3rem;
	color: var(--mainColorBlue);
	font-weight: bold;
	padding:3rem;
	text-align: left;
	align-items: center;
	justify-content: space-between;
	/*アニメーションの指定*/
	transition:all 0.5s;
	transition-delay:1.0s;
	opacity: 0;
}
#partner.show .partnerPart .partnerWrap .contactBtn {
	/*アニメーションの指定*/
	opacity: 1;
}
#partner .partnerPart .partnerWrap .contactBtn::after{
	content: "";
	position: absolute;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	background-image: url(/img/arrow_blue.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3rem 3rem;
}
#partner #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--mainColorBlue);
	padding: 1rem;


}
#partner #footer p {
	text-align: center;
	color: #fff;
	font-size: 0.625rem;
}

/*----------------------------------------------------
PC大
----------------------------------------------------*/

@media screen and (min-width:1300px){
	header a {
    padding: 2rem!important;
	}

	nav a {
    font-size: unset!important;
	}
    body #lang{
		right: 46rem !important;
		top: calc(16px + 1.9rem);
    }
	body #lang .border{
        height: 22px;
    }
	#lang1stV{
		right: 3rem !important;
	}
	#lang a span,
	#lang1stV a span{
        font-size: 22px !important;
    }

	#importantTheme #themeItem li {
		width: 18vh;
		height: 18vh;
	}
	#importantTheme #themeItem.btnList li {
		width: 14vh;
		height: 14vh;
	}
	#importantTheme #themeItem.btnList li.active {
		width: 18vh;
		height: 18vh;
	}
	#importantTheme #themeItem.btnList {
    scale: 1;
	}
	#reason .readArea{
		width: 53%!important;
	}

	#partner .partnerPart .partnerWrap .readArea p {
		font-size: 1.3rem;
	}
}

/*----------------------------------------------------
PC/TAB（横長）
----------------------------------------------------*/

@media screen and (orientation: landscape){

	#spMenuBtn{
		display: none;
	}
	.pcNone{
		display: none;
	}

	#firstAnimeSec .firstTxtArea.nextShow .h2Area span,
	#firstAnimeSec .firstTxtArea.sceneChange .h2Area span{
		animation-duration: 6s;
		animation-name: txtWide;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	header a {
    padding: 2vw;
	}

	nav {
		padding: 0.6rem 1rem;
		top: 16px;
		right: 10px;
		backdrop-filter: blur(5px);
		background: linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.8),
			rgba(255, 255, 255, 0.6)
			);
		border-radius: 100vmax;
		box-shadow: 0 0 8px rgba(0, 77, 186, 0.25);
	}

	nav a {
		font-size: 1.5vw;
	}


	/*ナビのアンダーバー*/
	#nav #navMenu .navItem a::after{
		opacity: 0;
		content: '';
		height: 2px;
		width: 100%;
		background-color: var(--mainColorBlue);
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 1s ease-in-out;
	}
	#nav #navMenu .navItem.active a::after{
		opacity: 1;
		transition: opacity 1s ease-in-out;
	}

	#lang{
        top: calc(16px + 1.5vw + 0.6rem);
		right: calc(7rem + 44vw + 10px);
	}
	#lang1stV {
		top: calc(16px + 1.5rem);
		right: 10px;
	}
	#lang .border,
	#lang1stV .border{
		height: 1.5vw;
	}
	#lang a span,
	#lang1stV a span{
		font-size: 1.5vw;
	}

	/*----------------------------------------------------
	#top
	----------------------------------------------------*/


	#top .contactBtn{
		position: absolute;
		bottom: 60px;
		right: 60px;
		padding: 1.2rem 8rem;
	}

	#top .contactBtn span{
		font-size: 1.5rem;
	}

	.scrollBtn{
		position: absolute;
		left: 0;
		right:0;
		margin: auto;
		bottom: 40px;
		font-size: 1rem;
		height: 50px;
		width: fit-content;
	}



	/*----------------------------------------------------
	#about
	----------------------------------------------------*/
	#about .sliderWrap li:last-child .scrollBtn{
		bottom: -12vh;
	}

	/*----------------------------------------------------
	#importantTheme
	----------------------------------------------------*/

	#importantTheme .contentsInner {
		align-items: flex-start;
		justify-content: center;
	}

	.contentsInner .elem{
		width: 45%;
		aspect-ratio: 4 / 3;
		padding: 3rem 4rem;
		max-height: 350px;
		max-width: 470px;
	}

	.contentsInner ._elem1{
		background-image: url(/img/theme_economy.svg);
		padding-right: 8rem;
		transform: translateX(3%);
	}
	.contentsInner ._elem2{
		background-image: url(/img/theme_society.svg);
		padding-left: 8rem;
		transform: translateX(-3%);
	}


	#importantTheme .contentsInner span{
		font-size: 1.4rem;
		text-align: center;
		padding-bottom: 20px;
		font-weight: bold;
	}

	.themeTxtArea {
		margin-top: 2rem;
	}

	#importantTheme .innerSectionBtn{
		padding: 1rem 4rem;
	}
	#importantTheme .innerSectionBtn span{
		font-size: 1.5rem;
	}


	#importantTheme .importantPopUp{
		width: 90%;
		max-width: 1400px;
		padding: 3vh 3vh 5vh;
		top: calc(14vh + 2rem);
		margin: auto;
		left: 0;
		right: 0;
	}

	#importantTheme .importantPopUp h4{
		font-size: 1.7rem;
		margin-bottom: 40px;
	}

	#importantTheme .popUpContent{
		justify-content: space-between;
	}

	.importantPopUpInner{
		justify-content: space-between;
	}

	.importantPopUp .clm {
		width: 48%;
	}


	#importantTheme .importantPopUp p {
		font-size: 1.3rem;
		text-align: left;
		width: 80%;
		margin: 0 auto;
	}


	#importantTheme .importantPopUpCancelBtn{
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
	}
	#importantTheme .importantPopUpCancelBtn::before,
	#importantTheme .importantPopUpCancelBtn::after {
		width: 3px; /* 棒の幅（太さ） */
		height: 30px; /* 棒の高さ */
	}
}


@media screen and (max-height:950px) and (orientation: landscape){
	.scrollBtn{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 15px;
		font-size: 1rem;
		height: 50px;
		width: fit-content;
	}
}
@media screen and (max-height:780px) and (orientation: landscape){
	/*----------------------------------------------------
	#about
	----------------------------------------------------*/
	#about .aboutTop h3 {
		font-size: 2.5rem;
		margin-bottom: 2rem;
		text-align: center;
		font-weight: bold;
	}
	#about .aboutTop h3 span {
		font-size: 5.0rem;
		margin-left: 0.5rem;
	}
	#about .aboutTop p {
		font-size: 1.2rem;
		margin-bottom: 3rem;
	}
	#about .sliderWrap li h3 {
		font-size: 5.5rem;
	}
	#about .sliderWrap li span {
		font-size: 2rem;
		margin-bottom: 1.5rem;
	}
	#about .sliderWrap p {
		font-size: 1.2rem;
	}
	#about .stepListArea {
		font-size: 1.2rem;
	}
	#about #oceanLine .bar_line {
		bottom: 3.5rem;
	}
	#about #oceanLine .bar_mask{
		bottom: 3.5rem;
	}
	#about .sliderWrap li:last-child .scrollBtn {
        bottom: -9vh;
    }
	#about .waveWrap {
		height: 72vh;
		height: 72svh;
	}
	#about .floatItem img {
		width: 22%;
	}
	#about .floatItem {
		left: 65vw;
	}
	#about .stepFish {
		bottom: 21vh;
	}

	/*----------------------------------------------------
	#importantTheme
	----------------------------------------------------*/
	#importantTheme #themeItem.btnList li.active .itemWrap .itemArea span {
		font-size: 16px;
	}
	#importantTheme .contents h3{
		font-size:1.5rem;
	}
	#importantTheme .note{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
	}
	.contentsInner .elem{
		width: calc(100vh - 43vh);
		aspect-ratio: 4 / 3;
		padding: 5vh;
		max-height: unset;
		max-width: 470px;
	}
	.contentsInner ._elem1{
		padding-right: 9vh;
	}
	.contentsInner ._elem2{
		padding-left: 10vh;
		padding-right: 4vh;
	}
	#importantTheme .contentsInner span {
		font-size: 3vh;
		padding-bottom: 3vh;
	}
	.themeTxtArea {
		margin-top: 3vh;
	}
	#importantTheme .themeTxtArea p {
    font-size: 2.8vh;
    line-height: 1.5;
	}
	#importantTheme .innerSectionBtn {
		padding: 2vh 3vh;
		top: 57.5vh;
		width: calc(100vh - 60vh);
	}
	#importantTheme .innerSectionBtn span {
		font-size: 2vh;
	}
	#importantTheme .innerSectionBtn::after {
		width: 3vh;
		height: 3vh;
	}
	#importantTheme .importantPopUp h4 {
		font-size: 3vh;
		margin-bottom: 5vh;
	}
	#importantTheme .importantPopUp p {
		font-size: 2.5vh;
	}
	#importantTheme #themeList {
		top: 30vh;
	}
	#importantTheme .importantPopUp {
		height: 53vh;
		top: calc(12vh + 2rem);
	}
	#importantTheme .importantPopUpCancelBtn {
		top: 3vh;
		right: 3vh;
		width: 5vh;
		height: 5vh;
	}
	#importantTheme .importantPopUpCancelBtn::before,
	#importantTheme .importantPopUpCancelBtn::after {
		width: 3px;
		height: 4vh;
	}

	/*----------------------------------------------------
	#reason
	----------------------------------------------------*/
	#reason p{
		font-size: 1.2rem;
	}

	#reason .fp-scrollable{
		mask-image: linear-gradient(to bottom, transparent 20%, black 23%, black 60%, transparent 70%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 23%, black 60%, transparent 70%);
	}

	/*----------------------------------------------------
	#partner
	----------------------------------------------------*/
	#partner .partnerPart .partnerWrap .readArea p {
		font-size: max(2.8vh, 18px);
	}

}


/*----------------------------------------------------
TB（縦長）
----------------------------------------------------*/

@media screen and (max-width:1280px) and (orientation: portrait){

	/*----------------------------------------------------
	固定要素
	----------------------------------------------------*/

	nav {
		padding: 0;
		top: 0;
		right: 0;
	}
	nav #spMenuBtn {
		position: absolute;
		right: 0;
		top: 0;
		width: 6vh;
		height: 6vh;
		background-color: var(--mainColorBlue);
		z-index: var(--menuZindex);
		transform: translateY(-100%);
		transition: transform .5s cubic-bezier(.02,.64,.4,.99);
	}
	nav.show #spMenuBtn{
		transform: translateY(0);
	}

	#spMenuBtn span {
		position: absolute;
		right: 1.5vh;
		top: 0;
		z-index: 1;
		border-top: 2px solid #FFF;
		width: 3vh;
		transform-origin: center;
		transition: all .5s cubic-bezier(0,.52,.41,.97);
	}

	#spMenuBtn span.l1 {
		top: 2vh;
		transform: rotate(0);
		transform-origin: center;
		transition: all .5s cubic-bezier(0,.52,.41,.97);
	}
	#spMenuBtn span.l2 {
		top: 3vh;
		opacity: 1;
		transition: all .5s cubic-bezier(0,.52,.41,.97);
	}
	#spMenuBtn span.l3 {
		top: 4vh;
		transform: rotate(0);
		transform-origin: center;
		transition: all .5s cubic-bezier(0,.52,.41,.97);
	}

	nav #spMenuBtn.on span{
		width: 30px;
	}

	nav #spMenuBtn.on span.l1{
		top: 25px;
		transform: rotate(45deg);
	}

	nav #spMenuBtn.on span.l2{
		opacity: 0;
	}

	nav #spMenuBtn.on span.l3{
		top: 25px;
		transform: rotate(-45deg);
	}

	.navMenuWrap{
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		height: 100vh;
        height: 100svh;
		width: 55vw;
		transform: translateX(100%);/*これをスライド*/
		transition: transform .5s ease-out;
	}
	.navMenuWrap.on{
		transform: translateX(0);/*これをスライド*/
	}
	#navMenu {
		flex-grow: 1;
		background-color: var(--mainColorBlue);
		flex-direction: column;
		justify-content: center;
	}
	#navMenu li{
		color: #fff;
		margin: 0;
        white-space: nowrap;
	}
	#navMenu li a{
		padding: 3vh;
	}
	#navMenu li a:link,
	#navMenu li a:visited,
	#navMenu li a:hover,
	#navMenu li a:active {
		color: #fff;
	}

	nav#nav #navMenu li.navItem span{
		display: inline-block;
		position: relative;
		font-size: 2.5vh;
		text-align: left;
	}
	nav#nav #navMenu li.navItem.active span::after{
		content: '';
		width: 100%;
		border: 1px solid #fff;
		bottom: -6px;
		left: 0;
		display: inline-block;
		position: absolute;
	}

	nav#nav .contactBtn._spMenu{
		pointer-events: auto;
		background-color: #fff;
		width: 100%;
		padding: 3vh;
		text-align: left;
		font-size: 2.5vh;
	}
	nav#nav .contactBtn._spMenu span{
		color: var(--mainColorBlue);
		font-size: 2.5vh;
		font-weight: bold;
	}

	.navBlurOverlay{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		z-index: 3;
	}

	header{
		position: fixed;
		left: 0;
		top: 0;
		z-index: var(--menuZindex);
		transform: translateY(-100%);
		transition: all 1s ease-in-out;
		width: 45vw;
	}

	header a{
		color: var(--mainColorBlue);
		display: flex;
		padding: 2vh;
	}

	#lang {
		top: 2.2vh;
		right: 7vh;
	}
	#lang1stV {
		top: 2.2vh;
		right: 1vh;
	}
	#lang .border,
	#lang1stV .border{
		height: 2vh;
	}
	#lang a span,
	#lang1stV a span{
		font-size: 2vh;
	}

	/*----------------------------------------------------
	冒頭アニメーション
	----------------------------------------------------*/

	#firstAnimeSec .bgArea .bg.bgScene1{
		background-position: 25%;
	}

	#firstAnimeSec .bgArea .bg.bgScene2{
		background-position: 14%;
	}

	#firstAnimeSec .firstTxtArea {
		height: 100px;
		font-size: 12vw;
	}
	#firstAnimeSec .firstTxtArea .h1Area {
		font-size:8vh;
	}
	#firstAnimeSec .firstTxtArea .h2Area {
		font-size:3vh;
		top:10vh;
	}
	#firstAnimeSec .readTxtArea.on p {
		font-size: 8vw;
		letter-spacing: 0.1rem;
	}

	#firstAnimeSec .bgMist .left img,
	#firstAnimeSec .bgMist .right img{
		object-fit: cover;
		object-position: center center;
		width: 100%;
		height: 100vh;
	}
	/*----------------------------------------------------
	#top
	----------------------------------------------------*/

	#top{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 3svh;
	}

	#top .topH1Area h1 {
		font-size: 24vw;
		margin-bottom:4vw;
	}
	#top .topH1Area span {
		font-size: 5vw;
		line-height: 1.2;
	}

	#top .contactBtn{
		padding: 1rem 4rem;
		position: absolute;
		bottom: 15vh;
	}

	#top .contactBtn span{
		font-size: 1rem;
	}
	#top .contactBtn::after {
    width: 1rem;
    height: 1rem;
    right: 1rem;
	}
	.scrollBtn {
		position: absolute;
		bottom: 8vh;
		left: 0;
		right: 0;
		margin: auto;
	}
	/*----------------------------------------------------
	#about
	----------------------------------------------------*/
	#about{
		position: relative;
		width: 100%;
		height: 100%;
		top:revert;
		bottom: 0;
		left: 0;
		z-index: var(--modalZindex);
		color: #fff;
	}
	#about .aboutTop .scrollBtn p {
		margin-bottom: 0;
	}
	#about .sliderWrap li:last-child .scrollBtn {
		bottom: -8vh;
	}
	/* ボタン */
	#about button.blueBtn{
		width:100%;
		height:auto;
		font-size : 1.5rem;
		padding: 1rem 2.0rem 1rem 1rem;
	}
	#about button.blueBtn::after{
		right: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		background-size: 1.5rem 1.5rem;
	}
	/* ocean 5.0とはTOP */
	#about .aboutTop {
		width:100vw;
		height:100vh;
		height:100svh;
	}
	#about .aboutTop h3 {
		font-size: 2rem;
		margin-bottom: 2rem;
		line-height: 3rem;
	}
	#about .aboutTop h3 span {
		font-size: 5rem;
	}
	#about .aboutTop p {
		font-size: 1.5rem;
		margin-bottom: 4.0rem;
		line-height: 1.8;
		text-align: left;
	}
	#about .aboutSlide{
		width: 100vw;
		height:100vh;
		height:100svh;
		top: revert;
		bottom: 0;
	}

	#about .contentsArea{
		padding: 2vw;
	}

	#about h2{
		top: 6vh;
		top: 6svh;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.525rem;
	}
	#about h2 span{
		font-size: 1.125rem;
	}

	#about .backBtn {
		left: 1vw;
	}
	#about .nextBtn {
		right: 1vw;
	}
	#about .stepListArea {
		font-size: 1.5rem;
	}

	#about .stepList {
		width: 118%;
	}
	#about .stepList li button{
		width: 2.5rem;
		height: 2.5rem;
		bottom: 2rem;
	}
	#about #oceanLine .bar_line{
		bottom: 4rem;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(/img/bar_line_sp.svg);
		background-repeat:repeat-x;
		background-size: 100%;
		background-position:left 0 bottom 0;
		opacity: 0.5;
	}
	#about #oceanLine .bar_mask{
		position: absolute;
		bottom: 4rem;
		left: 0;
		width: 100%;
		height: 100%;
		mask-image: url(/img/bar_mask_sp.svg);
		mask-repeat: repeat-x;
		mask-position:left 0 bottom 0;
		mask-size: 5%;
		/* Chrome, Safari用 */
		-webkit-mask-image: url(/img/bar_mask_sp.svg);
		-webkit-mask-repeat: repeat-x;
		-webkit-mask-position:left 0 bottom 0;
		-webkit-mask-size: 100%;
	}
	#about .stepListArea #line span.ocean1 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.055);
	}
	#about .stepListArea #line span.ocean2 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.289);
	}
	#about .stepListArea #line span.ocean3 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.525);
	}
	#about .stepListArea #line span.ocean4 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.763);
	}
	#about #oceanLine1.on .stepOcean,
	#about #oceanLine2.on .stepOcean,
	#about #oceanLine3.on .stepOcean,
	#about #oceanLine4.on .stepOcean,
	#about #oceanLine5.on .stepOcean {
		transform-origin: center;
		transition: all 0.6s 0.1s ease;
		transform: scale(1.2);
	}
	#about .stepList .stepOcean {
		bottom: 5.2rem;
	}
	#about .stepFish {
		width: 100%;
		height: 4vh;
		height: 4svh;
		position: absolute;
		opacity: 0.5;
		bottom: 20vh;
		bottom: 20svh;
	}
	#about .nextBtn,
	#about .backBtn {
		width: 4vw;
		height: 8vw;
	}
	#about .animeAreaWrap {
		top: revert;
		bottom: 20vh;
		bottom: 20svh;
	}
	#about .sliderWrap {
		padding:6vh 0 0 0;
	}
	#about .sliderWrap li {
		width: 80%;
		top: 6vh;
		top: 6svh;
	}
	#about .sliderWrap li h3 {
		font-size: 5rem;
	}
	#about .sliderWrap li span {
		display: inline-block;
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	#about .sliderWrap p {
		font-size: 1.5rem;
		text-align: left;
		text-shadow: 0 0 5px #001e40;
	}
	#about .satelliteArea {
		display: none;
		position: absolute;
		right: 10%;
		bottom: 40vh;
		bottom: 40svh;
		width: 20%;
	}
	#about .floatItem img {
		width: 250px;
	}
	#about .floatItem {
		left:revert;
		right: -360px;
	}
	#about .ocean3Animation {
		bottom: -3.3rem;

	}
	#about .ocean3Animation::before {
		width: 250px;
		height: 250px;
	}
	#about .namisen{
		background-size: 40px;
	}
	#about .floatItem{
	mask-size: 40px;
	/* Chrome, Safari用 */
	-webkit-mask-size: 40px;
	}
	@keyframes namiLoop {
		0% { background-position-x: 0%;}
		100% { background-position-x:40px;}
	}
	@keyframes maskLoop {
		0% { -webkit-mask-position:left 0 bottom 0;}
		100% { -webkit-mask-position:left 40px bottom 0 ;}
	}
	@keyframes funeLoop {
		0% { transform: translateY(1%);}
		50% {transform: translateY(3%);}
		100% { transform: translateY(1%);}
	}
	#about .aboutBgArea ul li:nth-child(1) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(2) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(3) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(4) img {
		object-position: center center;
	}
	#about .aboutBgArea ul li:nth-child(5) img {
		object-position: center center;
	}
	#about .stepFish .fish1 {
		width:10vw;
		position: absolute;
		left:2vw;
		bottom:1vh;
		bottom:1svh;
	}
	#about .stepFish .fish2 {
		width: 5vw;
		position: absolute;
		left: 8vw;
		bottom: 5vh;
		bottom: 5svh;
	}
	#about .stepFish .fish3 {
		width:5vw;
		position: absolute;
		left: 18vw;
		bottom: -1vh;
		bottom: -1svh;
	}
	#about .stepFish .fish4 {
		width:5vw;
		position: absolute;
		left:23vw;
		bottom:2vh;
		bottom:2svh;
	}
	#about .stepFish .fish5 {
		width: 10vw;
		position: absolute;
		left:33vw;
		bottom:1vh;
		bottom:1svh;
	}
	#about .stepFish .fish6 {
		width:5vw;
		position: absolute;
		left:37vw;
		bottom:-1vh;
		bottom:-1svh;
	}
	#about .stepFish .fish7 {
		width:5vw;
		position: absolute;
		right:43vw;
		bottom:3vh;
		bottom:3svh;
	}
	#about .stepFish .fish8 {
		width: 10vw;
		position: absolute;
		right:34vw;
		bottom:0;
		bottom:0;
	}
	#about .stepFish .fish9 {
		width:8vw;
		position: absolute;
		right:29vw;
		bottom:2vh;
		bottom:2svh;
	}
	#about .stepFish .fish10 {
		width:5vw;
		position: absolute;
		right:10vw;
		bottom:-1vh;
		bottom:-1svh;

	}
	#about .stepFish .fish11 {
		width: 10vw;
		position: absolute;
		right:5vw;
		bottom:1rem;

	}
	#about .stepFish .fish12 {
		width:5vw;
		position: absolute;
		right:3vw;
	}

	#about .wave{
		background: url(/img/about_wave.svg) repeat-X;
		background-position: 0;
		width: 120%;
		height: 30px;
		position: absolute;
		bottom: 11px;
		left: 0;
		right: 0;
		animation-name: oceanWave;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	#about .waveWrap {
		height: 72svh;
	}

	#about .maskAreaInner {
		position: absolute;
		top: 6px;
		right: 0;
		clip-path:url(#waveMask);
		width: 100%;
		height: 100%;
		animation-name: oceanWave;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	@keyframes oceanWave{
		0%{
			transform: translateX(-63px);
		}

		100%{
			transform: translateX(0);
		}
	}
	@keyframes shipSway{
		0%{
			transform: translateX(0);
		}

		100%{
			transform: translateX(-63px);
		}
	}
	@keyframes shipSelf{
		0%{
			transform: translateY(3px);
		}

		100%{
			transform: translateY(-3px);
		}
	}

	/*----------------------------------------------------
	#importantTheme
	----------------------------------------------------*/
	#importantTheme #themeItem {
		display: flex;
		justify-content: center;
		gap: 1rem;
		position: absolute;
		inset: 0;
		width: 50svh;
		height: 44svh;
		z-index: 10;
		top: 13svh;
		opacity: 0;
		align-items: center;
		margin:auto;
	}
	#importantTheme .scrollBtn {
		width: 20%;
		bottom: 4svh;
	}
	#importantTheme .scrollBtn::before {
		height: 3vw;
		top: 3vw;
		animation: updownSP 2s ease-in-out infinite;
	}
	@keyframes updownSP {
		0%{
			top: 3vw;
		}
		50%{
			top: 4vw;
		}
		100%{
			top: 3vw;
		}
	}
	#importantTheme .scrollBtn p {
		font-size: 2vw;
	}

	#importantTheme #themeItem li:nth-child(1) {
		top: 0;
		left: 10svh;
	}
	#importantTheme #themeItem li:nth-child(2) {
		top: 0;
		right: 10svh;
	}
	#importantTheme #themeItem li:nth-child(3) {
		top: 0;
		bottom: 0;
		left: 2svh;
		margin: auto;
	}
	#importantTheme #themeItem li:nth-child(4) {
		top: 0;
		left: 0;
		right: 0;
		bottom:0;
		margin:auto;
	}
	#importantTheme #themeItem li:nth-child(5) {
		top: 0;
		bottom: 0;
		right: 2svh;
		margin: auto;
	}
	#importantTheme #themeItem li:nth-child(6) {
		bottom:0;
		left: 10svh;
	}
	#importantTheme #themeItem li:nth-child(7) {
		bottom:0;
		right: 10svh;
	}
	#importantTheme #themeItem.btnList {
		display: flex;
		justify-content: unset;
		gap: 1rem;
		position: fixed;
		inset: unset;
		width: unset;
		height: unset;
		z-index: 10;
		top: 9svh;
		align-items: unset;
		margin:auto;
		transition: transform 500ms;
		scale: 1;
	}
	#importantTheme #themeItem.btnList li {
		position: unset;
	}
	#importantTheme #themeItem.btnList li.active .itemWrap .itemArea span {
		font-size: 3vw;
	}
	#importantTheme #themeItem.btnList li .itemWrap .itemArea span {
		font-size: 3vw;
	}

	#importantTheme #themeItem.btnList:has(.item01.active) {
		transform: translate(40vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item02.active) {
		transform: translate(20vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item03.active) {
		transform: translate(0, 0);
	}
	#importantTheme #themeItem.btnList:has(.item04.active) {
		transform: translate(-19vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item05.active) {
		transform: translate(-41vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item06.active) {
		transform: translate(-59vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item07.active) {
		transform: translate(-79vw, 0);
	}

	#importantTheme #themeList .themeH2{
		font-size: 5svh;
	}
	#importantTheme #themeList .themeH2 span{
		margin-bottom: 3svh;
	}

	#importantTheme #themeList {
		width: 86vw;
		height: 86vw;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 10vh;
	}

	#importantTheme #themeItem li {
		position: absolute;
		transform-origin: center;
		width: 14vh;
		height: 14vh;
	}
	#importantTheme #themeItem li .itemsRotate {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: all 1s ease-in-out;
	}

	#importantTheme #themeItem li .itemWrap .itemArea span {
		font-size: 2vw;
	}
	#importantTheme #themeItem li .itemWrap_B .itemArea span {
		font-size: 2vw;
	}

	main #importantTheme .importantContentsArea{
		flex-direction: column;
		margin-top: 1svh;
        height: calc(100svh - 17svh);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	#importantTheme .contents {
        height: calc(100svh - 17svh);
		display: none;
	}
	#importantTheme .contents h3 {
		font-size: 3.2vw;
		width: 80%;
		margin: 0 auto;
		line-height: 1.5;
		top: 9svh;
	}
	#importantTheme .note{
		position: absolute;
		right: 1rem;
		bottom: 1rem;
	}
	#importantTheme .contentsInner {
			flex-direction: column;
			width: 100%;
			height: 69vh;
			top: 15svh;
	}
	.contentsInner .elem {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 44vh;
		height: 100%;
	}

	.contentsInner ._elem1{
		background-image: url(/img/theme_economy_sp.png);
		padding-top: 7vw;
	}
	.contentsInner ._elem2{
		background-image: url(/img/theme_society_sp.png);
		transform:  translateY(-18.5vw);
		padding-top: 15vw;
	}

	#importantTheme .contentsInner span {
		font-size: 3.2vw;
		padding-bottom: 1.5vw;
		margin-bottom: 1.5vw;
	}

	#importantTheme .themeTxtArea{
		width: 48vw;
		margin: 0 auto;
		padding: 0 5vw;
	}
	#importantTheme .themeTxtArea p {
		font-size: 2.2vw;
		text-align: left;
	}

	#importantTheme .innerSectionBtn {
		padding: 3vw;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 2vh;
		width: 60vw;
		display: flex;
		justify-content: center;
		height: fit-content;
		z-index: 10;
	}

	#importantTheme .innerSectionBtn span {
		font-size: 3vw;
	}

	#importantTheme .importantPopUp {
		width: 90%;
		height: 80%;
		padding: 3vh 4vw 3vw;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	#importantTheme .popUpContent{
		flex-direction: column;
	}


	#importantTheme .importantPopUp h4{
		font-size: 4vw;
		margin-bottom: 2svh;
	}

	.importantPopUp .clm{
		margin-bottom: 2svh;
	}
	.importantPopUp .clm:last-child{
		margin-bottom: 0;
	}

	.importantPopUp .clm .imgArea {
		margin: 0 auto 1svh;
		width: 40vw;
	}

	#importantTheme .importantPopUp p {
		font-size: 2.2vw;
		text-align: left;
	}

	#importantTheme .importantPopUpCancelBtn{
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
	}

	#importantTheme .importantPopUpCancelBtn::before,
	#importantTheme .importantPopUpCancelBtn::after {
		width: 3px; /* 棒の幅（太さ） */
		height: 20px; /* 棒の高さ */
		border-radius: 2px; /* 棒の四隅の丸み*/
	}

	/* インジケーター */
	#importantTheme #importantNavi {
		height: 230px;
		margin-right: 15px;
	}
	#importantTheme #importantNavi li {
		width: 13px;
		height: 13px;
	}

	/*----------------------------------------------------
	#reason
	----------------------------------------------------*/
	#reason .reasonInner {
		margin: 13svh auto 50px;
		width: 90vw;
	}
	#reason::before{
		font-size: 5vw;
		top: 13vh;
		top: 13svh;
		letter-spacing: 0.2rem;
	}

	#reason .reasonPart h2{
		padding-bottom: 50px;
	}

	#reason .partnerPart h2{
		padding-top: 50px;
	}
	#reason .fp-scrollable{
		mask-image: linear-gradient(to bottom, transparent 18%, black 20%, black 90%, transparent 95%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 18%, black 20%, black 90%, transparent 95%);
	}

	#reason .readArea{
		width:90%;
		margin: 23svh auto 45svh;
		padding-bottom:0;
	}

	#reason p{
		font-size: max(3.5vw, 26px);
		line-height: 2;
		margin-bottom: 5vw;
		text-align: left;
	}


	/*----------------------------------------------------
	#partner
	----------------------------------------------------*/
	#partner .reasonInner {
	margin: 0 auto;
	}
	#partner .partnerPart {
		display: flex;
		flex-direction: column;
	}
	/* タイトル */
	#partner .partnerPart .partnerTtl{
		width: 100%;
		height: 10vh;
		left: 0;
		bottom:0;
		top: 14vh;
		top: 14svh;
	}
	#partner .partnerPart .partnerTtl h2 {
		width: 100%;
		font-size: 3rem;
		top: 0;
		left: 0;
		padding:0 0 0 0;
		text-align: center;
	}
	/* 詳細 */
	#partner .partnerPart .partnerWrap {
	bottom: 6vw;
	right: 0;
	width: 100%;
	height: 70vh;
	height: 70svh;
	}

	#partner .partnerPart .partnerWrap .partnerBgColor {
	width: 0%;
	height: 100%;
	bottom:0;
	right:0;
	background-color: var(--mainColorBlue);
	mix-blend-mode: multiply;
	z-index: -1;
	}
	#partner .partnerPart .partnerWrap .readArea {
		width: 100%;
		height: 80%;
		top: 0;
		left:0;
		z-index: 1;
		padding: 2rem;
	}
	#partner .partnerPart .partnerWrap .readArea p {
		color: #FFF;
		text-align: left;
		font-family: var(--fontRoboto);
        font-size: max(2vh, 20px);
		line-height: 1.6;
		margin:0 0 1.5rem 0;
	}
	#partner .partnerPart .partnerWrap .contactBtn {
		display: flex;
		width: 100%;
		height: 20%;
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 2.5rem;
		color: var(--mainColorBlue);
		font-weight: bold;
		padding:2rem;
		text-align: left;
		align-items: center;
		justify-content: space-between;
	}
	#partner .partnerPart .partnerWrap .contactBtn::after{
		right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
		background-size: 2.5rem 2.5rem;
	}

	.spTbNone{
		display: none;
	}

}


/*SP*/
@media screen and (max-width:767px){
	/*----------------------------------------------------
	#about
	----------------------------------------------------*/
	#about{
		position: relative;
		width: 100%;
		height: 100%;
		top:revert;
		bottom: 0;
		left: 0;
		z-index: var(--modalZindex);
		color: #fff;
	}

	/* ボタン */
	#about button.blueBtn{
		width:80.955%;
		height:auto;
		font-size : 1.0rem;
		padding: 1rem 2.0rem 1rem 1rem;
	}
	#about button.blueBtn::after{
		right: 1rem;
		width: 1.0rem;
		height: 1.0rem;
		background-size: 1.0rem 1.0rem;
	}
	/* ocean 5.0とはTOP */
	#about .aboutTop {
		width:100vw;
		height:100svh;
		padding-top: 3svh;
		padding-bottom: 8svh;
		padding-left: 30px;
		padding-right: 30px;
	}
	#about .aboutTop h3 {
		font-size: 1.5rem;
		margin-bottom: 2svh;
	}
	#about .aboutTop h3 span {
		font-size: 3.625rem;
	}
	#about .aboutTop p {
		font-size: 0.875rem;
		margin-bottom: 4svh;
		line-height: 1.8;
		text-align: left;
	}
	#about .aboutSlide{
		width: 100vw;
		height:100svh;
		top: revert;
		bottom: 0;
	}

	#about .contentsArea{
		padding: 2vw;
	}

	#about h2{
		top: 6vh;
		top: 6svh;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.525rem;
	}
	#about h2 span{
		font-size: 1.125rem;
	}

	#about .backBtn {
		left: 1vw;
	}
	#about .nextBtn {
		right: 1vw;
	}
	#about .stepListArea {
		font-size: 0.75rem;
	}

	#about .stepList {
		width: 118%;
	}
	#about .stepList li button{
		width: 1.4rem;
		height: 1.4rem;
		bottom: 1.4rem;
	}
	#about .waveWrap {
    height: 72svh;
	}
	#about #oceanLine {
		height: 15svh;
	}
	#about #oceanLine .bar_line{
		bottom: 2.6rem;
		left: 0;
			width: 100%;
			height: 100%;
			background-image: url(/img/bar_line_sp.svg);
			background-repeat:repeat-x;
			background-size: 100%;
			background-position:left 0 bottom 0;
		opacity: 0.5;
	}
	#about #oceanLine .bar_mask{
		position: absolute;
		bottom: 2.6rem;
		left: 0;
		width: 100%;
		height: 100%;
		mask-image: url(/img/bar_mask_sp.svg);
		mask-repeat: repeat-x;
		mask-position:left 0 bottom 0;
		mask-size: 5%;
		/* Chrome, Safari用 */
		-webkit-mask-image: url(/img/bar_mask_sp.svg);
		-webkit-mask-repeat: repeat-x;
		-webkit-mask-position:left 0 bottom 0;
		-webkit-mask-size: 100%;
	}
	#about .stepListArea #line span.ocean1 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.055);
	}
	#about .stepListArea #line span.ocean2 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.289);
	}
	#about .stepListArea #line span.ocean3 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.525);
	}
	#about .stepListArea #line span.ocean4 {
		transform-origin: left;
		transition: all 0.6s 0.1s ease;
		transform: scaleX(0.759);
	}
	#about #oceanLine1.on .stepOcean,
	#about #oceanLine2.on .stepOcean,
	#about #oceanLine3.on .stepOcean,
	#about #oceanLine4.on .stepOcean,
	#about #oceanLine5.on .stepOcean {
		transform-origin: center;
		transition: all 0.6s 0.1s ease;
		transform: scale(1.2);
	}
	#about .stepList .stepOcean {
		bottom: 3.2rem;
	}
	#about .stepFish {
		width: 100%;
		height: 4vh;
		height: 4svh;
		position: absolute;
		opacity: 0.5;
		bottom: 19vh;
		bottom: 19svh;
	}
	#about .nextBtn,
	#about .backBtn {
		width: 4vw;
		height: 8vw;
	}
	#about .animeAreaWrap {
		top: revert;
		bottom: 20vh;
		bottom: 20svh;
	}
	#about .sliderWrap {
		padding:6vh 0 0 0;
	}
	#about .sliderWrap li {
		width: 95%;
		top: 6vh;
		top: 6svh;
	}
	#about .sliderWrap li h3 {
		font-size: 3.625rem;
	}
	#about .sliderWrap li span {
		display: inline-block;
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
		line-height: 1.4;
	}

	#about .sliderWrap p {
		width: 84.23%;
		margin: 0 auto;
		font-size: 0.875rem;
		text-align: left;
		text-shadow: 0 0 5px #001e40;
	}
	#about .sliderWrap li:last-child .scrollBtn p{
		font-size:0.875rem;
		width: 100%;
	}
	#about .satelliteArea {
		display: none;
		position: absolute;
		right: 10%;
		bottom: 40vh;
		bottom: 40svh;
		width: 20%;
	}
	#about .floatItem img {
		width: 250px;
	}
	#about .floatItem {
		left:revert;
		right: -120px;
	}
	#about .ocean3Animation {
		bottom: -3.3rem;

	}
	#about .ocean3Animation::before {
		width: 250px;
		height: 250px;
	}
	#about .namisen{
		background-size: 40px;
	}
	#about .floatItem{
	mask-size: 40px;
	/* Chrome, Safari用 */
	-webkit-mask-size: 40px;
	}
	@keyframes namiLoop {
		0% { background-position-x: 0%;}
		100% { background-position-x:40px;}
	}
	@keyframes maskLoop {
		0% { -webkit-mask-position:left 0 bottom 0;}
		100% { -webkit-mask-position:left 40px bottom 0 ;}
	}
	@keyframes funeLoop {
		0% { transform: translateY(1%);}
		50% {transform: translateY(3%);}
		100% { transform: translateY(1%);}
	}
	#about .aboutBgArea ul li:nth-child(1) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(2) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(3) img {
		object-position: 20% center;
	}
	#about .aboutBgArea ul li:nth-child(4) img {
		object-position: center center;
	}
	#about .aboutBgArea ul li:nth-child(5) img {
		object-position: center center;
	}
	#about .stepFish .fish1 {
		width:10vw;
		position: absolute;
		left:2vw;
		bottom:1vh;
		bottom:1svh;
	}
	#about .stepFish .fish2 {
		width: 5vw;
		position: absolute;
		left: 8vw;
		bottom: 5vh;
		bottom: 5svh;
	}
	#about .stepFish .fish3 {
		width:5vw;
		position: absolute;
		left: 18vw;
		bottom: -1vh;
		bottom: -1svh;
	}
	#about .stepFish .fish4 {
		width:5vw;
		position: absolute;
		left:23vw;
		bottom:2vh;
		bottom:2svh;
	}
	#about .stepFish .fish5 {
		width: 10vw;
		position: absolute;
		left:33vw;
		bottom:1vh;
		bottom:1svh;
	}
	#about .stepFish .fish6 {
		width:5vw;
		position: absolute;
		left:37vw;
		bottom:-1vh;
		bottom:-1svh;
	}
	#about .stepFish .fish7 {
		width:5vw;
		position: absolute;
		right:43vw;
		bottom:3vh;
		bottom:3svh;
	}
	#about .stepFish .fish8 {
		width: 10vw;
		position: absolute;
		right:34vw;
		bottom:0;
		bottom:0;
	}
	#about .stepFish .fish9 {
		width:8vw;
		position: absolute;
		right:29vw;
		bottom:2vh;
		bottom:2svh;
	}
	#about .stepFish .fish10 {
		width:5vw;
		position: absolute;
		right:10vw;
		bottom:-1vh;
		bottom:-1svh;

	}
	#about .stepFish .fish11 {
		width: 10vw;
		position: absolute;
		right:5vw;
		bottom:1rem;

	}
	#about .stepFish .fish12 {
		width:5vw;
		position: absolute;
		right:3vw;
	}
	#about .wave{
		background: url(/img/about_wave.svg) repeat-X;
		background-position: 0;
		width: 120%;
		height: 30px;
		position: absolute;
		bottom: 11px;
		left: 0;
		right: 0;
		animation-name: oceanWave;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	#about .maskAreaInner {
		position: absolute;
		top: 6px;
		right: 0;
		clip-path:url(#waveMask);
		width: 100%;
		height: 100%;
		animation-name: oceanWave;
		animation-timing-function: linear;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
	@keyframes oceanWave{
		0%{
			transform: translateX(-63px);
		}

		100%{
			transform: translateX(0);
		}
	}
	@keyframes shipSway{
		0%{
			transform: translateX(0);
		}

		100%{
			transform: translateX(-63px);
		}
	}
	@keyframes shipSelf{
		0%{
			transform: translateY(3px);
		}

		100%{
			transform: translateY(-3px);
		}
	}

	/*----------------------------------------------------
	#importantTheme
	----------------------------------------------------*/

	#importantTheme #themeList {
		width: 86vw;
		height: 86vw;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 10vh;
	}

	#importantTheme #themeItem {
		width: 55svh;
		height: 48svh;
		z-index: 10;
		top: 13svh;
	}
	#importantTheme #themeItem li {
		position: absolute;
		transform-origin: center;
		width: 23vw;
		height: 23vw;
	}
	#importantTheme #themeItem li .itemsRotate {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: all 1s ease-in-out;
	}

	#importantTheme #themeItem li .itemWrap .itemArea span {
		font-size: 3.1vw;
	}
	#importantTheme #themeItem li .itemWrap_B .itemArea span {
		font-size: 3.1vw;
	}
	#importantTheme #themeItem.btnList:has(.item01.active) {
		transform: translate(38vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item02.active) {
		transform: translate(12vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item03.active) {
		transform: translate(-16vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item04.active) {
		transform: translate(-43vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item05.active) {
		transform: translate(-71vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item06.active) {
		transform: translate(-98vw, 0);
	}
	#importantTheme #themeItem.btnList:has(.item07.active) {
		transform: translate(-125vw, 0);
	}

	#importantTheme .contents {
		display: none;
	}

	#importantTheme .contents h3 {
		font-size: 4vw;
		width: 80%;
		margin: 0 auto;
		line-height: 1.3;
		top: 8svh;
	}

	#importantTheme .contentsInner {
		flex-direction: column;
		width: 100%;
		height: 80.5svh;
		top: 14svh;
	}
	.contentsInner .elem {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 52svh;
		height: 100%;
	}


	.contentsInner ._elem1{
		background-image: url(/img/theme_economy_sp.png);
		padding-top: 4.5svh;
	}
	.contentsInner ._elem2{
		background-image: url(/img/theme_society_sp.png);
		transform:  translateY(-15.5vh);
		padding-top: 12svh;
	}

	#importantTheme .contentsInner span {
		font-size: 4vw;
		padding-bottom: 2vw;
		margin-bottom: 1vw;
	}

	#importantTheme .themeTxtArea{
		width: 60vw;
		margin: 0 auto;
		padding: 0 4vw;
	}
	#importantTheme .themeTxtArea p {
		font-size: 3.2vw;
		text-align: left;
	}

	#importantTheme .innerSectionBtn {
		padding: 3vw;
		position: absolute;
		margin: auto;
		top: 64svh;
		left: 0;
		right: 0;
		bottom: 0;
		width: 60vw;
		display: flex;
		justify-content: center;
		height: fit-content;
		z-index: 10;
	}

	#importantTheme .innerSectionBtn span {
		font-size: 3vw;
	}
	#importantTheme .innerSectionBtn::after {
		width: 1rem;
		height: 1rem;
	}

    #importantTheme .importantContentsArea .note {
        right: 1.5svh;
        bottom: 1.5svh;
    }

	#importantTheme .importantPopUp {
		width: 95%;
		height: 82%;
		padding: 3vh 4vw 3vw;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	#importantTheme .popUpContent{
		flex-direction: column;
	}

	#importantTheme .importantPopUp h4{
		font-size: 4vw;
		margin-bottom: 2.5svh;
	}

	.importantPopUp .clm{
		margin-bottom: 2svh;
	}
	.importantPopUp .clm:last-child{
		margin-bottom: 0;
	}

	.importantPopUp .clm .imgArea {
		margin: 0 auto 1svh;
		width: 40vw;
	}

	#importantTheme .importantPopUp p {
		font-size: 3vw;
		text-align: left;
		width: 85%;
		margin: auto;
	}


	#importantTheme .importantPopUpCancelBtn{
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
	}

	#importantTheme .importantPopUpCancelBtn::before,
	#importantTheme .importantPopUpCancelBtn::after {
		width: 3px; /* 棒の幅（太さ） */
		height: 20px; /* 棒の高さ */
		border-radius: 2px; /* 棒の四隅の丸み*/
	}

	/* インジケーター */
	#importantTheme #importantNavi {
		height: 230px;
		margin-right: 15px;
	}
	#importantTheme #importantNavi li {
		width: 13px;
		height: 13px;
	}

	/*----------------------------------------------------
	#reason
	----------------------------------------------------*/
	#reason::before{
		font-size: max(5vw, 1rem);
	}
	#reason .readArea p{
		font-size: 4.375vw;
		font-weight: normal;
	}

	/*----------------------------------------------------
	#partner
	----------------------------------------------------*/
	#partner .partnerPart .partnerTtl h2 {
		font-size: max(5vw, 1rem);
	}
	#partner .partnerPart .partnerWrap .readArea p {
		font-size: 0.8rem;
		line-height: 1.6;
		margin: 0 0 0.8rem 0;
	}
	#partner .partnerPart .partnerWrap {
		bottom:1.5rem;
	}
	#partner .partnerPart .partnerWrap .readArea {
		height: 80%;
		padding: 1.5rem;
	}
	#partner .partnerPart .partnerWrap .contactBtn {
		height: 20%;
		font-size: 1.5rem;
		padding: 1.5rem;
	}
	#partner .partnerPart .partnerWrap .contactBtn::after{
		right: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		background-size: 1.5rem 1.5rem;
	}
	#partner #footer {
		padding: 0.5rem;
	}

	.spNone {
		display:none;
	}
	.spTbNone{
		display: none;
	}
}