@charset "utf-8";

/* 
Key Color #58B430
Key Color background #F4FFF4
----------------------------------------------- */

.h10px {
	height:10px;
}

.red {
	font-weight: bold;
	color: #f33;
}

.big200 {font-weight: bold;font-size: 200%;}
.big175 {font-weight: bold;font-size: 175%;}
.big150 {font-weight: bold;font-size: 150%;}
.big125 {font-weight: bold;font-size: 125%;}
.big120 {font-weight: bold;font-size: 120%;}
.big100 {font-weight: bold;font-size: 100%;}
.fs200 {font-size: 200%;}
.fs175 {font-size: 175%;}
.fs150 {font-size: 150%;}
.fs125 {font-size: 125%;}
.fs120 {font-size: 120%;}
.fs100 {font-size: 100%!important;}
.fs75 {font-size: 75%!important;}

.lh240 {line-height: 240%;}
.lh220 {line-height: 220%;}
.lh200 {line-height: 200%;}
.lh180 {line-height: 180%;}
.lh160 {line-height: 160%;}
.lh150 {line-height: 150%;}
.lh140 {line-height: 140%;}
.lh130 {line-height: 130%;}
.lh120 {line-height: 120%;}
.lh100 {line-height: 100%;}

@media print, screen and (min-width: 1024px){
	.big200_for-pc {font-weight: bold;font-size: 200%;}
	.big175_for-pc {font-weight: bold;font-size: 175%;}
	.big150_for-pc {font-weight: bold;font-size: 150%;}
	.big125_for-pc {font-weight: bold;font-size: 125%;}
	.big120_for-pc {font-weight: bold;font-size: 120%;}
	.fs200_for-pc {font-size: 200%;}
	.fs175_for-pc {font-size: 175%;}
	.fs150_for-pc {font-size: 150%;}
	.fs125_for-pc {font-size: 125%;}
	.fs120_for-pc {font-size: 120%;}

	.lh240_for-pc {line-height: 240%;}
	.lh220_for-pc {line-height: 220%;}
	.lh200_for-pc {line-height: 200%;}
	.lh180_for-pc {line-height: 180%;}
	.lh160_for-pc {line-height: 160%;}
	.lh150_for-pc {line-height: 150%;}
	.lh140_for-pc {line-height: 140%;}
	.lh130_for-pc {line-height: 130%;}
	.lh120_for-pc {line-height: 120%;}
	.lh100_for-pc {line-height: 100%;}
}
@media only screen and (max-width: 1023px){
	.big200_for-sp {font-weight: bold;font-size: 200%;}
	.big175_for-sp {font-weight: bold;font-size: 175%;}
	.big150_for-sp {font-weight: bold;font-size: 150%;}
	.big125_for-sp {font-weight: bold;font-size: 125%;}
	.big120_for-sp {font-weight: bold;font-size: 120%;}
	.big100_for-sp {font-weight: bold;font-size: 120%;}
	.fs200_for-sp {font-size: 200%;}
	.fs175_for-sp {font-size: 175%;}
	.fs150_for-sp {font-size: 150%;}
	.fs125_for-sp {font-size: 125%;}
	.fs120_for-sp {font-size: 120%;}

	.lh240_for-sp {line-height: 240%;}
	.lh220_for-sp {line-height: 220%;}
	.lh200_for-sp {line-height: 200%;}
	.lh180_for-sp {line-height: 180%;}
	.lh160_for-sp {line-height: 160%;}
	.lh150_for-sp {line-height: 150%;}
	.lh140_for-sp {line-height: 140%;}
	.lh130_for-sp {line-height: 130%;}
	.lh120_for-sp {line-height: 120%;}
	.lh100_for-sp {line-height: 100%;}
}



@media only screen and (max-width: 1023px){
html{
	font-size: 80%;
	line-height: 1.6em;
}
}
@media only screen and (max-width: 320px){
html{
	font-size: 80%;
	line-height: 1.5em;
}
}


.center {
text-align: center;
}

/* 共通
----------------------------------------------- */

#harukas-coin h2 {
	color:#036EB7;
	font-size:200%;
	line-height:120%;
	text-align:center;
	border-radius:5px;
	text-shadow: 2px 2px 1px #FFF,
	-2px 2px 1px #FFF,
	2px -2px 1px #FFF,
	-2px -2px 1px #FFF;
	background: #e8dbbe; /* Old browsers */
	background: -moz-linear-gradient(top, #e8dbbe 0%, #f3ecdd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #e8dbbe 0%,#f3ecdd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #e8dbbe 0%,#f3ecdd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8dbbe', endColorstr='#f3ecdd',GradientType=0 ); /* IE6-9 */
	margin:1em 0 0.25em;
	padding: .5em 0;
}


#harukas-coin .title {
	background: #547733 url(../img/harukas-coin/background3.jpg) no-repeat;
	background-position: center top;
	padding: 10px 0;
}
@media only screen and (max-width: 1023px){
#harukas-coin .title {
	background-size: 850px;
}
#harukas-coin h2 {
	font-size: 150%;
	line-height: 150%;
}
}



.title_type1{
position:relative;
padding:5px 20px;
_font:bold 28px/1.6 Arial, Helvetica, sans-serif;
color:#0084CF;
background:#fff;
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #999;
border-top:#0084CF solid 3px;
border-bottom:#0084CF solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from(			rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to(				rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}

.title_type1::before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#0084CF;
}
.title_type1::after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}


.title_type2{
background-color: #0068B7; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px;  /* 余白 */
position: relative;
}
.title_type2::before{
background-color: #fff; /* 切り替わる色 */
content: '';
display: block;
opacity: 0.6; /* 不透明度 */
transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 300px;
height: 300px;
}

.title_type3{
background-color: #ef858c; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px;  /* 余白 */
position: relative;
}
.title_type3::before{
background-color: #fff; /* 切り替わる色 */
content: '';
display: block;
opacity: 0.6; /* 不透明度 */
transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 300px;
height: 300px;
}

/* photo */
.fit{
	width: 100%;
}

.fit--fixed{
	max-width: 100%;
}
@media print, screen and (min-width: 1024px){
	.pc-fit{
		width: 100%;
	}
	.pc-fit--fixed{
		max-width: 100%;
	}
}
@media only screen and (max-width: 1023px){
	.sp-fit{
		width: 100%;
	}
	.sp-fit--fixed{
		max-width: 100%;
	}
	.sp-fit--80{
		width: 80%;
		margin-left: 10%;
	}
	.sp-fit--70{
		width: 70%;
		margin-left: 15%;
	}
	.sp-fit--60{
		width: 60%;
		margin-left: 20%;
	}
	.sp-fit--50{
		width: 50%;
		margin-left: 25%;
	}
}

/* TOP index.html
----------------------------------------------- */

.harulas-coin-idx {
	background: #547733 url(../img/harukas-coin/background2.jpg) no-repeat;
	background-position: center top;
}
.harulas-coin-idx .index06 {
margin: 150px 0 0 0;
}
.harulas-coin-idx .index04 {
font-size:70%; width: 70%; line-height:150%; margin: 1em;
}

@media only screen and (max-width: 1023px){
.harulas-coin-idx {
	background-size: 720px;
}
.harulas-coin-idx .index06 {
margin: 10px 0 0 0;
}
}

@media only screen and (max-width: 320px){
.harulas-coin-idx {
	background-size: 600px;
}
}


.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
	0% {opacity:.250;}
	100% {opacity:1;}
}
@-moz-keyframes blink{
	0% {opacity:.250;}
	100% {opacity:1;}
}
@keyframes blink{
	0% {opacity:.250;}
	100% {opacity:1;}
}

/*▲2019.08*/


/* download.html 2019
----------------------------------------------- */

@media print, screen and (min-width: 1024px){
	#harukas-coin #iphone_line{ border-right: #8888BB solid 1px; }
}


/* download.html
----------------------------------------------- */

.flow{}
.flow__item{}
.flow__item:nth-child(2n){
	background-color: #EFF7EA;
}
.flow__media{
	padding-top: 4em;
	padding-bottom: 4em;
}
.flow__image{
	text-align: center;
}
.flow__body{}
.flow__header{
	margin-bottom: 1em;
}
.flow__frame{
	display: table;
	margin-bottom: 1em;
	
	color: #fff;
	background-color: #f00;
	border: 3px solid #f00;
	
	padding: 0;
	padding-right: 1em;
	font-weight: bold;
	line-height: 1em;
}
.flow__frame > img{
	margin-right: 1em;
}
.flow__step{
	margin: 0;
	padding: 0;
	
	color: #f00;
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.5em;
}
.flow__heading{
	margin: 0;
	padding: 0;
	
	font-size: 1.375rem;
	font-weight: bold;
	line-height: 1.5em;
}
.flow__note{
	margin: 0;
	padding: 0;
}
.flow__arrow{}



.flow__arrow-svg{
	width: 100%;
	height: 50px;
	vertical-align: middle;
}
.flow__arrow-path{
	stroke: #ccc;
	stroke-width: 1;
}
.flow__item:nth-child(2n) .flow__arrow-svg{
	background-color: #F0FFC4;
}
.flow__item:nth-child(2n) .flow__arrow-path{
	fill: #EFF7EA;
}
.flow__item:nth-child(2n+1) .flow__arrow-svg{
	background-color: #EFF7EA;
}
.flow__item:nth-child(2n+1) .flow__arrow-path{
	fill: #F0FFC4;
}
.flow__item:last-child .flow__arrow{
	display: none;
}



@media print, screen and (min-width: 1024px){
.flow{}
.flow__item{}
.flow__media{
	display: flex;
	align-items: center;
	
}
.flow__image,
.flow__body{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.flow__image{
	margin-right: 2%;
	
	max-width: 500px;
}
.flow__body{
	flex-grow: 1;
}
.flow__header{}
.flow__step{}
.flow__heading{}
.flow__subheading{}
.flow__note{}
.flow__arrow{}
.flow__arrowimg{}
.flow__arrowimg--odd{}
.flow__arrowimg--evn{}
}
@media only screen and (max-width: 1023px){
.flow{}
.flow__item{}
.flow__media{}
.flow__image{
	margin-bottom: 2em;
}
.flow__body{}
.flow__header{}
.flow__step{}
.flow__heading{}
.flow__subheading{}
.flow__note{}
.flow__arrow{}
.flow__arrow-svg{
	height: 30px;
}
}

/* detail.html
----------------------------------------------- */

#harukas-coin-detail {
font-size: 120%;
}

#harukas-coin-detail h3 {
	color:#036EB7;
	font-size: 140%;
	line-height: 150%;
	border-bottom:#036EB7 solid 1px;
	margin:1em 0;
	padding-bottom:10px;
	clear:both;
}
#harukas-coin-detail h4 {
	font-size: 120%;
	line-height: 120%;
	border-bottom:#888 dotted 2px;
	margin:1.5em 0 0 0;
	padding: .25em 0 0 0;
}
#harukas-coin-detail h4:first-of-type {
	margin: 0;
}
#harukas-coin-detail ul.harukas-coin-detail-attention li {
	line-height:1.5em;
	text-indent:-1em;
	padding-left:1em;
}
#harukas-coin-detail p {
	line-height:1.5em;
	margin-top:1em;
}

#harukas-coin-detail ul.harukas-coin-detail-transfer li {
margin-top: 1em;
	line-height:1.5em;
	text-indent:-1em;
	padding-left:1em;
}

#harukas-coin-detail iframe {
width:1000px;
height: 563px;
margin: 1em 0;
border: #666 solid 1px;
}
@media only screen and (max-width: 1023px){
#harukas-coin-detail iframe {
width:100%;
height: auto;
margin: 1em 0;
border: none;
}
}



/* detail.html 義援金終了
----------------------------------------------- */
/* 終了告知 */

#harukas-coin-detail #donations {
	position: relative;
	background: #CCC;
	padding: 10px;
	margin-top: 2em;
	border-radius: 6px;
}

#donations-text {
	position: absolute;
	top:30%;
	width: 100%;
	text-align:center;
	color: #000;
	font-size: 1.75rem;
	line-height: 2.5rem;
	margin: 0;
	text-shadow: 2px 2px 1px #FFF,-2px 2px 1px #FFF,2px -2px 1px #FFF,-2px -2px 1px #FFF,2px 2px 1px #FFF,-2px 2px 1px #FFF,2px -2px 1px #FFF,-2px -2px 1px #FFF;
	font-weight: bold;
	z-index: 1;
	}
.donations-end-back {
	opacity: 0.4;
}




/* 規約
----------------------------------------------- */



#harukas-coin-rules {
	font-size:100%;
	line-height:120%;
}

#harukas-coin-rules h3 {
	background:#eee;
	margin-top:1.5em;
	padding:3px;
}

#harukas-coin-rules h4 {
	margin:.5em 0 .25em;
}
#harukas-coin-rules p {
	margin:.5em 0;
}
#harukas-coin-rules ul {
	margin:.5em 0 0 .5em;
}
#harukas-coin-rules ul li {
	text-indent: -1.2em;
	padding-left: 1.2em;
	margin: .5em 0;
}
#harukas-coin-rules ul.number li {
	text-indent: -2.6em;
	padding-left: 2.6em;
}
#harukas-coin-rules ul.number2 li {
	text-indent: -1.75em;
	padding-left: 1.75em;
}

#harukas-coin .title_kpp {
	background: #547733 url(../img/harukas-coin/background3.jpg) no-repeat;
	background-position: center top;
	padding: 10px 0;
}
@media only screen and (max-width: 1023px){
	#harukas-coin .title_kpp{
	margin-top: -60px;
}
}
/* FAQ 
----------------------------------------------- */
#harukas-coin-faq h3 {
	color:#555;
	font-size: 160%;
	line-height:120%;
	border-radius:5px;
	text-shadow: 2px 2px 1px #FFF,
		-2px 2px 1px #FFF,
		2px -2px 1px #FFF,
		-2px -2px 1px #FFF;
	background: #e8dbbe; /* Old browsers */
	background: -moz-linear-gradient(top, #e8dbbe 0%, #f3ecdd 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #e8dbbe 0%,#f3ecdd 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #e8dbbe 0%,#f3ecdd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8dbbe', endColorstr='#f3ecdd',GradientType=0 ); /* IE6-9 */
	margin:2em 0 0em;
	padding:.5em 0 .5em 2em;
	text-indent:-1.5em;
	
	}

#harukas-coin-faq ul {
	margin: 0 auto;
}
#harukas-coin-faq ul li {
	padding: 0 10px 0 25px;
	margin: 20px 0 0;
	transition: all 1s;
	background: url(../../harukas-coin/images/faq_open.png) right 15px top 15px no-repeat;
}
#harukas-coin-faq ul li div {
	display: block;
	color: #005050;
	font-size: 150%;
	line-height: 150%;
	text-decoration: none;
	font-weight:bold;
}
#harukas-coin-faq ul li p a:hover {
	color: #FF5050;
}
#harukas-coin-faq ul li p {
	font-size: 120%;
	line-height: 0;
	margin: 5px 0 0;
	overflow: hidden;
	transition: all 1s;
}

/* オープン */
#harukas-coin-faq ul .open {
	padding: 25px 10px 25px 25px;
	border-radius: 5px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#harukas-coin-faq ul .open {background: url(../../harukas-coin/images/faq_close.png) right 15px top 15px no-repeat;}
#harukas-coin-faq ul .open a{color: #444;}
#harukas-coin-faq ul .open p {
	color: #444;
	line-height: 1.5;
}
#harukas-coin-faq ul .open p span {
	color: #000;
	font-size:125%;
	font-weight:bold;
}
#harukas-coin-faq li a span {
	font-size:125%;
}

#harukas-coin-faq ul {
	counter-reset: count;
	list-style-type: none;

}
#harukas-coin-faq li:before {
	counter-increment: count;
	content: "Q." counter(count);
	font-size: 160%;
	font-weight: bold;
}
#harukas-coin-faq ul div {margin: -2.2rem 0 0 5rem;}

@media only screen and (max-width: 1023px){
	#harukas-coin-faq li:before {
		font-size: 125%;
	}
	#harukas-coin-faq ul li div {
		font-size: 125%;
		line-height: 125%;
	}
	#harukas-coin-faq ul div {margin: -1.6rem 0 0 4rem;}
	#harukas-coin-faq ul li {padding: 0 10px 0 0px;}
}

/* genka.html
----------------------------------------------- */
#harukas-coin-genka .harukas-coin-genka3 {
	text-align: center;
	margin: 2em 0;
}
#harukas-coin-genka .harukas-coin-genka3 img {
	text-align: center;
}
.harukas-coin-genka1 {
	border: #E74446 solid 1px;
	padding: .5em;
	border-radius: 5px;
	margin-top: .5em;
}

div.harukas-coin-genka2 {
	border: #E74446 solid 1px;
	padding: .5em;
	border-radius: 5px;
	margin-top: .5em;
}

#harukas-coin-genka hr {
clear: both;
opacity:0;
}

.rule1 h3 {
	clear: both;
	position:relative;
	line-height:2em;
	padding-left:4em;
}
.rule1 h3:before {
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:5em;
	height:2em;
	background:url(../img/harukas-coin/no1.svg) no-repeat;
	background-size:contain;
}
.rule2 h3 {
	clear: both;
	position:relative;
	line-height:2em;
	padding-left:4em;
}
.rule2 h3:before {
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:5em;
	height:2em;
	background:url(../img/harukas-coin/no2.svg) no-repeat;
	background-size:contain;
}
.rule3 h3 {
	clear: both;
	position:relative;
	line-height:2em;
	padding-left:4em;
}
.rule3 h3:before {
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:5em;
	height:2em;
	background:url(../img/harukas-coin/no3.svg) no-repeat;
	background-size:contain;
}
.rule4 h3 {
	clear: both;
	position:relative;
	line-height:2em;
	padding-left:4em;
}
.rule4 h3:before {
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:5em;
	height:2em;
	background:url(../img/harukas-coin/no4.svg) no-repeat;
	background-size:contain;
}

@media print, screen and (min-width: 1024px){
div.harukas-coin-genka2 {
	width: 60%;
}

div.harukas-coin-genka2 table td{
padding: 0 30px 0 0;
} 

}


#harukas-coin-genka h3 {
margin: 1em 0 .5em 0;
padding-bottom: 2px;
font-size: 125%;
border-bottom: rgba(255,0,0,0.5) dotted 2px;
}

#harukas-coin-genka ul.calendar {

}

#harukas-coin-genka ul.calendar li{
float: left;
width:475px;
margin-right: 50px;
margin-bottom: 20px;
}
#harukas-coin-genka ul.calendar li:nth-of-type(2n){
margin-right: 0;
}
#harukas-coin-genka ul.calendar li:nth-of-type(4n){ 
padding: 50px 0;
}
@media only screen and (max-width: 1023px){
#harukas-coin-genka ul.calendar li{
float: none;
width:100%;
margin-right: 0;
margin-bottom: 10px;
}
#harukas-coin-genka ul.calendar li.last { 
padding: 10px 0;

}
}

/* list.html present
----------------------------------------------- */
#harukas-coin-present {
padding: 2em .5em;border-radius: 15px;
background: #FFF4EE;
font-size: 1.5em;
line-height: 2em;
}
/* 終了告知 */

#harukas-coin-present-end {
	position: relative;
	background: #AAA;
}

#harukas-coin-present-end-text {
	position: absolute;
	top:42%;
	width: 95%;
	text-align:center;
	color: #000;
	font-size: 1.5rem;
	line-height: 4rem;
	margin: 0 1rem;
	text-shadow: 2px 2px 1px #FFF,-2px 2px 1px #FFF,2px -2px 1px #FFF,-2px -2px 1px #FFF,2px 2px 1px #FFF,-2px 2px 1px #FFF,2px -2px 1px #FFF,-2px -2px 1px #FFF;
	font-weight: bold;
	}
.harukas-coin-present-end-back {
	opacity: 0.2;
}


/* 05.アメリカンな(?)吹き出し */
#harukas-coin #stamprally h3{
position:relative;
padding:5px 20px;
_font:bold 28px/1.6 Arial, Helvetica, sans-serif;
color:#0084CF;
background:#fff;
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #999;
border-top:#0084CF solid 3px;
border-bottom:#0084CF solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from(			rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to(				rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}

#harukas-coin #stamprally h3::before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#0084CF;
}
#harukas-coin #stamprally h3::after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}


#harukas-coin #stamprally h4{
background-color: #ef858c; /* 背景色 */
color: #fff; /* 文字色 */
overflow: hidden;
padding: 10px;  /* 余白 */
position: relative;
}
#harukas-coin #stamprally h4::before{
background-color: #fff; /* 切り替わる色 */
content: '';
display: block;
opacity: 0.6; /* 不透明度 */
transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 200px;
height: 200px;
}


#harukas-coin #stamprally {
border: #0084CF solid 1px;
background:#FFF; padding: 1rem; margin: 2rem 0rem;
}
@media only screen and (max-width: 1023px){
	#harukas-coin #stamprally {
		padding: 1rem; margin: 0rem 0rem;
	}
}

#harukas-coin #stamprally p {

}
#harukas-coin #stamprally li {

padding-left: 1.6rem;
text-indent: -1.6rem;
}
#harukas-coin .stamprally1 li {
	font-size: 125%;
	margin: .5rem 0 1rem;
}


#stamprally_goods img {
	margin-bottom: 1rem;
}
@media print, screen and (min-width: 1024px){
	#stamprally_goods .box {
		border-right:#888 dotted 1px;
		padding: 0 1rem;
		width: 30%;
		text-align: center;
	}
}
@media only screen and (max-width: 1023px){
	#stamprally_goods .box {
		border-top:#888 dotted 1px;
		padding: 1rem 0;
		text-align: center;
	}
}

#g-map iframe {height:60vh;}
@media only screen and (max-width: 1023px){
	#g-map iframe {height: 75vh;}
}

/* list.html
----------------------------------------------- */
@media print, screen and (min-width: 1024px){
	dl#harukas-coin-list_nav {
		display: flex;
		flex-wrap: wrap;
		background: #FFF;
		padding: 10px;
		border-radius: 10px;
	}
	dl#harukas-coin-list_nav dt {
		width: 10%;
		font-weight: bold;
		margin-top: 1rem;
		padding: 25px 0 0 0;
		border-top: #ccc dotted 1px;
	}
	dl#harukas-coin-list_nav dd {
		margin-left: auto;
		margin-top: 1rem;
		width: 90%;
		border-top: #ccc dotted 1px;
		padding: 30px 0 0 0;
	}
	dl#harukas-coin-list_nav dt:last-of-type ,dl#harukas-coin-list_nav dd:last-of-type {
		padding-bottom: 1rem;
		border-bottom: #ccc dotted 1px;
	}
}
@media only screen and (max-width: 1023px){
	dl#harukas-coin-list_nav {
	}
	dl#harukas-coin-list_nav dt {
		margin-top: 1rem;
	}
	dl#harukas-coin-list_nav dd {


	}
}
dl#harukas-coin-list_nav dd span {
	margin-right: 2rem;
	white-space: nowrap;
}
dl#harukas-coin-list_nav dd span::before {
	content: "●";
	color:#A99;
}





#harukas-coin .shopseal h3{
background: #F33;
padding: 5px;
text-align: center;
color:#FFF;
font-size: 150%;
border-radius: 15px;
margin-bottom: 1rem;
}
@media print, screen and (min-width: 1024px){
	#harukas-coin .shopseal img{
		width: 250px;
		margin-left: 20px;
	}
}
.a-color {color: #8FC31F;}
.b-color {color: #2EA7E0;}
.c-color {color: #F5A200;}
.d-color {color: #EA609E;}



@media only screen and (max-width: 1023px){
	#harukas-coin-list .shopseal{
		margin-left: 0px;
		font-size: 1.25em;
		text-align: center;
	}

	#harukas-coin-list .shopseal img{
		width: 35%;
		margin-right: 0;
	}
}
#harukas-coin-list p {
	font-size:1.25rem;
	margin-bottom:10px;
}
#harukas-coin-list p span {
	color:#036EB7;
}

#harukas-coin-list h3 {
	font-size:150%;
	line-height:200%;
	font-weight:normal;
	color:#FFF;
	padding-left:10px;
	border-radius:5px;
	text-shadow: 2px 2px 1px #000,
		-2px 2px 1px #000,
		2px -2px 1px #000,
		-2px -2px 1px #000;
	background: 444444; /* Old browsers */
	background: -moz-linear-gradient(top, #333333 0%, #666666 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #333333 0%,#666666 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #333333 0%,#666666 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	margin:1em 0 10px;
}


#harukas-coin-list h3#a-area {background: #8FC31F;text-shadow:none; padding-top: .5em;}
#harukas-coin-list h3#b-area {background: #2EA7E0;text-shadow:none; padding-top: .5em;}
#harukas-coin-list h3#c-area {background: #F5A200;text-shadow:none; padding-top: .5em;}
#harukas-coin-list h3#d-area {background: #EA609E;text-shadow:none; padding-top: .5em;}
#harukas-coin-list hr#a-area-ank {margin-bottom: 3em;display:block;width: 1%; height: 1px; border: 0; border-top: 1px solif #FFF;}
#harukas-coin-list hr#b-area-ank {margin-bottom: 3em;display:block;width: 1%; height: 1px; border: 0; border-top: 1px solif #FFF;}
#harukas-coin-list hr#c-area-ank {margin-bottom: 3em;display:block;width: 1%; height: 1px; border: 0; border-top: 1px solif #FFF;}
#harukas-coin-list hr#d-area-ank {margin-bottom: 3em;display:block;width: 1%; height: 1px; border: 0; border-top: 1px solif #FFF;}
@media only screen and (max-width: 1023px){
#harukas-coin-list hr#a-area-ank {margin-bottom: 5em;}
#harukas-coin-list hr#b-area-ank {margin-bottom: 5em;}
#harukas-coin-list hr#c-area-ank {margin-bottom: 5em;}
#harukas-coin-list hr#d-area-ank {margin-bottom: 5em;}
}


#harukas-coin-list .shop-details {
	margin-top: 2rem;
	position: relative;
}

#harukas-coin-list .shop-details figure.group img {
	position: absolute;
	top:10px;
	left: 10px;
	width: 100px;
}


#harukas-coin-list .shop-details figure.photo img {
	width: 400px;
	margin-right: 25px;

}
#harukas-coin-list .shop-details figure {
}

@media only screen and (max-width: 1023px){
	#harukas-coin-list .shop-details figure.group img {
		width: 70px;
		top:4.5rem;
	}
	#harukas-coin-list .shop-details figure.photo img {
		width: 100%;
		margin-right:0;
		margin-bottom: .5rem;
	}
}

#harukas-coin-list .shop-details dl {
	display: flex;
	flex-wrap: wrap;
	border-top: #999 dotted 1px;
	border-bottom: #999 dotted 1px;
	padding: 1rem 0;
	margin: 1rem 0;
	font-size: 100%;
	}
#harukas-coin-list .shop-details dt {
	width: 20%;
	flex-wrap: nowrap;
	margin-bottom: .5rem;
}
#harukas-coin-list .shop-details dd {
	margin-left: auto;
	width: 80%;
	margin-bottom: .5rem;
}
_:-ms-lang(x)::-ms-backdrop, #harukas-coin-list .shop-details dl {
	display: inline-block; 	/* IE11 ハック */
}
_:-ms-lang(x)::-ms-backdrop, #harukas-coin-list .shop-details dt {
	display: inline-block; width: 100px; vertical-align: top; 	/* IE11 ハック */
}
_:-ms-lang(x)::-ms-backdrop, #harukas-coin-list .shop-details dd {
	display: inline-block; width: 450px;	/* IE11 ハック */
}
#harukas-coin-list .shop-details-group-a h4 { background: #8FC31F;text-shadow:none; padding: .5rem 0 .25em 0; text-align: center; font-size: 1.5rem; color:#FFF; border-top-left-radius:15px;border-top-right-radius:15px;}
#harukas-coin-list .shop-details-group-b h4 { background: #2EA7E0;text-shadow:none; padding: .5rem 0 .25em 0; text-align: center; font-size: 1.5rem; color:#FFF; border-top-left-radius:15px;border-top-right-radius:15px;}
#harukas-coin-list .shop-details-group-c h4 { background: #F5A200;text-shadow:none; padding: .5rem 0 .25em 0; text-align: center; font-size: 1.5rem; color:#FFF; border-top-left-radius:15px;border-top-right-radius:15px;}
#harukas-coin-list .shop-details-group-d h4 { background: #EA609E;text-shadow:none; padding: .5rem 0 .25em 0; text-align: center; font-size: 1.5rem; color:#FFF; border-top-left-radius:15px;border-top-right-radius:15px;}

@media only screen and (max-width: 1023px){
	#harukas-coin-list .shop-details dl {
		border-top: none;
		border-bottom: none;
		margin: .25rem 0;
		padding: 0;
	}
	#harukas-coin-list .shop-details p {
		text-align: center;
		background: #FFF;
		padding: .25rem 0;
		border-radius: 100px;
	}
	#harukas-coin-list .shop-details-group-a h4 { font-size: 1.25rem; border-top-left-radius:5px;border-top-right-radius:5px; margin-top: 4rem;}
	#harukas-coin-list .shop-details-group-b h4 { font-size: 1.25rem; border-top-left-radius:5px;border-top-right-radius:5px; margin-top: 4rem;}
	#harukas-coin-list .shop-details-group-c h4 { font-size: 1.25rem; border-top-left-radius:5px;border-top-right-radius:5px; margin-top: 4rem;}
	#harukas-coin-list .shop-details-group-d h4 { font-size: 1.25rem; border-top-left-radius:5px;border-top-right-radius:5px; margin-top: 4rem;}
}


#harukas-coin-list p {
	clear:both;
}


@media print, screen and (min-width: 1024px){
#harukas-coin-list img.map {
	margin: 0 0 30px 125px;
}

}


#harukas-coin-list ul {
		letter-spacing: -.4em;	/*inline-blockの隙間をなくす*/
		border-top:#CCC solid 1px;
		margin-bottom: 2em;
}

#harukas-coin-list ul li {
	width:49%;
	display: inline-block;
	letter-spacing: normal;
	line-height:200%;
	padding:0 0 0 10px;
	border-bottom:#CCC solid 1px;
}

#harukas-coin-list ul.oneline li {
	width:99%;
}
#harukas-coin-list ul.oneline li span {
	font-size:75%;
	line-height:1em;
}
#harukas-coin-list ul.oneline li:nth-child(2n+1) {background: #F9F9F9;}
#harukas-coin-list ul.oneline li:nth-child(2n+2) {background: #F3F3F3;}



#harukas-coin-list ul li:last-child {
	margin-bottom:.5em;
}


#harukas-coin-list ul li:nth-child(4n+1),#harukas-coin-list ul li:nth-child(4n+4) {background: #F9F9F9;}
#harukas-coin-list ul li:nth-child(4n+2),#harukas-coin-list ul li:nth-child(4n+3) {background: #F3F3F3;}







/* アプリの使い方　フロー */


.app-htu div.fig {width: 190px; background:#0068B7;color: #FFF;padding: 10px; margin: 5px;border-radius: 15px; margin-bottom: 3rem; line-height: 140%;}
.app-htu div.fig img {width: 180px;}
.app-htu div.fig p {color: yellow; font-size: 125%; margin: .25rem 0;}
.app-htu div.fig p span {font-size: 175%; font-weight: bold;}
.app-htu div.fig figcaption {text-align: left; margin-top: .5rem;}



@media print, screen and (min-width: 1024px){
	.app-htu div.arrow-2 {width: 50px; color:#0068B7; margin-left: -15px; margin-top: 210px;}
	.app-htu div.arrow-2 i {transform: rotate( -90deg );}
/*	.app-htu div.arrow-pc {width: 50px; color:#0068B7; margin-left: -15px; margin-top: 210px;}
	.app-htu div.arrow-sp {display: none;}
	.app-htu div.arrow {width: 50px; color:#0068B7; text-align: center; padding-top: 210px}
	.app-htu div.arrow p {transform: rotate( -90deg );}*/
}

@media only screen and (max-width: 1023px){
	.app-htu div.arrow-2 {width: 100%; color:#0068B7;text-align: center;}
/*	.app-htu div.arrow-sp {width: 100%; color:#0068B7;text-align: center;}
	.app-htu div.arrow-pc {display: none;}*/
	.app-htu div.fig {width: 80%; margin:0 10% 0 7%; border-radius: 15px; line-height: 140%;}
	.app-htu div.fig figcaption {text-align: center;}
}




/*  */
.anchors{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
.anchors__item{
	margin-left: .625rem;
	margin-bottom: .625rem;

}
.anchors__link{
	display: block;
	
	font-size: 1rem;
	line-height: 2em;
	
	text-decoration: underline;
	background-color: #E0F0D5;
	
	padding: 0 .5em;
	border: #ccc solid 1px;
	border-radius: 5px;
}
.anchors__link span{
	font-size: .75rem;
}
.anchors__link:hover{
	color: #fff;
	background-color: #0068B7;
	text-decoration: underline;
}
@media print, screen and (min-width: 768px){
.anchors{}
.anchors__item{}
.anchors__link{}
}
@media only screen and (max-width: 767px){
.anchors{}
.anchors__item{}
.anchors__link{}
}

_:-ms-lang(x)::-ms-backdrop, #appli img {
	height: 450px;	/* IE11 ハック アプリの使い方 右イラスト */
}

/* menu */
nav#harukas_menu {
	letter-spacing: -.4em;	/*inline-blockの隙間をなくす*/
}
nav#harukas_menu ul {
background: #71B12B;
/*background-image: -webkit-linear-gradient(top, #142E3D, #000);
background-image: -moz-linear-gradient(top, #142E3D, #000);
background-image: -ms-linear-gradient(top, #142E3D, #000);
background-image: -o-linear-gradient(top, #142E3D, #285416);*/
background-image: linear-gradient(to bottom, #71B12B, #244A13);
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.3);	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 1px 8px rgba(0,0,0,0.3);			/*同上*/
	text-shadow: 1px 1px 1px #333;  
	height: 46px;	/*高さ*/
	_border: 1px solid #456;	/*枠線の幅・線種・色*/
	border-radius: 23px;	/*角丸のサイズ*/
	padding-left: 25px;
}
/*メニュー１個ごとの設定*/
nav#harukas_menu ul li {
	display: inline-block;
	min-width:70px;	/*幅*/
	_border-right: 1px solid #456;	/*右側の線の幅・線種・色*/
	padding: 0 1em;
	font-size: 1em;	/*文字サイズ*/
}
nav#harukas_menu ul li span {
	letter-spacing:1em;
	margin-left:1em;
}
nav#harukas_menu a {
	line-height: 46px;	/*行間*/
	text-decoration: none;
	letter-spacing: normal;	/*inline-blockの隙間をなくすの処理から元に戻す*/
	font-size: 80%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #FFF;	/*文字色*/
}
/*最初のメニューの設定*/
nav#harukas_menu li {
	border-left: 1px solid #456;
}
nav#harukas_menu li.last {
	border-right: 1px solid #456;
}
/*マウスオン時の設定*/
nav#harukas_menu a:hover li {
	background-color: #244A13;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-linear-gradient(top, #244A13, #042A00);
	background-image: -moz-linear-gradient(top, #244A13, #042A00);
	background-image: -ms-linear-gradient(top, #244A13, #042A00);
	background-image: -o-linear-gradient(top, #244A13, #042A00);
	background-image: linear-gradient(to bottom, #244A13, #042A00);
	color: #FF6;	/*文字色*/
	text-shadow: 1px 1px 1px #333;
}

/*取り消し線*/
.withdrawal{text-decoration: line-through;}

@media only screen and (max-width: 1023px){

nav#harukas_menu ul {
	background: none;
	box-shadow: 0 0 0 rgba(0,0,0,0.3);
	height: auto;
	border: none;
	border-radius: 1px;
	padding-left: 0px;
}
/*メニュー１個ごとの設定*/
nav#harukas_menu ul li {
	height: 46px;
	width: 49%;	/*幅*/
	background-image: -webkit-linear-gradient(top, #142E3D, #000);
	background-image: -moz-linear-gradient(top, #142E3D, #000);
	background-image: -ms-linear-gradient(top, #142E3D, #000);
	background-image: -o-linear-gradient(top, #142E3D, #285416);
	background-image: linear-gradient(to bottom, #71B12B, #244A13);
	border: 1px solid #456;	/*枠線の幅・線種・色*/
	border-radius: 8px;
	margin-bottom: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
nav#harukas_menu ul li.long {
	width: 99%;	/*幅*/
}
nav#harukas_menu a {
	font-size: 90%;	/*文字サイズ*/
}
nav#harukas_menu ul li.idx {
	display:none;
}
nav#harukas_menu ul li {
	margin-left: 1%;
	margin-left: 1%;
}
nav#harukas_menu ul li {
	margin-bottom: 5px;
}

/*マウスオン時の設定*/
nav#harukas_menu ul li a:hover {
	border-radius: 8px;
}
}





/* ボタン共通 */

.harukas__link{
	padding: 1em 1em 0;
}

.button__harukas{
	border: 0 none;
	cursor: pointer;
	
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	
	font-weight: bold;
	line-height: 1.5em;
	padding: .25em 0em;
	
	color: #fff;
	background-color: #DA340A;
	
	transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: -o-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
	-ms-transition: -ms-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transition: -moz-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
	
	box-sizing: 		border-box;
	-o-box-sizing: 		border-box;
	-ms-box-sizing: 	border-box;
	-moz-box-sizing: 	border-box;
	-webkit-box-sizing: border-box;
}
.button__harukas_end{
	border: 0 none;

	
	position: relative;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	
	font-weight: bold;
	line-height: 1.5em;
	padding: .25em 0em;
	
	color: #fff;
	background-color: #DA340A;

}
.button__harukas:before{
	content: "";
	
	display: block;
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	
	
	width: 5px;
	height: 5px;
	margin: auto;
	
	
	border-style: solid;
	border-color: #fff;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	
	transition: 			right 0.15s ease-out;
	-o-transition: 			right 0.15s ease-out;
	-ms-transition: 		right 0.15s ease-out;
	-moz-transition: 		right 0.15s ease-out;
	-webkit-transition: 	right 0.15s ease-out;
}
.button__harukas:hover{
	color: #fff;
	transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.button__harukas:hover:before{
	right: 5px;
}
.button__harukas--c1{ background-color: #DA340A; }
.button__harukas--c2{ background-color: #E5007F; }
.button__harukas--c3{ background-color: #E77155; }
.button__harukas--c4{ background-color: #cccccc; }
.button__harukas--c5{ background-color: #61B32B; }
.button__harukas--c6{ background-color: #006086; }
.button__harukas--c7{ background-color: #4CBBE6; }

.button__harukas--st2{
	background-image: linear-gradient(
	-45deg,
	#006EBB 25%,
	#004981 25%, #004981 50%,
	#006EBB 50%, #006EBB 75%,
	#004981 75%, #004981
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 4px 4px;
	width: 100%;
	border-radius: 2em;
	font-size: 1.5em;
	text-shadow: 1px 1px 1px #333;
}
.button__harukas--st3{
	background-image: linear-gradient(
	-45deg,
	#FFCC00 25%,
	#FFCC99 25%, #FFCC99 50%,
	#FFCC00 50%, #FFCC00 75%,
	#FFCC99 75%, #FFCC99
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 4px 4px;
	width: 100%;
	border-radius: 2em;
	font-size: 1.5em;
	text-shadow: 1px 1px 1px #333;
}

.harukas__link_end {
	background: rgba(228,65,67,.8);
	padding: 10px;
	text-align: center;
	color: #fff;
	font-size: 2rem;
	line-height: 2.5rem;
	text-shadow: 1px 1px 1px #333;
}

@media print, screen and (min-width: 1024px){}
@media only screen and (max-width: 1023px){
.button__harukas{
	line-height: 1.25em;
}
.button__harukas--st2{
	font-size: 1.25em;
}
.button__harukas span {
	display:none;
}
.harukas__link_end {
	font-size: 1.5rem;
	line-height: 2rem;
}

}



/* ボタン共通 */


.button__harukas--sb {
	background:#f0f0f0; padding:5px; text-align:center;
}

/* ボタンapp */
.btn-default {
color: #fff;
}
@media print, screen and (min-width: 1024px){
.btn-primary,
.btn-primary a  ,
.btn,
.btn-lg,
.btn-md,
.btn-sm,
.btn-xs {
color: #FFF;
}
.btn-warning {
color: #feab3a;
}
.btn-danger {
color: #ff5964;
}
.btn-success {
color: #28b78d;
}
.btn-royal {
color: #bd2df5;
}
.btn,
.btn-lg,
.btn-md,
.btn-sm,
.btn-xs {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
}
.btn-lg {
padding: 8px 15px;
font-size: 24px;
font-family: inherit;
}
.btn-md {
font-size: 1.25rem;
font-family: inherit;
padding: 5px 12px;
}
.btn-sm {
padding: 4px 10px;
font-size: 16px;
font-family: inherit;
}
.btn-xs {
padding: 3px 8px;
font-size: 12px;
font-family: inherit;
}
.btn-app {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-size: 20px;
font-family: inherit;
padding: 5px 12px;
overflow: hidden;
border-radius: 50px;
background: #fff;
color: #FFF;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.btn-app:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50px;
background: currentColor;
content: '';
z-index: -1;
opacity: 0;
-webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scale(0.2);
transform: scale(0.2);
}
.btn-app:hover,
.btn-app:focus {
box-shadow: 0 1px 8px rgba(58,51,53,0.4);
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.btn-app:hover:before,
.btn-app:focus:before {
opacity: 0.15;
-webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
-webkit-transform: scale(1);
transform: scale(1);
}
.btn-app.btn-xs {
padding: 3px 8px;
font-size: 12px;
font-family: inherit;
}
.btn-app.btn-xs:hover,
.btn-app.btn-xs:focus {
box-shadow: 0 1px 4px rgba(58,51,53,0.4);
}
.btn-app.btn-sm {
padding: 4px 10px;
font-size: 1rem;
font-family: inherit;
}
.btn-app.btn-sm:hover,
.btn-app.btn-sm:focus {
box-shadow: 0 1px 6px rgba(58,51,53,0.4);
}
.btn-app.btn-md {
font-size: 1.4rem;
font-family: inherit;
padding: 4px 12px 3px 12px;
}

.btn-app.btn-md:hover,
.btn-app.btn-md:focus {
box-shadow: 0 1px 8px rgba(58,51,53,0.4);
}
.btn-app.btn-lg {
padding: 8px 15px;
font-size: 2rem;
font-family: inherit;
}
.btn-app.btn-lg:hover,
.btn-app.btn-lg:focus {
box-shadow: 0 1px 10px rgba(58,51,53,0.4);
}
.btn-app.btn-default {
background: #fff;
color: #fff;
}
.btn-app.btn-primary {
background: #1d89ff;
color: #fff;
}
.btn-app.btn-warning {
background: #feab3a;
color: #fff;
}
.btn-app.btn-danger {
background: #ff5964;
color: #fff;
}
.btn-app.btn-success {
background: #28b78d;
color: #fff;
}
.btn-app.btn-royal {
background: #bd2df5;
color: #fff;
}
}

@media only screen and (max-width: 1023px){
.btn-app {
margin: 0;
padding: 0;
border-width: 0;
border-color: transparent;
background: transparent;
font-weight: 400;
cursor: pointer;
position: relative;
font-size: 20px;
font-family: inherit;
padding: 12px;
overflow: hidden;
border-radius: 50px;
background: #fff;
color: #FFF;
}
.btn-primary,
.btn-primary a 
{
color: #FFF;
}
.btn-app.btn-primary {
background: #1d89ff;
color: #fff;
}
.btn-app.btn-md {
		font-size: 1rem;
	}
	
}

/* ボタンapp▲ */

/* 横並び共通 */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  padding: 0.8em;
  margin: 0 0 2em;
  font-size: 1.5em;
}

.grid > li {
  background: #fff;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}



.flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.flex-ac{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-lac{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}
@media only screen and (max-width: 1023px){
	.flex_pc_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	.flex-ac_pc_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex-lac_pc_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		align-items: center;
	}
}
@media print, screen and (min-width: 1024px){
	.flex_sp_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		_flex-direction : row-reverse;
	}
	.flex_re_sp_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction : row-reverse;
	}
	.flex-ac_sp_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex-lac_sp_none{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		align-items: center;
	}
}

.flex2 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.flex2 > div {
	width: 50%;
	border: 1px solid white;
	box-sizing: border-box;
}


footer {
	background: #333;
	color: #fff;
	margin-top: 50px;
	padding-top: 30px;
	font-size: .75rem;
}
footer p{
	text-align: center;
	margin-bottom: 2px;
}
footer ul{
	margin-bottom: 10px;
}
footer ul li {
	display: inline-block;
	margin: 0 30px;
    padding: 0;
	font-size: 1rem;
}
footer a{
	color: #FFF;
	text-decoration: none;
}
footer a:hover{
	color: #FF8;
	text-decoration: none;
}
footer a:active{
	text-decoration: none;
}