@charset "UTF-8";

/*
index.php css
*/
/* ===============================================
	front-page > first-view
================================================== */
.first-view {
	width: 100%;
	height: 100vh;
	position: relative;
}
/* ===============================================
	front-page > header
================================================== */
.mainvisual {
	position: relative;
	/* height: 100vh; */
	z-index: 10;
}
/*swiper.js > custom*/
.swiper-container {
	height: 100%;
	overflow: hidden;
  }
.swiper-slide {/*スライド画像を中央寄せ*/
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
  }
  
.home--sitename {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	margin: auto;
    width: 80%;
	height: 100vh;
    aspect-ratio: 595 / 422;
	display: flex;
	z-index: 10;
	justify-content: center;
	align-items: center;
}
.home--sitename img{
	height: auto;
}
/*スクロールを促す*/
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
	/*.mainvisual--filterの上に重ねる*/
	z-index: 4;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: rgba(255,255,255,0.8);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: rgba(255,255,255,0.8);
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
/* -------------------------------------------
		mainvisual > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.mainvisual {
			height: 100vh;
		}
		/* 画像サイズ調整 */
		.swiper-slide img {
			object-fit: cover;
			min-width: 100%;
			width: auto;
			min-height: 100%;
			height: auto;
		}
		.home--sitename img{
			top: calc(100% - 50% - 160px) ;
			position: absolute;
			display: flex;
			left: auto;
			z-index: 15;
			justify-content: center;
		}
	}
	/* -------------------------------------------
		mainvisual > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
	}
	/* -------------------------------------------
		mainvisual > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.home--sitename img{
			/* width: 595px;
    		height: 422px; */
			position: absolute;
			display: flex;
			/* width: 100%; */
			top: calc(100% - 50% - 170px) ;
			left: auto;
			z-index: 15;
			justify-content: center;
		}
		/* 画像サイズ調整 */
		.swiper-slide img {
			height: auto;
			width: 100%;
		}

	}
/* ===============================================
	トップページの共通パーツ
================================================== */
.front-page--ttl_img {
	width: auto;
	/* height: 2rem; */
	margin-right: 0.25em;
}
.front-page--ttl--sub_img {
	margin-bottom: 0.5rem;
	width: auto;
}
	/* -------------------------------------------
		トップページの共通パーツ > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.front-page--ttl--sub_img {
			height: 1.5rem;
		}
	}
	/* -------------------------------------------
		トップページの共通パーツ > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
	}
	/* -------------------------------------------
		トップページの共通パーツ > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.front-page--ttl--sub_img {
			height: 1rem;
		}
	}

/* ===============================================
	search
================================================== */
.opcl_button{
	font-size:0.8em;
}
.opcl_button:hover{
	border-bottom:1px dotted blue;
}
.opcl_button:after{
	content: "[×閉じる]";
	margin-left:10px;
}
.opcl_button.opcl_closed:after{
	content: "[↓開く]";
}
.opcl_content{
	display: block;
}
.opcl_content.opcl_closed{
	display: none;
}
/* ===============================================
	ranking
================================================== */
.ranking {
	color: #fff;
	background-color: #fff;
	margin-top: -4rem;
	padding-top: 6rem;
	padding-bottom: 4rem;
}
/*タイトル「人気の写真TOP10」*/
.ranking--ttl {
	margin-bottom: 2rem;
	text-align: center;
}
/*ランキング集計期間*/
.ranking--ttl--date {
	margin-top: 0.25rem;
	display: block;
	letter-spacing: 1px;
	color: #888;
	font-size: 1rem;
}
/*ギャラリー部分*/
.ranking--grid {
	display: grid;
	grid-gap: 10px 5px;
}
/*box*/
.ranking--grid-box {
	aspect-ratio: 4 / 3;
}
/*boxの中の画像の囲み*/
.ranking--grid-box--inner {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	z-index: 0;
}
.ranking--grid-box--inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ranking--grid-box:hover .ranking--grid-box--inner img {
	opacity: 0.7;
	transform: scale(1.1, 1.1);
}
/*番号ラベル*/
.ranking--grid-box {
	position: relative;
}
.number-label {
	position: absolute;
	margin: auto;
	right: auto;
	bottom: auto;
	font-weight: bold;
	font-size: 1rem;
	background-color: #aaa;
	z-index: 1;
}
/*1~3位*/
.number-label.number1,
.number-label.number2,
.number-label.number3 {
	top: -2px;
	left: 6px;
	text-align: center;
	clip-path: polygon(100% 0, 100% 70%, 100% 100%, 50% 78%, 0 100%, 0 0);
	/*リボンの形にする*/
}
.number-label.number1 {
	background-color: #eac300;
}
.number-label.number2 {
	background-color: #b6b6b7;
}
.number-label.number3 {
	background-color: #ad7300;
}
/*4～10位*/
.number-label.number4,
.number-label.number5,
.number-label.number6,
.number-label.number7,
.number-label.number8,
.number-label.number9,
.number-label.number10  {
	top: 0;
	left: 0;
	clip-path: polygon(0 0, 0% 100%, 100% 0);/*三角形にする*/
	/* background-color: #29b0b6; */
	background-color: #8bb7da;
}
/*タイトル「人気の写真TOP10」*/
		.ranking--ttl {
			margin-bottom: 2rem;
			text-align: center;
			font-size: 1.75rem;
			color: #000;
			font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
		}
		.ranking--ttl span{
			font-family: "SquarePeg-Regular", sans-serif;
			font-size: 1.75rem;
			font-weight: normal;
			margin-bottom: 1rem;
		}
	/* -------------------------------------------
		ranking > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.ranking {
			/* clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0% 100%); */
			/*↑%で指定するとrankingの縦幅によって斜度が変わるので4remで指定する*/
		}
		.ranking--ttl {
			font-size:1.5rem;
		}
		/*ギャラリー部分*/
		.ranking--grid {
			grid-template-columns: 1fr 1fr;
		}
		/*1~3位*/
		.number-label.number1,
		.number-label.number2,
		.number-label.number3 {
			width: 28px;
			height: 30px;
			padding-top: 0;
		}
		/*4～10位*/
		.number-label.number4,
		.number-label.number5,
		.number-label.number6,
		.number-label.number7,
		.number-label.number8,
		.number-label.number9,
		.number-label.number10  {
			width: 40px;
			height: 40px;
			padding-left: 6px;
		}
	}
	/* -------------------------------------------
		ranking > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
	}
	/* -------------------------------------------
		ranking > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.ranking {
			/* clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0% 100%); */
			/*↑%で指定するとrankingの縦幅によって斜度が変わるので4remで指定する*/
		}
		.ranking--grid {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
		/*1~3位*/
		.number-label.number1,
		.number-label.number2,
		.number-label.number3 {
			width: 38px;
			height: 40px;
			padding-top: 0.125rem;
		}
		/*4～10位*/
		.number-label.number4,
		.number-label.number5,
		.number-label.number6,
		.number-label.number7,
		.number-label.number8,
		.number-label.number9,
		.number-label.number10  {
			width: 50px;
			height: 50px;
			padding-left: 10px;
		}
	}


/* ===============================================
	recommended
================================================== */
.recommended {
	color: #fff;
	/* background-color: #000; */
	background-image: url(../img/common/category_back.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	background-position-y: 50%;
}
/*タイトル「おすすめカテゴリー・キーワード」*/
.recommended--ttl {
	margin-bottom: 2rem;
	text-align: center;
	font-size: 1.75rem;
	color: #000;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
.recommended--ttl span{
	font-family: "SquarePeg-Regular", sans-serif;
	font-size: 1.75rem;
	font-weight: normal;
	margin-bottom: 1rem;
}
/*リスト*/
.keyword--list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/*キーワード毎のitem*/
.keyword--list--item {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	background-color: #000;
}
/*画像*/
.keyword--list--item img {
	opacity: 0.5;
	z-index: 0;
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.keyword--list--item:hover img {
	opacity: 0.9;
	transform: scale(1.1);/* 拡大 */
}
/*画像の上に文字*/
.keyword--text {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	z-index: 1;
}
/*文字に下線*/
.keyword--text_underline {
	margin: auto;
	width: auto;
	padding: 0 0.5rem;
	letter-spacing: 3px;
	display: inline-block;
}
/*全面リンク*/
.keyword--link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	z-index: 2;
}
	/* -------------------------------------------
		recommended > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.recommended {
			padding-bottom: 7rem;
		}
		.keyword--text_underline {
			/* border-bottom: 2px solid #fff; */
		}
		/*キーワード毎のitem*/
		.keyword--list--item {
			width: 100%;
		}
		.keyword--list--item+.keyword--list--item {
			margin-top: 1rem;
		}
		/*画像の上に文字*/
		.keyword--text {
			font-size: 1.125rem;
			text-decoration:underline solid 1px #fff;
		}
		.recommended--ttl {
			font-size:1.5rem;
		}
	}
	/* -------------------------------------------
		recommended > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		/*キーワード毎のitem*/
		.keyword--list--item {
			width: 32%;
		}
		.keyword--list--item+.keyword--list--item {
			margin-top: 0;
		}
	}
	/* -------------------------------------------
		recommended > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		
	}

/* ===============================================
	information
================================================== */
.information {
	width: 100%;
    background-color: rgba(0 0 0 / 60%);
    backdrop-filter: blur(4px);
    position: absolute;
    bottom: 0;
    z-index: 25;
	/* margin-top: -4rem;
	padding-top: 6rem;
	padding-bottom: 6rem;
	clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0% 100%); */
	/*↑%で指定するとrankingの縦幅によって斜度が変わるので4remで指定する*/
}
.news_area{
	display: flex;
    align-items: center;
    justify-content: center;
	padding: 1rem 0;
	
}
.information--list{
	line-height: 1.25rem;
}
#news_all .information--list{
	margin-bottom: 3em;
}
/*li*/
.information--list--item {
	/* border-bottom: 1px solid #ccc; */
}
/*日付*/
.information--list--item--time {
	color: #fff;
}
/*記事タイトル*/
.information--list--item--title a {
	color: #fff;
	transition: all 0.3s;
}
 .information--list--item--title a:hover {
	/*color: #aaa;
	background-color: #fafafa;
	transition: all 0.3s;*/
	text-decoration: underline 1px;
} 
	/* -------------------------------------------
		information > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.news_area{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 0;
			flex-wrap: wrap;
			margin: 0 1rem;
		}
		.information--list{
			line-height: 1rem;
		}
	}
	/* -------------------------------------------
		information > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.news_area{
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
		}
	}
	/* -------------------------------------------
		information > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.news_area{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem 0;
			min-height: 130px;
		}
		.information--list{
			line-height: 1.75rem;
		}

	}

/* ===============================================
	movie
================================================== */
.movie {
	margin-top: -4rem;
	clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0% 100%);
	position: relative;
}
.movie--ttl {
	position: absolute;
	bottom: auto;
	z-index: 3;
	color: #fff;
	opacity: 0.9;
	z-index: -1;
}
/*youTube埋め込み動画をレスポンシブ対応*/
.movie--box {
	aspect-ratio: 16 / 9;
}
.movie--box iframe {
	width: 100%;
	height: 100%;
}
.movie--box_big {
	width: 100%;
	z-index: 2;
}
.movie--box_big video {
	width: 100%;
	height: auto;
}


/*Youtubeチャンネル誘導ボタン*/
.movie--youtube-btn {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.movie--youtube-btn a.btn {
	margin-right: auto;
	margin-left: auto;
	border-radius: 12rem;
	display: inline-block;
	color: #fff;
	background-color: none;
	text-decoration: none;
	font-weight: 500;
	font-size: 1.15rem;
}
.movie_back_text{
	background: url(../img/common/movie_logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	background-position-x: 1rem;
}

/* -------------------------------------------
		movie > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.movie {
			padding-top: 8rem;
			padding-bottom: 2rem;
		}
		.movie--ttl {
			top: 6rem;
			right: auto;
			left: 1rem;
			width: calc(100% - 1rem);
			line-height: 1.125em;
			font-size: 1.5rem;
		}
		.movie--box--layout {
			margin-top: 0.75rem;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 1rem;
		}
		.movie--box_small {
			/* width: 50%; */
		}
		.movie--youtube-btn {
			margin-top: 3rem;
		}
		.movie_back_text{
			height: 50px;
		}

	}
	/* -------------------------------------------
		movie > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.movie--box--layout {
			width: calc(100% - 2rem);
			/* display: grid; */
			grid-template-columns: repeat(3, 1fr);
			
		}
		.movie--box_small {
			/* width: 100%; */
		}
		.movie_back_text{
			height: 100px;
		}
	}
	/* -------------------------------------------
		movie > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.movie {
			padding-top: 12rem;
			padding-bottom: 6rem;
		}
		.movie--ttl {
			top: 7rem;
			right: 0;
			left: 1rem;
			font-size: 5rem;
		}
		.movie--box--layout {
			margin-top: 1.75rem;
			column-gap: 1rem;
		}
		.movie--youtube-btn {
			margin-top: 3rem;
		}
		.movie_back_text{
			height: 130px;
		}
	}
/* ===============================================
	old-Photograph
================================================== */
.old-Photograph {
	text-align: center;
	color: #fff;
	transition: all 0.3s;
	padding-bottom: 5em;
	position: relative;
}
.old-Photograph--banner:hover {
	opacity: 0.7;
	transition: all 0.3s;
}
.old-Photograph--area{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.old-photo--area{
	width: calc(100% - 50% - 2rem);
}
.old-photo-img{
	width: 100%;
}
.old-photo--tx{
	text-align: center;
	width: calc(100% - 50% - 2rem);
}
.old-photo--tx p{
	color: #000;
	margin-bottom: 2rem;
	text-align: start;
}
.old-photo--tx .more_btn{
	text-align: center;
	border: solid 1px #000;
    position: relative;
    width: 200px;
    border-radius: 2rem;
	display: inline-block;
	background-color: #fff;
}
.old-photo--tx .more_btn{
	color: #000;
	/* font-family: "SquarePeg-Regular", sans-serif; */
	font-size: 1.5rem;
}
.old-photo--tx .more_btn::after {
	border-bottom: 1px solid #000;
    border-right: 2px solid #000;
}

.mukashi--ttl {
	margin-bottom: 2rem;
	text-align: center;
	font-size: 1.75rem;
	color: #000;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
.mukashi--ttl span{
	font-family: "SquarePeg-Regular", sans-serif;
	font-size: 1.75rem;
	font-weight: normal;
	margin-bottom: 1rem;
}
.mukashi--back{
	background-image: url(../img/common/nostalgic.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: 98%;
	width: 100%;
	height: 90px;
	position: absolute;
	bottom: 100px;
	z-index: -1;
}

	/* -------------------------------------------
		old-Photograph > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.old-Photograph--area{
			flex-wrap: wrap;
		}
		.old-photo--area{
			width: 100%;
		}
		.old-photo--tx{
			text-align: center;
			width: 100%;
		}
		.mukashi--back{
			background-image: none;
		}
		.mukashi--ttl {
			font-size:1.5rem;
		}
	}
	/* -------------------------------------------
		old-Photograph > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.old-photo--area{
			width: calc(100% - 50% - 2rem);
		}
		.old-photo--tx{
			text-align: center;
			width: calc(100% - 50% - 2rem);
		}
		.old-Photograph--area{
			flex-wrap: nowrap;
		}
		.mukashi--back{
			bottom: 30px;
			height: 70px;
		}
		.mukashi--back{
			background-image: none;
		}

	}
	/* -------------------------------------------
		old-Photograph > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.mukashi--back{
			background-image: url(../img/common/nostalgic.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position-x: 98%;
			width: 100%;
			height: 100px;
			position: absolute;
			bottom: 110px;
			z-index: -1;
			opacity: .4;
		}
	}


/* ===============================================
	gallery
================================================== */
.gallery {
	color: #000;
	background-color: #fff;
	/* padding-bottom: 6rem; */
}
/*Instagram,など自由入力欄*/
.gallery--ttl {
	padding-top: 4rem;
	margin-bottom: 2rem;
	text-align: center;
	/* font-family: "SquarePeg-Regular", sans-serif; */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: normal;
	color: #fff;
}
.gallery--ttl .icon {
	width: 2rem;
	height: 2rem;
}
.gallery_area{
	display: block;
	padding-bottom: 10em;
}
/*テキスト*/
.gallery--text {
	text-align: center;
	color: #fff;
	font-weight: normal;
}
/*リスト*/
.gallery--list {
	display: grid;
}
.gallery--item {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}

.gallery--item .photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s;
}
.gallery--item .photo:hover {
	cursor: pointer;
	opacity: 0.8;
}
/*モーダルウインドウ*/
/* 開閉 */
.modal{
	display: none;
}
.modal.is-open {
	display: block;
}
/*オーバーレイ*/
.modal--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 11;
}
/*ダイアログ*/
.modal--dialog {
	background-color: rgba(255,255,255,1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	overflow: auto;
	box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.2);
	position: relative;
	z-index: 12;
}
/*閉じるボタン*/
.modal--dialog--close {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	border-style: none;
	width: 3rem;
	height: 3rem;
	font-size: 0;
	background-color: #6dcacf;
	background-image: url("../img/icon/close.svg");
	background-size: 1rem 1rem;
	background-position: left 1rem center;
	background-repeat: no-repeat;
	z-index: 13;
	transition: all .3s;
}
.modal--dialog--close:hover {
	cursor: pointer;
	background-color: #9fd9db;
}
/*inner*/
.modal--dialog--inner {
	padding: 2rem 1rem 1rem 1rem;
}
/*レイアウト*/
.modal--dialog--layout {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.modal--dialog--layout--img {
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.gallery--photo {
	object-fit: contain;
}

/*モーダルウインドウ内,ダウンロードページとInstagramページへのリンク*/
.modal--dialog--layout--button {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
}
.link-select--download a,
.link-select--instagram a {
	border-radius: 2px;
	display: flex;
	align-items: center;
    justify-content: flex-start;
    align-content: center;
	text-decoration: none;
	color: #fff;
	border: solid 1px #6dcacf;
	border-radius: 2rem;
	line-height: 1.5em;
	background-color: #6dcacf;
	transition: all .3s;
}
.link-select--download a:hover,
.link-select--instagram a:hover {
	background-color: #9fd9db;
}
.link-select--download .icon,
.link-select--instagram .icon {
	margin-right: 1rem;
	width: 1rem;
	height: 1rem;
}
	/* -------------------------------------------
		gallery > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.gallery--list {
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 6px 6px;
		}
		/*--モーダルウインドウ--*/
		/*ダイアログ*/
		.modal--dialog {
			height: auto;
		}
		.gallery--photo {
			max-width: 90%;
			max-height: 320px;
		}
		.modal--dialog--layout {
			flex-direction: column;
		}
		/*モーダルウインドウ内,ダウンロードページとInstagramページへのリンク*/
		.modal--dialog--layout--button {
			width: calc(100% - 4rem);
		}
		.link-select--download+.link-select--instagram {
			margin-top: 0.75rem;
		}
		.link-select--download,
		.link-select--instagram {
			width: 100%;
		}
		.link-select--download a,
		.link-select--instagram a {
			padding: 0.5rem 1.5rem;
		}
		.gallery--ttl {
			font-size:1.5rem;
		}
	}
	/* -------------------------------------------
		gallery > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.gallery--list {
			grid-template-columns: 1fr 1fr 1fr;
		}
		.gallery--photo {
			max-height: 400px;
		}
		.modal--dialog--layout--button {
			width: auto;
		}
	}
	/* -------------------------------------------
		gallery > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.gallery--list {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-gap: 28px 28px;
		}
		.gallery--photo {
			max-height: 500px;
		}
		/*モーダルウインドウ内,ダウンロードページとInstagramページへのリンク*/
		.link-select--download+.link-select--instagram {
			margin-top: 0;
			margin-left: 1rem;
		}
		.link-select--download,
		.link-select--instagram {
			margin-top: 0;
			width: auto;
		}
		.link-select--download a,
		.link-select--instagram a {
			padding: 1rem 1.5rem;
		}
	}



/* ===============================================
	sns
================================================== */
.sns {
	background-image: url("../img/home/sns.png");
	background-color: #d4eff0;
	background-repeat: repeat;
}
.sns--layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sns--layout--block {
	display: flex;
	flex-wrap: wrap;
	color: #000;
	/* border: 1px solid red; */
}
.sns--layout--block--inner {
	margin: 0 auto;
	overflow: auto;
	/* border: 1px solid yellow; */
}
.sns--wrapper {
	overflow: hidden;
}
.sns--name {
	margin-bottom: 0.5em;
	font-size: 3rem;
	display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
	font-family: "SquarePeg-Regular", sans-serif;
	font-weight: normal;
}
.sns--name .icon {
	margin-right: 0.25em;
}
/* SNSエリア 背景*/
.sns_area_back{
	background: linear-gradient(-225deg, rgb(110 154 210 / 100%) 0%, rgb(126 224 202 / 100%) 100%);
	animation: gradationanimation 20s ease infinite;
	background-size: 200% 200%;
}

.sns_area{
	width: 100%;
	/* padding-top: 3em; */
	padding-bottom: 10em;
	display: flex;
	justify-content: space-between;
}
 /* 波エフェクト */
 #wrapper{
    width:100%;
    /* height: 100vh; */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
    }
    .wave{
        position:relative;
        height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
    }
    canvas{
        position: absolute;
        bottom: 0;
        left:0;
        width: 100%;
    }

	/* -------------------------------------------
		sns > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.sns {
			padding-top: 3rem;
			/* padding-bottom: 3rem; */
		}
		.sns--wrapper {
			width: 100%;
		}
		.sns--layout--block {
			width: 100%;
		}
		.sns--layout--block--inner {
			width: 100%;
		}
		.sns--layout--block+.sns--layout--block {
			margin-top: 3rem;
		}
		.facebook_area{
			display: none;
		}
		.facebook_li_area{
			display: block;
		}
		.facebook_li_area a{
			color: #fff;
			font-size: 1.25rem;
			text-align: center;
		}
	}
	/* -------------------------------------------
		sns > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.sns--layout--block {
			width: calc(50% - 1rem);
		}
		.sns--layout--block--inner {
			width: auto;
		}
		.sns--wrapper {
			width: 396px;
			height: 600px;
		}
		.sns--layout--block+.sns--layout--block {
			margin-top: 0;
			margin-left: 1rem;
		}
		.facebook_area{
			display: block;
		}
		.facebook_li_area{
			display: none;
		}
	}
	/* -------------------------------------------
		sns > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.sns {
			/* padding-bottom: 3.5rem; */
		}
		
	}

	/* -------------------------------------------
		about
	---------------------------------------------- */
	.about_area{
		margin: 5em 10em 7em 10em;
	}
	/* -------------------------------------------
		about > SP
	---------------------------------------------- */
	@media (min-width:0px) {
	.about_area{
		text-align: center;
		color: #000;
		margin: 5em 0 7em 0;
	}
	.about_area p{
		margin: 1.5rem 0;
	}
    .about_area h2{
        font-size: 2rem;
        font-weight: normal;
    }
    .about_tx_li{
        font-size: 1.25rem;
        text-decoration: none;
        /* border-bottom: solid 1px; */
    }
	.about_tx_li a{
		color: #000;
	}
    .about_tx{
        text-align: left;
    }
}

/* -------------------------------------------
		about > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.about_area{
			margin: 5em 0 7em 0;
		}
	}
/* -------------------------------------------
		sns > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.about_area{
			margin: 5em 10em 7em 10em;
		}
	}