@charset "utf-8";
/* CSS Document */

#contents{
	padding: 0 25px;
	text-align: left;
	margin-bottom: 60px
}
img{
	width: 100%;
}
.indent,#main_contents li{
	display: block;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 5px;
	font-size: 14px;
}
.br_sp,.br_sp_2{display: none ;}
@media screen and (max-width: 500px){.pc_br{display: none;}}
@media screen and (max-width: 400px){.br_sp,.br_sp_2{display: block;}}
@media screen and (max-width: 370px){.br_sp_3{display: block;}}
@media screen and (max-width: 350px){.br_sp_2{display: none;}}
.kome{color: #979797;font-size: 12.8px;    vertical-align: baseline;}
/*=====================================================================================
***************************************************************************************

　　
		
***************************************************************************************
=====================================================================================*/
/*モーダルを開くボタン*/
.modal-open{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	flex-direction: column;
	font-size: 14px;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(206,65,134,40%);
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 10;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 800px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -30px;
  right: -30px;
  width: 60px;
  height: 60px;
  font-size: 40px;
  color: #fff;
	background: #ce4186;
	border-radius: 50%;
  cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
  background: #fff;
  text-align: left;
  padding: 40px 30px 30px;
	border-radius: 20px;
}
.modal-content p{
	font-size: 24px;
	color: #ce4186;
	font-weight: 600;
	line-height: 1;
}
.modal-content div{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.modal-open p{
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 5px;
}
/*=====================================================================================
***************************************************************************************

　　
		
***************************************************************************************
=====================================================================================*/
.pink{
	color: #ce4186;
}
.flex{
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}
.ttl{margin-bottom: 10px;}
.ttl2{
	margin-top: 20px;
	
	font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}
.cord {
	margin: 2px 10px 0 0;
	font-size: .8em;
}
.btn{
	color: #fff;
	line-height: 50px;
	display: block;
	margin-top: 20px;
	width: 100%;
	background-color: #ce4186;
	text-align: center;
	text-decoration: none;
	border-radius: 25px;
}
.btn_box{margin: 20px 0 0;}
h3,h4{
	font-size: 18px;
	margin-bottom: 10px;
	font-weight: 600;
}
h3 span{font-size: .8em;vertical-align: baseline;}

h4::before{
	content: "●";
	color: #ce4186;
	margin-right: 5px;
}
h4 span{vertical-align: bottom;}
h4 .small{font-size: 14px;}
h3 div{
	color: #ce4186;
	background-color: #f6d3e3;
	line-height: 3;
	padding: 0 10px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 5px;
	font-size: 16px;
}
.contents_box{
	margin-bottom: 80px;
}
.contents_box_s{
	margin-bottom: 30px;
}
.attention{
	background: #efe8de;
	padding: 20px;
	margin-top: 20px;
}
.margin{margin: 20px auto 80px;}
@media screen and (max-width: 700px){
	.modal-content p{
		font-size: 14px;
		color: #ce4186;
		font-weight: 600;
		line-height: 1;
		
	}
	.modal-content span{
		font-size: 12px;
		top: 18px;
		right: 20px;
	}
	.modal-content {
		background: #fff;
		text-align: left;
		padding: 20px;
		border-radius: 10px;
	}	
	.modal-close{
		
		top: -10px;
		right: -10px;
		width: 25px;
		height: 25px;
		font-size: 25px;
		}
	.modal-content div{
		flex-direction: column;
		margin-bottom: 5px;
	}
	h3,h4{font-size: 17px;}
	h3 div{	font-size: 15px;}
	
}
.tokuten{
	background-color: #f9f1f5;
	padding: 20px;
}
h5{
	font-size: 16px;
	margin-bottom: 5px;
	font-weight: 600;
	color: #ce4186;
	text-align: center;
}
.tokuten h5 span{
	margin-top: -5px;
    display: block;
}
@media screen and (max-width: 400px){
	h3,h4,h3 div{font-size: 15px;}
	h5{font-size: 15px;}
}