@charset "utf-8";

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.bg {
	background-image: url(photo/S__6168593.jpg);
}

.hako {
	width: 80%;
	margin: 0 auto;
	padding: 30px;
}

h1 {
	text-align: center;
}

h2 {
	font-size: 25px;
}

h3 {
	text-align: center;
	color: red;
}

nav ul {
	display: flex;
	list-style-type: none;
}

nav ul li {
	width: 33.3%;
	border: 2px solid rgb(255, 255, 255);
	background-color: rgb(185, 222, 255);
	height: 70px;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	font-size: 30px;
}

nav ul li a {
	display: block;
	text-decoration: none;
	padding: 15px 20px;
	text-align: center;
	color: rgb(0, 0, 0);
	background-color: rgb(185, 222, 255);
}

.slideBox {
	height: 1000px;
	overflow: hidden;
	position: relative;
}

/* imgのみ */
.item1 {
	opacity: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 30s 0s infinite;
	animation: anime 30s 0s infinite;
}

.item1:nth-of-type(2) {
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
}

.item1:nth-of-type(3) {
	-webkit-animation-delay: 20s;
	animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	35% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		z-index: 9;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes anime {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	35% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		z-index: 9;
	}

	100% {
		opacity: 0;
	}
}

.sanrio {
	font-size: 20px;
	font-weight: bold;
}

.sanrio span {
	color: #bcc5ff;
	font-weight: bold;
	font-size: 30px;
}

.box1 {
	display: flex;
	justify-content: center;
	gap: 0px 60px;
}

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

.box3 {
	display: flex;
	justify-content: center;
	gap: 0px 90px;
}

.syoukai1 {
	color: #ffbcbc;
	text-align: center;
	font-weight: bold;
}

.syoukai2 {
	color: #baf4ff;
	text-align: center;
	font-weight: bold;
}

.syoukai3 {
	color: #64ff88;
	text-align: center;
	font-weight: bold;
}

.syoukai4 {
	color: #caffb3;
	text-align: center;
	font-weight: bold;
}

.syoukai5 {
	color: #ffddab;
	text-align: center;
	font-weight: bold;
}

.syoukai6 {
	color: #edc9ff;
	text-align: center;
	font-weight: bold;
}

.syoukai7 {
	color: #bcc6ff;
	text-align: center;
	font-weight: bold;
}

.syoukai8 {
	color: #f9b8ff;
	text-align: center;
	font-weight: bold;
}

.popup-content span {
	color: #ff9999;
	font-weight: bold;
}

.popup-content2 span {
	color: #79ddff;
	font-weight: bold;
}

.popup-content3 span {
	color: #54ff8a;
	font-weight: bold;
}

.popup-content4 span {
	color: #a5ff7c;
	font-weight: bold;
}

.popup-content5 span {
	color: #ffd167;
	font-weight: bold;
}

.popup-content6 span {
	color: #ef8ce3;
	font-weight: bold;
}

.popup-content7 span {
	color: #8ab7ff;
	font-weight: bold;
}

.popup-content8 span {
	color: #f59aff;
	font-weight: bold;
}

/* ポップアップウインドウの設定1ここから */
.popup {
	background-color: #ffdcdc;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}


/* チェックボックスの初期設定 */
#popup-on {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on:checked+.popup {
	display: block;
}

/* 閉じるアイコン（右上） */
.icon-close {
	background: #000;
	color: #fff;
	font-size: 30px;
	padding: 0 10px;
	position: absolute;
	right: 0;
}

/* 閉じるボタン */
.btn-close {
	background: #000;
	border-radius: 10px;
	color: #fff;
	padding: 10px;
	cursor: pointer;
	margin: 10px auto;
	width: 95%;
	text-align: center;
}

/* 開くボタン */
.btn-open {
	border-radius: 10px;
	color: #fff;
	padding: 10px;
	cursor: pointer;
	margin: 10px auto;
	/* width: 95%; */
}

/* ポップアップの内容 */
.popup-content {
	margin: 40px auto 40px auto;
	width: 90%;
}


/* ポップアップウインドウの設定1ここまで */

/* ポップアップウインドウの設定2ここから */
.popup2 {
	background-color: #e4feff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on2 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on2:checked+.popup2 {
	display: block;
}


/* ポップアップの内容 */
.popup-content2 {
	margin: 40px auto 40px auto;
	width: 90%;
}


/* ポップアップウインドウの設定2ここまで */

/* ポップアップウインドウの設定3ここから */
.popup3 {
	background-color: #d3fad7;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on3 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on3:checked+.popup3 {
	display: block;
}



/* ポップアップの内容 */
.popup-content3 {
	margin: 40px auto 40px auto;
	width: 90%;
}


/* ポップアップウインドウの設定3ここまで */


/* ポップアップウインドウの設定4ここから */
.popup4 {
	background-color: #deffda;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on4 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on4:checked+.popup4 {
	display: block;
}



/* ポップアップの内容 */
.popup-content4 {
	margin: 40px auto 40px auto;
	width: 90%;
}

.layer-img4 {
	padding-top: 60px;
}

/* ポップアップウインドウの設定4ここまで */

/* ポップアップウインドウの設定5ここから */
.popup5 {
	background-color: #ffeed7;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on5 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on5:checked+.popup5 {
	display: block;
}

/* 閉じるアイコン（右上） */
.icon-close5 {
	background: #000;
	color: #fff;
	font-size: 30px;
	padding: 0 10px;
	position: absolute;
	right: 0;
}



/* ポップアップの内容 */
.popup-content5 {
	margin: 40px auto 40px auto;
	width: 90%;
}

.layer-img5 {
	padding-top: 60px;
}

/* ポップアップウインドウの設定5ここまで */

/* ポップアップウインドウの設定6ここから */
.popup6 {
	background-color: #f2d9ff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on6 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on6:checked+.popup6 {
	display: block;
}



/* ポップアップの内容 */
.popup-content6 {
	margin: 40px auto 40px auto;
	width: 90%;
}



/* ポップアップウィンドウの設定6ここまで */

/* ポップアップウィンドウの設定7ここから */
.popup7 {
	background-color: #c8caff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 15em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on7 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on7:checked+.popup7 {
	display: block;
}



/* ポップアップの内容 */
.popup-content7 {
	margin: 40px auto 40px auto;
	width: 90%;
}


/* ポップアップウィンドウの設定7ここまで */

/* ポップアップウィンドウの設定8ここから */
.popup8 {
	background-color: #ffd1ff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 30em;
	height: 25em;
	overflow-y: scroll;
}

/* チェックボックスの初期設定 */
#popup-on8 {
	display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on8:checked+.popup8 {
	display: block;
}



/* ポップアップの内容 */
.popup-content8 {
	margin: 40px auto 40px auto;
	width: 90%;
}



/* ポップアップウィンドウの設定8ここまで */

.cp_hr07 {
	position: relative;
	overflow: visible;
	text-align: center;
	color: #f06292;
	border-width: 3px 0 0 0;
	border-style: double;
	border-color: #f06292;
	padding-bottom: 10px;
}

.cp_hr07::after {
	position: absolute;
	top: -0.7em;
	left: 50%;
	display: inline-block;
	content: '💞その他の紹介💞';
	background: #ffffff;
}

/* ボタン全体 */
.flowbtn11 {
	border-radius: 4px;
	position: relative;
	display: inline-block;
	width: 100%;
	font-size: 20px;
	color: #fff !important;
	text-decoration: none;
	margin-bottom: 15px;
}

/* Twitter */
.fl_tw1 {
	background: #55acee;
}

/* Instagramアイコン位置 */
.insta_btn11 .fa-instagram {
	position: relative;
	z-index: 1;
}

.insta_btn11 .fa-YouTube {
	position: relative;
	z-index: 2;
}

/* Instagram紫グラデ背景色 */
.insta_btn11 {
	background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	overflow: hidden;
}

/* YouTube */
.fl_yu1 {
	background: #fc0d1c;
}

/* アイコンボタンホバー時 */
.flowbtn11:hover span {
	-webkit-transform: rotateX(360deg);
	-ms-transform: rotateX(360deg);
	transform: rotateX(360deg);
	text-decoration: none;
}

/* ボタン内テキスト調整 */
.flowbtn11 span {
	text-align: center;
	font-size: 14px;
	position: relative;
	left: 20px;
	bottom: 2px;
	transition: .6s;
	display: inline-block;
}

/* ulタグの内側余白を０にする */
ul.snsbtniti2 {
	padding: 0 !important;
}

/* アイコンボタンの位置調整 */
/* .snsbtniti2 {
	display: flex;
	flex-flow: row wrap;
} */

/* アイコンボタン同士の余白調整 */
.snsbtniti2 li {
	text-align: left !important;
}

/* Twitter */
.fl_tw1 {
	background: #55acee;
}

.SNS {
	display: flex;
}

.snsbtniti2 li {
	width: 33.3%;
	list-style-type: none;
}