/* ホバー */

a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {background-color: #fff;
	line-height: 1.5;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
	list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

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

/* Natural flow and rhythm in articles by default */

article > * + * {
	margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

button {
  border: none;
  outline: none;
  background: transparent;
}

/* Blur images when they have no alt attribute */

img:not([alt]) {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

section{
	width: 100%;
	max-width: 18.75rem;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width: 400px){
section{
	
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}}
.section02{
max-height: 97.8125rem;
}

/* セクション間隔 */
.section-margin{
	margin-top: -4rem;
  z-index: -1;
}
@media screen and (max-width: 768px){
	.section-margin{
		margin-top: -7%;
		z-index: -1;
	}
}
.section-margin02{
	margin-top: -7rem; 
}
@media screen and (max-width: 700px){
	.section-margin02{
		margin-top: -15%;
	}
}
.section-margin03{
	margin-top: -25%;
  
}


/* gif */


.gif01{
  position: absolute;
  width: 92%;
  margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 36%;
}

.gif02{
	position: absolute;
  width: 84%;
  margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 598%;
}
.gif03{
  position: absolute;
  width: 100%;
  margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 18%;
}

.gif04{
	position: absolute;
  width: 92%;
  margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 72%;
}

/* スライダー */

 .slider-wrap01{
	width: 83%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 55%;
 }
 .slider-wrap02{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 38%;
 }

 .slider-wrap03{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 2.4%;
 }
 .slider-wrap04{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 12%;
 }

@media screen and (max-width: 750px){
	.slider-wrap01{
		height: 100%;
	 }
}

.slider {
	position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.slider02 {
	position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.slider03 {
	position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.slider04 {
	position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}





/*画像設定*/

.slider-item {
	width: 90%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
	height:37.5rem;
}
.slider-item04 {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
	height:37.5rem;
	margin-left: 1%;
}
.slider-item03 {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
	margin-left: 0.5%;
	margin-right: 0.5%;
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
	position: absolute;/*絶対配置にする*/
  z-index: 3;
	top: 0%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 4px solid #fff;/*矢印の色*/
	border-right: 4px solid #fff;/*矢印の色*/
	height: 1rem;
	width: 1rem;  
	margin-top: 31%;
}
@media screen and (max-width: 500px){
	.slick-prev, 
.slick-next {
	position: absolute;/*絶対配置にする*/
  z-index: 3;
	top: 0%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 4px solid #fff;/*矢印の色*/
	border-right: 4px solid #fff;/*矢印の色*/
	height: 1rem;
	width: 1rem;  
	margin-top: 31%;
}
}

.slick-prev {/*戻る矢印の位置と形状*/
	left:-6.5%;

	transform: rotate(-135deg);
}


.slick-next {/*次へ矢印の位置と形状*/
	right:-6.5%;
	transform: rotate(45deg);
}
/*戻る、次へ矢印の位置*/
.slick-prev02, 
.slick-next02 {
	position: absolute;/*絶対配置にする*/
  z-index: 3;
	top: 0%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 4px solid #fff;/*矢印の色*/
	border-right: 4px solid #fff;/*矢印の色*/
	height: 16px;
	width: 16px;  
	margin-top: 138%;
}
@media screen and (max-width: 500px){
	/*戻る、次へ矢印の位置*/
.slick-prev02, 
.slick-next02 {
	position: absolute;/*絶対配置にする*/
  z-index: 3;
	top: 0%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 4px solid #fff;/*矢印の色*/
	border-right: 4px solid #fff;/*矢印の色*/
	height: 1.5rem;
	width: 1.5rem;  
	margin-top: 139%;
}
}

.slick-prev02 {/*戻る矢印の位置と形状*/
	left:15.5%;
  transform: rotate(-135deg);
}


.slick-next02 {/*次へ矢印の位置と形状*/
	right:15.5%;
	transform: rotate(45deg);
}

.slider-bg{
	position: absolute;
	width: 100%;
	top: 63%;
	background: #162845;
	height: 12%;
}

/*ドットナビゲーションの設定*/

.slick-dots {
position: absolute;
z-index: 3;
text-align:center;
left: 0;
right: 0;
margin-top: 64%;
top: 0%;
  display: flex !important;     /* 横並び */
  justify-content: center;      /* 中央寄せ */
  gap: 2px;                     /* ドットの間隔 */
  list-style: none;

}


.slider03 .slick-dots {
position: absolute;
z-index: 0;
text-align:center;
left: 0;
right: 0;
margin-top: 135%;
top: 0%;
}
.slider04 .slick-dots {
position: absolute;
z-index: 3;
text-align:center;
left: 0;
right: 0;
margin-top: 57%;
top: 0%;
}



.slick-dots li {
	display:inline-block;
margin:0 10px;
}
@media screen and (max-width: 500px){
	.slick-dots li {
		display:inline-block;

	}
	_::-webkit-full-page-media, _:future, :root .slick-dots li{
		margin: 0 5px;
	}
	_::-webkit-full-page-media, _:future, :root .slick-dots button{
		margin: 0 5px;
		width: initial;
    height: initial ;
		border-radius:50%;
		font-size:6px;/*初期値は6px*/
	}
	_::-webkit-full-page-media, _:future, :root .slick-dots{
		margin-top: 66%;
	}
	_::-webkit-full-page-media, _:future, :root .slider03 .slick-dots{
		margin-top: 138%;
	}
	_::-webkit-full-page-media, _:future, :root .slider04 .slick-dots{
		margin-top: 59%;
	}
	_::-webkit-full-page-media, _:future, :root .header-btn{
		width:8rem;
		right: -2%;
	}
}
@media screen and (max-width: 450px){
	_::-webkit-full-page-media, _:future, :root .header-btn{
		width:8rem;
		right: -10px;
	}
}

.slick-dots button {
  width: 8px;                   /* 正方形にする */
  height: 8px;
  border-radius: 50%;           /* 丸くする */
  background: #ccc;             /* 通常の色 */
  font-size: 0;                 /* テキストを消す */
  border: none;
  padding: 0;
  cursor: pointer;
}
/* @media (max-width: 400px) {
  .slick-dots button {
    width: initial;
    height: initial ;
		border-radius:50%;
		font-size:1px;/*初期値は6px*/
  



.slick-dots .slick-active button{
	background:#333;/*ドットボタンの現在地表示の色*/
}


.slider03 .slick-dots .slick-active button{
	background:#ccc;/*ドットボタンの現在地表示の色*/
}

/* 男女 */
.m-w-img{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 658%;
}
/* アコーディオン */




.accodion__link{
  position: relative;
	width: 90%;
	margin: 0 auto;
	margin-top: -23%;
}
.accodion__link02{
  position: relative;
	width: 90%;
	margin: 0 auto;
	margin-top: -28%;
}

.open-btn{
	position: relative;
}

.text-content{
	position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    top: 0;
    text-align: center;
    margin-top: 6.5%;
    font-size: 2.2rem;
    letter-spacing: 7px;
		display: block;
		font-size:clamp(16px, 1vw, 20px);
		font-family: "Noto Sans", sans-serif;
		font-weight: 600;
  
}
.text-content02{
	position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    top: 0;
    text-align: center;
    margin-top: 6.5%;
    font-size: 2.2rem;
    letter-spacing: 7px;
		display: block;
		font-size: clamp(16px, 1vw, 20px);
		font-family: "Noto Sans", sans-serif;
		font-weight: 600;
  
}
.text-content03{
	position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    top: 0;
    text-align: center;
    margin-top: 6.5%;
    font-size: 2.2rem;
    letter-spacing: 7px;
    display: block;
    font-size: clamp(16px, 1vw, 20px);
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
  
}
.open-btn:hover{
	cursor: pointer;
}

/* ボタン */

.header-btn{
	position: absolute;
	top: 0%;
	right: -2%;
	width: 31%;
	max-width: 219px;
}


.cta-btn01{
	position: absolute;
	width: 90%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:36%;
}
.cta-btn02{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 2%;
}
.cta-btn03{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 29.5%;
}

.cta-btn04{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 16.5%;
}

.cta-btn05{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 2.5%;
}

.cta-btn06{
	position: absolute;
	width: 94%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 29%;
}


.float-btn{
  position: fixed;
  z-index: 100;
  margin: 0 auto;
  left: 0;
  right: 0;
  max-width: 400px;
  bottom:0%;
  transition: all 0.3s;
	width: 100%;
}


.float-btn-img{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  transition: 300ms;
  position: relative;
  display: flex;
}
.float-btn-img img{
 object-fit: cover;
}
.float-btn-img::before {
  position: absolute;
    content: '';
    display: inline-block;
    top: -200px;
    left: 0;
    width: 30px;
    height: 50%;
    background-color: #fff;
    transition: 300ms;
    animation: shinyshiny 2.5s ease-in-out infinite;
}

/*アニメーション用CSS*/

@keyframes UpDown{
  0%{
  transform: translateY(-10px);
  }
  100%{
  transform: translateY(10px);
  }
  }
.opacity{
    opacity:0;
}

@-webkit-keyframes shinyshiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.cta-btn{
  width: 100%;
  animation-name:UpDown;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
	overflow: hidden;
}
.cta-btn:hover{
  opacity: 0.8;
}

.cta-btn::before {
  position: absolute;
    content: '';
    display: inline-block;
    top: -200px;
    left: 0;
    width: 30px;
    height: 50%;
    background-color: #fff;
    transition: 300ms;
    animation: shinyshiny 2.5s ease-in-out infinite;
}


/* footer */
footer{
	max-width: 750px;
	width: 100%;
	background: #fff;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
@media screen and (min-width: 768px) {
	footer{
		max-width: 100%;
		margin-top: -3rem;
    margin-bottom: 3rem;
	}
}


@media screen and (min-width: 768px) {
	.footer-link{
	max-width:430px ;	
  display: flex;
	justify-content: space-between;
	margin: 0 auto;
	}
}

.footer-link a{
	display: block;
	text-align: center;
  color: #000;
	font-family: "Hiragino Sans、ヒラギノ角ゴシック";
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	text-decoration-line: underline;
	margin-top: 1rem;
}
@media screen and (min-width: 768px) {
	.footer-link a{
		margin-top: 0;
		color: #000;
		font-family: "Hiragino Sans、ヒラギノ角ゴシック";
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: normal;
		text-decoration-line: underline;
	}
}
.footer-link a:first-child{
	margin-top: 0px;
}

.footer-copy{
  background: #1B4B74;
	width: 100%;
	height: 67px;
}
.footer-copy p{
  color: #fff;
	font-family: "Hiragino Sans、ヒラギノ角ゴシック";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-align: center;
	margin-top: 3rem;
	padding-top: 25px;
}
@media screen and (min-width: 768px) {
  .footer-copy p{
		color: #fff;
		font-family: "Hiragino Sans、ヒラギノ角ゴシック";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		text-align: center;
		margin-top: 48px;
	}
}