@charset "UTF-8" ;

/********************************************************************************

	SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ

	* 配布場所
	https://syncer.jp/jquery-modal-window

	* 最終更新日時
	2015/08/17 15:38

	* 作者
	あらゆ

	** 連絡先
	Twitter: https://twitter.com/arayutw
	Facebook: https://www.facebook.com/arayutw
	Google+: https://plus.google.com/114918692417332410369/
	E-mail: info@syncer.jp

	※ バグ、不具合の報告、提案、ご要望など、お待ちしております。
	※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。

********************************************************************************/



.modal-content {
	width: 50% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 20 ;
}
.modal-content iframe {
 /*width: 100%;
  height: auto;*/
}
/* 768px(sm)～ ____________________________________________________ */
@media print,screen and (min-width: 768px) {
  .modal-content iframe {
 width: 100%;
  height: auto;  
}
}
/* 992px(md)～ ____________________________________________________ */
@media screen and (min-width: 992px) {
  .modal-content {
    max-width: 480px;
	height: 390px!important;
}
  .modal-content iframe {
 width: 450px;
  min-height: 320px;
}
}
/* 1200px(lg)～ ___________________________________________________ */
@media screen and (min-width: 1200px) {
  .modal-content {
    max-width: 760px;
	height: 520px!important;
}
  .modal-content iframe {
 max-width: 730px;
  height: 450px;
}
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  .modal-content {
	width: 90% !important;
}
}

@media screen and (max-width: 480px) {
  .modal-content {
	max-width: 460px!important;
    height: 350px!important;
}
  .modal-content iframe {
 max-width: 440px!important;
  height: 275px!important;
}
}
  
#modal-overlay {
	z-index: 19 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	/*color: #f00 ;*/
}
.btn-square-little-rich {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #03A9F4;/*色*/
  border: solid 1px #0f9ada;/*線色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  margin-top: -1em;
}

.btn-square-little-rich:active {
  /*押したとき*/
  border: solid 1px #03A9F4;
  box-shadow: none;
  text-shadow: none;
}