@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
a{outline: none;}
a:focus{outline:none;}
a {text-decoration: none;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}
#gb_lp_wrapper, #pro_wrapper {
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;
  font-family: "Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
.alpha:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

/*商品一覧用　ここから///////////////////////////////////////////// */

p, dl, dt, dd, ul li{
	margin: 0px;
	padding: 0px; 
}
h4, h5{
	margin: 0px 0px 0px 0px;
	padding: 0px; 
}
li{ list-style-type: none;}

.top_btn{ float:right;}
.ttl_top{padding-top: 96px;}


/* -----------------------------------------------------------
 ClearFix
----------------------------------------------------------- */
div:after,
ul:after,
ol:after,
dl:after,
.clearfix:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}

/* for IE7 only */
*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}

/* for IE6 and below */
/*\*/
* html .clearfix{
height:1%;
}
/* ClearFix End */


/*商品一覧用 ここまで///////////////////////////////////////////// */




/*新規CSS/////////////////////////////////////////////////////  */

/* ▼ これアクティブにすると商品一覧のスクロール時間かかりすぎ注意*/
/*html { scroll-behavior: smooth;}*/

html,body {
	/*	overflow-x:hidden;*/
}

/*スクロールバー非表示 A*/
.sgmv {
 /*overflow-x: scroll;*/
 /* IE, Edge 対応 */
 /*-ms-overflow-style: none;*/
 /* Firefox 対応 */
 /*scrollbar-width: none;*/
}
.sgmv::-webkit-scrollbar {
	/*display:none;*/
}

/*スクロールバー非表示 B*/
#gb_lp_wrapper {
	overflow: hidden;
}

.switch_sp #gb_lp_wrapper {
	overflow: unset;
}


.gb_mv_page {
  font-family: "Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  color: #333232;
}
.gb_mv_page div:after, .gb_mv_page ul:after, .gb_mv_page ol:after, .gb_mv_page dl:after, .gb_mv_page .clearfix:after {
  display: none !important;
}
.sp_only { display: none;}
.pc_only { display: inline-block;}

.sp_step { display: none;}
.pc_step { display: inline-block;}

.section {
  margin-bottom: 40px;
}

.w1000px{
/*	width: 1000px;*/
/*	margin: auto;*/
}

.w1000px {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
  text-align: center;
}
.center {
	text-align: center;
	width: 100%;
}

.one_phrase {
  display: inline-block;
}


.gb_mv_inner.w_full {
	background-image: url(../../../images/campaign/2025/UXTEAM-3013/mv-bg.jpg);
    background-repeat: repeat-x;
    background-position: center center;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.method_inner.w_full {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: #fbf9dd;
  padding: 70px 0;
}
.gb_mv_img {
  max-width: 1000px;
  width: 100%;
}

#target_product {
  margin-top: -70px;
  padding-top: 70px;
}


#overview_anchor {
  margin-top: -70px;
  padding-top: 70px;
}
.overview_inner {
  border: solid 6px #f08b71;
  border-radius: 20px;
  padding: 60px 50px 50px;
  margin-bottom: 100px;
}

.overview_subtitle_flex,.brand_list_flex,.method_subtitle_flex,.step_flex,.redeeming_point_flex {
  display: flex;
  justify-content: space-between;
}

/* .redeeming_point_flex {
	  justify-content: space-between;
		flex-wrap: wrap; 
		width: 940px;
		margin: 0 auto;
} */

/* .redeeming_point_child {
		width: calc(100% / 4);
		margin-bottom: 30px;
} */




/* 商品カードのflex */
.product_body:before, .product_body:after, .product_inner:before, .product_inner:after, .product_flex:before, .product_flex:after {
    display: none;
}
.product_body, .product_inner, .product_flex {
    box-sizing: border-box;
}
.product_body {
    margin: 40px 0 60px;
    padding: 0 20px;
}
.product_inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 20px;
}
.product_flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
/* .product_flex > *{ */
.product_child {
    /* width: calc( 25% - 25px ); */
    width: calc(( 100% - 75px ) / 4);
    margin-right: 25px;
    margin-bottom: 30px;
}
.product_child img {
  max-width: 100%;
}
/* .product_child:nth-of-type(4n){ */
.product_flex > :nth-child(4n){
    margin-right: auto;
}
@media (max-width: 720px) {
        .product_child {
            /* width: calc( 33.33333% - 25px ) ; */
          width: calc(( 100% - 50px ) / 3);
        }
        /* .product_child:nth-of-type(4n) { */
        .product_child:nth-of-type(4n) {
          margin-right: 25px;
        }
        .product_child:nth-of-type(3n) {
            margin-right: auto;
        }
        .btn-s a {
          font-size: 16px;
        }
}
@media (max-width: 480px) {
        .product_child {
          /* width: calc( 50% - 6px ) ; */
          width: calc(( 100% - 25px ) / 2);
        }
        .product_child:nth-of-type(3n) {
          margin-right: 25px;
        }
        .product_child:nth-of-type(2n) {
          margin-right: auto;
        }
}



/* 画面幅が768px以下になったら適用されるスタイル */
@media (max-width: 768px) {

}

/* 画面幅が480px以下になったら適用されるスタイル（必要なら） */
@media (max-width: 480px) {

}

.redeeming_point_child:nth-of-type(n+4) {
	margin-bottom: 0;
}
.redeeming_point_child a:hover {
	opacity: 0.7;
}
.redeeming_point_flex::before {
		content: "";
		display: block;
		width: calc(100% / 4);  /* .redeeming_point_childに指定したwidthと同じ幅を指定 */
		height: 0;
		order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}

.pre_mail_flex {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.overview_subtitle_flex {
  margin-bottom: 50px;
}
.brand_list_flex {
  margin-bottom: 20px;
}
.brand_list_child:first-child {
  margin-right: 40px;
}

.step_child {
  
}
.pre_mail_body {
  margin: 60px 0 0;
}

.subtitle_text {
  font-size: 15px;
  color: #333232;
  text-align: left;
  line-height: 1.6em;
  font-weight: bold;
  margin-left: 20px;
}
.overview_subtitle {
  border-right: 10px solid #f08b71;
  padding-right: 20px; 
}
.method_subtitle_flex {
  margin-bottom: 50px;
}
.method_subtitle {
  border-right: 10px solid #006ecb;
  padding-right: 20px; 
}
.method_content {
  max-width: 1000px;
  margin: 0 auto;
}

.mail_reg {
  margin: 0 0 30px 0;
}

.brand_list_text {
  display: flex;
  justify-content: space-between;
}
.brand_list_text p {
  font-size: 15px;
	font-weight: bold;
  color: #333232;
  line-height: 1.8em;
  text-align: left;
}
.brand_list_text p:not(:last-child) {
  padding-right: 50px;
}
.brand_list_text span {
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  display: inherit;
	padding-top: 10px;
	color: #f08b71;
}
.element {
  font-size: 14px;
  color: #333232;
  text-align: left;
/*	padding: 0 40px;*/
  margin-top: 40px;
}

.element p {
  font-size: 15px;
  text-align: left;
  /*font-weight: bold;*/
  line-height: 1.8em;
  color: #f08b71;
}
.element p span {
	font-size: 13px;
	line-height: 1.4em;
}
.element p:has(span) {
	line-height: 1.4em;
}




/*URL決定後 -------------------------------- */
.pre_mail_title {
  border: solid 2px #333232;
  padding: 10px 25px;
  font-size: 26px;
  font-weight: bold;
  display: block;
  /*align-items: center;*/
  margin-bottom: 20px;
}
.pre_mail_title p {
   line-height: 1.4em;
}
.pre_mail_text_box {
  text-align: left;
  line-height: 1.2em;
  font-size: 15px;
}

/*QRのｂｇのバルーン*/
.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
}

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


.pre_mail_text_box p:nth-child(1) {
  color: #ef1111;
  font-weight: bold;
  line-height: 1.4em;
  font-size: 22px;
  margin-bottom: 15px;
}
.pre_mail_text_box p:nth-child(2) {
	padding-left: 22px;
  line-height: 1.6em;
}
.pre_mail_text_box p:nth-child(2) a {
	font-weight: bold;
}

.indent {
  text-indent: -1em;
  padding-left: 1em;
}
.time_limit {
  padding: 6px 10px;
  border: 2px solid #333232;
  display: inline-block;
  font-size: 15px;
  margin: 10px 0 0 22px;
}
/*.attention_text {
  margin-top: 20px;
  padding: 0 0 0 20px;
}
.attention_text p {
  text-align: left;
  font-size: 15px;
  text-indent: -1em;
  padding-left: 1em;
}
.attention_text p a {
  text-decoration: none;
  font-weight: bold;
}*/

.camp_detail_body {
  margin: 100px 0 40px;
}
.camp_detail_inner {
  border: 2px solid #999999;
  padding: 40px 40px 25px;;
  position: relative;
}
.detail_title {
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: -0.5em;
  line-height: 1em;
  background: #fff;
  padding: 0 10px;
}
.camp_detail_text {
  font-size: 12px;
  line-height: 1.8em;
  text-align: left;
}
.camp_detail_text p {
  text-indent: -1em;
  padding-left: 1em;
}
.camp_detail_text a {
  text-decoration: none;
  font-weight: bold;
  display: inline;
}
.subtitle_text02 {
  margin-top: 15px;
}

/*ボタン*/
.about_gbox_btn_body {
  margin: 40px 10px 10px;
}


.about_gbox_btn_inner p:nth-of-type(1) {
  font-size: 18px;
}
.about_gbox_btn_inner p:nth-of-type(2) {
  font-size: 26px;
}
.about_gbox_btn_inner.catalog_btn_inner p {
  font-size: 26px;
}

.about_gbox_btn_body a, .about_gbox_btn_body a:visited {
  color: #fff;
  font-weight: bold;
}

.about_gbox_btn_inner {
    width: 480px;
    padding: 10px;
    margin: 0 auto;
}
.about_gbox_btn_inner.catalog_btn_inner {
		padding: 30px 10px;
}
body .about_gbox_btn_body a {
    background-color: #f08b71;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #fff;
    display: inline-block;
    text-decoration: none;
    transition: .3s;
      border-radius: 60px;
      border: 6px solid #fff;
}
body .about_gbox_btn_body.catalog_btn_body a {
		background-color: #efbb3f;
		margin-bottom: 30px;
}
.about_gbox_btn_body a:hover {
    box-shadow: 0px 12px 24px rgba(20, 146, 175, 0.38);
    transform: translateY(-4px);
}

.gb_catalog_text {
	font-size: 17px;
	font-weight: bold;
	color: #333322;
	margin-bottom: 20px;
	letter-spacing: 0.02em;
}
.gb_catalog_text span{
		font-size: 21px;
}

/*アコーディオン02 ここから------------------------ */
div.accList input {
    display: none;
}
div.accList h2 {
/*    margin: 8px 0 4px 0;
    border-bottom: 2px solid #058;
    padding-bottom: 8px;*/
    text-align: center;
}
div.accList div.brand_list_body {
    position: relative;
  /*max-height: 500px;*/
    overflow: hidden;
    transition: 0.5s;
    margin: 4px 16px 20px 16px;
    padding-top: 10px;
    padding-bottom: 0px;
}
div.brand_list_body {
  height: 320px; /*閉じてる時の高さ*/
}

div.accList div.acc_btn_body {
      position: absolute;
      bottom: 0px;
      left: 50%;
      z-index: 500;
} 
div.accList div.acc_btn_body:hover {
  opacity: 0.8;
}
div.accList div.brand_list_body label::before {
    content: "▼ 続きを読む";
/*    position: absolute;
    bottom: 0px;
      left: 50%;*/
      transform: translate(-50%, -50%);
    display: inline-block;
    width: 124px;
  font-size: 16px;
    text-align: center;
    /*border: 1px solid #333;*/
    border-radius: 6px;
    color: #fff;
    background-color: #f08b71;
    padding: 4px 8px;
    z-index: 500;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

div.accList input:checked + h2 + div.brand_list_body {
height: 1200px; /*開いてる時の高さ*/
}

div.accList input:checked + h2 + div.brand_list_body label::before {
    content: "閉じる ▲";
}

      /* テキストをグラデーションで隠す */
      .brand_list_body {
        position: relative
      }
      .brand_list_body::before {
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 50%, #fff 100%);
        background:         linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 50%, #fff 100%);
        bottom: 0;
        left: 0;
        content: "";
        height: 140px; /* グラデーションで隠す高さ */
        position: absolute;
        width: 100%;
        z-index: 100;
      }
      /* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
      div.accList input:checked + h2 + div.brand_list_body::before {
        display: none;
      }
/*アコーディオン02 ここまで------------------------ */


.brand_list_inner {
  display: flex;
  justify-content: center;
}
.brand_list_body p {
  font-size: 15px;
  color: #333232;
  line-height: 1.8em;
  text-align: left;
  font-weight: bold;
}
.brand_list_body p:not(:last-child) {
  padding-right: 30px;
}
.brand_list_body span {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  display: inherit;
}

.ttl{
	font-size: 32px;
	margin: 0 10px 16px;
	font-weight: 700;
  line-height: 1.5;
}
.line{
	border-bottom: solid 5px #212121;
	width: 100px;
	margin: 0 auto;
}

/*お問い合わせ*/
.btn-bg{
	background-color: #fcddd2;
	width: 100%;
}
.btn-box{
	margin: 0 auto;
	padding: 32px 0 16px 0;
}
.btn-box-blue{
	margin: 0 auto;
	padding: 16px 0 4rem 0;
}
.btn a {
  position: relative;
  display: block;
 width: 500px;
  padding: 25px 0;
  background-color: #ca1111!important;
  border-radius: 60px;
  font-size: 1.4rem;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn.btn_blue a {
  background-color:#112b8b !important;
}
.btn-box-blue a {
  position: relative;
  display: block;
 width: 500px;
  padding: 25px 0;
  background-color: #112b8b!important;
  border-radius: 60px;
  font-size: 1.4rem;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn-box-blue a p {
  color: #FFFFFF!important;
}
.btn a:link,.btn-box-blue a:link{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
.btn a:hover{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
.btn-box-s{
	margin: 0 auto;
	padding: 16px 0 0 0;
}
.btn-s a {
  position: relative;
  display: block;
  max-width: 210px;
  padding: 10px 0;
  background-color: #ca1111!important;
  border-radius: 60px;
  font-size: 18px;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn-s a:link{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
.btn-s a:hover{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
/* アイコンのスタイル */
.btn-arrow-right a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.btn-inner h3{
	color: #FFFFFF;
	font-size: 1.32px;
	text-align: center;
	line-height: 2.4rem;
	font-weight: 700;
	margin-bottom: 32px;
}
/* アイコンのスタイル小ボタン */
.btn-arrow-right-s a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.btn-inner-s h3{
	color: #FFFFFF;
	font-size: 1.32px;
	text-align: center;
	line-height: 2.4rem;
	font-weight: 700;
	margin-bottom: 32px;
}


.what_is_body {
  margin-top: 50px;
}
.what_is_inner {
  max-width: 940px;
  border: 3px solid #fd0000;
  border-radius: 10px;
  text-align: center;
  margin: 0 auto;
  padding: 28px 40px 35px;
  box-sizing: border-box;
}
.what_is_inner p:first-of-type {
  font-size: 36px;
  color: #fe0000;
  font-weight: 700;
  margin-bottom: 15px;
  font-feature-settings: "palt";
  line-height: 1.4;
}
.what_is_inner p:nth-of-type(2) {
  font-size: 17px;
  color: #212121;
  font-weight: 500;
  line-height: 2;
}

.step_child img {
  max-width: 1000px;
  width: 100%;
}


/* @media screen and (min-width: 350px) and (max-width: 768px){ */
/*お問い合わせ*/

.btn-box {
	margin: 0 auto;
	padding: 32px 0 16px 0;
}
.btn.btn_official_site {
  margin-top: 20px;
}
.btn a {
  position: relative;
  display: block;
  width: 90%;
    max-width: 620px;
    font-size: 28px;
  padding: 25px 0;
  background-color: #ca1111;
  border-radius: 60px;
  font-size: 32px;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn.btn_official_site a {
    font-size: 28px;
    padding: 25px 20px;
}
.btn a:link{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
.btn a:hover{
	color: #FFFFFF!important;
	text-decoration: none!important;
}
/* アイコンのスタイル */
.btn-arrow-right a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/*カタログ交換セクション*/
.redeeming_point_title {
	margin-bottom: 70px;
}

.redeeming_point_body {
	max-width: 1000px;
	margin: 0 auto;
}

@media (max-width:1060px) {
        .camp_detail_inner { margin: 0 20px;}
}
@media (max-width:1000px) {
        .what_is_inner {
            margin: 0 40px;
        }
}
@media (max-width:820px) {
        .btn.btn_official_site a {
          font-size: 24px;
          width: 80%;
        }
}

@media screen and (max-width:780px) {

        .sp_only { display: inline-block;}
        .pc_only { display: none;}
        .w1000px {
          width: calc(100% - 20px);
        }
        .camp_detail_inner { margin: 0;}
}
@media (max-width: 720px) {
        .ttl { font-size: 28px;}

}
@media (max-width:680px) {
        .btn.btn_official_site a {
          font-size: 22px;
          width: 70%;
        }
        .btn.btn_official_site a {
          padding: 25px 30px 25px 20px;
        }
        .what_is_inner p:first-of-type { font-size: 34px; }
        .ttl_top{padding-top: 60px;}
}
@media (max-width:580px) {
        .btn.btn_official_site a {
          padding: 20px 35px 20px 30px;
        }
        .ttl { font-size: 25px;}
        .what_is_inner p:first-of-type { font-size: 30px; }
        .what_is_inner p:nth-of-type(2) { font-size: 15px;}

        .sp_step { display: inline-block;}
        .pc_step { display: none;}
        .step_child { margin: 0 40px;}

        .ttl_top{padding-top: 40px;}

        

}
@media (max-width:480px) {
        .btn.btn_official_site a {
          font-size: 18px;
          padding: 15px 30px 15px 20px;
          width: 85%;
        }
        .what_is_inner {
          margin: 0 5px;
          padding: 25px 20px 25px;
        }
        .product_inner {
          padding: 0;
        }
}