@font-face {
  font-family: "Toppan";
  src: url("Toppan.otf");
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

html,
body {
 
  font-family: sans-serif;
  font-size:16px;
  margin:0;
  padding:0;
  font:#222222;
  line-height:1.7;
}

body,p,ul,td,th{
    margin: 0;
    padding: 0;
}

h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:16px;}

.text-center{
	text-align: center;
	}
.text-white{
	color:#ffffff;
	}
.text-blue{
	color:#256079;
	}
.text-red{
	color:#FF0000;
	}	
.text-600{
	font-weight:600;
	margin-top:16px;
	}	
a{
	color:#0000FF;
	text-decoration: none;
	}
a:hover{
	opacity: 0.6;
	}


@media screen and (max-width: 750px) {
  header a img {
    margin: 4vw 0 4vw 3vw;
    width: 35%;
  }
}

@media screen and (min-width: 750px) {
  header a img {
    margin: 50px 0 40px 40px;
  }
	}

.block-mv img{
	width:100vw;
	margin-top:24px;
	}

	
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 

@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
	h2{font-size:16px;margin-top:0;}
	h4{font-size:16px;}
	h5{font-size:12px;}
}

section.leisure{
	background-image: url(../img/leisure_bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	}

.leisure-list{
	margin:auto;
	padding:20px 120px 40px;
	}
.leisure-list h5{
	padding-bottom:24px;
	}

.grid{
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
	}
	
	
.block-coupon{
	width: 800px;
	margin:auto;
	margin-bottom:80px;
	}

.coupon-notice{
	margin:24px 20px 0;
	font-size:16px; 
	}
.block-coupon h4{
	margin-top:40px;
	}

@media only screen and (max-width: 750px) {
.block-mv img{
	margin-top:0;
	}
.leisure-list{
    text-align: center;
	padding:24px 20px 20px;
	}
.leisure-list h5{
	padding-bottom:0;
	}
.block-coupon{
	width: 100vw;
	margin-bottom:40px;
	}
.coupon-notice{
	margin:20px;
	font-size:12px; 
	}
.grid{
	gap: 4px;
	grid-template-columns: repeat(4, 1fr);
	}
.leisure-list img{
	width: 100%;
	height:100%;
	object-fit: scale-down;
  }	
}

.block-coupon a{
	color:#fff;
	}

/*ボタン*/

p.btn{
	text-align: center;
	margin-bottom:40px;
}

p.btn-radius-solid {
	font-size:32px;
	font-weight:600;
	margin:0 auto;
	padding:24px 40px;
	border-radius:0.5vh;
	background: #08FF54;
	background: -webkit-gradient(linear, left top, left bottom, from(#08FF54), to(#25BA79));
	background: -webkit-linear-gradient(top, #08FF54 0%, #25BA79 100%);
	background: linear-gradient(to bottom, #08FF54 0%, #25BA79 100%);
}

p.btn-radius-solid:hover {
	background: -webkit-gradient(linear, left bottom, left top, from(#08FF54), to(#25BA79));
	background: -webkit-linear-gradient(bottom, #08FF54 0%, #25BA79 100%);
	background: linear-gradient(to top, #08FF54 0%, #25BA79 100%);
}



@media only screen and (max-width: 750px) {
.block-mv{
	width:100vw;
	margin-bottom:0;
	}
	
p.btn-radius-solid {
	font-size:22px;
	font-weight:600;
	padding:16px;
	margin:20px;
}
}



.circle {
    width: 240px;
    height: 240px; 
	position: relative;
	margin:auto;
    border-radius: 50%; 
    text-align: center;
}

.orange{
	background-color:#FF842D;
	}
.blue{
	background-color:#256079;
	}

.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	line-height:1.5;
	white-space: nowrap;
}

.circle p {
	font-size:40px;
	font-weight:600;
	color:#fff;
	margin:0;
	}

.grid-circle{
    text-align: center;
	margin:80px 200px;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));	
	}
	
.circle-box{
    width: 300px;
	margin:auto;
	padding-bottom:24px;
	}
	
.circle-text{
    text-align: center;
	font-size:1.5em;
	font-weight:600;
	color:#256079;
	margin-top:16px;
	}
	
.big{
	font-size:1.8em;
	line-height:1;
	}
.small{
	font-size:0.8em;
	}	


@media only screen and (max-width: 750px) {
.grid-circle{
	margin:40px 20px;
	gap: 10px;
	grid-template-columns: repeat(2, 1fr);	
	}
.circle {
    width: 130px;
    height: 130px; 
	position: relative;
	margin:auto;
    border-radius: 50%; 
    text-align: center;
}
.circle-box{
    width: 100%;
	}
.circle p {
	font-size:26px;
	}
.circle-text{
	font-size:0.8em;
	}
}


.title{
	background-color:#FF842D;
	padding:16px;
	}
.title p {
	font-size:48px;
	font-weight:600;
    text-align: center;
	}
.title span {
	vertical-align: middle;
	}
.title img {
	vertical-align: middle;
	margin-left:1rem;
	width:120px;
	}
.coin-contents {
	background-color:#ffe8c0;
    text-align: center;
	padding-bottom:48px;
	}
.coin-contents p {
	color:#256079;
	font-size:28px;
	font-weight:600;
	padding-top:48px;
	width:50%;
	margin:auto;
	}
p.coin-text {
	font-size:24px;
	font-weight:400;
	}
.coin-contents img {
	margin:auto;
	padding-top:24px;
	width:714px;
	}	
	
@media only screen and (max-width: 750px) {
.title p {
	font-size:24px;
	}
.title img {
	width:40px;
	}
.coin-contents p {
	width:90%;
	margin:0 20px;
	font-size:18px;
	padding-top:24px;
	}
.coin-contents img {
	padding-top:24px;
	width:85%;
	}	
p.coin-text {
	font-size:15px;
	margin:0 20px;
	}
.coin-contents {
	padding-bottom:24px;
	}
}
	
.plan-contents{
    text-align: center;
	margin-bottom:48px;
	}
.plan-contents img{
	width:50%;
	margin-top:48px;
	}

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

.plan-contents{
	margin:0 20px;
	}
.plan-contents img{
	margin-top:24px;
	width:90vw;
	}
.plan-contents a{
	font-size:20px;
	}
	
}
	
footer {
  color: #262626;
  margin-top: 14vw;
  background-color: #ffbf2d;
  text-align: center;
}

footer .logo img {
  margin: 0 auto;
  width: 20%;
}

footer p {
  display: block;
  font-size: 1.4vw;
  text-align: center;
  padding: 2em 0;
}