@charset "Shift_JIS";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*----------------■初期設定----------------*/
*  {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}
ul,ol  {
	list-style: none;
}
table  {
	border-collapse: collapse;
}
th,td  {
	text-align: left;
	vertical-align: top;
}
img {
	border: none;
	vertical-align: top;
}

 /* リンク色の初期値 */
a:link { text-decoration:none;color:#000; }
a:visited { text-decoration:none;color:#000; }
a:hover { text-decoration:none;color:#f00; }
a:active { text-decoration:none;color:#ccf; }

a[name]:hover { text-decoration:none;color:#000; }

/*----------------■よく使うもの----------------*/
 
.fltl  {
	float: left;
}
.fltr  {
	float: right;
}
.clear  {
	clear: both;
}
.clearfix:after {
	content:".";
	display:  block;
	clear:  both;
	height:  0;
	visibility:  hidden;
	overflow: hidden;/* 隙間対応 */
	font-size: 0.1em;/* 隙間対応 */
	line-height: 0;/* 隙間対応 */
}
.clearfix  {
	zoom:  1;
}

img{
	max-width: 100%;
	height: auto;
}
a:hover img { /* 画像オンマウス処理 */
	-moz-opacity:0.7;
	opacity:0.7;
	filter: alpha(opacity=70);
}

/*----------------■全体構造----------------*/

body {
	text-align: center;
	font-family: 'Noto Sans Japanese', serif;
	background: #fff;
	color: #000;
	font-size:  14px;
	line-height: 1.5;
}



ol.list {
	list-style: decimal;
	margin-left: 20px;
}
ol.list li{
	padding-bottom: 5px;
}

ul.list_kome li,ul.list_bold li{
	margin-left:1em;
	text-indent:-1em;
}
ul.list_kome li,ul.list_bold li{
	padding-bottom:0.3em;
}
ul.list_bold li{font-weight:bold;font-size:20px;}

ul.list li{
	padding-bottom: 5px;
	list-style: disc;
	padding-left:0.8em;
}

.margin10{margin:10px 0;}
.margin_bottom10{margin-bottom:10px;}
.margin_top10{margin-top:10px;}
.margin_top20{margin-top:20px;}

.main_wrap{background:#fff;text-align:left;}

.dis_bsp{display:none;}

#comment_list2{
padding:0 5%;
text-align: left;
}

#sub_text h2{font-weight:bold;text-align:center;}
#sub_text h2 span{font-size:150%;font-weight:bold;}
#sub_text p{text-indent:-1em;}
#main_img_comment{background:#EAE2D0;padding:20px 5%;}

#main_img{position:relative;background:#00AECC;color:#fff;}

.block01_mi{background:url(../image/block01_bg_sp.png);text-align:center;background-size:14% auto;}
.block01_mi img{max-width:70%;}

#head{padding:11px 5%;background:#004EA2;}
#head_logo{text-align:left;max-width:990px;margin:0 auto;}

#sns{margin-bottom:50px;}
#comment_list{background:#C7E8FA;padding:20px 5%;}

#comment_list td,#comment_list th{border:1px solid #000;padding:10px 20px;}
#comment_list th{background:#666;color:#fff;}

#giftleft{margin-top:40px;border-top:1px solid #000;padding-top:40px;}
#comment_list2 h2{margin-top:30px;font-weight:bold;font-size:20px;}

#bg_db{background:#FADCEA;color:#000;padding:30px 5%;}
#bg_db_mi{margin:0 auto 30px;width:250px;padding:10px;border-radius:50px;background:#fff;text-align:center;color:#002B69;font-size:25px;font-weight:bold;border:2px solid #002B69;}
#bg_db_sub_mi{font-size:20px;}
#bg_db dt{font-weight:bold;font-size:20px;margin:30px 0 15px;padding:15px 3%;background:#002B69;color:#fff;border-radius:15px;}


.sns_link {
	margin: 50px auto;
}



.sns_link.link-btn a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 94%;
	height: auto;
	padding: 12px 36px 12px 12px;
	border-radius: 10px;
	border: solid 1px #004ea2;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,dddddd+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
	color: #004ea2;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	box-sizing: border-box;
}

.sns_link.link-btn a ._size1 {
	font-size: 34px;
}

.sns_link.link-btn a ._size2 {
	font-size: 16px;
}

.sns_link.link-btn a img {
	width: 381px;
	padding-left: 20px;
}

.sns_link.link-btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	width: 0;
	height: 0;
	margin-top: -8px;
	border: 8px solid transparent;
	border-left: 8px solid #004ea2;
}

/*----------------■中・大画面---------------*/
@media screen and (min-width: 767px) {

.dis_sp {
	display: none;
}

.main_wrap{max-width:1000px;margin:0 auto;}

#sub_text h2{font-size:180%;}
#sub_text p{text-align:center;}
.sns_link.link-btn{width:1000px;}

#comment_list table{width:45%;}

#comment_list2{max-width:890px;margin:0 auto;}
#giftleft img{float:left;}
#giftleft p{float:right;width:75%;}

}

/*----------------■大画面---------------*/
@media screen and (min-width: 1000px) {

#sub_text{position:absolute;top:33%;width:650px;left:49%;transform:translateX(-50%);-webkit- transform:translateX(-50%);}

}
/*----------------■小・中画面---------------*/
@media screen and (max-width: 999px) {

.dis_bsp {
	display: block;
}


.sns_link.link-btn a ._size1{font-size:25px;}
.sns_link.link-btn a ._size2{font-size:15px;}

#giftleft img{margin-bottom:20px;}

}



/*----------------■小画面---------------*/
@media screen and (max-width: 766px) {

.dis_pc {
	display: none;
}

#sub_text h2{font-size:180%;padding-top:10px;}
#sub_text p{padding:10px 8% 0;}

#head_logo img{width:130px;}
#text_gift{text-align:left;}

#comment_list table{width:100%;}

.sns_link.link-btn a {
		position: relative;
		display: block;
		width: 94%;
		height: auto;
		padding: 0.75em 2.2em 0.75em 0.75em;
		border-radius: 10px;
		border: solid 1px #004ea2;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,dddddd+100 */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
		color: #004ea2;
		font-size: calc(1.1rem + 0.2vw);
		font-weight: bold;
		text-align: center;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.sns_link.link-btn a img {
		width: 90%;
		max-width: 381px;
		padding: 0.75em 0 0;
	}

	.sns_link.link-btn a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 1.5%;
		width: 0;
		height: 0;
		margin-top: -8px;
		border: 8px solid transparent;
		border-left: 8px solid #004ea2;
	}

}



.footer {
  width: 100%;
  font-size: 85%;
	/*height: 185px;*/
}

@media (max-width: 1000px) {
	.footer {
	  width: 100%;
	  font-size: 85%;
		/*height: 129px;*/
	}
}

.footer-bottom {
  text-align: center;
}

.footer-bottom .copyright {
  background-color: #898989;
  color: #fff;
  padding: 20px 0;
}

@media (max-width: 1000px) {
	.footer .logo {
	  width: 60%;
	  max-width: 359px;
	}
  .footer-bottom .copyright {
    background-color: #898989;
    color: #fff;
    padding: 8px 0 12px;
    font-size: calc(0.6rem + 0.3vw);
	  /*font-size: 11px;*/
  }
}

/* #page-top ======================================================== */
#page-top {
  position: fixed;
  width: 80px;
  height: 80px;
  right: 0;
  bottom: 20px;
  background: url(../image/btn_pagetop.png) no-repeat;
  z-index:1;
}
#page-top a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
}

@media (max-width: 1000px) {
	#page-top {
	  position: fixed;
	  width: 12vw;
	  height: 12vw;
	  right: 0;
	  bottom: 0vw;
	  background: url(../image/btn_pagetop_sp.png) no-repeat;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	  z-index:1;
	}
	#page-top a {
	  position: relative;
	  display: block;
	  width: 12vw;
	  height: 12vw;
	  text-decoration: none;
	}
}

.footer-top {
  position: fixed;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  /*height: 124px;*/
  background-color: #eeeeef;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 1000px) {
	.footer-top {
	  position: fixed;
	  display: block;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  /*height: 92px;*/
	  background-color: #eeeeef;
	  padding: 0.35vw 10px;
	  box-sizing: border-box;
	  overflow: hidden;
	}
}

.footer-top ul {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	display: flex;
	justify-content: space-around;
}
.footer-top li {
  display: block;
  width: 48%;
  height: auto;
  text-align: center;
  margin: 0 1%;
}

.footer-top.static {
  position: static;
}

.link-02 li {
	padding: 20px 0;
	box-sizing: border-box;
}

.link-02 a {
	position: relative;
	display: block;
	width: 100%;
	padding: 20px 10px;
	border-radius: 10px;
	border: solid 1px #004ea2;
	background: #004ea2;
	background: -moz-linear-gradient(top,  #0056b2 0%, #014792 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #0056b2 0%,#014792 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #0056b2 0%,#014792 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0056b2', endColorstr='#014792',GradientType=0 ); /* IE6-9 */
	box-sizing: border-box;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	text-decoration: none;
}

@media (max-width: 1000px) {
	.link-02 {
		clear: both;
		width: 100%;
		margin: 2em auto 0;
		padding: 14px 0;
		overflow: hidden;
	}
	.link-02 li {
		display: block;
		width: 80%;
		margin: 0 auto;
	}
	.link-02 a {
		position: relative;
		display: block;
		color: #fff;
		font-size: calc(0.85rem + 0.2vw);
		/*font-size: 15px;*/
		padding: 14px;
	}
	.link-02 li span {
		display: block;
	}
}