@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2022 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2022 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.0
 * Update	: 2022.09.15
 *
 *************************************************************/




/**************************************************
 *
 * アラートを表示
 *
 **************************************************/
body > div.ysrock_ios_alert{
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	width:100vw;
	height:100vh;
	background-color:rgba(0, 0, 0, .2);
}
body > div.ysrock_ios_alert > div.wrap{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color:#fff;
	text-align:center;
}
body > div.ysrock_ios_alert > div.wrap > div.subject{
	font-weight:bold;
}
body > div.ysrock_ios_alert > div.wrap > div.body{
	color:#666;
}
body > div.ysrock_ios_alert > div.wrap > div.buttons{
	width:100%;
	display:table;
	table-layout:fixed;
	border-top-style:solid;
	border-top-color:#c7c7c7;
	user-select:none;
}
body > div.ysrock_ios_alert > div.wrap > div.buttons > div{
	display:table-cell;
	vertical-align:middle;
	appearance:none;
	border:0;
	border-left-style:solid;
	border-left-color:#c7c7c7;
	background-color:unset;
	cursor:pointer;
}

@media print, screen and (min-width: 1025px){
	/* px */

	body > div.ysrock_ios_alert > div.wrap{
		max-width:300px;
		border-radius:10px;
	}
	body > div.ysrock_ios_alert > div.wrap > div.subject{
		padding:20px 20px 0;
		font-size:16px;
	}
	body > div.ysrock_ios_alert > div.wrap > div.body{
		margin-top:8px;
		padding:0 20px;
		font-size:14px;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons{
		margin-top:20px;
		border-top-width:1px;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div{
		padding-top:10px;
		padding-bottom:10px;
		font-size:16px;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div:not(:first-of-type){
		border-left-width:1px;
	}
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

	body > div.ysrock_ios_alert > div.wrap{
		width:40vw;
		border-radius:1.1709vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.subject{
		padding:2.3419vw 2.3419vw 0;
		font-size:1.8735vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.body{
		margin-top:0.9367vw;
		padding:0 2.3419vw;
		font-size:1.6393vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons{
		margin-top:2.3419vw;
		border-top-width:0.117vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div{
		padding-top:1.1709vw;
		padding-bottom:1.1709vw;
		font-size:1.8735vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div:not(:first-of-type){
		border-left-width:0.117vw;
	}
}
@media screen and (max-width: 640px){
	/* px/4 */

	body > div.ysrock_ios_alert > div.wrap{
		width:75vw;
		border-radius:2.5vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.subject{
		padding:5vw 5vw 0;
		font-size:4vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.body{
		margin-top:2vw;
		padding:0 5vw;
		font-size:3.5vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons{
		margin-top:5vw;
		border-top-width:0.25vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div{
		padding-top:2.5vw;
		padding-bottom:2.5vw;
		font-size:4vw;
	}
	body > div.ysrock_ios_alert > div.wrap > div.buttons > div:not(:first-of-type){
		border-left-width:0.25vw;
	}
}
/********** END アラートを表示 ********************/



/**************************************************
 *
 * iOS風のスピナー
 *
 **************************************************/
body > div.ysrock_ios_spinner{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9999;
	background-color:rgba(0, 0, 0, .1);
}

body > div.ysrock_ios_spinner > div.close{
	position:absolute;
	display:inline-block;
	cursor:pointer;
}
body > div.ysrock_ios_spinner > div.close::before,
body > div.ysrock_ios_spinner > div.close::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	display:inline-block;
	background-color:#000;
}
body > div.ysrock_ios_spinner > div.close::before{
	transform:rotate(45deg);
}
body > div.ysrock_ios_spinner > div.close::after{
	transform:rotate(-45deg);
}

body > div.ysrock_ios_spinner > div.wrap{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	display:inline-block;
	animation:ysrock_ios_spinner_keyframe 1.5s steps(15, start) infinite;
}
body > div.ysrock_ios_spinner > div.wrap > div{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	display:inline-block;
	width:100%;
}
body > div.ysrock_ios_spinner > div.wrap > div::before{
	content:"";
	position:absolute;
	left:0;
	display:inline-block;
	height:100%;
}
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 1){ transform:rotate(  0deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 2){ transform:rotate( 24deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 3){ transform:rotate( 48deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 4){ transform:rotate( 72deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 5){ transform:rotate( 96deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 6){ transform:rotate(120deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 7){ transform:rotate(144deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 8){ transform:rotate(168deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 9){ transform:rotate(192deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(10){ transform:rotate(216deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(11){ transform:rotate(240deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(12){ transform:rotate(264deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(13){ transform:rotate(288deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(14){ transform:rotate(312deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(15){ transform:rotate(336deg); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 1)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 2)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 3)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 4)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 5)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 6)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 7)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 8)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child( 9)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(10)::before{ background-color:rgba(100, 100, 100, 0.5); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(11)::before{ background-color:rgba(100, 100, 100, 0.6); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(12)::before{ background-color:rgba(100, 100, 100, 0.7); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(13)::before{ background-color:rgba(100, 100, 100, 0.8); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(14)::before{ background-color:rgba(100, 100, 100, 0.9); }
body > div.ysrock_ios_spinner > div.wrap > div:nth-child(15)::before{ background-color:rgba(100, 100, 100, 1  ); }

@keyframes ysrock_ios_spinner_keyframe{
	  0%{ transform:rotate(  0deg); }
	100%{ transform:rotate(360deg); }
}

@media print, screen and (min-width: 1025px){
	/* px */

	body > div.ysrock_ios_spinner > div.close{
		top:10px;
		right:10px;
		width:40px;
		height:40px;
	}
	body > div.ysrock_ios_spinner > div.close::before,
	body > div.ysrock_ios_spinner > div.close::after{
		width:30px;
		height:5px;
	}
	body > div.ysrock_ios_spinner > div.wrap{
		width:50px;
		height:50px;
	}
	body > div.ysrock_ios_spinner > div.wrap > div{
		height:4px;
	}
	body > div.ysrock_ios_spinner > div.wrap > div::before{
		width:13px;
		border-radius:13px;
	}
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8 */

	body > div.ysrock_ios_spinner > div.close{
		top:1.25vw;
		right:1.25vw;
		width:5vw;
		height:5vw;
	}
	body > div.ysrock_ios_spinner > div.close::before,
	body > div.ysrock_ios_spinner > div.close::after{
		width:3.75vw;
		height:0.625vw;
	}
	body > div.ysrock_ios_spinner > div.wrap{
		width:6.25vw;
		height:6.25vw;
	}
	body > div.ysrock_ios_spinner > div.wrap > div{
		height:0.5vw;
	}
	body > div.ysrock_ios_spinner > div.wrap > div::before{
		width:1.625vw;
		border-radius:1.625vw;
	}
}
@media screen and (max-width: 640px){
	/* px/3.5 */

	body > div.ysrock_ios_spinner > div.close{
		top:2.8571vw;
		right:2.8571vw;
		width:11.4285vw;
		height:11.4285vw;
	}
	body > div.ysrock_ios_spinner > div.close::before,
	body > div.ysrock_ios_spinner > div.close::after{
		width:8.5714vw;
		height:1.4285vw;
	}
	body > div.ysrock_ios_spinner > div.wrap{
		width:14.2857vw;
		height:14.2857vw;
	}
	body > div.ysrock_ios_spinner > div.wrap > div{
		height:1.1428vw;
	}
	body > div.ysrock_ios_spinner > div.wrap > div::before{
		width:3.7142vw;
		border-radius:3.7142vw;
	}
}
/********** END iOS風のスピナー ********************/




/**************************************************
 *
 * 左からスワイプで浮遊要素を画面外に（その後削除）
 *
 **************************************************/

@media print, screen and (min-width: 1025px){
	/* px */
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8 */
}
@media screen and (max-width: 640px){
	/* px/3.5 */

	.ysrock_ios_no_transition{
		transition-duration:0s!important;
	}
}
/********** END 左からスワイプで浮遊要素を画面外に（その後削除） ********************/




/**************************************************
 *
 * テンプレート
 *
 **************************************************/

@media print, screen and (min-width: 1025px){
	/* px */
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8 */
}
@media screen and (max-width: 640px){
	/* px/3.5 */
}
/********** END テンプレート ********************/