@charset "utf-8";

/*top*/
.guide .contents{
  position: relative;
}

.guide .guideArea{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.guide .guideList{
    width: 49%;
    margin: 0 0 2%;
}
.guide .guideList a{
    display:block;
    transition: .3s;
}
.guide .guideList .tit{
    font-size: 160%;
    position: relative;
    background: #f5f2e9;
}
.guide .guideList .tit a{
    padding: .5em 1em;
}
.guide .guideList .tit a:hover{
    background: #f2ecd8;
}

.guide .guideList .tit:after {
    position:absolute;
    content: "";
    right:1.5em;
    top: 40%;
    width: 7px;
    height: 7px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .3s;
}

.guide .guideList .tit:hover:after {
    position: absolute;
    right:1em;
}
.guide .guideList .tit a.list_mb{
    margin: 0 0 1em;
}
.guide .guideList ul{
    margin: .75em 0 0 0;
}
.guide .guideList ul li{
    font-size: 140%;
    padding: .5em 1.25em;
    position: relative;
}

.guide .guideList ul li a{
    transition: .3s;
}

.guide .guideList ul li a:hover{
    text-decoration: underline;
}

/*Underlayer*/
.guide .sec:not(:last-of-type) {
    margin: 0 0 2em;
}
.guide .headline {
    position: relative;
}
.guide .sec .ttl {
    font-size: 180%;
    font-weight: bold;
    margin: 0 0 .5em 0;
    padding: .5em .75em;
    background: #f5f2e9;
    line-height: 1.4;
}
.guide .sec .sttl{
    font-size: 140%;
    font-weight: bold;
    padding: .5em .5em .5em 1.5em;
    position:relative;
    margin: 0 0 0 1em;
}
.guide .sec .sttl:before {
    content:"";
    position:absolute;
    width: 15px;
    height: 15px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #f2ecd8;
    left: 0;
    top: 12px;
}
.guide .sec p,
.guide .sec ol,
.guide .sec ul,
.guide .sec dl,
.guide .sec table {
  font-size: 140%;
}
.guide .sec table{
  width:100%
}
.guide .sec table th,
.guide .sec table td {
  padding: 1em;
  border: 1px solid #f5f2e9;
}
.guide .sec table td .sttl {
    font-size: 100%;
    margin: 0;
}
.guide .sec table th {
  background-color: #f5f2e9;
  border-bottom: 1px solid #fff;
  vertical-align: middle;
  width: 20%;
}
.guide .sec ol,
.guide .sec ul {
  margin: 0 0 0 2.15em;
}
.guide .sec li {
  text-indent: -1.3em;
}

.guide .sec .indentnone{
  margin: 0 0 0 1em;
}
.guide .sec .indentnone li {
  text-indent: 0;
}

.guide .sec .olDecimal {
  list-style-type: decimal;
}
.guide .sec .olLower {
  list-style-type: lower-roman;
}
.guide .sec .ulDisc {
  list-style-type: disc;
}
.guide .sec ol li:not(:last-of-type),
.guide .sec ul li:not(:last-of-type) {
  margin-bottom: .25em;
}
.guide .sec ol ol {
  font-size: 100%;

}
.guide .sec ol ol li {
    text-indent: -2.7em;
}
.guide .sec dl dt {
  font-weight: bold;
}
.guide .sec dl dd .sttl{
  font-size:100%;
  margin:0;
  padding: 1em 1em 1em 1.5em;
}
.guide .sec dl dd .sttl.first{
  padding: 0 1em 1em 1.5em;
}
.guide .sec dl dd .sttl:before {
    top: 19px;
}
.guide .sec dl dd .sttl.first:before {
    top: 5px;
}
.guide .sec ol ol ol {
  margin-left: 1.6em;
}
.guide .sec ol ol ol li {
  margin-left: -2.8em;
  text-indent: 0em;
}
.guide .lead {
    font-size: 140%;
    padding: 0 1em 1em;
}
.guide .guideimg {
    padding: 0 1em 1em;
}
.guide .firstLead {
    position: relative;
}
.guide .linkBtn {
    display: block;
    padding: .5em;
    width: 220px;
    background: #fff;
    color: #385aac;
    border: 1px solid #385aac;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    font-size: 140%;
    float: right;
    position: relative;
    right: 0;
    top: -3.7em;
}
.guide .linkBtn:after {
    position: absolute;
    content: "";
    right: 1em;
    top: 40%;
    width: 7px;
    height: 7px;
    border-top: 1px solid;
    border-right: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.guide .lead .linkBtn,.guide .guideStepFlow .linkBtn {
    display: block;
    padding: .5em;
    width: 220px;
    background: #fff;
    color: #385aac;
    border: 1px solid #385aac;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    font-size: 100%;
    float: none;
    position: static;
    margin: 1em 0;
}
.guide .linkBtn:hover {
    background: #385aac;
    color: #fff;
}
.guide .infoArea {
    border: 1px solid #385aac;
    text-align: left;
    padding: 0;
    margin: 2em auto 4em;
    width: 96%;
    overflow: hidden;
}
.guide .infoArea .ttl{
    font-size: 180%;
    text-align: center;
    background: #385aac;
    color: #fff;
}
.guide .sec .infoArea .sttl {
    color: #385aac;
}
.guide .sec .infoArea .sttl:before {
    background: #385aac;
}
.guide .sec .infoArea .lead {
    padding: 0 2.5em 1em;
}

.guidePayment .crekaType{
  width: 30%;
  margin: 0 0 1em 1em;
}
.guideLaw {

}
.guide .notation{
  margin: 0 0 2em;
}
.guide .notation dl{
  display: flex;
  flex-wrap: wrap;
}
.guide .notation dt{
  background: #f5f2e9;
  padding: 1em;
  width: 20%;
  border-bottom: 1px solid #fff;
}
.guide .notation dd{
  padding: 1em;
  width: 80%;
  border-right: 1px solid #f5f2e9;
  border-bottom: 1px solid #f5f2e9;
}
.guide .notation dl:first-child{
  border-top: 1px solid #f5f2e9;
}
.guideLaw .sec:not(:last-of-type){
  margin: 0;
}
.guideCommodity .imgList{
  display: flex;
  flex-wrap: wrap;
  align-items:center;

}
.guideCommodity .imgList img {
  max-width: 110px;
}
.guideCommodity .imgList dl{
  width:50%;
  padding: 1em 0;
}

.guideCommodity .headline +.lead,.guideOrder .headline +.lead  {
    font-size: 140%;
    padding: 0 0 1em;
}

.guideCommodity #giftGuideDialog .noshi-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0;
}
.guideCommodity #giftGuideDialog .noshi-wrap dl {
  width: 20%;
  padding: 0 3px 20px;
}
.guideCommodity #giftGuideDialog .noshi-wrap dl dt {
  text-align: center;
  font-weight: bold;
}
.guideCommodity #giftGuideDialog .noshi-wrap dl dt img {
  border: 1px solid gray;
}
.guideCommodity #giftGuideDialog .noshi-wrap dl dd {
  text-align:center;
}

.guide .sec .guideStepFlow dd img{
  border: 1px solid #cac4b7;
  box-sizing: border-box;
}
.guideMember .sec .guideStepFlow dl,.guideOrder .sec .guideStepFlow dl{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 2em;
  background: #f5f2e9;
  padding: 1em;
}
.guideMember .sec .guideStepFlow dt,.guideOrder .sec .guideStepFlow dt{
  font-weight: normal;
  width: 52%;
  margin: 0 1em 0 0;
  line-height: 1.6;
}
.guideMember .sec .guideStepFlow dd,.guideOrder .sec .guideStepFlow dd{
  width: calc((100% - 52%) - 1em);
}
.guideMember .sec .guideStepFlow .stepmark,.guideOrder .sec .guideStepFlow .stepmark{
  font-weight: bold;
  font-size: 120%;
  margin: 0 0 1em;
  display: inline-block;
}
.guideMember .lead .linkBtn{
  left: 0;
  position:relative;
  top:0;
  width: 250px;
}
.guideOrder .sec .guideStepFlow .sttl{
  font-size: 100%;
  margin: 0;
  color: #385aac;
}

.guideOrder .sec .guideStepFlow .sttl:before{
  background: #385aac;
}

.guideOrder .sec .sp {
    display: none;
}
.guideOrder .guideStepFlow .linkBtn{
  left: 0;
  position:relative;
  top:0;
}
.guideOrder .guideStepFlow .linkBtn:after {
    position: absolute;
    content: "";
    right: 1em;
    top: 40%;
    width: 5px;
    height: 5px;
    border-top: 1px solid #385aac;
    border-right: 1px solid #385aac;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: .3s;
}
.guideOrder .guideStepFlow .mb1{
  margin: 0 0 2em;
}
.guideAgreement .dateOfIssue{
  font-size: 140%;
  text-align: right;
}

/*anchorlink*/
.guide .anchorLink ul{
    display: flex;
    font-size: 140%;
    justify-content: space-between;
    margin: 2em auto;
    flex-wrap: wrap;
    width: 96%;
}
.guide .anchorLink ul li{
    width: calc(96%/4);
    position: relative;
    margin: 0 0 1em;
    border: 1px solid #385aac;
    border-radius: 10px;
    overflow:hidden;
}
.guide .anchorLink ul li a{
    display:block;
    padding: .5em 1em;
    color: #385aac;
    transition:.3s;
    width: 100%;
}
.guide .anchorLink ul li a:hover{
    color:#fff;
    background:#385aac;
}
.guide .anchorLink ul li a::after {
    position: absolute;
    content: "";
    right: 1em;
    top: 40%;
    width: 5px;
    height: 5px;
    border-top: 1px solid #385aac;
    border-right: 1px solid #385aac;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: .3s;
}
.guide .anchorLink ul li a:hover:after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.guide.guideCommodity .anchorLink ul li,.guide.guideOrder .anchorLink ul li,.guide.guideMember .anchorLink ul li,.guide.guideLaw .anchorLink ul li{
    width: calc(96%/3);
    position: relative;
    margin: 0 0 1em;
    border: 1px solid #385aac;
    border-radius: 10px;
    overflow: hidden;
}

.guideMember .sp{
  display: none;
}

.guidePayment .howto ol {
	list-style-type: disc;
	margin-left: 2.3em;
}

.guidePayment .howto ol li {
	padding-left: 0;
	text-indent: 0;
}

.guidePayment .lead .emphasis {
	font-weight: bold;
}

.amazonPay .lead a {
	color: #385aac;
}

.guide .blankLink {
  color: #385aac;
}

.guide .sec ol ol ol.indent3th {
  margin-left: 2.85em;
}

.guideLaw .pc-text {
  display: block;
}

.guideLaw .sp-text {
  display: none;
}

.guide br.spOn{
  display: none;
}

.guide .receipts-block img{
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  display: block;
}
.guide .receipts-block img + .lead{
  padding-top: 1em;
}

/*sp*/
@media screen and (max-width: 767px) {
.guide .guideList {
    width: 100%;
}
.guide .guideList .ttl a {
    padding: .5em 1em;
    margin: 0 0 .5em;
}
.guide .guideList ul li{
    border-bottom: 1px solid #efefef;
}
.guide .guideList ul li:last-child{
    border-bottom: none;
}
.topicPath {
    width: 100%;
    overflow: hidden;
}

.guide .linkBtn {
    margin-right: 1em;
    margin-left: auto;
    margin-bottom: 1em;
    float: unset;
    position: static;
}
.guide .linkBtn.back {
    margin-right: 1em;
    margin-left: auto;
    margin-bottom: 1em;
    float: unset;
    position: relative;
    top: 1em;
}
.guide .anchorLink ul {
    margin: 1em auto;
    width: 96%;
}

.guide .anchorLink ul li,.guide.guideMember .anchorLink ul li {
    width: calc(96%/2);
    position: relative;
    margin: 0 0 1em;
    border: 1px solid #385aac;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.guide.guideCommodity .anchorLink ul li,.guide.guideOrder .anchorLink ul li,.guide.guideLaw .anchorLink ul li{
    width: 100%;
}

.guide .sec .infoArea .lead {
    padding: 0 1em 1em;
}
.guide .guideimg {
    text-align: center;
}
.guide .anchorLink ul li a {
    display: block;
    padding: 1em 2em 1em 1em;
    color: #385aac;
    transition: .3s;
    line-height: 1.2;
    font-size: 90%;
}
.guide .anchorLink ul li a:hover {
    color: #385aac;
    background: #fff;
}
.guide .anchorLink ul li a:hover:after {
    border-top: 1px solid #385aac;
    border-right: 1px solid #385aac;
}
.guide .infoArea {
    width: 96%;
}
.guide .notation dt{
  width: 100%;
  padding: .5em 1em;
}
.guide .notation dt br {
    display: none;
  }
.guide .notation dd{
  width: 100%;
  padding: 1em;
  border: none;
}

.guide .notation dl:first-child{
  border: none;
}
.guidePayment .crekaType{
    width: 80%;
    margin: 0 auto 1em;
}

.guideCommodity .imgList{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0;
}
.guideCommodity .imgList dl {
    width: 48%;
    margin:0 auto;
}
.guideCommodity .imgList dl:last-of-type {
    margin:0;
}
.guideCommodity .imgList dt{
  text-align: center;
}
.guideCommodity .imgList dd{
  padding: 0 .5em;
}

.guideMember .sec .guideStepFlow dl,.guideOrder .sec .guideStepFlow dl {
    padding: 1em;
    margin: 0 0 1em;
}
.guideMember .sec .guideStepFlow dt,.guideOrder .sec .guideStepFlow dt {
    width: 100%;
    margin: 0 0 1em;
}
.guideMember .sec .guideStepFlow dd,.guideOrder .sec .guideStepFlow dd {
    display: block;
    margin: 0 auto;
    width: 100%;
}
.guideMember .sec .guideStepFlow dd img,.guideOrder .sec .guideStepFlow dd img{
    width: 100%;
}
.guideOrder .sec .sp {
    display: inline-block;
    color: #385aac;
    text-decoration: underline;
}
.guideOrder .sec .pc {
    display: none;
}
.guideMember .pc{
  display: none;
}
.guideMember .sp{
  display: block;
}

  .guidePayment .about .img,
  .guidePayment .howto .img {
	float: none;
	text-align: center;
	margin-left: 0;
	padding-bottom: 1em;
  }

  .guideCommodity #giftGuideDialog .noshi-wrap dl {
    width: 33%;
  }
  .guideCommodity #giftGuideDialog .sec2 .noshi-wrap dt {
    font-size: 96%;
  }

  .guideLaw .pc-text {
    display: none;
  }

  .guideLaw .sp-text {
    display: block;
  }
  .guide br.spOn{
    display: block;
  }
  .guide .receipts-block img{
    padding: 0 14px;
    width: 100%;
    max-width: 400px;
  }
}
@media screen and (max-width: 374px){
  .guideCommodity #giftGuideDialog .sec2 .noshi-wrap dt {
    font-size: 80%;
  }
}
@media screen and (max-width: 320px){
.guide .guideList .tit {
    font-size: 140%;
}
.guide .linkBtn {
    width: 60%;
}
}

/*tablet*/
@media screen and (min-width:768px) and (max-width:1023px) {
.guide #goIndex {
  margin-right: 10px;
}
.guide .linkBtn {
    /*right: 1.5em;
    top: -2em;*/
}
.guide .anchorLink ul li {
    display: flex;
    align-items: center;
}
.guide .anchorLink ul li a {
    line-height: 1.2;
    padding: .5em 1.75em .5em 1em;
}
.guide .anchorLink ul li a:hover {
    color: #385aac;
    background: #fff;
}
.guide .anchorLink ul li a:hover:after {
    border-top: 1px solid #385aac;
    border-right: 1px solid #385aac;
}
.guideMember .sec .guideStepFlow dl, .guideOrder .sec .guideStepFlow dl {
  flex-wrap: nowrap;
}
}