@charset "UTF-8";
/* ===== 全体の設定 ===== */
body {
  *text-align: center;
  /*IE調整用*/
  width: 100%;
  overflow-x: hidden;
	margin: 0;
}

/* 全体背景[変更可] */
#wrapper {
  background: #fff !important;
  padding: 0;
}

/* ===== コンテンツ ===== */
/* コンテンツ リンク色[変更可] */
#content a:link {
  text-decoration: underline;
  color: #005799;
}

#content a:visited {
  text-decoration: underline;
  color: #005799;
}

#content a:active {
  text-decoration: underline;
  color: #005799;
}

#content a:hover {
  text-decoration: none;
  color: #005799;
}

/* イベント名 リンク色[色変更可] */
#main .blockInEvent .bl-hot a, #bottomBlock .topics .topicsTitle a {
  text-decoration: none;
  color: #005799;
}

/* ===== コンテンツ[以下に追加] ===== */
.l-container{
	padding-bottom: 50px;
}
#wrapper {
  background: #f0f0f0;
}

h2, h3, p, dl, dt, dd {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div, i, p {line-height: unset;}

.l-content {
  margin: 0 auto;
  overflow: hidden;
  width: auto !important;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  background: none !important;
  *text-align: left;
  /*IE調整用*/
}


.sp{display:none;}

.center {
  text-align: center;
}

.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.cf {
  min-height: 1px;
}

* html .cf {
  height: 1px;
  /*\*/
     /*/
height: auto;
overflow: hidden;
/**/
}


.peter{
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", sans-serif, Helvetica;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}
.peter img{
	max-width: unset;
	vertical-align: top;
}
.peter figure {
	margin: 0;
}
.peter a:hover img{
	opacity: .8;
}
.peter table{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	word-wrap: break-word;
	word-break: break-all;
}
.peter .inner{
	width: 960px;
	margin: auto;
	box-sizing: border-box;
	position: relative;
}
.peter .main{
	position: relative;
	text-align: center;
	background: url(../img/bg_mv.jpg) no-repeat center / cover;
	padding: 0 0 50px;
}
.peter .main figure{
	position: absolute;
	top: 50px;
	left: 0;
	right: -880px;
	width: 110px;
	margin: auto;
	z-index: 1;
}
.peter .main:before{
	content: "";
	position: absolute;
	top: 73px;
	left: 0;
	width: 100%;
	height: 9px;
	background: url(../img/bg_main_top.png) repeat-x center;
	z-index: 1;
}
.peter .main:after{
	content: "";
	position: absolute;
	bottom: -9px;
	left: 0;
	width: 100%;
	height: 9px;
	background: url(../img/bg_main_btm.png) repeat-x center;
	z-index: 1;
}
.peter .main div{
	position: relative;
	background: #2fb9c6;
	padding: 25px 0 30px;
	margin: 0 0 50px;
}
.peter .main h1{
	text-align: center;
	margin: 0;
}
.peter .main h1 img{
	position: relative;
}
.peter .main p{
	position: absolute;
	left: 0;
	right: 0;
	margin: 60px 0 0;
	z-index: 1;
	line-height: 1.8;
}
.peter .main p span{
	display: block;
	margin: 30px 0 0;
}
.peter .main strong{
	width: 960px;
	display: block;
	margin: 20px auto;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	color: #2fb9c6;
}
.peter .main strong span{
	padding: 0 10px;
	background: #f6e7eb;
	position: relative;
}
.peter .main strong:before{
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	background: #2fb9c6;
	width: 100%;
	height: 1px;
}

.peter .award{
	text-align: center;
	margin: 70px 0 50px;
	position: relative;
}
.peter .award:before{
	content: "";
	position: absolute;
	top: 220px;
	left: -1370px;
	right: 0;
	margin: auto;
	width: 901px;
	height: 197px;
	background: url(../img/bg_side.png) repeat-x center;
	opacity: .5;
}
.peter .award:after{
	content: "";
	position: absolute;
	top: 220px;
	left: 0;
	right: -1370px;
	margin: auto;
	width: 901px;
	height: 197px;
	background: url(../img/bg_side.png) repeat-x center;
	opacity: .5;
}
.peter .award h2{
	position: relative;
	z-index: 1;
	padding-bottom: 3em;
}

.peter .award .award_wrapper{
	background: url(../img/bg_award.jpg) top center;
	padding: 4em 0 6em;
}

.peter .award .inner h3{margin: 200px 0 70px;}
.peter .award .bg{
	background: #f6e7eb;
	margin: 100px 0 0;
	padding: 40px 0;
}

.peter .award ul > li{padding-top: 3em;}
.peter .award ul li img{max-width: 100%;}
.peter .award ul li p{margin-top: .5em; text-align: left; font-weight: bold;}

.peter .award ul.award1st{width: 770px;margin: 0 auto;}
.peter .award ul.award2nd{
	display: flex;
	flex-wrap: wrap;
}
.peter .award ul.award2nd > li{width: 50%;box-sizing: border-box;}
.peter .award ul.award2nd > li:nth-child(2n){padding-left: 1em;}
.peter .award ul.award2nd > li:nth-child(2n+1){padding-right: 1em;}

.peter .present{
	text-align: center;
	margin: 70px 0 120px;
	position: relative;
}
/***
.peter .present:before{
	content: "";
	position: absolute;
	top: 100px;
	left: -1200px;
	right: 0;
	margin: auto;
	width: 901px;
	height: 197px;
	background: url(../img/bg_side.png) repeat-x center;
	opacity: .5;
}


.peter .present:after{
	content: "";
	position: absolute;
	top: 100px;
	left: 0;
	right: -1200px;
	margin: auto;
	width: 901px;
	height: 197px;
	background: url(../img/bg_side.png) repeat-x center;
	opacity: .5;
}
***/

.peter .present:before{
	content: "";
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 208px;
	background: url(../img/bg_present.png) no-repeat top center;
}


.peter .present h2{
	position: relative;
	z-index: 1;
	margin: 0 15px 30px 0;
}
.peter .present .txt{
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
	line-height: 1.8;
}
.peter .present dl{
	text-align: center;
}
.peter .present dl dt{
	position: relative;
}
.peter .present dl dt p{
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	font-size: 24px;
}
.peter .present dl dt p span{
	color: #ff3a00;
	display: block;
}
.peter .present dl dd + dt{
	margin: 50px 0 0;
}
.peter .present dl dd{
	position: relative;
	width: 770px;
	margin: auto;
}
.peter .present dl dd figure{
	position: absolute;
	top: 20px;
	right: -10px;
	width: 120px;
	margin: auto;
}
.peter .present dl dd figure.ico_20{top: -10px;}

.peter .present dl dd p{
	margin: 10px 0 0;
	text-align: right;
	font-size: 12px;
}

.peter .howto{
	background: url(../img/bg_main.jpg) center;
	position: relative;
	padding: 0 0 40px;
	margin: 0 0 60px;
	text-align: center;
}
.peter .howto:before{
	content: "";
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	height: 197px;
	background: url(../img/bg_side.png) repeat-x center;
	opacity: .5;
}
.peter .howto h2{
	text-align: center;
	position: relative;
	margin: 0 0 20px;
}
.peter .howto h2 img{
	margin: -60px 0 0;
}
.peter .howto ul{
	text-align: left;
}
.peter .howto ul li{
	position: relative;
	background: #fff;
	margin: 0 0 50px 120px;
	height: 120px;
	padding: 35px 0 0 100px;
	border-radius: 20px;
	box-sizing: border-box;
}
.peter .howto ul li figure{
	position: absolute;
	top: -26px;
	left: -120px;
}
.peter .howto ul li a{
	color: #1283a7;
}
.peter .howto ul li small{
	border-bottom: 1px solid #333;
	font-size: 16px;
}
.peter .howto ul li:nth-child(2) figure{
	top: -10px;
	left: -93px;
}
.peter .howto ul li:last-child{
	margin: 20px 0 20px 120px;
}
.peter .howto ul li:last-child figure{
	top: -15px;
	left: -125px;
}
.peter .howto ul li span{
	position: absolute;
	bottom: -30px;
	right: 0;
	font-size: 12px;
}

.peter .summary{
	text-align: center;
}
.peter .summary .btn{

}
.peter .summary .btn dt{
	color: #00a0ea;
	font-size: 30px;
	line-height: 1.4;
	position: relative;
	margin: 0 0 20px;
	font-family: a-otf-jun-pro, sans-serif;
}
.peter .summary .btn dt:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background: #fffcad;
}
.peter .summary .btn dt span{
	position: relative;
}
.peter .summary .btn dt small{
	font-size: 12px;
}
.peter .summary .btn dd{
	margin: 0 0 60px;
}
.peter .summary .btn dd span{
	font-size: 25px;
	display: block;
}
.peter .summary .btn dd ul{
	display: flex;
	justify-content: space-between;
}
.peter .summary .btn dd p{
	margin: 30px 0;
}
.peter .summary .open{
	background: #ff805a;
	padding: 20px 0;
	color: #fff;
	font-size: 26px;
	cursor: pointer;
}
.peter .summary .comment{
	display: none;
}
.peter .summary .close{
	background: #e5e5e5;
	padding: 20px 0;
	font-size: 26px;
	cursor: pointer;
}
.peter .summary .close span,
.peter .summary .open span{
	position: relative;
}
.peter .summary .close span:before,
.peter .summary .open span:before{
	content: "";
	position: absolute;
	top: 4px;
	right: -42px;
	width: 26px;
	height: 26px;
	border: 1px solid #000;
	border-radius: 30px;
	background: #fff;
	color: #000;
	line-height: 1;
	font-size: 20px;
}
.peter .summary .open span:after{
	content: "＋";
	position: absolute;
	top: 0;
	right: -39px;
	font-size: 20px;
	color: #000;
}
.peter .summary .open.action span:after,
.peter .summary .close span:after{
	content: "－";
	position: absolute;
	top: 2px;
	right: -39px;
	font-size: 20px;
	color: #000;
}
.peter .summary .open.action{
	position: relative;
}
.peter .summary .comment + img{
	margin: 50px 0 0;
}
.peter .summary .comment .txt{
	text-align: left;
	margin: 50px;
}


.peter .btn_share{
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	margin: 60px 0 0;
}
.peter .btn_share dt{
	margin: 0 0 20px;
	font-size: 24px;
	width: 100%;
	color: #002857;
}
.peter .btn_share dd{
	margin: 0 20px;
}

.peter #pageTop{
	position: fixed;
	bottom: 20px;
	right: 10px;
	cursor: pointer;
	display: none;
	z-index: 5;
}

::after, ::before {
  box-sizing: inherit;
}