@charset "UTF-8";

/*************************
font_import
*************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/****************
 reset
***************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body.noscroll{overflow:hidden}.iframe{width:100%;height:100%}.overlay{position:fixed;top:0;left:0;height:100vh;width:100%}.overlay.hidden{top:-100vh}#header.fixed{top:0;height:48px;position:sticky;box-shadow:0 2px 10px #2121211a}#header,#footer{overflow:hidden}@media screen and (min-width: 768px){#header.fixed{height:64px}}

*, *::before, *::after { box-sizing: border-box; }

#header {
	position: relative;
	z-index: 100;
}

#drawer.overlay,
#search-modal.overlay { z-index: 101; }

#drawer.overlay.hidden,
#search-modal.overlay.hidden {
	opacity: 0;
	z-index: 0;
}

/* リニューアル用style */
/*************************
color_variable
*************************/
#LP.howtouse.renewal240118 {
	--lp-color_white: #fff;
	--lp-color_black: #222222;
	--lp-color_gray: #979797;

	--lp-color_pale-yellow: #fef5bf;
	--lp-color_yellow: #f9da0b;

	--lp-color_magenta: #f82456;
}

/*************************
main
SP_layout（980px未満）
*************************/

#LP.howtouse.renewal240118 {
  position: relative;
	z-index: 1;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
}

/* スペーサー */
#LP.howtouse.renewal240118 .mb_none { margin-bottom: 0 !important; }
#LP.howtouse.renewal240118 .mb_xs { margin-bottom: 3% !important; }
#LP.howtouse.renewal240118 .mb_sm { margin-bottom: 5% !important; }
#LP.howtouse.renewal240118 .mb_md { margin-bottom: 8% !important; }
#LP.howtouse.renewal240118 .mb_lg { margin-bottom: 12% !important; }

#LP.howtouse.renewal240118 .mt_none { margin-top: 0 !important; }
#LP.howtouse.renewal240118 .mt_xs { margin-top: 3% !important; }
#LP.howtouse.renewal240118 .mt_sm { margin-top: 5% !important; }
#LP.howtouse.renewal240118 .mt_md { margin-top: 8% !important; }
#LP.howtouse.renewal240118 .mt_lg { margin-top: 12% !important; }

/* スペーサー（SP限定） */
@media screen and (max-width: 980px) {
	#LP.howtouse.renewal240118 .mb_none_sp { margin-bottom: 0 !important; }
	#LP.howtouse.renewal240118 .mb_xs_sp { margin-bottom: 3% !important; }
	#LP.howtouse.renewal240118 .mb_sm_sp { margin-bottom: 5% !important; }
	#LP.howtouse.renewal240118 .mb_md_sp { margin-bottom: 8% !important; }
	#LP.howtouse.renewal240118 .mb_lg_sp { margin-bottom: 12% !important; }

	#LP.howtouse.renewal240118 .mt_xs_sp { margin-top: 3% !important; }
	#LP.howtouse.renewal240118 .mt_sm_sp { margin-top: 5% !important; }
	#LP.howtouse.renewal240118 .mt_md_sp { margin-top: 8% !important; }
	#LP.howtouse.renewal240118 .mt_lg_sp { margin-top: 12% !important; }
}

#LP.howtouse.renewal240118 a {
  transition: .4s;
  text-decoration: none;
}

#LP.howtouse.renewal240118 .device_sp {
  display: block;
}

#LP.howtouse.renewal240118 .device_pc {
  display: none;
}

#LP.howtouse.renewal240118 img {
	user-select: none;
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

#LP.howtouse.renewal240118 .bg_paleYellow {
  background-color: var(--lp-color_pale-yellow);
}

#LP.howtouse.renewal240118 .bg_yellow {
  background-color: var(--lp-color_yellow);
}

#LP.howtouse.renewal240118 .mainArea__inner {
  width: 92%;
  margin: 0 auto;
  padding: 8% 0;
}

#LP.howtouse.renewal240118 .contents_ttl {
  width: 75%;
  margin: 0 auto 5%;
}

#LP.howtouse.renewal240118 .contents_ttl.andMall {
  width: 95%;
}

#LP.howtouse.renewal240118 .contents_ttl.outlet {
  width: 70%;
}

#LP.howtouse.renewal240118 .btn_rounded a {
	position: relative;
	display: block;
  width: 100%;
	margin: 0 auto;
	text-align: center;
	border-radius: 100px;
	user-select: none;
	padding: 6% 0;
	font-size: 4vw;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	color: var(--lp-color_white);
  background-color: var(--lp-color_black);
}

#LP.howtouse.renewal240118 .btn_rounded a::after {
	border-style: solid;
	content: '';
	position: absolute;
	top: 40%;
	right: 4%;
	width: 0;
	height: 0;
	border-color: transparent transparent transparent var(--lp-color_white);
	border-width: 6px 0 6px 8px;
}

#LP.howtouse.renewal240118 .btn_rounded a:hover {
	opacity: .7;
}

#LP.howtouse.renewal240118 .section_usageGuide .anchorLink {
  transition: .4s;
}

#LP.howtouse.renewal240118 .section_usageGuide .anchorLink:hover {
  cursor: pointer;
  filter: brightness(.8);
}

#LP.howtouse.renewal240118 .section_usageGuide .list_2colum {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4%;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_2colum li {
  position: relative;
  flex-basis: 48%;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_2colum .btn_rounded a {
  position: absolute;
  width: 90%;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  font-size: 2.5vw;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_2colum .btn_rounded a::after {
  top: 40%;
	right: 3%;
	border-width: 4px 0 4px 4px;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_1colum li,#LP.howtouse.renewal240118 .section_usageGuide .list_1colum_sp li {
  position: relative;
  margin-bottom: 4%;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_1colum_sp li:last-child {
  margin-bottom: 0;
}

#LP.howtouse.renewal240118 .section_usageGuide .list_1colum_sp .btn_rounded a {
  position: absolute;
  width: 80%;
  bottom: 7%;
  left: 50%;
  transform: translate(-50%);
  padding: 5% 0;
  text-align: center;
  font-size: 4vw;
}

#LP.howtouse.renewal240118 .btn_txt_usage {
  text-align: right;
}

#LP.howtouse.renewal240118 .btn_txt_usage a {
  color: #222222;
  font-size: 3vw;
  font-weight: 700;
  border-bottom: 1px solid;
}

#LP.howtouse.renewal240118 .btn_txt_usage a:hover {
  opacity: .7;
}

/* ショップ一覧 */
#LP.howtouse.renewal240118 .shopList_wrap {
  padding: 4% 2%;
  background-color: var(--lp-color_white);
}

#LP.howtouse.renewal240118 .shopList_wrap .shop_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#LP.howtouse.renewal240118 .shopList_wrap .shop_list li {
  flex-basis: 31.3%;
  margin-right: 3%;
  margin-bottom: 3%;
}

#LP.howtouse.renewal240118 .shopList_wrap .shop_list li a:hover {
  filter: brightness(.7);
}

#LP.howtouse.renewal240118 .shopList_wrap .shop_list li:nth-of-type(3n) {
  margin-right: 0;
}

#LP.howtouse.renewal240118 .shopList_wrap .text_andMore {
  margin: 0 auto 6%;
  text-align: center;
  font-size: 4.5vw;
  font-weight: 700;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_rounded a {
  width: 58%;
  margin-bottom: 5%;
  padding: 10% 0;
  font-size: 2.6vw;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_rounded a::after {
	right: 6%;
	border-width: 5px 0 5px 6px;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.andMall a {
  width: 60%;
  padding: 4% 0;
  line-height: 1.5;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.outlet a {
  width: 100%;
  padding: 4% 0;
  line-height: 1.5;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.outlet a::after {
  right: 4%;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_flexWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_flexWrap .btn_rounded a {
  width: 100%;
}

#LP.howtouse.renewal240118 .shopList_wrap .btn_flexWrap li {
  flex-basis: 48%;
  margin-bottom: 0;
}

/* POINT 1 説明 */
#LP.howtouse.renewal240118 .contents_wrap {
  margin-bottom: 6%;
  padding: 4%;
  background-color: var(--lp-color_white);
}

#LP.howtouse.renewal240118 .section_point01 .txt_notes {
  margin-top: 3%;
  text-align: left;
  font-size: 2.9vw;
}

#LP.howtouse.renewal240118 .section_point01 .line_gray {
  margin: 6% 0;
  border: 1px solid var(--lp-color_gray);
}

/* POINT 2 説明 */
#LP.howtouse.renewal240118 .section_point02 .btn_rounded a {
  width: 100%;
  margin: 4% auto 0;
  padding: 4% 0;
  font-size: 3.7vw;
  line-height: 1.3;
}

/* POINT 3 説明 */
#LP.howtouse.renewal240118 .section_point03 .txt_baloon {
  width: 42%;
  margin: 6% auto 1%;
}

#LP.howtouse.renewal240118 .section_point03 .txt_boxBaloon {
  text-align: center;
  margin: 3% auto 2%;
}
#LP.howtouse.renewal240118 .section_point03 .txt_boxBaloon p {
  position: relative;
  display: inline-block;
  padding: 0.2rem 0.2rem 0.2rem 0.5rem;
  color: #fff;
  font-size: 3.8vw;
  font-weight: 900;
  background: #00a3c5;
  border-radius: 5px;
}
#LP.howtouse.renewal240118 .section_point03 .txt_boxBaloon p::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 52%;
  margin-left: -0.4rem;
  border: 0.4rem solid transparent;
  border-top: 0.4rem solid #00a3c5;
}

#LP.howtouse.renewal240118 .section_point03 .txt_middle {
  margin-bottom: 3%;
  text-align: center;
  font-size: 4vw;
  color: var(--lp-color_black);
}

#LP.howtouse.renewal240118 .section_point03 .txt_caution {
  margin-bottom: 4%;
  text-align: center;
}

#LP.howtouse.renewal240118 .section_point03 .txt_caution li {
  display: inline-block;
  text-align: left;
  font-size: 2.5vw;
  letter-spacing: -.01em;
	text-indent: -1em;
	padding-left: 1em;
  color: var(--lp-color_magenta);
}

#LP.howtouse.renewal240118 .section_point03 .btn_rounded a {
  width: 100%;
  margin: 0 auto;
  padding: 4% 0;
  font-size: 3.7vw;
  line-height: 1.3;
}

#LP.howtouse.renewal240118 .section_point03 .list_notes {
  display: block;
  text-align: center;
  margin-top: 4%;
}

#LP.howtouse.renewal240118 .section_point03 .list_notes ul {
  display: inline-block;
}

#LP.howtouse.renewal240118 .section_point03 .list_notes li {
  text-align: left;
  margin-bottom: 1%;
  font-size: 2.5vw;
  letter-spacing: -.01em;
  text-indent: -1em;
	padding-left: 1em;
}

#LP.howtouse.renewal240118 .section_point03 .list_notes li .txt_strong {
  font-weight: 700;
  color: var(--lp-color_magenta);
}

#LP.howtouse.renewal240118 .section_point03 .list_notes li .link_decoration a {
  color: var(--lp-color_magenta);
  border-bottom: 1px solid var(--lp-color_magenta);
}

#LP.howtouse.renewal240118 .section_point03 .list_notes li .link_decoration a:hover {
  opacity: .7;
}


/**************************************************
main
PC_layout（980px以上）
**************************************************/
@media screen and (min-width: 980px) {
  /* リニューアル用style */
  #LP.howtouse.renewal240118 .device_sp {
    display: none;
  }

  #LP.howtouse.renewal240118 .device_pc {
    display: block;
  }

  /* スペーサー */
	#LP.howtouse.renewal240118 .mb_xs { margin-bottom: 16px !important; }
	#LP.howtouse.renewal240118 .mb_sm { margin-bottom: 32px !important; }
	#LP.howtouse.renewal240118 .mb_md { margin-bottom: 48px !important; }
	#LP.howtouse.renewal240118 .mb_lg { margin-bottom: 80px !important; }

	#LP.howtouse.renewal240118 .mt_xs { margin-top: 16px !important; }
	#LP.howtouse.renewal240118 .mt_sm { margin-top: 32px !important; }
	#LP.howtouse.renewal240118 .mt_md { margin-top: 48px !important; }
	#LP.howtouse.renewal240118 .mt_lg { margin-top: 80px !important; }

	/* スペーサー（PC限定） */
	#LP.howtouse.renewal240118 .mb_xs_pc { margin-bottom: 16px !important; }
	#LP.howtouse.renewal240118 .mb_sm_pc { margin-bottom: 32px !important; }
	#LP.howtouse.renewal240118 .mb_md_pc { margin-bottom: 48px !important; }
	#LP.howtouse.renewal240118 .mb_lg_pc { margin-bottom: 80px !important; }

	#LP.howtouse.renewal240118 .mt_xs_pc { margin-top: 16px !important; }
	#LP.howtouse.renewal240118 .mt_sm_pc { margin-top: 32px !important; }
	#LP.howtouse.renewal240118 .mt_md_pc { margin-top: 48px !important; }
	#LP.howtouse.renewal240118 .mt_lg_pc { margin-top: 80px !important; }

  #LP.howtouse.renewal240118 img {
    width: auto;
  }

  #LP.howtouse.renewal240118 .mainArea__inner {
    width: 980px;
    padding: 60px 0;
  }

  #LP.howtouse.renewal240118 .contents_ttl {
    width: fit-content;
    text-align: center;
    margin: 0 auto 32px;
  }

  #LP.howtouse.renewal240118 .contents_ttl.andMall,
  #LP.howtouse.renewal240118 .contents_ttl.outlet {
    width: fit-content;
  }

  #LP.howtouse.renewal240118 .btn_rounded a {
    padding: 24px 0;
    font-size: 24px;
    letter-spacing: 0.01em;
  }

  #LP.howtouse.renewal240118 .btn_rounded a::after {
    top: 40%;
    right: 32px;
    border-width: 10px 0 10px 12px;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_2colum,#LP.howtouse.renewal240118 .section_usageGuide .list_2colum_pc {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_2colum_pc {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_2colum li,#LP.howtouse.renewal240118 .section_usageGuide .list_2colum_pc li {
    flex-basis: 487px;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_2colum_pc .btn_rounded a {
    width: 400px;
    padding: 24px 0;
    bottom: 40px;
    font-size: 24px;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_2colum_pc .btn_rounded a::after {
    top: 40%;
    right: 16px;
    border-width: 8px 0 8px 10px;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_1colum_sp li {
    margin-bottom: 0;
  }

  #LP.howtouse.renewal240118 .section_usageGuide .list_1colum li {
    margin-bottom: 12px;
  }

  #LP.howtouse.renewal240118 .btn_txt_usage a {
    font-size: 20px;
  }

  /* ショップ一覧 */
  #LP.howtouse.renewal240118 .shopList_wrap {
    padding: 48px 82px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .shop_list li {
    flex-basis: 180px;
    margin-right: 32px;
    margin-bottom: 32px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .shop_list li:nth-of-type(3n) {
    margin-right: 32px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .shop_list li:nth-of-type(4n) {
    margin-right: 0;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .text_andMore {
    margin: 0 auto 36px;
    font-size: 32px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded a {
    width: 400px;
    margin-bottom: 32px;
    padding: 24px 0;
    font-size: 24px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded a::after {
    top: 40%;
    right: 24px;
    border-width: 8px 0 8px 10px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single a {
    padding: 24px 0;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.andMall a {
    width: 500px;
    padding: 24px 0;
    line-height: 1;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.outlet a {
    padding: 24px 0;
    line-height: 1;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_rounded.single.outlet a::after {
    right: 24px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_flexWrap li {
    flex-basis: 395px;
  }

  #LP.howtouse.renewal240118 .shopList_wrap .btn_flexWrap .btn_rounded a {
    margin-bottom: 0;
  }

  /* POINT 1 説明 */
  #LP.howtouse.renewal240118 .contents_wrap {
    margin-bottom: 32px;
    padding: 32px;
  }

  #LP.howtouse.renewal240118 .contents_wrap img {
    margin: 0 auto;
  }

  #LP.howtouse.renewal240118 .section_point01 .txt_notes {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
  }

  #LP.howtouse.renewal240118 .section_point01 .line_gray {
    margin: 6% 0;
    border: 1px solid var(--lp-color_gray);
  }

  /* POINT 2 説明 */
  #LP.howtouse.renewal240118 .section_point02 .btn_rounded a {
    width: 750px;
    margin: 24px auto 0;
    padding: 16px 0;
    font-size: 24px;
    line-height: 1.4;
  }

  /* POINT 3 説明 */
  #LP.howtouse.renewal240118 .section_point03 .txt_baloon {
    width: 190px;
    margin: 24px auto 4px;
  }

  #LP.howtouse.renewal240118 .section_point03 .txt_boxBaloon {
    margin: 12px auto 8px;
  }
  #LP.howtouse.renewal240118 .section_point03 .txt_boxBaloon p {
    padding: 0.2rem 0.2rem 0.2rem 0.6rem;
    font-size: 20px;
  }

  #LP.howtouse.renewal240118 .section_point03 .txt_middle {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 500;
  }

  #LP.howtouse.renewal240118 .section_point03 .txt_caution {
    margin-bottom: 28px;
  }

  #LP.howtouse.renewal240118 .section_point03 .txt_caution li {
    font-size: 14px;
    letter-spacing: -.05em;
}

  #LP.howtouse.renewal240118 .section_point03 .btn_rounded a {
    width: 750px;
    padding: 24px 0;
    font-size: 28px;
    line-height: 1.5;
  }

  #LP.howtouse.renewal240118 .section_point03 .list_notes {
    margin-top: 28px;
  }

  #LP.howtouse.renewal240118 .section_point03 .list_notes li {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  #LP.howtouse.renewal240118 .section_point03 .list_notes li .link_decoration a {
    font-weight: 500;
  }
}