@charset "utf-8";
/* common.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

* {
  font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #000;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p,span,li,dt,dd {
	line-height: 1.8;
}

img {
	width: 100%;
	display: block;
}


/*-----------------------------------------------------

共通

-----------------------------------------------------*/

html {
  font-size: 2.67vw;
	color: #383838;
}

body {
	width: 100%;
	overflow-x: auto;
  font-family: "Zen Kaku Gothic Antique", serif;
  font-weight: 400;
  font-style: normal;
	color: #383838;
	background: url("../images/bg01.jpg") repeat-y;
	background-size: 100% auto;
}

#wrapper {}

main {
    display: block;
    padding-bottom: 0;
}

.pcview {}
.spview {
    display: none !important; 
}

.toppage {
	width: 13.89vw;
	position: fixed;
	bottom: 2.5vw;
	right: 2.5vw;
}

.slick-dots {
    bottom: -40px;
}

.slick-prev {
  left: -17px;
	top: inherit;
	bottom: 50%;
	width: 15px;
	height: 17px;
	background: url("../images/icon_arrow01.png") no-repeat;
	background-size: cover;
	z-index: 5;
}

.slick-prev:before {
	display: none;
}

.slick-next {
  right: -17px;
	top: inherit;
	bottom: 50%;
	width: 15px;
	height: 17px;
	background: url("../images/icon_arrow02.png") no-repeat;
	background-size: cover;
	z-index: 5;
}

.slick-prev:hover, .slick-prev:focus {
	background: url("../images/icon_arrow01.png") no-repeat;
	background-size: cover;
}

.slick-next:hover, .slick-next:focus {
	background: url("../images/icon_arrow02.png") no-repeat;
	background-size: cover;
}

.slick-next:before {
	display: none;
}


.slick-dots li button:before {
    font-size: 20px;
    opacity: 1;
    color: #D5E5EE;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

.hand {
	display: none;
}

.copy2 {
	display: none;
}

.leftvisial {
	display: none;
}

.rightmenu {
	display: none;
}

/*-----------------------------------------------------

header

-----------------------------------------------------*/

header {}

header nav{
	display: none;
}

header nav.list_active {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100vw;
	height: 100vh;
	background: #0beffa url("../images/bg02.jpg") left top repeat-x;
	background-size: auto 100%;
	padding: 10.44vw 4.44vw 0;
	box-sizing: border-box;
}

header nav.list_active ul.gnavi {
	margin-bottom: 7.28vw;
}

header nav.list_active ul.gnavi li {
	margin-bottom: 4vw;
	padding: 0 0 4vw 2.94vw;
	border-bottom: 1px solid #000;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
	font-size: 5vw;
	flex-wrap: 900;
}

header nav.list_active ul.gnavi li a {
	display: block;
}

header nav.list_active ul.gnavi li a img {
	width: auto;
	height: 6.62vw;
}

/*header nav.list_active ul.gnavi li:nth-child(1) a img {
	width: 77.67vw;
	height: auto;
}*/

header nav.list_active ul.gnavi li:last-child {
	border: none;
}

header nav.list_active ul.sns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10.45vw;
	margin-bottom: 15.28vw;
}

header nav.list_active ul.sns li a {
	display: block;
	width: 10vw;
}

header nav.list_active ul.sns li:nth-child(3) a {
	display: block;
	width: 12.5vw;
}

.btnMenu {
	display: block;
	width: 11.94vw;
	height: 9.72vw;
	position: fixed;
	top: 5.56vw;
	right: 4.17vw;
	z-index: 10;
	cursor: pointer;
	background: url("../images/btn_menu_open.png") center center no-repeat;
	background-size: cover;
}

.btnMenu.active {
	background: url("../images/btn_menu_close.png") center center no-repeat;
	background-size: contain;
}

.fade-up {
	opacity: 0;
	transform: translateY(50px);
	will-change: transform, opacity;
}

/*-----------------------------------------------------

mainvisual

-----------------------------------------------------*/

#mainvisual {
	padding: 4.16vw 0 0;
}

.movie {
	width: 92.857vw;
	height: 51.785vw;
	margin: -73vw auto 0;
	border: 3.57vw solid #000;
	border-radius: 4.44vw;
	box-sizing: content-box;
	position: relative;
	background: #000;
}

.movie p {
	position: absolute;
	top: -23vw;
	left: 5.33vw;
	width: 90.178vw;
	z-index: 1;
}

.movie iframe {
	min-width: 290px;
	width: 92.857vw;
	aspect-ratio: 16/9;
	position: relative;
	z-index: 2;
}

.movie .btn01 {
	width: 83.925vw;
	margin: 5.33vw auto 0;
}

/*-----------------------------------------------------

sec01

-----------------------------------------------------*/

#sec01 {
	padding: 30vw 0 8.928vw;
}

#sec01 .txt01 {
	width: 81.25vw;
	margin: 0 auto 4.464vw;
}

#sec01 .img01 {
	width: 95.53vw;
	margin: 0 auto;
}

#sec01 .box01 {
	background: url("../images/bg02.jpg") repeat-y;
	background-size: 100% auto;
	width: 90.1785vw;
	margin: 0 auto;
	padding: 11.6vw 0 14.2857vw;
	border: 2px solid #4B6A84;
	box-sizing: border-box;
	border-radius: 0 0 2.67vw 2.67vw;
}

#sec01 .box01 h2 {
	width: 80.357vw;
	margin: 0 auto 8.928vw;
}

#sec01 .box01 li {
	margin-top: 8.928vw;
}

#sec01 .box01 li img {
	width: auto;
	height: 26.7857vw;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec02

-----------------------------------------------------*/

#sec02 {
	margin-bottom: 14.2857vw;
}

#sec02 .box01 {
	width: 90.1785vw;
	margin: 0 auto;
	border: 1px solid #707070;
	border-radius: 8vw;
	padding: 9.82vw 0;
	background: #fff;
	box-sizing: border-box;
}

#sec02 h2 {
	width: 71.43vw;
	margin: 0 auto;
}

#sec02 dl {
	margin-top: 8vw;
}

#sec02 dt {
	font-size: 5.357vw;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: #4B6A84;
	text-align: center;
	margin-bottom: 1.3vw;
	font-feature-settings: 'falt';
}


#sec02 dd {
	font-size: 4.64vw;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: #4B6A84;
	text-align: center;
	font-feature-settings: 'falt';
}

#sec02 dd.logo01 {
	width: 49.2857vw;
	margin: 0 auto;
}

#sec02 dd.sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10.71vw;
}

#sec02 dd.sns a {
	display: block;
	width: 13vw;
}

#sec02 dd.youtube {
	width: 16vw;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec03

-----------------------------------------------------*/

#sec03 {
	margin-bottom: 14.2857vw;
}

#sec03 h2 {
	width: 71.428vw;
	margin: 0 auto 8.928vw;
}

#sec03 p {
	width: 88.39vw;
	margin: 0 auto 5.357vw;
}

#sec03 .btn01 {
	width: 60.71vw;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec04

-----------------------------------------------------*/

#sec04 {
	margin-bottom: 14.2857vw;
}

#sec04 .box01 {
	width: 91vw;
	margin: 0 auto;
	background: #D5E5EE;
	border-radius: 5.71vw;
	padding: 8.928vw 0;
	box-sizing: border-box;
}

#sec04 h2 {
	width: 71.4285vw;
	margin: 0 auto 8.928vw;
}

#sec04 p {
	width: 80.357vw;
	margin: 0 auto 6.25vw;
	padding-bottom: 6.25vw;
	border-bottom: 1px solid #4B6A84;
}

#sec04 p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}


/*-----------------------------------------------------

sec05

-----------------------------------------------------*/

#sec05 {
	margin-bottom: 14.2857vw;
}

#sec05 h2 {
	width: 71.428vw;
	margin: 0 auto 5.357vw;
}

#sec05 li {
	width: 76.7857vw;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec06

-----------------------------------------------------*/

#sec06 {
	margin-bottom: 14.2857vw;
}

#sec06 h2 {
	width: 35.71vw;
	margin: 0 auto 5.357vw;
}

#sec06 .box01 {
	background: #4B6A84;
	border-radius: 8vw;
	padding: 5.357vw 0 20.785vw;
	width: 91vw;
	margin: 0 auto 9.82vw;
}

#sec06 .tits01 {
	width: 69.64vw;
	margin: 0 auto 5.33vw;
}

#sec06 .slider01 {
	width: 51.7857vw !important;
	margin: 0 auto;
}

#sec06 .box01 a {
	display: block;
}

#sec06 .btn01 {
	width: 60.71vw;
	margin: 0 auto;
}


/*-----------------------------------------------------

footer

-----------------------------------------------------*/

.copy01 {
	font-size: 4.6vw;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: #4B6A84;
	font-feature-settings: 'falt';
	padding: 0;
	text-align: center;
}

.copy02 {
	font-size: 2.8vw;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: #4B6A84;
	font-feature-settings: 'falt';
	padding: 0 0 4.5vw;
	text-align: center;
}

@media screen and (min-width: 755px) {
	html {
  	font-size: 10px;
	}

	body {
		background: url("../images/bg03.jpg") 0 0 no-repeat;
		background-size: cover;
		min-height: 100vh;
		overflow-y: hidden;
	}
	
	#wrapper {
		width: 100%;
		position: relative;
		min-height: 100vh;
		display: flex;
		flex-wrap: wrap;
	}
	
	.wrapperInner {
		width: 400px;
		max-height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		position: relative;
		background: #fff url("../images/bg01.jpg") 0 0 repeat-y;
		background-size: 100% auto;
	}
	
	.wrapperInner::-webkit-scrollbar {
  width: 3px; /* スクロールバーの太さ */
}

.wrapperInner::-webkit-scrollbar-track {
  background: none; /* 背景 */
  border-radius: 0;
}

.wrapperInner::-webkit-scrollbar-thumb {
  background: none; /* スクロールバーの色 */
  border-radius: 0;
  border: 2px solid #444; /* trackとの隙間 */
}

.wrapperInner::-webkit-scrollbar-thumb:hover {
  background: none; /* ホバー時の色 */
}

.leftvisial {
	max-width: 1005px;
	width: calc(100vw - 755px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../images/bg04.png") no-repeat;
	background-size: cover;
}

.leftvisial h1 {
	width: 90%;
}

.rightmenu {
	width: 355px;
	/*width: 15.364583vw;*/
	padding: 140px 0 0;
	display: block;
}

.rightmenu ul {
	width: 295px;
	/*max-width: 295px;
	width: 15.364583vw;*/
	margin: 0 auto 50px;
}

.rightmenu ul li {
	margin-bottom: 18px;
}

.rightmenu ul li:nth-child(5) {
	width: 190px;
	margin: 0 auto;
}

.rightmenu .sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.rightmenu .sns a {
	display: block;
	width: 35px;
}

.rightmenu .sns a:nth-child(3) {
	display: block;
	width: 45px;
}



.toppage {
	display: none;
}

.slick-prev {
  left: 50px;
}

.slick-next {
  right: 50px;
}

	
	.hand {
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -305px;
		z-index: 1;
	}
	
	.hand img {
		width: 610px;
		height: 790px;
	}


/*-----------------------------------------------------

header

-----------------------------------------------------*/

header {}

header nav{
	display: none;
}

header nav.list_active {
	display: block;
	position: fixed;
	top: 0;
	left: inherit;
	right: 0;
	z-index: 5;
	width: 40vw;
	height: 100vh;
	background: #0beffa url("../images/bg02.jpg") left top repeat-x;
	background-size: auto 100%;
	padding: 70px 20px 0;
	box-sizing: border-box;
}

header nav.list_active ul.gnavi {
	margin-bottom: 30px;
}

header nav.list_active ul.gnavi li {
	margin-bottom: 20px;
	padding: 0 0 15px 15px;
	border-bottom: 1px solid #000;
}

header nav.list_active ul.gnavi li a {
	display: block;
	
}

header nav.list_active ul.gnavi li a img {
	width: auto;
	height: 26px;
}

header nav.list_active ul.gnavi li:nth-child(1) a img {
	width: auto;
	height: 28px;
}

header nav.list_active ul.gnavi li:last-child {
	border: none;
}

header nav.list_active ul.sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 30px;
	padding: 0;
	margin-bottom: 60px;
}

header nav.list_active ul.sns li a {
	display: block;
	width: 35px;
}

header nav.list_active ul.sns li:nth-child(3) a {
	display: block;
	width: 45px;
}

.btnMenu {
	display: none;
	width: 53px;
	height: 44px;
	position: fixed;
	top: 25px;
	right: 35px;
	z-index: 10;
	cursor: pointer;
	background: url("../images/btn_menu_open.png") center center no-repeat;
	background-size: cover;
}

.btnMenu.active {
	background: url("../images/btn_menu_close.png") center center no-repeat;
	background-size: contain;
}


/*-----------------------------------------------------

mainvisual

-----------------------------------------------------*/

#mainvisual {
	padding: 0;
}

.movie {
	width: 360px;
	height: 203px;
	margin: 0 auto 0;
	border: 20px solid #000;
	border-radius: 16px;
	box-sizing: content-box;
	position: relative;
	background: #000;
}

.movie p {
	position: absolute;
	top: -85px;
	left: 20px;
	width: 376px;
	z-index: 1;
}

.movie iframe {
	min-width: 360px;
	width: 360px;
	aspect-ratio: 16/9;
	position: relative;
	z-index: 2;
}

.movie .btn01 {
	width: 330px;
	margin: 35px auto 0;
}

/*-----------------------------------------------------

sec01

-----------------------------------------------------*/

#sec01 {
	padding: 140px 0 55px;
}

#sec01 .txt01 {
	width: 323px;
	margin: 0 auto 25px;
}

#sec01 .img01 {
	width: 380px;
	margin: 0 auto;
}

#sec01 .box01 {
	background: url("../images/bg02.jpg") repeat-y;
	background-size: 100% auto;
	width: 360px;
	margin: 0 auto;
	padding: 60px 0 80px;
	border: 2px solid #4B6A84;
	box-sizing: border-box;
	border-radius: 0 0 10px 10px;
}

#sec01 .box01 h2 {
	width: 323px;
	margin: 0 auto 50px;
}

#sec01 .box01 li {
	margin-top: 50px;
}

#sec01 .box01 li img {
	width: auto;
	height: 110px;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec02

-----------------------------------------------------*/

#sec02 {
	margin-bottom: 85px;
}

#sec02 .box01 {
	width: 360px;
	margin: 0 auto;
	border: 1px solid #707070;
	border-radius: 45px;
	padding: 55px 0;
	background: #fff;
	box-sizing: border-box;
}

#sec02 h2 {
	width: 284px;
	margin: 0 auto;
}

#sec02 dl {
	margin-top: 35px;
}

#sec02 dt {
	font-size: 2.1rem;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: #4B6A84;
	text-align: center;
	margin-bottom: 5px;
	font-feature-settings: 'falt';
}


#sec02 dd {
	font-size: 1.8rem;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: #4B6A84;
	text-align: center;
	font-feature-settings: 'falt';
}

#sec02 dd.logo01 {
	width: 195px;
	margin: 0 auto;
}

#sec02 dd.sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 42px;
}

#sec02 dd.sns a {
	display: block;
	width: 52px;
}

#sec02 dd.youtube {
	width: 62px;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec03

-----------------------------------------------------*/

#sec03 {
	margin-bottom: 85px;
}

#sec03 h2 {
	width: 284px;
	margin: 0 auto 50px;
}

#sec03 p {
	width: 358px;
	margin: 0 auto 30px;
}

#sec03 .btn01 {
	width: 241px;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec04

-----------------------------------------------------*/

#sec04 {
	margin-bottom: 85px;
}

#sec04 .box01 {
	width: 362px;
	margin: 0 auto;
	background: #D5E5EE;
	border-radius: 32px;
	padding: 50px 0;
	box-sizing: border-box;
}

#sec04 h2 {
	width: 284px;
	margin: 0 auto 50px;
}

#sec04 p {
	width: 320px;
	margin: 0 auto 35px;
	padding-bottom: 35px;
	border-bottom: 1px solid #4B6A84;
}

#sec04 p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}


/*-----------------------------------------------------

sec05

-----------------------------------------------------*/

#sec05 {
	margin-bottom: 85px;
}

#sec05 h2 {
	width: 284px;
	margin: 0 auto 30px;
}

#sec05 li {
	width: 305px;
	margin: 0 auto;
}


/*-----------------------------------------------------

sec06

-----------------------------------------------------*/

#sec06 {
	margin-bottom: 85px;
}

#sec06 h2 {
	width: 142px;
	margin: 0 auto 30px;
}

#sec06 .box01 {
	background: #4B6A84;
	border-radius: 45px;
	padding: 25px 0 100px;
	width: 362px;
	margin: 0 auto 55px;
}

#sec06 .tits01 {
	width: 284px;
	margin: 0 auto 20px;
}

#sec06 .slider01 {
	width: 205px !important;
	margin: 0 auto;
}

#sec06 .box01 a {
	display: block;
}

#sec06 .btn01 {
	width: 284px;
	margin: 0 auto;
}


/*-----------------------------------------------------

footer

-----------------------------------------------------*/

.copy01 {
	font-size: 1.8rem;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: #4B6A84;
	font-feature-settings: 'falt';
	padding: 0;
	text-align: center;
}

.copy02 {
	font-size: 1.1rem;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
	color: #4B6A84;
	font-feature-settings: 'falt';
	padding: 0 0 20px;
	text-align: center;
}

}


@media screen and (max-width: 1199px) {

#wrapper {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
}

.leftvisial {
	display: none;
}

}