@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
	font-size: 16px;
	color: #4a2a1a
}

@media screen and (max-width: 768px) {
	body {
		font-size: 15px;
		color: #1f1e1d
	}

}

body a {
	color: #4a2a1a
}

.l-inner {
	max-width: 100%;
	width: min(1180px, 100%);
	margin: 0 auto
}

.txtcenter {
	text-align: center;
}
.btn01 a {
	position: relative;
	top: 0;
	font-size: 16px;
	padding: .8em 2.6em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3em;
	transition: .2s ease-in-out;
}

.btn01 a img {
	margin-right: 8px;
	width: 20px;
	height: auto;
}

.btn01._pk a {
	color: #fff;
	background: #f56080;
	box-shadow: 0 5px #e05170;
}

.btn01._pk a:hover {
	top: 5px;
	box-shadow: 0 0 #e05170;
}

.btn01._bl a {
	color: #fff;
	background: #82c2d8;
	box-shadow: 0 5px #499cb9;
}

.btn01._bl a:hover {
	top: 5px;
	box-shadow: 0 0 #499cb9;
}

.btn01._large {
	text-align: center;
}

.btn01._large a {
	font-size: clamp(23px, 18.459px + 1.211vw, 35px);
	display: inline-block;
}

.btn02 {
	position: relative;
	top: 0;
	font-size: 16px;
	padding: .8em 2.6em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3em;
	transition: .2s ease-in-out;
	color: #fff;
	background: #77be99;
	box-shadow: 0 5px #51a077;
}

.btn02:hover {
	top: 5px;
	box-shadow: 0 0 #51a077;
}

.btn02 img {
	margin-right: 8px
}

.btn03 a {
	position: relative;
	top: 0;
	font-size: 12px;
	padding: .8em 1.6em;
	line-height: 1;
	display: inline-block;
	align-items: center;
	justify-content: center;
	border-radius: 3em;
	transition: .2s ease-in-out;
	background: #f1f1f1;
}

.itemall {
	margin-right: 1em
}

.itemall a {
	padding: .8em 1.6em;
	position: relative;
}

.itemall a:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #e05170;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.header {
	align-items: center
}

.sitelogoarea {
	width: 410px;
}

.sitelogoarea a {
	align-items: center;
}

.logomark {
	width: 140px
}

.sitettltxt {
	font-size: 24px;
}

.gnav {
	width: calc(100% - 410px - 100px);
	margin-right: 100px;
	justify-content: flex-end;
	align-items: center;
}

.gnav .btn01 {
	margin: 0 4px
}

.lang_codes {
	position: absolute;
	top: 38px;
	right: 20px
}

#mv {
	width: min(1688px, 100%);
	margin: 0 auto 40px
}

#about {
	background: url(../images/guide/bg-star.png)no-repeat;
	background-size: 110%;
	background-position: top center;
	padding: 50px 0;
	position: relative;
}

#about:after {
	content: '';
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	height: 300px;
	background: #fff9e1;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.read {
	text-align: center;
	line-height: 2;
	font-size: clamp(14px, 11.730px + 0.505vw, 19px);
	margin: 0 auto;
}

#about .read {
	background: #fff;
	width: min(840px, 90%);
	line-height: 3;
}

#about > .read {
	margin-bottom: 130px
}

.giftcontentsbox {
	width: min(1050px, 90%);
	margin: 0 auto;
	border: 5px solid #ab6e5d;
	border-radius: 30px;
	padding: 110px 70px 90px;
	position: relative;
	background: #fff;
}

#about .giftcontentsbox .read {
	margin-bottom: 30px
}

.giftcontentsbox .ttl {
	width: min(646px, 80%);
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.giftcontentslist {
	column-gap: 16px;
}

.giftcontentslist li {
	width: calc(100% / 3 - 11px);
}

#giftway {
	background: #fff9e1;
	padding-bottom: 90px
}

.itemimage {
	background: url(../images/guide/bg-star.png)no-repeat;
	background-size: 110%;
	padding-top: 50px;
	margin-bottom: 80px
}

.itemimage .ttl {
	font-size: clamp(18px, 10.432px + 2.018vw, 38px);
	text-align: center;
	position: relative;
	font-weight: 700;
	color: #4f3122;
	line-height: 1.8;
	display: inline-block;
}

.itemimage .ttl:before,
.itemimage .ttl:after {
	position: absolute;
	display: inline-block;
	content: "";
	background: #4e3021;
	width: 2px;
	height: 4em;
	margin: 0 1em;
	margin-top: -.2em;
	vertical-align: middle;
	bottom: 0
}

.itemimage .ttl:before {
	transform: rotate(-35deg);
	left: -2em;
}

.itemimage .ttl:after {
	transform: rotate(35deg);
	right: -2em
}

.itemimage .ttl strong {
	color: #e05170;
}

.itemimage .img {
	width: min(1050px, 90%);
	margin: -100px auto 40px
}

.flow {
	width: min(1050px, 90%);
	background: #ffedb5;
	border-radius: 30px;
	padding: 50px;

}

.flow .read {
	margin-bottom: 1em;
	font-weight: 600
}

.flow > .ttl {
	margin: 0 auto 60px;
	text-align: center;
}

.flow .itemall {
	text-align: center;
}

.flow .itemall a {
	display: inline-block;
	margin: 1em auto 0;
	text-decoration: underline
}

.flowlist {
	column-gap: 60px;
	color: #4e2a20;
	font-weight: 600;
	padding-bottom: 40px;
	border-bottom: 1px solid #f56080;
	margin-bottom: 40px
}

.flowlist li {
	width: calc(100% / 4 - 45px);
	position: relative
}
.flowlist li:after{
	content: '';
  width: 32px;
  height: 32px;
  border: 0;
  border-top: solid 5px #f56080;
  border-right: solid 5px #f56080;
  transform: rotate(45deg);
  position: absolute;
  top: -50px;
  right: -38px;
  bottom: 0;
  margin: auto;
}
.flowlist li:last-child:after{
	display: none
}
.flowlist .ttl {
	font-size: clamp(14px, 11.730px + 0.405vw, 18px);
	text-align: center;
	align-items: center;
	margin-bottom: 1em;
	height: 2em
}

.flowlist .ttl img {
	margin-right: 8px;
	height: 40px;
	width: auto;
}
.flowlist li:first-child .ttl img{
	height: 50px;
}
.flowlist .ttl span {
	width: calc(100% - 44px);
	text-align: left;
	font-weight: 700;
	z-index: 1
}

.flowlist .img {
	margin-bottom: 8px
}

#news .ttlwrap {
	position: relative;
	margin-bottom: 40px
}

#news .ttlwrap .ttl {
	width: min(240px, 50%);
	margin: 0 auto
}

#news .ttlwrap:after,
#news .ttlwrap:before {
	content: '';
	width: 41%;
	height: 110px;
	position: absolute;
	top: 30px;
}

#news .ttlwrap:after {
	background: url(../images/guide/news-ttl_r.png)no-repeat;
	background-size: cover;
	right: 0;
}

#news .ttlwrap:before {
	background: url(../images/guide/news-ttl_l.png)no-repeat;
	background-size: cover;
	left: 0;
}

.newslist {
	margin: 0 auto 70px;
	width: min(520px, 90%);
	padding: 0 32px
}

.newslist a {
	font-weight: bold;
	padding: .6em 0;
	border-bottom: 3px dotted #ffd557
}

.newslist a:hover {
	text-decoration: underline;
}

.newslist .day {
	margin-right: 2em;
}

.newslist .ttl {
	width: calc(100% - 9em)
}

.officialbnr {
	width: min(520px, 90%);
	margin: 0 auto 70px
}

#contact {
	background: #dce9d5;
	padding: 60px 0;
}

#contact > .ttl {
	font-size: clamp(24px, 10.432px + 2.018vw, 38px);
	text-align: center;
	margin-bottom: 1em;
	font-weight: 600
}

#contact .read {
	margin-bottom: 1em
}

.contactbtnwrap {
	column-gap: 30px;
	justify-content: center;
}

.contactbtn {
	background: #fff;
	border: 5px solid #77be99;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	text-align: center;
	width: min(375px, 50%);
	padding: 40px 2%
}

.contactbtn span {
	display: block;
}

.contactbtn .ttl {
	font-size: clamp(16px, 14.486px + 0.404vw, 20px);
	margin-bottom: .5em;
	font-weight: 700
}

.contactbtn .txt {
	font-size: 12px;
}

.contactbtn._tel .txt {
	margin-bottom: 1.6em
}

.contactbtn .num {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(20px, 16.216px + 1.009vw, 30px);
}

.footer {
	padding: 60px 0;
	text-align: center;
	margin: 0 auto;
}

.footer .sitelogoarea {
	margin: 0 auto 30px;
}
.total-quant {
    background: #f7d33e;
	    height: 24px;
	color: #499cb9;
	display: flex;
	justify-content: center;
	align-items: center;
	top: calc(50% - 12px);
	right: 10px;
	bottom: auto;
}
@media screen and (max-width: 1180px) {
	.sitelogoarea {
		width: 180px
	}

	.sitelogoarea a {
		align-items: baseline;
		flex-direction: column;
		padding-left: 8px
	}
	.footer .sitelogoarea a {
		align-items: center;
	}

	.gnav {
		width: calc(100% - 180px - 70px);
		margin-right: 70px;
	}

	.gnav .btn01 {
		margin: 0 2px
	}

	.btn01 a {
		font-size: 10px;
		padding: .8em .8em;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 1em;
	}

	.btn01 a img {
		margin-right: 0
	}

	#mv {
		margin-bottom: 10px
	}

	#mv img {
		aspect-ratio: 1.3 / 1;
		object-fit: cover;
	}

	body.no-header-image header,
	body:not(.home) header {
		min-height: 70px
	}

	.logomark {
		width: 90px;
	}

	.sitettltxt {
		font-size: 14px;
	}

	.lang_codes {
		position: absolute;
		top: 28px;
		right: 16px;
		font-size: 13px
	}

	#about {
		background-size: 150%;
		    padding: 50px 0 0;
	}

	#about .read {
		line-height: 1.85;
		margin-bottom: 70px
	}

	.itemimage{
		    padding-top: 100px;
		    background-size: 147%;
		background-position: top center;
	}

	.itemimage .img {
		width: 100%;
		margin: 0px auto 40px;
		text-align: center
	}

	.itemimage .img img.sp {
		display: inline;
	}

	.btn01._large a {
		width: 70%;
		border-radius: 4em;
	}
	.total-quant{
		top: -6px;
    right: -13px;
	}
}

@media screen and (max-width: 1000px) {
	.read{
		text-align: justify;
	}
	.giftcontentsbox {
		border-radius: 15px;
		padding: 12vw 8px 40px;
	}

	.giftcontentsbox .ttl {
		top: -35px;
		width: min(646px, 95%);
	}

	.giftcontentslist li {
		width: 100%;
		padding-bottom: .6em;
		margin-bottom: .6em;
		border-bottom: 3px dotted #ffd557;
	}

	.giftcontentslist li:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none
	}

	.giftwrap {
		align-items: center;
	}

	.giftcontentslist li .icon {
		width: 115px;
	}

	.giftcontentslist li p {
		width: calc(100% - 130px);

	}
	.flow {
		border-radius: 15px;
		padding: 50px 5%;
	}
	.flowlist{
		margin-bottom: 20px;
		column-gap: 30px
	}
	.flowlist li {
		width: calc(100% / 2 - 15px);
		margin-bottom: 30px;
		background: rgba(255, 255, 255, 0.6);
    padding: 6%;
    border-radius: 10px;
	}

	.flowlist .img {
		width: min(120px, 50%);
		margin: 0 auto 8px;
	}

	.flowlist .ttl {
		margin-bottom: 0
	}
	.flowlist li:after {
display: none
}
	#contact .read{
		padding: 0 1em
	}
	.contactbtn{
		margin-bottom: 20px
	}
}


@media screen and (max-width: 580px) {
	.itemall {
		display: none
	}

	#news .ttlwrap .ttl {
		width: min(220px, 38%);
	}

	#news .ttlwrap:after,
	#news .ttlwrap:before {
		width: 35%;
		background-size: 210%;
	}

	.newslist {
		padding: 0;
		margin-bottom: 50px
	}

	.newslist a {
		font-size: 13px
	}

	.giftcontentsbox {
		border: 3px solid #ab6e5d;
	}

	.btn01._large a {
		width: 96%
	}
.flowlist li {
		width: 100%;
	margin-bottom: 70px
	}
	.flowlist li:after {
    content: '';
    width: 32px;
    height: 32px;
    border: 0;
    border-top: solid 5px #f56080;
    border-right: solid 5px #f56080;
    transform: rotate(135deg);
    position: absolute;
    top: auto;
    right: calc(50% - 16px);
    bottom: -45px;
    margin: auto;
		display: block
}
	.flowlist li:last-child{
		margin-bottom: 0;
	}
	.flowlist .ttl{
		font-size: 20px
	}
	.contactbtn:first-child{
		margin-bottom: 20px
	}
	.contactbtn{
		width: 80%;
	}

}