@charset "utf-8";

.ModalBtnText {
	color: #1494f7;
	text-decoration: none;
	cursor: pointer;
}

.ModalBtnText:after {
    position: relative;
    left: 6px;
    top: 1px;
    content: "\f2d2";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: #000;
    font-size: 14px;
    text-decoration: none;
}


.section--white {
	background: white;
	color: #555;
}
.disable-mouse {
	pointer-events: none;
}
body.disable-scroll {
	overflow: hidden;
		height: 100%;
}
.main-title {
	color: white;
	font-size: 100px;
}

.download-btn {
	background: white;
	color: #3F51B5;
	font-size: 30px;
}
.btn--blue {
	background: #4A90E2;
}
.tile {
	display:inline-block;
}
.tile-container {
	overflow: hidden;
}
.btn:hover,
.tile:hover {
	opacity: 1;
}
.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding:5vw 6vw 5vw;
	background: #333;
	color: white;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: 200ms ease;
	overflow: auto;
}

.modal h2 {
	padding:10px 0 8px 0;
	border-bottom:solid 2px #333;
	border-top:solid 2px #333;
	font-size:22px;
	line-height:24px;
	margin-bottom:30px;
}

.modal-close-btn {
	display: block;
	/*position: absolute;*/
	position: fixed;
	top: 0;
	right: 0;
	background: url(/img/common/close.png) no-repeat top 1vw right calc(3.6vw - 20px);
	width: 100%;
	height: 100%;
	padding:0px;
	opacity: 0.8;
	cursor: pointer;
	transition: 0.3s ease;
}
.modal-close-btn:hover {
	opacity: 1;
}
.modal.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: #333;
}
.dialog {
	background: #4A90E2;
	min-width: 300px;
	left: 50%;
	right: auto;
	top: 30%;
	bottom: auto;
	box-shadow: 0 0 0 3000px rgba(0,0,0,0.4);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.quote-box__bubble {
	position: relative;
	background: white;
	padding:10vw 5vw 3vh;
	padding-top:calc(5vw + 20px);
	color: #555;
	border-radius: 5px;
	width:auto;
	max-width: 1000px;
	margin: 0 auto 20px;
	overflow: hidden;
	box-sizing:border-box;
}
.quote-box__bubble:after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: white;
	border-top-width: 10px;
}

.quote-box__bubble p {
	margin-bottom: 30px;
	}

.quote-box__bubble h3 {
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 5px;
	}


.fixed {
	position: fixed;
	width: 100%;
}





/*  ---------------------------------------------------
	=スマートフォン用ＣＳＳ
-------------------------------------------------------------- */

@media screen and (min-aspect-ratio:1/100) and (max-aspect-ratio: 2/3){

.modal {
	padding:5vw 2vw;
	transition: 200ms ease;
}


/*.modal-close-btn {
	padding: 0px;
  background:url(/img/common/close.png) no-repeat top 4vh left 30px;
}*/

.modal-close-btn {
  padding: 0px;
  background: url(/img/common/close.png) no-repeat center #333;
  display: block;
  z-index: 1;
  position: fixed;
  top: 2vh;
  left: 4vw;
  width: 10vw;
  height: 10vw;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
}


.quote-box__bubble {
	padding:6vh 5vw ;
	width:100%;
	margin: 8vh auto 20px;
	overflow: hidden;
}
  
.quote-box__bubble:after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: white;
	border-top-width: 10px;
}

.quote-box__bubble h3 {
  padding: 0;
  margin-bottom: 1.6vh;
}




}/*media screen:END*/