@charset "Shift_JIS";

/* =================================================================================================
　永久不滅ポイントサイト - ガイドページスタイル
　https://www.a-q-f.com/
　Copyright (C) CREDIT SAISON CO.,LTD. All Right Reserved.
================================================================================================= */
#guide_wrapper {
    width: 100%;
    margin: 0 auto 100px;
}
#guide_container {
   
    margin: 0 auto ;
}

/*--------------------------------------
hd
---------------------------------------*/
#guide_wrapper h1{ 
	background: url(/common/pc/img/about/icon_guide.png) 0 0 no-repeat;
    display: inline-block;
    padding: 10px 0 0 90px;
    height: 74px;
    box-sizing: border-box;
	text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #0f228b;
    margin: 50px auto;
}
/*--------------------------------------
navi
---------------------------------------*/

#guide_wrapper #nav{width:100%;}
#guide_wrapper #nav ul{
  text-align: center;
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  background:#edf7ff;
}

#guide_wrapper #nav .menu a{
  font-size: 18px;
  display:block;
  padding:20px 40px;
  text-decoration:none;
  color:#004098;
}
 #nav .menu {  color:#004098;
	 }
 #nav .menu {
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 0) 3px 
      no-repeat;
  transition:0.5s;
}
 #nav .menu:hover {
  --d: 80%;
}

/*--------------------------------------
common
---------------------------------------*/
.txt_red{
   color:#d80d0d !important;
}
.txt_pink{
   color:#e52d8a !important;
}
.ltxt_pink{
	color:#e52d8a !important;
	font-size: 30px;
	font-weight:700 ;
}
.stxt{
	font-size: 12px;
	line-height: 140%;
	
}

#guide_Content h3{
	width: 100%;
	font-size: 30px;
	text-align: center;
	font-weight: 700;
}
#guide_Content h4{
	width: 100%;
	font-size: 30px;
	text-align: center;
	margin-top: 0px;
	font-weight: 700;
}
/*--------------------------------------
content
---------------------------------------*/

#guide_Content {
	margin: 0 auto ;

}
/*--------------------------------------
section
---------------------------------------*/
#section01{
	width:1260px;
	margin: 0 auto 40px;
}

#section01 h2{
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 150%;
	margin: 40px 0;
}

#section02{
	width: 100%;
	padding: 40px 0 200px 0 ;
	background-color: #f2f7ff;
}


#section02 .block_merit{
	width: 100%;
	display:flex;
	justify-content: center;
	margin-top: 70px;
	
}
#section02 .block_merit{
	width: 100%;
	display:flex;
	justify-content: center;
	margin-top: 70px;
	
}
#section02 .box{
	width: 400px;
	height: 270px;
	text-align: center;
	background-color: #fff;
	border-radius: 6px;
	margin: 0 15px;
	
}	
#section02 .box img{
	position:relative;
	top:-40px;
	
}	
#section02 .txt_box{
	width: 400px;
	height: 110px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	background-color: #004098;
	border-radius: 0px 0px  6px 6px;
	color: #fff;
	font-size: 16px;
	line-height: 170%;
	padding: 15px 20px;
	position:relative;
	top:-40px;
}
#section02 .mtxt_yellow{
	color: #fff600;
	font-size: 20px;

}
#section02 .txtlink{
	color: #fff!important;
	text-decoration: none;
	border-bottom: 1px solid #fff600;
	padding-bottom: 0px;

}

#section03{
	width: 1000px;
	margin: 0px auto 100px;
	text-align: center;
	line-height: 1.7;
	padding-top:40px;
}
#section03 .block_step{
    display: flex;
    justify-content: center;
	margin-top: 20px;
}

#section03 .block_step>.txt_box{
	width: 450px;
	text-align: left;
	margin: 60px 50px 0 0;
}
#section03 .title{
    font-size: 25px;
	color:#004098;
	font-weight: bold;
	margin-top: 10px;
}
#section03 .txt{
    font-size: 18px;
	color:#333;
	margin-top: 10px;
	
}
#section03 .txt a.link_top {

    text-decoration: underline;
	
}
#section03 .exclamation{
    font-size: 14px;
	color:#333;
	margin-top: 10px;
	
}
#section03 .exclamation .txtlink{
	color:#004098;
    text-decoration: none;
    border-bottom: 1px solid #004098;
    padding-bottom: 0px;
	
}
#section04{
	width: 1000px;
	margin: 40px auto;
	background-color: #fff;
}
#section04 .shop_search {
	margin-top: 30px;
}
#section04 .shop_search .form_text {
    width: 878px;
    height: 18px;
    padding: 20px;
    float: left;
    border: none;
    background-color: #f5f5f5;
	border: 2px solid #c21500;
	border-image: linear-gradient(-90deg, #004098, #e52d8a);
	border-image-slice: 1;
    border-right: none;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    color: #999;
    font-size: 16px;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;

}
#section04 .shop_search .form_text:focus {
	outline: none;
}	
#section04 .shop_search .form_submit {
    width: 80px;
    height: 62px;
    float: right;
    border: none;
    background: none;
    text-indent: -9999px;
    background: url(/common/pc/img/about/icon_search.png) 0 0 no-repeat;
    cursor: pointer;
    background-color: #004098;
    border-radius: 0 3px 3px 0;
    background-position: center;
}

#section06{
	width: 1000px;
	margin: 0px auto;
	background-color: #fff;
	padding-top:40px;
}
#section06 .block_trick1,
#section06 .block_trick2{
	display: flex; /*横並び*/
	justify-content: center;
	margin: 30px 0 60px;
}
#section06 .block_trick1>.txt_box{
	width: 500px;
	text-align: center;
	margin: 00px 00px 0 13px;
}
#section06 .block_trick2>.txt_box{
	width: 450px;
	text-align: center;
	margin: 20px 0px 0 0px;
	padding-right: 55px;
}
#section06 .title{
    font-size: 25px;
	color:#004098;
	font-weight: bold;
	margin-top: 10px;
}
#section06 .txt{
	width: 400px;
    font-size: 18px;
	color:#333;
	margin: 20px auto;
	line-height: 200%;
	
}
#section06 a.btn {
  width: 400px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 0rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #004098;
  border-radius: 6px;
  border: 2px solid #004098;
  background: #fff;
}

#section06 a.btn:hover {
  color: #fff;
  background: #004098;
}

#section07{
	width: 100%;
	padding: 40px 0 30px 0 ;
	background-color: #f2f7ff;
}
.block_security {
	width: 100%;
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
}

.block_security:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 20px solid transparent;
  border-top: 20px solid #fff;
}

#section07 .box_inner{	
	width: 1000px;
	text-align: center;
	display: flex; /*横並び*/
	justify-content: center;
	margin: 0 auto;
	padding: 30px 0;
	
}
#section07 .box{	
	text-align: center;
}
#section07 .txt{	
	padding: 15px;
	text-align: center;

}
#section07 a.btn {
  width: 600px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1.5rem 0rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #004098;
  border-radius: 6px;
  border: 2px solid #004098;
  background: #fff;
  margin-top:30px;

}
#section07 a.btn:hover {
  color: #fff;
  background: #004098;
}
#section07 .caution-txt{
   font-weight: 600;
    margin: 20px auto 10px;
    font-size: 138.5%;
    line-height: 150%;
    border: 2px dashed #a8a8a8;
    width: 1000px;
    padding: 20px 0;
}
#section07 .red {
  color: #dd0000;
  
}
/* ご利用にあたって */
#section07  .beforeUsing{
	width: 900px;
	margin:65px auto 0px;
}
#section07 .beforeUsing h3{
	width:100%;
	line-height:120%;	
	margin:0 auto 20px;
	background: url("/common/pc/img/about/title_line.gif") center center repeat-x;
	font-size:24px;
	text-align:center;
}
#section07 .beforeUsing h3 span{
	font-weight: normal;
	padding:0 10px;
	background-color:#f2f7ff;
}
#section07 .beforeUsing .txt{
	width: 900px;
	text-align: left;
	line-height: 180%;
	padding: 0;
}
#section07 .beforeUsing ul{
	width: 900px;
	line-height:2.0;
	margin:24px 0 0 0;
	font-size:14px;
	text-align:left;
}

#section08{
	width: 100%;
	padding: 40px 0 0px 0 ;
}

.swiper-slide {
   width: 1000px;
   
   display: flex; /*横並び*/
	justify-content: center;
}
.swiper-slide ul {
   width: 1000px;
   margin: 0 auto;
}
.swiper-slide li{
	width: 475px;
    padding: 10px 0px;
    box-shadow: none;
    margin-right: 30px;
    
}
.swiper-slide li:last-child {
     margin-right:0px;
}



/*ranking*/
#section05{
	width: 100%;
	padding: 40px 0 ;
	background-color: #f2f7ff;
	text-align: center;
}
#section05 .tab_panel{
	margin-top: 120px;
}
/*shop info*/
#section05 .sectionWrapper .sectionInner {
	width: 1000px;
	margin: 100px auto 10px;
	position: relative;	
}
#section05 .sectionWrapper ul.shopContents {
	display:flex;
	justify-content: center;
	margin-bottom: 40px;
	}
#section05 .sectionWrapper ul.shopContents li.top3{
	width: 300px;
	margin: 0 25px 0px 25px;
	text-align: center;
	padding: 10px;
	box-shadow:none;
	background: linear-gradient(-90deg, #004098, #e52d8a);
	padding: 2px;
	border-radius: 10px;
	position: relative;
	
}
#section05 .sectionWrapper ul.shopContents .rank_icon{
	position: absolute;
    top: -30%;
    left: 37%;
}
#section05 .sectionWrapper .top3 .shopContentInner{
	background: #FFF;
	padding:30px 10px 10px;
	border-radius: 9px;
	width: 280px;
	height: 180px;
}
#section05 .sectionWrapper .rank .shopContentInner{
	padding: 20px 0px 0px 0px;
    width: 146px;
    text-align: center;
    margin: 0 auto;
}
#section05 .sectionWrapper ul.shopContents li.rank{
	
	border: 1px solid #004098;
	margin: 0 7px 0px 7px;
	text-align: center;
	padding: 10px 5px 0 5px;
	box-shadow:none;
	background-color: #fff;
	border-radius: 6px;
	position: relative;
}
#section05 .sectionWrapper ul.shopContents .rank_icon2{
	position: absolute;
    top: -10%;
    left: 38%;
}

#section05 .sectionWrapper ul.shopContents li.shopContent:nth-of-type(4n){
	margin-right: 0px;
}
#section05 .sectionWrapper ul.shopContents li.shopContent:nth-child(4n+1){
	clear: both;
    margin-left: 0px;
}
#section05 .sectionWrapper ul.shopContents li.shopContent:hover {
	border: 1px solid #ff118c;
	
}

/* shopInfo */
#section05 .shopContentInner p.txt {
	height: 30px;
}
#section05 .api_shopname {
	line-height: 1.3;
}
#section05 .api_detailurl {
	color: #365c95;
}
#section05 .photo {
	text-align: center;
	margin-bottom: 5px;
}
#section05 .photo img {
	width: 85px;
	height: 46px;
	
}

/* point */
#section05 .point {
	width: 100%;
	margin: 20px 0 0;
	text-align: center;
	height: 70px;
	background-color: #fff;
}
#section05 .rank .point {
	width: 100%;
	margin: 20px 0 15px;
	text-align: center;
	height: 70px;
	background-color: #fff;
}
#section05 .point .pointInner {
color: #333;
}

#section05 .point .tit {
	color: #333;
	font-size: 12px;
	border-bottom: 1px solid #b6b6b6;
	padding-bottom: 10px;

}
#section05 .point .txtArea {
	color: #333;
}
#section05 .point .txtArea .txt {
	display: block;
	font-size: 14px;
	line-height: 1;
	padding-top: 10px;
}
#section05 .point .txt strong {
	color: #bf0101;
	font-size: 20px;
  font-weight: 500;
}
#section05 .rank .point .txt strong {
	color: #bf0101;
	font-size: 15px;
  font-weight: 500;
}
#section05 .point .txt strong span {
  font-size: 32px;
	font-weight: bold;
}
#section05 .rank .point .txt strong span {
  font-size: 32px;
	font-weight: bold;
}
#section05 .point .txt .api_normalmaxpoint {
	display: none;
	color: #333;
}

#section05 .point .txt .api_normalmaxpoint span {
	font-size: 16px;
}
#section05 span.api_normalmaxpoint.api_saleflg.has_sale{
    position: relative;
    display: inline!important;
    margin: 0 6px 0 0;
    padding: 2px 12px 0 0;
    background: url(/common/pc/img/about/arr_point01.png) no-repeat right center;
}
#section05 .rank span.api_normalmaxpoint.api_saleflg.has_sale{
	font-size: 12px;
    position: relative;
    display: inline!important;
    margin: 0 6px 0 0;
    padding: 2px 12px 0 0;
    background: url(/common/pc/img/about/arr_point01.png) no-repeat right center;
}



/*tab*/
#section05 #tab_menu {
	width:1000px;
  margin:40px auto 20px;
	display:flex;
	justify-content: center;
}
#section05 #tab_menu li {
    padding: 5px 0;
    margin-right: 40px;
    text-align: center;
    list-style: none;
    cursor: pointer;
    color: #004098;
    background: #d3e6ff;
    font-size: 125%;
    border-radius: 24px;
    width: 180px;
}

#section05 #tab_menu li.selected {
    display: inline-block;
    width: 180px;
    background-color: #004098;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 24px;
    padding: 5px 0;
    margin-right: 40px;
}
#section05 #tab_menu li:hover {
	background: #004098;
	color: #fff;
}


p.Attention {
	margin: 10px auto !important;
	text-align:center;
	width:100%;

}
p.Attention a{
	color: #365c95;
	text-decoration: underline !important;
}