@charset "UTF-8";

/* reset
--------------------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix {
	display: block;
	overflow: visible;
}

/* =====================================
ショッピングガイド テンプレート
===================================== */

/* コンテンツエリア
-------------------------------*/
.sec-guide-col2 {
    margin-bottom: 80px;
}
.ttl-heading-guide-01 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 55px;
    color: #333333;
}
.ttl-heading-guide-02 {
	font-size: 24px;
	font-weight: bold;
    letter-spacing: .05em;
	margin-bottom: 30px;
    color: #333333;
}
.ttl-heading-guide-03 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 30px;
    color: #333333;
}

.ttl-heading-guide-04 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 30px;
    color: #333333;
}
.txt-guide-inc-l-emphasis {
    color: #DF0326;
    font-weight: bold;
}
.txt-guide-inc-emphasis {
    color: #DF0326;
}
.sec-anchor-guide {
	font-size: 14px;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid #E6E6E6;
}
.list-anchor-guide {
	display: block;
	width: 100%;
	padding: 5px 0;
}
.sec-anchor-guide .anc {
	display: inline-block;
	padding-left: 18px;
	text-decoration: none;
	position: relative;
	color: #666666;
}
.sec-anchor-guide .anc:before {
	position: absolute;
	top: 5px;
	left: 0;
	content: '';
	display: inline-block;
	vertical-align: middle;
	border-bottom: solid 2px #C9B100;
	border-right: solid 2px #C9B100;
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
}
.sec-anchor-guide .anc:hover {
	opacity: .6;
	transition: .2s;
}
.txt-guide-normal {
    font-size: 14px;
    color: #666666;
	line-height: 1.8;
}
.box-txt-guide:first-child {
    margin-top: 40px;
}
.box-txt-guide:nth-child(n+2) {
    margin-top: 80px;
}
.box-annotation-guide {
    margin-top: 20px;
}
.box-annotation-guide .list-annotation-guide {
    font-size: 12px;
    line-height: 1.5;
    color: #666666;
    text-indent: -1em;
    padding-left: 1em;
}
.link-guide-normal {
    margin: 0 auto;
    text-align: center;
}
.link-guide-normal .link {
    display: inline-block;
    font-size: 14px;
    color: #666666;
    letter-spacing: .05em;
    line-height: 1.42;
    text-decoration: none;
    border: 1px solid #E6E6E6;
    border-radius: 100px;
    padding: 15px 25px;
    margin: 0 auto;
    width: 35%;
}
.link-guide-normal .link:hover {
    opacity: .7;
    transition: .2s;
}

/* 問い合わせエリア
-------------------------------*/
.sec-contact-guide {
    margin: 80px 0;
}
.box-contact-guide {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 60px 80px;
    border: 1px solid #E6E6E6;
}
.list-contact-guide {
    width: 50%;
}
.list-contact-guide:nth-child(1) {
    padding-right: 65px;
    border-right: 1px solid #EBEBEB;
}
.list-contact-guide:nth-child(2) {
    padding-left: 65px;
}
.list-contact-guide .ttl {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.45;
    margin-bottom: 20px;
}
.list-contact-guide .img {
    margin: 20px 0 5px;
}
.list-contact-guide .btn-contact-guide {
    margin: 30px 0 20px;
}
.btn-contact-guide .btn {
    width: 90%;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    letter-spacing: .05em;
    line-height: 1.42;
    text-decoration: none;
    /*border: 1px solid #E6E6E6;*/
    border-radius: 100px;
    padding: 15px 25px;
    margin: 0 auto;
    background-color: #C9B100;
}
.btn-contact-guide .btn:hover {
    opacity: .6;
    transition: .2s;
}
.list-contact-guide .img img {
    width: 265px;
}
.list-contact-guide .txt {
    color: #707070;
    margin-bottom: 15px;
}
.list-contact-guide .annotation {
    font-size: 12px;
    color: #707070;
}
.list-contact-guide:nth-child(2) .annotation {
    text-align: left;
}

/* よくあるご質問
-------------------------------*/
.sec-guestion-guide {
    margin-bottom: 60px;
}
.sec-guestion-guide .ttl {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.box-guestion-guide {
    padding: 30px 0;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    margin: 30px auto 40px;
}
.list-guestion-guide {
    padding-left: 5px;
    margin-top: 15px;
}
.list-guestion-guide:first-child {
    margin-top: 0;
}
.list-guestion-guide .link {
    color: #666666;
    text-decoration: none;
}
.list-guestion-guide .link:hover {
    opacity: .6;
    transition: .2s;
}

/* サイドローカルナビ
-------------------------------*/

/*ナビゲーションの固定*/
.nav-aside-guide {
	/*stickyで固定*/
	position: -webkit-sticky;/*Safari*/
	position: sticky;
	/*固定したい位置*/
	top: 30px;
	/*ナビゲーションの形状*/
	background:#fff;
}

/*レイアウトのためのCSS*/
.sec-guide-col2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sec-container-guide{
	width:690px;
}

.sec-aside-guide{
	width:210px;
    margin-left: 30px;
}

/*768px以下の見え方*/
@media screen and (max-width:768px){
	.sec-container-guide{
		width:100%;
	}
	.sec-aside-guide{
		width:100%;
		padding: 20px;
	}
	.nav-aside-guide{
		position:relative;/*stickyからrelativeに戻す*/
		top:0;
	}
}

/* 以下は検証用のレイアウトのための CSS*/
.nav-aside-guide .list-item-guide {
	list-style: none;
}
.nav-aside-guide .list-item-guide .item .link {
	text-decoration: none;
	color: #666;
}

/*デザインスタイル*/
.list-item-guide {
    border-bottom: none;
}
.list-item-guide .item {
    margin-top: 25px;
}
.list-item-guide .item:first-child {
    margin-top: 0;
}
.txt-link-guide {
    display: block;
}
.txt-link-guide .link {
    display: inline-block !important;
    font-size: 12px;
    line-height: 1.41;
}
.txt-link-guide:first-child .link {
    margin-top: 0 !important;
}
.ttl-heading-guide {
    text-align: left;
    background: none;
    margin: 5px 0 10px;
    font-size: 13px;
    font-weight: bold;
}
.ttl-heading-guide .link {
    color: #000 !important;
    text-align: left;
    text-decoration: none;
    padding-left: 6px;
    position: relative;
}
.ttl-heading-guide .s-arrow {
    margin: -3px auto 0 -2px;
    display: inline-block;
    vertical-align: middle;
    border-top: solid 2px #C9B100;
    border-right: solid 2px #C9B100;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
}
.ttl-heading-guide .link:hover,
.link-wrap .link:hover {
    opacity: .6;
    transition: .2s;
}
.link-wrap {
    padding-left: 15px;
}
.link-wrap .link {
    margin-top: 10px !important;
    text-decoration: none;
}

/* 下層ページ固有スタイル
-------------------------------*/
.img-guide-normal img {
    width: 100%;
    max-width: 690px;
}
.img-guide-normal {
}
.img-guide-normal-onarrow {
    position: relative;
    margin-top: 70px;
}
.img-guide-normal-onarrow img {
    width: 100%;
    max-width: 690px;
}
.img-guide-normal-onarrow:before {
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 61px;
    height: 22px;
    background: url("/pgmedia/guide_template/img/ico_guide_arrow_01.png") left top no-repeat;
    background-size: contain;
}
.img-guide-normal.s-frame {
    padding: 40px 70px;
    margin: 30px auto;
    text-align: center;
    border: 1px solid #E6E6E6;
}
.img-guide-normal.s-frame:before {
    content: none;
}
.box-btn-wrap-col2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 30px 40px 35px;
    border: 1px solid #E6E6E6;
    background-color: #F5F5F5;
}
.list-btn-wrap-col2 {
    width: 50%;
}
.list-btn-wrap-col2:nth-child(1) {
    padding-right: 25px;
    border-right: 1px solid #EBEBEB;
}
.list-btn-wrap-col2:nth-child(2) {
    padding-left: 25px;
}
.box-btn-wrap-col2 .ttl {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.45;
    margin-bottom: 20px;
}
.btn-wrap-col2 {
    margin: 15px 0 0;
}
.btn-wrap-col2 .btn {
    width: 90%;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    letter-spacing: .05em;
    line-height: 1.42;
    text-decoration: none;
    border-radius: 100px;
    padding: 15px 25px;
    margin: 0 auto;
    background-color: #C9B100;
}
.btn-wrap-col2 .btn:hover {
    opacity: .6;
    transition: .2s;
}



/* guide_point
-------------------------------*/
.txt-user-challenge{
	margin-top: 16px !important;
}

.ttl-mainichikuji-detail-01{
	margin: 0;
}
.guide .area-contents .box-guide {
    position: relative;
}
.guide .area-contents .btn-guide-exhange-system a{
	position: absolute;
    right: 0;
    left: 0;
    bottom: 30px;
    max-width: 300px;
    width: 100%;
    min-height: 20px;
    margin: 0 auto;
    text-align: center;
    background-color: #E4007F;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 40px;
    text-decoration: none;
    display: block;
    padding: 14px 0 14px;}

.guide .area-contents  .btn-guide-exhange-system a:after {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin: -5px 0 0 0;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
	transform: rotate(45deg);}
	
.guide .img-guide-normal.img-center{
	text-align: center;
}

/*.guide .area-contents .ttl-mainichikuji-detail-01{
	font-size: 16px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    background-color: #609d42;
    color: #fff;
}

.guide .area-contents .sec-mainichikuji-detail .inner{
    padding: 20px 20px 30px;
    background-color: #fff;
}
*/