@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mb30{margin-bottom: 30px;}

ul {list-style: none;}
dl figure{display: flex; line-height: 1;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
.swiper a:hover img{
	transform: scale(1.1); /* 拡大 */
}

p,a{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 400;
font-style: normal;}
dd,.inner .right p,.tab-label,span{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 500;
font-style: normal;}
dt,dt span,#howto .bytype .tlt{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 600;
font-style: normal;}
h2,h3,#line_start h3 span{
font-family: "m-plus-1p", sans-serif;
font-weight: 800;
font-style: normal;
line-height: 1;}

a:hover img{
	transition: 0.5s;}

h1 .mainbnr{
	text-align: center;
	background-color: #FC9543;
	line-height: 0;}
h1 img{
	max-width: 70%;
	margin: 0 auto;}
h2{font-size: 35px; text-align: center; margin-bottom: 60px;}

.inner{
	width: 1080px;
	margin: 60px auto 0;}

#prologue h2{line-height: 1.5;}
#prologue .method{display: flex;justify-content: space-between;}
#prologue .method div{
	width: 31%;
	text-align: center;
	box-sizing: border-box;
	border: dashed 2px #C9C9C9;
	padding: 30px;}
#prologue .method div dt{
	font-size: 21px;
	background-color: #F6F6F6;
	margin: 20px 0;}
#prologue .method div dt span{color: #FC9543;}
#prologue .method div .txt{
	text-align: left;
	font-size: 16px;
	padding-bottom: 25px;}
#prologue .method div .btn{}
#prologue .method div .btn a{
	font-size: 16px;
	background-color: #FC9543;
	color: #fff;
	padding: 5px 0;
	display: block;}

#line_start{background-color: #FDF8ED;}
#line_start .inner{padding: 60px 0;}
#line_start .line_details{display: flex;justify-content: center;}
#line_start .txt{padding-left: 30px;}
#line_start h3{font-size: 35px; line-height: 1.0; margin-bottom: 20px;}
#line_start h3 span{color: #06C755; margin-bottom: 15px; font-size: 120%;}
#line_start .leed{font-size: 22px;margin-bottom: 25px; font-weight: bold;}
#line_start .friend_code{display: flex;}
#line_start .friend_code p{display: flex;}
#line_start .friend_code p a{
	font-size: 25px;
	color: #fff;
	background-color: #06C755;
	border-radius: 5px;
	padding: 5px 15px;}
#line_start .friend_code dl{
	font-size: 25px;
	display: flex;
	background-color: #fff;
	border: solid 1px #06C755;
	border-radius: 5px;
	margin-left: 15px;}
#line_start .friend_code dt{
	padding: 5px 15px;
	background-color: #06C755;
	color: #fff;}
#line_start .friend_code dd{
	padding: 5px 15px;
	color: #06C755;}


#mailmagazine .flow{display: flex;justify-content: space-between;}
#mailmagazine .flow dl{
	width: 28%;
	box-sizing: border-box;
	text-align: center;
	border: dashed 2px #C9C9C9;
	padding: 30px;}
#mailmagazine .flow dl:nth-child(2){
	position: relative;}
#mailmagazine .flow dl:nth-child(2):before{
	content: "";
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 0 20px 25px;
	border-color: transparent transparent transparent #FC9543;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -55px;}
#mailmagazine .flow dl:nth-child(2):after{
	content: "";
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 0 20px 25px;
	border-color: transparent transparent transparent #FC9543;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -60px;}
#mailmagazine .flow dd{font-size: 21px; padding: 10px 0 0;}


#howto{background-color: #FDF8ED;}
#howto .inner{padding: 60px 0;}
#howto h3{font-size: 23px; text-align: center; margin-bottom: 20px;}
#howto .bytype{display: flex;justify-content: space-between; margin-bottom: 60px;}
#howto .bytype dl{width: 32%; background-color: #fff; padding: 25px 40px;}
#howto .bytype dt{text-align: center;}
#howto .bytype .tlt{font-size: 21px; text-align: center; padding-bottom: 10px;}
#howto .bytype .txt{font-size: 16px;}
#howto p{font-size: 16px; text-indent: -1em; padding-left: 15px;}


#sns ul{display: flex; justify-content: center;}
#sns li{padding: 0 30px;}


.spotlist_back{
	margin-top: 60px;
	text-align: center;}
.spotlist_back a{
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}


@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	h1 img{
		max-width: 100%;}
	h2{font-size: 23px; margin-bottom: 40px;}
	.inner{
	width: 90%;
	margin: 40px auto;}
	#prologue .inner{margin: 30px auto;}
	#prologue .inner p{text-align: left;}	
	#prologue .method{display: block;}
	#prologue .method div{width: 100%;}
	
	#line_start .inner{padding: 40px 0;}
	#line_start .line_details{display: block;}
	#line_start .line_details figure{text-align: center;}
	#line_start .txt{padding: 0;}
	#line_start .friend_code{display: block;}
	#line_start .friend_code p,
	#line_start .friend_code p a{display: block; text-align: center;}
	#line_start .friend_code dl{margin: 20px 0 0 0;}
	#line_start h2{line-height: 1.5;}
	#line_start h3{font-size: 23px; text-align: center;}
	#line_start .leed{font-size: 16px;}
	
	#mailmagazine .flow{display: block;}
	#mailmagazine .flow dl{
		padding: 20px;
		display: flex;
		width: 100%;}
	#mailmagazine .flow dt{width: 20%; margin-right: 10%;}
	#mailmagazine .flow dt img{max-width: 100%;}
	#mailmagazine .flow dd{width: 70%; text-align: left; align-content: center; font-size: 18px; padding: 0;}
	
	#howto .inner{padding: 40px 0;}
	#howto .bytype{display: block;}
	#howto .bytype dl{width: 100%;}
	#howto .bytype .tlt{font-size: 18px;}
	
}