@charset "utf-8";
/* Default CSS PC */

/* -------------------------------------------------------
サイト全体
------------------------------------------------------- */
html{
	width: auto;
	height:auto;
}
body{
	width: auto;
	height: auto;
}

#topcontrol{/* ページの先頭へリンクを前面に */
	z-index: 100;
}


/* -------------------------------------------------------
余白関係
------------------------------------------------------- */
/* paddingに関する設定 */
.pt0{padding-top: 0px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt60{padding-top: 60px;}
.pt70{padding-top: 70px;}
.pt80{padding-top: 80px;}
.pt90{padding-top: 90px;}
.pt100{padding-top: 100px;}

.pb0{padding-bottom: 0px !important;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb60{padding-bottom: 60px;}
.pb70{padding-bottom: 70px;}
.pb80{padding-bottom: 80px;}
.pb90{padding-bottom: 90px;}
.pb100{padding-bottom: 100px;}

.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
.pl70{padding-left: 70px;}
.pl80{padding-left: 80px;}
.pl90{padding-left: 90px;}
.pl100{padding-left: 100px;}

.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pr60{padding-right: 60px;}
.pr70{padding-right: 70px;}
.pr80{padding-right: 80px;}
.pr90{padding-right: 90px;}
.pr100{padding-right: 100px;}

/* marginに関する設定 */
.mlr_auto{ margin-left: auto;margin-right: auto;}

.mt0{margin-top: 0px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}
.mt90{margin-top: 90px;}
.mt100{margin-top: 100px;}

.mb0{margin-bottom: 0px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb90{margin-bottom: 90px;}
.mb100{margin-bottom: 100px;}

.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml60{margin-left: 60px;}
.ml70{margin-left: 70px;}
.ml80{margin-left: 80px;}
.ml90{margin-left: 90px;}
.ml100{margin-left: 100px;}

.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr60{margin-right: 60px;}
.mr70{margin-right: 70px;}
.mr80{margin-right: 80px;}
.mr90{margin-right: 90px;}
.mr100{margin-right: 100px;}


/* -------------------------------------------------------
寄せ・高さ・改行・写真枠
------------------------------------------------------- */
.text_c{text-align: center;}
.text_l{text-align: left;}
.text_r{text-align: right;}

.img_h{line-height: 0;}

.clear{clear: both;}

.block{display: block;}
.inblock{display: inline-block;}

.shadow01{
	display: inline-block;
	background-color: white;
	border: #cccccc solid 1px;
	
	box-shadow:1px 1px 1px 1px #eaeaea;
	-moz-box-shadow:1px 1px 1px 1px #eaeaea;
	-webkit-box-shadow:1px 1px 1px 1px #eaeaea;
	line-height: 0;
}


/* -------------------------------------------------------
画面サイズによる表示有無
------------------------------------------------------- */
/* 1040px以上-- */
@media screen and (min-width : 1040px) {/* 1040px以上への置き換え */
	.pc_invisi{display: none;}
}
/* --1040px以上 */

/* 768px-1039px-- */
@media screen and (min-width: 768px) and (max-width: 1039px) {/* 768px-1039pxへの置き換え */
	.tab_invisi{display: none;}
}
/* --768px-1039px */

/* 767px-- */
@media screen and (max-width: 767px) {/* 767px以下への置き換え */
	.sm_invisi{display: none;}
}
/* --767px */


/* -------------------------------------------------------
画面サイズによるブロック要素指定
------------------------------------------------------- */
/* 1040px以上-- */
@media screen and (min-width : 1040px) {/* 1040px以上への置き換え */
	.pc_block{display: block;}
}
/* --1040px以上 */

/* 768px-1039px-- */
@media screen and (min-width: 768px) and (max-width: 1039px) {/* 768px-1039pxへの置き換え */
	.tab_block{display: block;}
}
/* --768px-1039px */

/* 767px-- */
@media screen and (max-width: 767px) {/* 767px以下への置き換え */
	.sm_block{display: block;}
}
/* --767px */


/* -------------------------------------------------------
ボックス関係
------------------------------------------------------- */
/* 全体枠 */
#c_wrapper{
	width: auto;
	height: auto;
}

/* コンテンツ枠 */
.c_contents{
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	width: 1040px;
	height: auto;
}


/* 背景色 利用時は任意に変更 */
.c_bgcolor-171c610{
	background-color: #171c61;
}

/* DIV table化 */
/* 768px以上-- */
@media screen and (min-width : 768px) {/* 768px以上への置き換え */
	.c_table{
		display: table;
		height: auto;
	}
	.c_table-cell{
		display: table-cell;
		height: auto;
	}
	
	.c_table-10{width: 10%;}
	.c_table-20{width: 20%;}
	.c_table-30{width: 30%;}
	.c_table-40{width: 40%;}
	.c_table-50{width: 50%;}
	.c_table-60{width: 60%;}
	.c_table-70{width: 70%;}
	.c_table-80{width: 80%;}
	.c_table-90{width: 90%;}
	.c_table-100{width: 100%;}
	
	/* DIV table時の内部位置調整 */
	.c_table-top{vertical-align: top;}
	.c_table-mid{vertical-align: middle;}
	.c_table-bt{vertical-align: bottom;}
}
/* --768px以上 */

/* 767px-- */
@media screen and (max-width: 767px) {/* 767px以下への置き換え */
	.sm_c_table{
		display: table;
		height: auto;
	}
	.sm_c_table-cell{
		display: table-cell;
		height: auto;
	}
	
	.sm_c_table-10{width: 10%;}
	.sm_c_table-20{width: 20%;}
	.sm_c_table-30{width: 30%;}
	.sm_c_table-40{width: 40%;}
	.sm_c_table-50{width: 50%;}
	.sm_c_table-60{width: 60%;}
	.sm_c_table-70{width: 70%;}
	.sm_c_table-80{width: 80%;}
	.sm_c_table-90{width: 90%;}
	.sm_c_table-100{width: 100%;}
	
	/* DIV table時の内部位置調整 */
	.sm_c_table-top{vertical-align: top;}
	.sm_c_table-mid{vertical-align: middle;}
	.sm_c_table-bt{vertical-align: bottom;}
}
/* --767px */


/* -------------------------------------------------------
汎用ヘッダ（custom）
------------------------------------------------------- */
#header_inner{
	display: table;
	padding: 30px 0;
	margin-left: auto;
	margin-right: auto;
	width: 1040px;
}
.header_inner-h1{
	display: table-cell;
	width: 450px;
	height: auto;
	line-height: 0;
	vertical-align: middle;
}
.header_inner-number{
	display: table-cell;
	width: auto;
	height: auto;
	font-size: 0px;
	text-align: right;
	vertical-align: middle;
}
.header_inner-number li{
	display: inline-block;
	padding-left: 30px;
	line-height: 0;
}


/* -------------------------------------------------------
汎用メニュー（custom）
------------------------------------------------------- */
#c_nav{
	background-color: #171c61;
	height: 70px;
}
.c_menu{
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	width: 1040px;
	height: 70px;
	font-size: 0px;
}
.c_menu li{
	display: inline-block;
	height: 70px;
}


/* -------------------------------------------------------
汎用プロモ（custom）
------------------------------------------------------- */
.local_promo{
	overflow: hidden;
	padding-bottom: 50px;
	height: 240px;
}
.local_promo-inner{ /* コンテンツ幅以上の画像を中央表示 */
	overflow: hidden;
	position: absolute;
	width: 100%;
	min-width: 1040px;
	height: 240px;
}
.local_promo-bg{
	position: relative;
	left: 50%; /* 画像の左端が画面中央にくる */
	margin-left: -1750px; /* 画像幅半分だけ左に移動する */
	height: 240px;
	z-index: 30;
}
.local_promo-h2{
	position: absolute;
	left: 50%; /* 画像の左端が画面中央にくる */
	margin-left: -500px; /* 画像幅半分だけ左に移動する */
	padding-top: 40px;
	font-family: "游明朝","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",Meiryo,"Times New Roman",serif;
	font-size: 36px;
	color: white;
	z-index: 60;
}


/* -------------------------------------------------------
汎用コンテンツエリア（custom）
------------------------------------------------------- */
/* 要素ごとタイトル */
.c_tit01{
	overflow: hidden;
	position: relative;
	border-bottom: #000000 solid 1px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.c_tit01-tit{
	padding: 0 0 0 30px;
	font-size: 26px;
	color: #171c61;
	line-height: 1.2;
}
.c_tit01-ic{
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -20px;
}

c_tit02{
	padding-bottom: 20px;
	text-align: center;
	line-height: 0;
}
.c_tit02-bar{
	border-top: 3px solid #a2a4c0;
	padding:0;
	margin:30px 0 0;
	height:30px;
	text-align:center;
	line-height: 1.6;
}
.c_tit02-bar span{
	position: relative;
	top: -30px;
	background:white;
	padding: 0 30px;
	font-size: 36px;
	font-weight: bold;
}

.c_tit03{
	overflow: hidden;
	position: relative;
	border-bottom: #2c87d4 solid 1px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.c_tit03-tit{
	padding: 0 0 0 30px;
	font-size: 26px;
	color: #2c87d4;
	line-height: 1.2;
}
.c_tit03-ic{
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -20px;
}

/* テキストベースボタン作成 */
p.c_linkbt01{/* black */
	text-align: center;
}
p.c_linkbt01 a{
	display: block;
	padding: 10px 30px;
	background-color: #111111;
	text-decoration: none;
	font-size: 18px;
	color: white;
}

p.c_linkbt02{/* orange */
	text-align: center;
}
p.c_linkbt02 a{
	display: block;
	padding: 10px 30px;
	background-color: #ff6600;
	text-decoration: none;
	font-size: 18px;
	color: white;
}

p.c_linkbt03{/* blue */
	text-align: center;
}
p.c_linkbt03 a{
	display: block;
	padding: 10px 30px;
	background-color: #2c87d4;
	border-radius: 6px;		/* CSS3草案 */
	-webkit-border-radius: 6px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 6px;
	text-decoration: none;
	font-size: 18px;
	color: white;
}

/* 各種フォーム共通 */
span.form_check01{
	display: inline-block;
	background-color: #db3838;
	border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
	padding: 0 10px;
	margin: 0 10px 0 0;
	color: white;
	line-height: 1.2;
}
span.form_check02{
	display: inline-block;
	float: right;
	background-color: #db3838;
	border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
	padding: 0 10px;
	color: white;
	line-height: 1.2;
}
input.form_input,
textarea{
	width: 80%;
}
ul.form_radio{
	overflow: hidden;
	width: auto;
	height: auto;
}
ul.form_radio li{
	display: inline-block;
	padding: 0 40px 0 0;
	width: auto;
	height: auto;
}
span.form_minitxt{
	display: block;
	font-size: 12px;
	text-align: right;
}
input#submit_button {
	padding: 10px 0;
  width: 500px;
  font-size: 16px;
  background: -moz-linear-gradient(top, #ffffff 2.32%, #d9d9d9 48.34%, #b9b9b9 53.31%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.5,#d9d9d9), color-stop(0.5,#b9b9b9), to(#ececec));
  border: #535353 solid 1px;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */
  font-weight: bold;
}

/* テーブル設定 */

	/* 幅設定汎用 */
	.width20{width: 20% !important;}
	.width30{width: 30% !important;}
	.width35{width: 35% !important;}
	.width40{width: 40% !important;}
	.width50{width: 50% !important;}
	.width60{width: 60% !important;}
	.width70{width: 70% !important;}
	.width80{width: 80% !important;}

	/* テーブル設定・汎用その1 */
	.c_table01{
		border-top: #171c61 solid 1px;
		border-left: #171c61 solid 1px;
	}
	.c_table01-area{
		margin: 0 auto;
		width: 100%;
		height: auto;
	}
	.c_table01-area tbody tr th{
		background-color: #484d8c;
		border-bottom: #171c61 solid 1px;
		border-right: #171c61 solid 1px;
		padding: 4px 10px;
		font-weight: bold;
		color: white;
		vertical-align: middle;
	}
	.c_table01-area tbody tr td{
		background-color: white;
		border-bottom: #171c61 solid 1px;
		border-right: #171c61 solid 1px;
		padding: 4px 10px;
		width: auto;
		vertical-align: middle;
	}
	.c_table01-area tbody tr td.form3{
		background-color: #f6f6f6;
		font-size: 10px;
	}
	.c_table01-area tbody tr td.border_none{
		border-right: none !important;
	}


/* -------------------------------------------------------
汎用フッタ（custom）
------------------------------------------------------- */
#footer_inner{
	display: table;
	padding: 30px 20px;
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}
.footer_inner-area01{
	display: table-cell;
	width: 600px;
	vertical-align: top;
}
.footer_inner-map{
	color: #171c61;
}

.footer_inner-area02{
	display: table-cell;
	width: auto;
	vertical-align: top;
}
.footer_inner-link{
	overflow: hidden;
	font-size: 0px;
	text-align: right;
}
.footer_inner-link li{
	display: inline-block;
	font-size: 14px;
}
.footer_inner-link li a{
	color: #111111;
}





/* -------------------------------------------------------
サンプルメニューCSS
------------------------------------------------------- */
/* 画像メニュー */
nav#c_menu01{/* 背景画像等ある場合追加 */
	width: auto;
	height: auto;
	font-size: 0px;
}
nav#c_menu01 ul.link{
	margin-left: auto;
	margin-right: auto;
	width: 1040px;
	height: auto;
	text-align: center;
}
nav#c_menu01 ul.link li{
	display: inline-block;
	width: auto;
	height: auto;
	line-height: 0;
}
nav#c_menu01 ul.link a{
	display: block;
	width: auto;
	height: auto;
}

/* テキストメニュー */
nav#c_menu02{/* 背景画像等ある場合追加 */
	width: auto;
	height: auto;
	font-size: 0px;
}
nav#c_menu02 ul.link{
	margin-left: auto;
	margin-right: auto;
	border-right: #cccccc solid 1px;
	width: 1039px;
	height: auto;
	text-align: center;
}
nav#c_menu02 ul.link li{
	display: inline-block;
	border-left: #cccccc solid 1px;
	width: 227px;
	height: auto;
	font-size: 14px;
	vertical-align: middle;
}
nav#c_menu02 ul.link li.menu02_end{
	width: 226px;
	height: auto;
}
nav#c_menu02 ul.link li span{
	display: block;
	font-size: 10px;
}
nav#c_menu02 ul.link li a{
	display: block;
	padding-bottom: 4px;
	width: auto;
	height: auto;
	color: #e54040;
}
nav#c_menu02 ul.link li a:hover{
	border-bottom: #e54040 solid 4px;
	padding: 0;
}
nav#c_menu02 ul.link li a.menu02_pt{
	padding-top: 6px;
}


/* -------------------------------------------------------
サンプル画像slide CSS
------------------------------------------------------- */
/* 通常slide */
.slide_normal{
	width: auto;
	height: auto;
	text-align: center;
}
.slide_normal ul li img{
	width: 100%;
	height: auto;
}

/* ミニ画像横slide */
div.slide_gallery{
	width: auto;
	height: auto;
}
div.slide_gallery ul{
	font-size: 0px;
}
div.slide_gallery ul li{
	display: inline-block;
	margin-left: 10px;
	padding: 0 0 5px 0;
	width: auto;
	height: auto;
}
div.slide_gallery ul li figure{
	display: inline-block;
	padding: 5px;
	background-color: #e8e8e8;
	/* box-shadow */
	box-shadow:2px 2px 2px 1px #c5c5c5;
	-moz-box-shadow:2px 2px 2px 1px #c5c5c5;
	-webkit-box-shadow:2px 2px 2px 1px #c5c5c5;
	/* border-radius */
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width: auto;
	height: auto;
}
div.slide_gallery ul li figure img{/* 画像サイズ調整 */
	width: 200px;
	height: auto;
}

/* ミニ画像ギャラリー */
div.slide_minigallery{
	width: auto;
	height: auto;
}
ul.big_gallery{
	width: auto;
	height: auto;
}
ul.big_gallery li{
	padding: 20px;
	width: auto;
	height: auto;
}
ul.big_gallery li figure{
	border: #e8e8e8 solid 4px;
	/* box-shadow */
	box-shadow:2px 2px 2px 1px #c5c5c5;
	-moz-box-shadow:2px 2px 2px 1px #c5c5c5;
	-webkit-box-shadow:2px 2px 2px 1px #c5c5c5;
	/* border-radius */
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width: auto;
	height: auto;
}

ul.mini_gallery{
	overflow: hidden;
	padding: 5px 0;
	width: auto;
	height: auto;
	text-align: center;
}
ul.mini_gallery li{
	display: inline-block;
	margin-left: 10px;
	padding: 0 0 5px 0;
	width: auto;
	height: auto;
}
ul.mini_gallery li figure{
	display: inline-block;
	padding: 5px;
	background-color: #e8e8e8;
	/* box-shadow */
	box-shadow:2px 2px 2px 1px #c5c5c5;
	-moz-box-shadow:2px 2px 2px 1px #c5c5c5;
	-webkit-box-shadow:2px 2px 2px 1px #c5c5c5;
	/* border-radius */
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width: auto;
	height: auto;
}
ul.mini_gallery li figure img{/* 画像サイズ調整 */
	width: auto;
	height: auto;
}

/* -------------------------------------------------------
サンプル写真リストCSS
------------------------------------------------------- */
ul.photo_gallery{
	overflow: hidden;
	width: auto;
	height: auto;
	font-size: 0px;
	text-align: center;
}
ul.photo_gallery li{
	display: inline-block;
	padding: 0px 5px 10px 5px;
	width: 370px;
	height: auto;
}
ul.photo_gallery li div{
	display: inline-block;
	padding: 5px;
	background-color: #e8e8e8;
	/* box-shadow */
	box-shadow:2px 2px 2px 1px #c5c5c5;
	-moz-box-shadow:2px 2px 2px 1px #c5c5c5;
	-webkit-box-shadow:2px 2px 2px 1px #c5c5c5;
	/* border-radius */
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width: 360px;
	height: auto;
	line-height: 0;
}
ul.photo_gallery li div a{
	display: table-cell;
	width: 360px;
	height: auto;
	vertical-align: middle;
}


/* -------------------------------------------------------
サンプルmagnific_popup CSS
------------------------------------------------------- */
    /* 
    ====== Zoom effect ======
    */
    .mfp-zoom-in {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-zoom-in .mfp-with-anim {
      opacity: 0;
      transition: all 0.3s ease-in-out;
      transform: scale(0.8);
    }
    .mfp-zoom-in.mfp-bg {
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    .mfp-zoom-in.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    .mfp-zoom-in.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-zoom-in.mfp-removing .mfp-with-anim {
      transform: scale(0.8);
      opacity: 0;
    }
    .mfp-zoom-in.mfp-removing.mfp-bg {
      opacity: 0;
    }
     
    /* 
    ====== Newspaper effect ======
    */
    .mfp-newspaper {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-newspaper .mfp-with-anim {
      opacity: 0;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.5s;
      transform: scale(0) rotate(500deg);
    }
    .mfp-newspaper.mfp-bg {
      opacity: 0;
      transition: all 0.5s;
    }
    .mfp-newspaper.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    .mfp-newspaper.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-newspaper.mfp-removing .mfp-with-anim {
      transform: scale(0) rotate(500deg);
      opacity: 0;
    }
    .mfp-newspaper.mfp-removing.mfp-bg {
      opacity: 0;
    }
     
    /* 
    ====== Move-horizontal effect ======
    */
    .mfp-move-horizontal {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-move-horizontal .mfp-with-anim {
      opacity: 0;
      transition: all 0.3s;
      transform: translateX(-50px);
    }
    .mfp-move-horizontal.mfp-bg {
      opacity: 0;
      transition: all 0.3s;
    }
    .mfp-move-horizontal.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: translateX(0);
    }
    .mfp-move-horizontal.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-move-horizontal.mfp-removing .mfp-with-anim {
      transform: translateX(50px);
      opacity: 0;
    }
    .mfp-move-horizontal.mfp-removing.mfp-bg {
      opacity: 0;
    }
     
    /* 
    ====== Move-from-top effect ======
    */
    .mfp-move-from-top {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-move-from-top .mfp-content {
      vertical-align: top;
    }
    .mfp-move-from-top .mfp-with-anim {
      opacity: 0;
      transition: all 0.2s;
      transform: translateY(-100px);
    }
    .mfp-move-from-top.mfp-bg {
      opacity: 0;
      transition: all 0.2s;
    }
    .mfp-move-from-top.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: translateY(0);
    }
    .mfp-move-from-top.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-move-from-top.mfp-removing .mfp-with-anim {
      transform: translateY(-50px);
      opacity: 0;
    }
    .mfp-move-from-top.mfp-removing.mfp-bg {
      opacity: 0;
    }
     
    /* 
    ====== 3d unfold ======
    */
    .mfp-3d-unfold {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-3d-unfold .mfp-content {
      perspective: 2000px;
    }
    .mfp-3d-unfold .mfp-with-anim {
      opacity: 0;
      transition: all 0.3s ease-in-out;
      transform-style: preserve-3d;
      transform: rotateY(-60deg);
    }
    .mfp-3d-unfold.mfp-bg {
      opacity: 0;
      transition: all 0.5s;
    }
    .mfp-3d-unfold.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: rotateY(0deg);
    }
    .mfp-3d-unfold.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-3d-unfold.mfp-removing .mfp-with-anim {
      transform: rotateY(60deg);
      opacity: 0;
    }
    .mfp-3d-unfold.mfp-removing.mfp-bg {
      opacity: 0;
    }
     
    /* 
    ====== Zoom-out effect ======
    */
    .mfp-zoom-out {
      /* start state */
      /* animate in */
      /* animate out */
    }
    .mfp-zoom-out .mfp-with-anim {
      opacity: 0;
      transition: all 0.3s ease-in-out;
      transform: scale(1.3);
    }
    .mfp-zoom-out.mfp-bg {
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    .mfp-zoom-out.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    .mfp-zoom-out.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    .mfp-zoom-out.mfp-removing .mfp-with-anim {
      transform: scale(1.3);
      opacity: 0;
    }
    .mfp-zoom-out.mfp-removing.mfp-bg {
      opacity: 0;
    }


/* -------------------------------------------------------
レスポンシブ調整時素材
------------------------------------------------------- */
/* 1040px以上-- */
@media screen and (min-width : 1040px) {/* 1040px以上への置き換え */
}
/* --1040px以上 */

/* 768px-1039px-- */
@media screen and (min-width: 768px) and (max-width: 1039px) {/* 768px-1039pxへの置き換え */
}
/* --768px-1039px */

/* 767px-- */
@media screen and (max-width: 767px) {/* 767px以下への置き換え */
}
/* --767px */