@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description : トップページ用
===================================================================== */

/* ********************************************************************
header
******************************************************************** */
#header::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/common/bg_pattern4.jpg) repeat top left/calc(40 / 750 * 100%) auto;
	width: 100%;
	padding-top: calc(120 / 750 * 100%);
	z-index: 2;
}

#mv {
	padding-top: calc(670 / 750 * 100%);
}

#mv::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	background: url(../images/common/bg_deco1_sp.png) no-repeat center/100% auto;
	width: 100%;
	padding-top: calc(107 / 750 * 100%);
}

#mv::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: calc(172 / 750 * 100%);
	width: 100%;
	height: calc(187 / 750 * 100vw);
	background: url(../images/common/bg_pattern5.jpg) repeat-x top left/147% auto;
}

#mv .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

#mv .inner::before {
	content: "";
	display: block;
	position: absolute;
	width: calc(750 / 670 * 100%);
	padding-top: calc(474 / 670 * 100%);
	background: url(../images/top/img_mv_sp.png) no-repeat bottom left;
	background-size: 100% auto;
	left: calc(-40 / 670 * 100%);
	right: 0;
	margin: calc(75 / 670 * 100%) auto 0;
}

.mv_ttl {
	width: calc(323 / 670 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(32 / 670 * 100%) auto 0;
	z-index: 2;
}

.mv_date {
	width: calc(600 / 670 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(570 / 670 * 100%) auto 0;
	background-color: #000;
	padding: .7em 0;
	border-radius: 2em;
}

.mv_date img {
	width: calc(494 / 600 * 100%);
	margin: auto;
}

@media screen and (min-width: 768px) {

	#header::before {
		display: none;
	}

	#mv {
		padding-top: calc(480 / 1400 * 100%);
	}

	#mv::before {
		background: url(../images/common/bg_deco1_pc.png) repeat-x center top/calc(960 / 1400 * 100%) auto;
		padding-top: calc(107 / 1400 * 100%);
	}

	#mv::after {
		margin-bottom: 0;
		height: calc(127 / 1400 * 100vw);
		background-position: top left calc(950 / 1400 * 100%);
		background-size: calc(740 / 1400 * 100%) auto;
	}

	#mv .inner::before {
		background: url(../images/top/img_mv_pc.png) no-repeat bottom left;
		background-size: cover;
		width: calc(1180 / 1400 * 100%);
		padding-top: calc(375 / 1400 * 100%);
		left: 0;
		margin: calc(85 / 1400 * 100%) auto 0;
	}

	.mv_ttl {
		width: calc(324 / 1400 * 100%);
		margin: calc(20 / 1400 * 100%) auto calc(240 / 1400 * 100%);
	}

	.mv_date {
		width: calc(500 / 1400 * 100%);
		margin: 0 auto;
		top: auto;
		bottom: 0;
		padding: 1em 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.mv_date img {
		width: calc(360 / 500 * 100%);
		margin: auto;
	}
}

@media screen and (min-width: 1400px) {
	#mv {
		padding-top: 480px;
	}

	#mv::before {
		background-size: 960px auto;
		padding-top: 107px;
	}

	#mv::after {
		height: 127px;
		background-size: 740px auto;
	}
}

/* ********************************************************************
banner
******************************************************************** */
.main > div,
.main > section {
	z-index: 2;
}

#banner {
	background-color: #f8df08;
	padding: calc(20 / 750 * 100%) 0 calc(40 / 750 * 100%);
}

.banner_song {
	width: calc(600 / 670 * 100%);
	margin: 0 auto;
}

.banner_list {
	margin-top: calc(20 / 670 * 100%);
}

.banner_list li {
	width: calc(650 / 650 * 100%);
	margin: 0 auto;
}

.banner_list li:not(:last-child) {
	margin-bottom: calc(20 / 600 * 100%);
}

.banner_presnt {
	width: calc(650 / 650 * 100%);
	margin: calc(20 / 750 * 100%) auto;
}

@media screen and (min-width: 768px) {
	#banner {
		padding: calc(10 / 1400 * 100%) 0 calc(30 / 1400 * 100%);
	}

	.banner_song {
		width: calc(600 / 1200 * 100%);
	}

	.banner_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: space-around;
		-ms-flex-pack: space-around;
		justify-content: space-around;
		margin-top: calc(18 / 1200 * 100%);
	}

	.banner_list li {
		margin: calc(20 / 1200 * 100%) auto calc(10 / 1200 * 100%)!important;
		width: calc(500 / 1200 * 100%) !important;
	}

	.banner_list li:nth-child(-n+2) {
		margin-top: 0 !important;
	}

	.banner_list li a:hover,
	.banner_song a:hover {
		opacity: .7;
	}
	.banner_presnt {
	width: calc(500 / 1200 * 100%) ;
}
}

@media screen and (min-width: 1400px) {
	#banner {
		padding: 40px 0;
	}

}

/* ********************************************************************
next
******************************************************************** */
#next {
	background: url(../images/common/bg_pattern2.jpg) repeat top left/calc(504 / 750 * 100%) auto;
	padding: calc(100 / 750 * 100%) 0;
}

.next_box {
	background-color: #fff;
	border-radius: 30px;
	overflow: hidden;
	padding: calc(60 / 670 * 100%) calc(60 / 670 * 100%) calc(110 / 670 * 100%);
}

.next_box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/common/bg_deco1_sp.png) no-repeat center/100% auto;
	width: 100%;
	padding-top: calc(107 / 670 * 100%);
	margin-top: calc(55 / 670 * 100%);
}

.next_box::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	background: url(../images/top/bg_cup.png) no-repeat center bottom/contain;
	width: calc(186 / 670 * 100%);
	padding-top: calc(106 / 670 * 100%);
	margin: 0 auto;
}

#next h2 {
	width: calc(270 / 550 * 100%);
	margin: 0 auto;
}

.next_date {
	text-align: center;
	font-size: 3rem;
	color: #be32b4;
	font-weight: bold;
	margin: 1em 0 .7em;
}

#next dd {
	color: #ff00a5;
	font-weight: bold;
}

@media screen and (min-width: 768px) {
	#next {
		background-position: center top;
		background-size: calc(367 / 1400 * 100%) auto;
		padding: calc(60 / 1400 * 100%) 0;
	}

	.next_box {
		border-radius: 60px;
		padding: calc(37 / 1200 * 100%) calc(100 / 1200 * 100%) calc(65 / 1200 * 100%);
	}

	.next_box::before {
		background: url(../images/common/bg_deco1_pc.png) repeat-x top left calc(-2900 / 1200 * 100%)/calc(1090 / 1200 * 100%) auto;
		-webkit-transform: scale(-1, 1);
		transform: scale(-1, 1);
		padding-top: calc(120 / 1200 * 100%);
		margin-top: calc(-10 / 1200 * 100%);
	}

	.next_box::after {
		left: auto;
		width: calc(126 / 1200 * 100%);
		padding-top: calc(71 / 1200 * 100%);
		margin: 0 calc(50 / 1040 * 100%) 0 0;
	}

	#next h2 {
		width: calc(180 / 1000 * 100%);
	}

	.next_date {
		font-size: 2.4rem;
		margin: .4em 0 0;
	}

	#next dd {
		font-size: 2.4rem;
		line-height: 1.416;
		text-align: center;
	}

}

@media screen and (min-width: 1400px) {
	#next {
		background-size: 367px auto;
		padding: 60px 0;
	}
}

/* ********************************************************************
onair
******************************************************************** */
#onair {
	padding: calc(100 / 750 * 100%) 0;
}

.onair_head {}

.onair_date {
	color: #ae0082;
	margin-bottom: 1em !important;
}

.onair_wrap h3 {
	color: #ff00a5;
	font-size: 2.8rem;
	margin-bottom: 2em;
	padding-bottom: 1.5em;
}

.onair_wrap h3::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(9 / 670 * 100%);
	background: url(../images/common/dotted1.png) round center/calc(36 / 670 * 100%) auto;
}

.onair_box_img {
	margin-bottom: 2.5em;
}

.onair_box_img img {
	margin-bottom: .7em;
}

.onair_box_img img:last-child {
	margin-bottom: 0;
}

.onair_wrap h4 {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.357;
}

.onair_wrap h4::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: .3em;
	height: 100%;
	background-color: #ff00a5;
}

.onair_wrap h4,
.onair_wrap p,
.onair_wrap ul {
	margin-bottom: 2em;
}

.onair_wrap h4,
.onair_box p,
.onair_row p,
.onair_box ul,
.onair_row ul {
	padding-left: 1.5em;
}

.onair_wrap ul li {
	padding-left: 1.3em;
}

.onair_wrap ul li:not(:last-child) {
	margin-bottom: .7em;
}

.onair_wrap ul li::before {
	content: '●';
	position: absolute;
	top: 0;
	left: 0;
	color: #ae0082;
}

.onair_wrap .txt_link {
	display: inline-block;
	padding-left: 1.5em;
}

.onair_wrap .txt_link::before {
	content: "";
	position: absolute;
	display: block;
	width: calc(27 / 750 * 100vw);
	height: calc(27 / 750 * 100vw);
	background-color: #000;
	border-radius: 50%;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto 0;
}

.onair_wrap .txt_link::after {
	content: "";
	display: inline-block;
	width: calc(8 / 750 * 100vw);
	height: calc(8 / 750 * 100vw);
	margin: auto 0 auto calc(9 / 750 * 100vw);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}

.btn_cast {
	width: calc(600 / 670 * 100%);
	margin: 3em auto 0;
}

@media screen and (min-width: 768px) {
	#onair {
		padding: calc(100 / 1400 * 100%) 0;
	}

	#onair h2 {
		margin-bottom: calc(75 / 1200 * 100%);
	}

	.onair_wrap {
		width: calc(1040 / 1200 * 100%);
		margin: 0 auto;
	}

	.onair_head {}

	.onair_date {
		margin-bottom: 0 !important;
	}

	.onair_wrap h3 {
		padding-bottom: .8em;
		margin-bottom: 2.5em;
		font-size: 2.4rem;
	}

	.onair_wrap h3::before {
		padding-top: calc(6 / 1040 * 100%);
		background-size: calc(24 / 1040 * 100%) auto;
	}

	.onair_row {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-align-items: flex-start;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.onair_box_img {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.onair_box_img img {
		margin: .7em 0 0 0;
	}

	.onair_box_img img:nth-child(-n+2) {
		margin-top: 0;
	}

	.onair_row > .onair_box_img,
	.onair_box_img img,
	.onair_box_txt {
		width: calc(500 / 1040 * 100%);
	}

	.onair_row > .onair_box_img {
		margin-bottom: 0;
	}

	.onair_row > .onair_box_img img {
		width: 100%;
	}

	.onair_box,
	.onair_row {
		margin-top: 4em;
	}

	.onair_wrap h4,
	.onair_wrap p,
	.onair_wrap ul {
		margin-bottom: 1.3em;
	}

	.onair_wrap h4,
	.onair_box p,
	.onair_row p,
	.onair_box ul,
	.onair_row ul {
		padding-left: 1em;
	}

	.onair_wrap h4 {
		font-size: 2rem;
	}

	.onair_wrap ul li:not(:last-child) {
		margin-bottom: .5em;
	}

	.onair_wrap .txt_link::before {
		width: calc(18 / 1400 * 100vw);
		height: calc(18 / 1400 * 100vw);
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.onair_wrap .txt_link::after {
		width: calc(7 / 1400 * 100vw);
		height: calc(7 / 1400 * 100vw);
		margin: auto 0 auto calc(5 / 1400 * 100vw);
	}

	.onair_wrap .txt_link:hover::before {
		background-color: #b73378;
	}

	.btn_cast {
		top: 0;
		width: calc(450 / 1200 * 100%);
	}

	.btn_cast:hover {
		top: 5px;
	}
}

@media screen and (min-width: 1400px) {
	#onair {
		padding: 100px 0;
	}

	.onair_wrap .txt_link::before {
		width: 18px;
		height: 18px;
	}

	.onair_wrap .txt_link::after {
		width: 7px;
		height: 7px;
		margin-left: 5px;
	}
}


/* ********************************************************************
bg_onair
******************************************************************** */

.bg_onair_img1,
.bg_onair_img2 {
	position: fixed;
	top: 0;
	padding-top: calc(1293 / 670 * 100%);
	display: none;
}

.bg_onair_img1 {
	width: calc(105 / 670 * 100%);
	background: url(../images/top/bg_deco2_L_sp.png) no-repeat center top/100% auto;
}

.bg_onair_img2 {
	right: 0;
	width: calc(89 / 670 * 100%);
	background: url(../images/top/bg_deco2_R_sp.png) no-repeat center top/100% auto;
}

@media screen and (min-width: 768px) {

	.bg_onair_img1,
	.bg_onair_img2 {
		margin-top: calc(266 / 1920 * 100%);
		padding-top: calc(888 / 1920 * 100%);
		opacity: .3;
	}

	.bg_onair_img1 {
		width: calc(326 / 1920 * 100%);
		background: url(../images/top/bg_deco2_L_pc.png) no-repeat center top/100% auto;
	}

	.bg_onair_img2 {
		width: calc(331 / 1920 * 100%);
		background: url(../images/top/bg_deco2_R_pc.png) no-repeat center top/100% auto;
	}
}

@media screen and (min-width: 1920px) {

	.bg_onair_img1,
	.bg_onair_img2 {
		margin-top: 266px;
		padding-top: 888px;
	}

	.bg_onair_img1 {
		width: 326px;
		margin-left: 10vw;
	}

	.bg_onair_img2 {
		width: 331px;
		margin-right: 10vw;
	}
}

/* ********************************************************************
about_corner
******************************************************************** */
.about_corner {
	background-color: #f8df08;
	padding: calc(150 / 750 * 100%) 0;
}

.about_corner::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	background: url(../images/common/bg_deco1_sp.png) no-repeat center/100% auto;
	width: 100%;
	padding-top: calc(107 / 750 * 100%);
}

.about_corner::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/common/bg_pattern4.jpg) repeat top left/calc(40 / 750 * 100%) auto;
	width: 100%;
	padding-top: calc(60 / 750 * 100%);
}

@media screen and (min-width: 768px) {
	.about_corner {
		padding: calc(140 / 1400 * 100%) 0 calc(120 / 1400 * 100%);
	}

	.about_corner::before {
		background: url(../images/common/bg_deco1_pc.png) repeat-x center top/calc(960 / 1400 * 100%) auto;
		padding-top: calc(107 / 1400 * 100%);
	}

	.about_corner::after {
		background-size: calc(20 / 1400 * 100%) auto;
		padding-top: calc(30 / 1400 * 100%);
	}

	.about_corner .inner {
		padding: 0;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

}

@media screen and (min-width: 1400px) {
	.about_corner {
		padding: 140px 0 120px;
	}

	.about_corner::before {
		background-size: 960px auto;
		padding-top: 107px;
	}

	.about_corner::after {
		background-size: 20px auto;
		padding-top: 30px;
	}
}


/* ********************************************************************
corner
******************************************************************** */
#corner h2::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/top/bg_kirakira.png) no-repeat center/contain;
	width: calc(748 / 670 * 100%);
	padding-top: calc(113 / 670 * 100%);
	margin: 0 0 calc(-45 / 670 * 100%) calc(-48 / 670 * 100%);
}

.corner_slider {
	margin-bottom: calc(100 / 670 * 100%);
}

.corner_box {
	width: calc(200 / 750 * 100vw);
	margin: 0 calc(15 / 750 * 100vw);
}

.corner_box_ttl {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	color: #ff00a5;
	margin-top: 1em;
}

.corner_box_txt {
	display: none;
}

.slick-list {
	padding: 0 !important;
	overflow: hidden;
}

.slick-arrow {
	width: calc(75 / 750 * 100vw);
	height: calc(75 / 750 * 100vw);
	position: absolute;
	top: 0;
	margin-top: calc(66 / 750 * 100vw);
	cursor: pointer;
}

.slick-arrow.prev {
	left: calc(-40 / 750 * 100vw);
	z-index: 2;
}

.slick-arrow.next {
	right: calc(-40 / 750 * 100vw);
}

.slick-arrow::before,
.slick-arrow::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	margin: auto;
	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}

.slick-arrow::before {
	border-radius: 50%;
	background-color: #000;
}

.slick-arrow::after {
	width: calc(20 / 750 * 100vw);
	height: calc(20 / 750 * 100vw);
	border-top: calc(5 / 750 * 100vw) solid #ff00a5;
	border-right: calc(5 / 750 * 100vw) solid #ff00a5;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.slick-arrow.prev::after {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.slick-arrow:hover::before {}

@media screen and (min-width: 768px) {
	#corner {
		width: calc(640 / 1400 * 100%);
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}

	#corner h2 {
		width: calc(500 / 640 * 100%);
		margin-bottom: calc(45 / 640 * 100%);
	}

	#corner h2::before {
		background-image: url(../images/top/bg_kirakira_pc.png);
		width: calc(640 / 500 * 100%);
		padding-top: calc(76 / 500 * 100%);
		margin: 0 0 calc(-45 / 500 * 100%) calc(-70 / 500 * 100%);
	}

	.corner_slider {
		margin-bottom: calc(40 / 640 * 100%);
	}

	.slick-list {
		width: calc(550 / 640 * 100%);
		margin: 0 auto;
	}

	.corner_slider li {
		cursor: pointer;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.corner_slider li:hover {
		opacity: .8;
	}

	.corner_box {
		width: calc(160 / 1400 * 100vw);
		margin: 0 calc(15 / 1400 * 100vw);
	}

	.corner_box_ttl {
		font-size: 1.6rem;
	}

	.slick-arrow {
		width: calc(60 / 1400 * 100vw);
		height: calc(60 / 1400 * 100vw);
		margin-top: calc(53 / 1400 * 100vw);
	}

	.slick-arrow.prev {
		left: 0;
	}

	.slick-arrow.next {
		right: 0;
	}

	.slick-arrow::after {
		width: calc(15 / 1400 * 100vw);
		height: calc(15 / 1400 * 100vw);
		border-width: calc(5 / 1400 * 100vw);
	}

	.slick-arrow:hover::before {
		background-color: #ff00a5;
	}

	.slick-arrow:hover::after {
		border-color: #fff;
	}

}

@media screen and (min-width: 1400px) {
	.corner_box {
		width: 160px;
		margin: 0 15px;
	}

	.slick-arrow {
		width: 60px;
		height: 60px;
		margin-top: 53px;
	}

	.slick-arrow::after {
		width: 15px;
		height: 15px;
		border-width: 5px;
	}
}


/* ********************************************************************
popup
******************************************************************** */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: none;
}

.popup_area {
	width: 100vw;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

/* .popup_bg::before,
.popup_bg::after {
content: '';
position: fixed;
top: 0;
padding-top: calc(1293 / 750 * 100%);
margin-top: calc(91 / 750 * 100%);
}

.popup_bg::before {
left: 0;
background: url(../images/top/bg_deco3_L_sp.png) no-repeat right top/contain;
width: calc(105 / 750 * 100%);
}

.popup_bg::after {
right: 0;
background: url(../images/top/bg_deco3_R_sp.png) no-repeat right top/contain;
width: calc(89 / 750 * 100%);
}*/

.popup_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #f8df08;
	opacity: .9;
}

.popup_close {
	position: absolute;
	top: calc(-80 / 1400 * 100%);
	right: 0;
	/* background-color: #ff00a5; */
	width: calc(70 / 670 * 100%);
	z-index: 3;
}

.popup_close::before,
.popup_close::after {
	content: "";
	display: block;
	width: 2px;
	padding-top: 100%;
	background-color: #ff00a5;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin: 0 auto;
}

.popup_close::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.popup_inner {
	width: calc(670 / 750 * 100%);
	padding: 0 0;
	margin: calc(150 / 750 * 100%) auto 0;
	z-index: 2;
	border-radius: 60px;
	background-color: #fff;
}

.popup_details {
	width: 100%;
	height: 100%;
	padding: calc(80 / 670 * 100%) calc(60 / 670 * 100%);
}

.popup_img {
	width: calc(240 / 550 * 100%);
	margin: 0 auto;
	border: 5px solid #ff00a5;
	border-radius: calc(120 / 550 * 100%);
	overflow: hidden;
}

.popup h3 {
	color: #ff00a5;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	margin: 1em 0;
	padding-bottom: 1.3em;
}

.popup h3::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(10 / 550 * 100%);
	background: url(../images/common/dotted2.png) round center/calc(35 / 550 * 100%) auto;
}

.popup_txt {
	white-space: pre-line;
}


@media screen and (min-width: 768px) {
	.popup_area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.popup_bg::before,
	.popup_bg::after {
		padding-top: calc(888 / 1920* 100%);
		margin-top: calc(102 / 1920* 100%);
	}

	.popup_bg::before {
		background: url(../images/top/bg_deco2_L_pc.png) no-repeat right top/contain;
		width: calc(326 / 1920* 100%);
		margin-left: calc(40 / 1920 * 100%);
	}

	.popup_bg::after {
		background: url(../images/top/bg_deco2_R_pc.png) no-repeat right top/contain;
		width: calc(331 / 1920* 100%);
		margin-right: calc(40 / 1920 * 100%);
	}

	.popup_bg {
		cursor: pointer;
	}

	.popup_inner {
		-ms-flex-item-align: start;
		align-self: flex-start;
		/*		width: calc(920 / 1400 * 100%);*/
		max-width: 920px;
		padding: 0;
		margin: auto;
	}

	.popup_close {
		cursor: pointer;
		top: calc(-59 / 920 * 100%);
		width: calc(50 / 920 * 100%);
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
		margin: 0;
	}

	.popup_close:hover {
		background-color: #f8df08;
		border-color: #f8df08;
	}

	.popup_close::before,
	.popup_close::after {
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.popup_close:hover::before,
	.popup_close:hover::after {
		background-color: #ff00a5;
	}

	.popup_details {
		width: calc(780 / 920 * 100%);
		margin: calc(80 / 920 * 100%) calc(45 / 920 * 100%) calc(80 / 920 * 100%) calc(90 / 920 * 100%);
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0;
	}

	.popup_img {
		width: calc(230 / 780 * 100%);
		margin-left: 0;
		border-width: .7em;
		border-radius: calc(180 / 780 * 100%);
	}

	.popup_txt_box {
		width: calc(480 / 780 * 100%);
	}

	.popup h3 {
		font-size: 2.4rem;
		text-align: left;
		margin: 0 0 .8em;
		padding-bottom: 1.2em;
	}

	.popup h3::before {
		padding-top: calc(5 / 480 * 100%);
		background-size: calc(20 / 480 * 100%) auto;
	}
}

@media screen and (max-height: 600px) {
	.popup_inner {
		margin: calc(100 / 1400 * 100%) auto;
	}
}



/* ********************************************************************
about
******************************************************************** */
#about h2 {
	margin-bottom: calc(48 / 670 * 100%);
}

.about_txt {
	width: calc(750 / 670 * 100%);
	margin-left: calc(-40 / 670 * 100%);
}

.sns_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: calc(20 / 670 * 100%) auto 0;
}

.sns_list li {
	width: calc(149 / 670 * 100%);
	margin: 0 calc(30 / 670 * 100%);
}

.sns_list li a {}

@media screen and (min-width: 768px) {

	#about {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		width: calc(738 / 1400 * 100%);
	}

	#about h2 {
		width: calc(500 / 738 * 100%);
		margin-bottom: calc(30 / 738 * 100%);
	}

	.about_txt {
		width: 100%;
		margin-left: 0;
	}

	.sns_list {
		float: right;
		width: calc(640 / 1400 * 100%);
		-webkit-box-ordinal-group: 4;
		-ms-flex-order: 3;
		order: 3;
		margin: calc(-370 / 1400 * 100%) 0 0 auto;
		padding-top: calc(40 / 1400 * 100%);
	}

	.sns_list::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: calc(5 / 640 * 100%);
		background: url(../images/common/dotted2.png) repeat-x center/calc(20 / 640 * 100%) auto;
	}

	.sns_list li {
		width: calc(100 / 640 * 100%);
		margin: 0 calc(30 / 640 * 100%);
	}

}


/* ********************************************************************
insta
******************************************************************** */
#insta {
	background: url(../images/common/bg_pattern1.jpg) repeat top left/calc(460 / 750 * 100%) auto;
	padding: calc(100 / 750 * 100%) 0;
}

#insta::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 100%;
	height: calc(191 / 750 * 100vw);
	background: url(../images/common/bg_pattern3.jpg) repeat-x top left 2vw/111% auto;
}

#insta h2 {
	font-family: 'Concert One', cursive;
	font-size: 4rem;
	text-align: center;
	margin-bottom: .3em;
}

.insta_box,
.insta_box::before {
	border-radius: 20px;
}

.insta_box {
	background-color: #fff;
	border: 6px solid #f8df08;
	overflow: hidden;
}

.insta_box_inner {
	padding-top: calc(850 / 670 * 100%);
	overflow-y: scroll;
	-ms-overflow-style: none;
	/* IE, Edge 対応 */
	scrollbar-width: none;
	/* Firefox 対応 */
	z-index: 2;
}

.insta_box_inner::-webkit-scrollbar {
	/* Chrome, Safari 対応 */
	display: none;
}

.insta_list {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

.insta_list li {
	margin-bottom: 7%;
}

.insta_list li:not(:last-child)::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	height: 1px;
	background-color: #ff00a5;
}

.insta_list figcaption {
	padding: 5%;
}

@media screen and (min-width: 768px) {
	#insta {
		background-size: calc(460 / 1400 * 100%) auto;
		padding: calc(100 / 1400 * 100%) 0 calc(190 / 1400 * 100%);
	}

	#insta::before {
		height: calc(191 / 1400 * 100vw);
		background: url(../images/common/bg_pattern3.jpg) repeat-x top center/calc(840 / 1400 * 100%) auto;
		/*		margin-top: calc(368 / 1400 * 100%);*/
	}

	.insta_box {
		width: calc(420 / 1200 * 100%);
		margin: 0 auto;
		border-radius: 2.5em;
		border-width: .7em;
	}

	.insta_box::before {
		content: '';
		position: absolute;
		top: -1px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: calc(188 / 420 * 100%);
		padding-top: calc(28 / 420 * 100%);
		background-color: #f8df08;
		border-radius: 0 0 30px 30px;
		z-index: 1;
	}

	#insta h2 {
		padding-top: .8em;
		font-size: 3rem;
	}

	.insta_box_inner {
		padding-top: calc(615 / 420 * 100%);
	}

	.insta_list li a:hover {
		opacity: .8;
	}

}

@media screen and (min-width: 1400px) {
	#insta {
		background-size: 460px auto;
		padding: 100px 0 190px;
	}

	#insta::before {
		height: 191px;
		background-size: 840px auto;
		margin-top: 368px;
	}
}