@charset "UTF-8";
/*====================================================

	Date: 2023-01-23
	CSS Document ： メリーポイント

 ****************************************************/
ul {
 padding-inline-start: 0;
}
li {
 list-style: none;
}
/*------------------------------------

メリーポイント

------------------------------------*/
#main {
 font-size: 110%;
 line-height: 1.8;
 width: 920px;
 margin: 0 auto 3em;
 text-align: center;
 letter-spacing: .05em;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
#main a {
 transition: all .3s;
}
#main a:hover {
 opacity: .7;
}
#main p a {
 text-decoration: underline;
}
/*------------------------------------

merry point とは？

------------------------------------*/
#explanation {
 display: flex;
 margin: 1.5em auto;
 padding: .5em;
 border: 4px solid #d1302c;
 justify-content: space-around;
 align-items: center;
}
.merrypoint {
 display: flex;
 align-items: flex-end;
 justify-content: center;
}
.merrypoint span {
 font-weight: bold;
 margin: 1em .3em;
}
.detail {
 text-align: left;
}
.detail p {
 line-height: 1.5;
 margin: .5em auto;
}
.detail p:nth-child(1) {
 font-size: 105%;
 font-weight: bold;
}
.detail p:nth-child(2) {
 font-size: 90%;
}
span.marker {
 background: #fff000;
}
span.red {
 color: #d1302c;
}
.detail_btn a {
 font-size: 105%;
 font-weight: bold;
 line-height: 1.2;
 position: relative;
 display: flex;
 width: 6.5em;
 height: 6.5em;
 text-decoration: none;
 color: #fff;
 border-radius: 50%;
 background: #d1302c;
 justify-content: center;
 align-items: center;
}
.detail_btn a:before {
 position: absolute;
 bottom: 1.0em;
 left: calc(50% - .08em);
 display: block;
 width: 0;
 height: 0;
 content: '';
 border-right: .25em solid transparent;
 border-left: .25em solid transparent;
 border-top: .4em solid #fff;
}
.detail_btn a:after {
 position: absolute;
 top: 5%;
 left: 5%;
 display: block;
 width: 90%;
 height: 90%;
 content: '';
 border: 1px dotted #fff;
 border-radius: 50%;
}
/*------------------------------------

banner

------------------------------------*/
#main_banner {
 margin-bottom: 2em;
}
/*------------------------------------

メリーポイント 交換

------------------------------------*/
#exchange .exchange_link a {
 width: 60%;
 margin: 0 auto;
 font-size: 130%;
 font-weight: bold;
 position: relative;
 display: flex;
 padding: .7em 0;
 text-decoration: none;
 border: 1px solid #bf975e;
 border-radius: .5em;
 background: #f9f3e6;
 justify-content: center;
 align-items: center;
}
#exchange .exchange_link.present a, #exchange .exchange_link.present a::before {
 border-radius: .5em .5em 0 0;
 border-bottom: none;
}
#exchange .exchange_link.present a {
 /* border-bottom: none; */
}
#exchange .exchange_link a span {
 display: flex;
 align-items: center;
 justify-content: center;
}
#exchange .exchange_link a span::before {
 display: inline-block;
 width: 1.5em;
 height: 1.5em;
 margin: 0 .6em;
 content: '';
 background-image: url('../images/icon_search.svg');
 background-repeat: no-repeat;
 background-size: contain;
}
#exchange .exchange_link a::before {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 content: '';
 border: 4px solid #fff;
 border-radius: .5em;
}
#exchange .exchange_link a:after {
 position: relative;
 display: inline-block;
 width: 3em;
 height: 5em;
 margin: -3em -2em -3em 1em;
 content: '';
 background-image: url('../images/nav_meripo01.png');
 background-repeat: no-repeat;
 background-size: contain;
}
ul.present_list {
 font-size: 90%;
 font-weight: bold;
 display: flex;
 margin-bottom: 2.5em;
 padding: 1em 1em;
 border-top: 1px solid #bf975e;
 /* background: #f9f3e6; */
 flex-wrap: wrap;
 margin-top: -1px;
 justify-content: flex-start;
}
#exchange .exchange_link.contribution a:after {
 background-image: url('../images/nav_meripo02.png');
}
ul.present_list li {
 margin: .3em 0.2em;
}
ul.present_list li a {
 position: relative;
 display: inline-block;
 display: inline-block;
 padding: .2em .7em;
 padding: .2em .7em .2em 1.5em;
 text-decoration: none;
 border-radius: 1em;
 /* background: #FFF; */
 border-radius: 1em;
 background: #fff;
 border: 1px solid #e3c6aa;
}
ul.present_list li a::before {
 position: absolute;
 top: calc(50% - .2em);
 left: .6em;
 display: block;
 width: .5em;
 height: .5em;
 content: '';
 transform: rotate(45deg);
 border-top: 3px solid #d1302c;
 border-right: 3px solid #d1302c;
}
ul.present_list li span.num {
 vertical-align: middle;
}
ul.present_list li span.merry {
 font-size: 70%;
 vertical-align: middle;
}
/*------------------------------------

アイテム一覧

------------------------------------*/
#item_list {
 margin: 3em auto;
}
#item_list .ttl {
 font-size: 120%;
 line-height: 1.3;
 display: flex;
 margin-bottom: 1.5em;
 text-align: left;
 /* margin-right: 1em; */
 border-bottom: 2px solid #d1302c;
 justify-content: flex-start;
 align-items: center;
}
#item_list .ttl .main {
 font-weight: bold;
 display: flex;
 padding: .3em .8em;
 color: #fff;
 border-radius: 0 .5em 0 0;
 background: #d1302c;
 justify-content: flex-start;
 align-items: center;
}
#item_list .ttl .main::before {
 display: inline-block;
 width: 1.5em;
 height: 1.5em;
 margin: 0 .6em 0 0;
 content: '';
 background-image: url('../images/icon_item.svg');
 background-repeat: no-repeat;
 background-size: contain;
}
#item_list .ttl p {
 font-weight: bold;
 margin: 0 0 0 1em;
 color: #d1302c;
}
ul.items {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: flex-start;
}
ul.items li {
 width: 18%;
 margin-bottom: 1.5em;
}
ul.items li a {
 font-size: 80%;
 text-align: left;
}
ul.items li a img {
 width:100%;
}
ul.items li a p {
 line-height: 1.5;
 margin: 0.5em 0;
}
ul.items li a p.price_mr{
}
/*------------------------------------

リボン共通

------------------------------------*/
.ttl {
 font-weight: bold;
}
.ribbon_wrap {
 font-size: 210%;
 position: relative;
 display: inline-block;
 min-width: 64%;
 margin: 1.5em auto .5em;
 padding: .2em 1.5em;
 letter-spacing: .1em;
 color: #d1302c;
 border: 2px solid #d1302c;
 background: #fff;
}
.ribbon_wrap::before, .ribbon_wrap::after {
 display: block;
 content: '';
}
.ribbon {
 position: absolute;
 overflow: hidden;
 width: 30px;
 height: calc(51.0% + 2px);
}
.ribbon::before {
 position: absolute;
 display: block;
 width: 100%;
 height: 155%;
 content: '';
 border: 2px solid #d1302c;
 background: #fff;
}
.ribbon.lt {
 top: -2px;
 left: -29px;
 border-top: 2px solid #d1302c;
}
.ribbon.lb {
 bottom: -2px;
 left: -29px;
 border-bottom: 2px solid #d1302c;
}
.ribbon.lt::before {
 top: -1px;
 left: 0;
 transform: rotate(-25deg);
 transform-origin: top left;
 border-bottom: none;
}
.ribbon.lb::before {
 bottom: -1px;
 left: 0;
 transform: rotate(25deg);
 transform-origin: bottom left;
 border-top: none;
}
.ribbon.rt {
 top: -2px;
 right: -29px;
 border-top: 2px solid #d1302c;
 border-bottom: none;
}
.ribbon.rb {
 right: -29px;
 bottom: -2px;
 border-bottom: 2px solid #d1302c;
}
.ribbon.rt::before {
 top: -1px;
 left: 0;
 transform: rotate(25deg);
 transform-origin: top right;
 border-bottom: none;
}
.ribbon.rb::before {
 bottom: -1px;
 left: 0;
 transform: rotate(-25deg);
 transform-origin: bottom right;
 border-top: none;
}
/*------------------------------------

ボタン共通

------------------------------------*/
.btn_mr {
 margin: 1em auto 3em;
}
.btn_mr img {
 /* display:block; */
}
.btn_mr a {
 font-size: 170%;
 font-weight: bold;
 position: relative;
 display: block;
 width: 60%;
 margin: 0 auto;
 padding: .7em;
 vertical-align: middle;
 text-decoration: none;
 letter-spacing: .1em;
 color: #fff;
 border: solid 10px #ededed;
 border-radius: 5em;
background: repeating-linear-gradient(135deg, #88d0df, #88d0df 40px, #7bcbdc 40px, #7bcbdc 80px);
}
.btn_mr a::before, .btn_mr a::after {
 display: block;
 content: '';
}
.btn_mr a::after {
 position: absolute;
 top: .9em;
 right: 1.0em;
 display: block;
 width: 1.5em;
 height: 1.5em;
 content: '';
 background-image: url('../images/bnr_arrow.svg');
 background-repeat: no-repeat;
 background-size: contain;
}

.btn_mr p {
 font-weight: bold;
 font-size: 130%;
 line-height: 1.4;
 display: flex;
 color: #d1302c;
 align-items: flex-end;
 justify-content: center;
}
.btn_mr p::before, .btn_mr p::after {
 display: inline-block;
 width: 1px;
 height: 1em;
 margin: 0 1.0em .2em;
 content: '';
 transform: rotate(-25deg);
 vertical-align: middle;
 border-left: 2px solid #d1302c;
}
.btn_mr p::after {
 transform: rotate(25deg);
}


/*------------------------------------

merry point とは？ 詳しく

------------------------------------*/
#merry_detail {
 padding: 2em 0 3em;
 background: #d1302c;
}
#merry_detail .inner {
 width: 85%;
 margin: 0 auto;
 padding: 4.5em 2em 1.5em;
 border-radius: 2em;
 background: #fff;
}
#merry_detail .ttl {
 font-size: 100%;
 display: flex;
 width: 60%;
 margin: 0 auto -3em;
 padding: .7em 0;
 color: #000;
 align-items: flex-end;
 justify-content: center;
}
#merry_detail .ttl .main {
 width: 66%;
}
#merry_detail .ttl .main img {
 /* width: 90%; */
}
#merry_detail .ttl .main span.ruby {
 font-size: 130%;
 line-height: 1.3;
 display: block;
 margin: 0 auto -.6em;
}
#merry_detail .ttl span.txt {
 font-size: 120%;
 margin: .1em 0 .1em .5em;
}
#merry_detail .txt01 p {
 font-size: 165%;
 font-weight: bold;
 line-height: 1.6;
}
#merry_detail .txt01 .marker {
 background: linear-gradient(transparent 50%, #fff000 50%);
}
#merry_detail .txt02 p {
 line-height: 1.8;
 width: 85%;
 margin: 0 auto 1em;
 /* font-size: 110%; */
 text-align: justify;
}
#merry_detail .txt03 {
 display: flex;
 justify-content: center;
 align-items: center;
}
#merry_detail .txt03 > div:first-child {
 display: flex;
 width: 472px;
 height: 212px;
 background-image: url('../images/bubble.png');
 background-repeat: no-repeat;
 background-size: contain;
 align-items: center;
 justify-content: center;
}
#merry_detail .txt03 p {
 font-size: 120%;
 font-weight: bold;
 line-height: 1.6;
 margin-bottom: 0;
}
#merry_detail .txt03 p span {
 font-size: 130%;
}
#merry_detail .txt03 .meripo span {
 font-size: 80%;
 display: block;
 margin-top: -.5em;
}
/*------------------------------------

メリーポイントの確認方法

------------------------------------*/
#confirmation .txt01 {
 display: flex;
 width: 80%;
 margin: 0 auto 1em;
 justify-content: center;
 align-items: center;
}
#confirmation .txt01 p {
 text-align: justify;
 /* font-size: 110%; */
 /* line-height: 1.8; */
}
#confirmation .txt02 img {
 margin: 0 auto;
 border: 10px solid #eee;
}
/*------------------------------------

メリーポイントの貯め方

------------------------------------*/
#accumulate {
 padding-bottom: 2em;
 background: #f9f3e6;
}
#accumulate .txt01 p {
 font-weight: bold;
}
#accumulate .txt02 {
 font-weight: bold;
 width: 70%;
 margin: 1em auto;
 padding: 1em 0;
 border: dotted 2px #d1302c;
 border-radius: 1em;
 background: #fff;
}
#accumulate .txt02 ul {
 font-size: 115%;
 display: flex;
 margin-bottom: 0;
 justify-content: center;
 align-items: center;
}
#accumulate .txt02 ul li {
 margin: 0 20px;
}
#accumulate .txt02 ul li p {
 margin: .1em;
}
#accumulate .txt02 ul li div {
 min-width: 200px;
 margin-bottom: .4em;
 color: #d1302c;
 background: #fdf5f4;
}
#accumulate .txt02 ul li .price {
 position: relative;
}
#accumulate .txt02 ul li .price::after {
 position: absolute;
 top: .4em;
 right: -1.5em;
 display: block;
 width: 1.0em;
 height: 1.0em;
 content: '';
 background-image: url('../images/accumulate_arrow.svg');
 background-repeat: no-repeat;
 background-size: contain;
}
#accumulate .txt02 ul li.example {
 font-size: 134%;
 font-weight: bold;
 line-height: 1;
 padding: .5em;
 color: #d1302c;
 border: solid 2px #d1302c;
 border-radius: 1.5em;
}
/*------------------------------------

ほかにも

------------------------------------*/
#other {
 margin: 2.5em auto 0;
}
#other .ttl .main {
 font-size: 150%;
 line-height: 1.4;
 display: flex;
 color: #d1302c;
 align-items: flex-end;
 justify-content: center;
}
#other .ttl .main::before, #other .ttl .main::after {
 display: inline-block;
 width: 1px;
 height: 1em;
 margin: 0 1.0em .2em;
 content: '';
 transform: rotate(-25deg);
 vertical-align: middle;
 border-left: 2px solid #d1302c;
}
#other .ttl .main::after {
 transform: rotate(25deg);
}
#other ul li {
 width: 90%;
 margin: 1em auto;
 padding: 0 2em;
 border: 2px solid #d1302c;
 border-radius: .7em;
 background: #fff;
}
#other ul li .ttl {
 font-size: 135%;
 line-height: 1.4;
 position: relative;
 display: flex;
 width: 100%;
 padding: .7em 0;
 cursor: pointer;
 transition: all .3s;
 align-items: center;
 justify-content: flex-start;
}
#other ul li .ttl::before {
 display: inline-block;
 width: 1.1em;
 height: 1.1em;
 margin: 0 .5em 0 0;
 content: '';
 border-radius: 50%;
 background: #d1302c;
}
#other ul li .ttl::after {
 font-size: 160%;
 font-weight: bold;
 position: absolute;
 top: .1em;
 right: 0;
 display: block;
 /*width: 1.1em;
 height: 1.1em;*/
 margin: 0 .5em 0 0;
 content: '+';
 color: #d1302c;
 border-radius: 50%;
}
#other ul li .ttl.open_mr::after {
 content: '−';
}
#other ul li .ttl:hover {
 opacity: .7;
}
#other ul li .other_txt {
 display: flex;
 width: 100%;
 /* margin: 0em auto 0.5em; */
 padding: .5em 0;
 border-top: 1px solid #ededed;
 justify-content: flex-start;
 align-items: center;
}
#other ul li .other_txt p {
 font-size: 83%;
 line-height: 1.7;
 margin-bottom: 0;
 text-align: justify;
 color: #444;
 order: 1;
}
#other ul li img {
 margin-right: 1em;
}
.mark_program {
 padding: .1em;
 color: #fff;
 background: #00669b;
}
/*------------------------------------

メリーポイントの使い方

------------------------------------*/
#merry_use {
 margin: 0 auto 3em;
}
#merry_use ul {
 width: 84%;
 margin: 0 auto;
}
#merry_use ul li {
 display: flex;
 padding: 1em 1em;
 border-bottom: 2px dotted #d1302c;
 justify-content: flex-start;
 /* margin: 0 auto; */
 align-items: center;
}
#merry_use ul li img {
 margin-right: 1em;
}
#merry_use ul li .ttl {
 font-size: 150%;
 line-height: 1.4;
 display: inline-block;
 letter-spacing: .1em;
 background: linear-gradient(transparent 50%, #fff000 50%);
}
#merry_use ul li .txt {
 text-align: justify;
}
#merry_use ul li p {
 margin: 1em 0 .5em;
}
#merry_use ul li a {
 font-weight: bold;
 text-decoration: underline;
 color: #00669b;
}
#merry_use ul li a::before {
 display: inline-block;
 width: 1.0em;
 height: 1.0em;
 margin: 0 .3em 0 0;
 content: '';
 vertical-align: text-bottom;
 background-image: url('../images/link_arrow.svg');
 background-repeat: no-repeat;
 background-size: contain;
}
#merry_use .txt03 {
 width: 80%;
 margin: 1em auto;
 text-align: justify;
}
/*------------------------------------

よくあるご質問

------------------------------------*/
#question {
 padding-bottom: 1em;
 background: #f9f3e6;
}
#question .ttl {
 position: relative;
}
#question .ttl:after {
 position: absolute;
 z-index: 0;
 right: -4em;
 bottom: -1.5em;
 display: inline-block;
 width: 3em;
 height: 3em;
 content: '';
 background-image: url('../images/meripo08.png');
 background-repeat: no-repeat;
 background-size: contain;
}
#question ul {
 width: 80%;
 margin: 0 auto 3em;
 text-align: justify;
}
#question ul li .q_ttl {
 font-size: 115%;
 font-weight: bold;
 display: flex;
 margin: 2.5em auto .5em;
 padding: .2em;
 border-radius: .5em;
 background: #fff;
}
#question ul li .q_ttl::before {
 display: inline-block;
 width: 3.0em;
 height: 3.0em;
 margin: -1em .8em 0 .5em;
 content: '';
 background-image: url('../images/icon_q.svg');
 background-repeat: no-repeat;
 background-size: contain;
}
#question ul li .q_ttl p {
 margin: 0;
}
#question ul li p.answer {
 width: 93%;
 margin: 0 auto;
}
#question .btn_mr a {
 border-color: #fff;
}
#question .link_bnr {
width: 85%;
margin: 3em auto;
}
#question .link_bnr img{
width: 100%;
}


/*------------------------------------

SP

------------------------------------*/
body .pc_gl {
 display: block !important;
}
body .sp_gl {
 display: none !important;
}
/* SP */
@media (max-width: 919px) {
 body .pc_gl {
  display: none !important;
 }
 body .sp_gl {
  display: block !important;
 }
 #main img {
  max-width: 100%;
 }
 /*------------------------------------

メリーポイント

------------------------------------*/
 #main {
  font-size: 4.1vw;
  width: 100%;
 }
 #main a {}
 #main a:hover {}
 #main p a {}
 /*------------------------------------

merry point とは？

------------------------------------*/
 #explanation {
  display: block;
  padding: .5em 1em .7em;
  border-width: 3px;
 }
 .merrypoint {
  display: block;
  float: left;
  width: 22%;
 }
 .merrypoint img {
  width: 85%;
 }
 .merrypoint span {
  font-size: 80%;
  display: block;
  margin: 0 0 0;
  white-space: nowrap;
 }
 .detail {
  display: inherit;
  margin-bottom: .4em;
 }
 .detail p {}
 .detail p:nth-child(1) {
  font-size: 85%;
  float: right;
  width: 73%;
  line-height: 1.7;
 }
 .detail p:nth-child(2) {
  display: inline-block;
  clear: both;
  /* margin-top: 1em; */
 }
 span.marker {}
 span.red {}
 .detail_btn {}
 .detail_btn a {
  letter-spacing: 0.15em;
  width: 100%;
  height: auto;
  padding: .6em 0;
  border-radius: .5em;
  font-size: 90%;
 }
 .detail_btn a:before {
  right: 1em;
  bottom: calc(50% - .3em);
  left: auto;
 }
 .detail_btn a:after {
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: .5em;
 }
 /*------------------------------------

banner

------------------------------------*/
 #main_banner {}
 #main_banner a {}
 #main_banner a img {}
 /*------------------------------------

メリーポイント 交換

------------------------------------*/
 #exchange {
  width: 100%;
  margin: 0 auto;
 }
 #exchange .exchange_link {}
 #exchange .exchange_link a {
  font-size: 100%;
  line-height: 1.3;
  padding-right: 10%;
  text-align: left;
  width: 94%;
 }
 #exchange .exchange_link.present a, #exchange .exchange_link.present a::before {}
 #exchange .exchange_link a span {}
 #exchange .exchange_link a span::before {}
 #exchange .exchange_link a::before {}
 #exchange .exchange_link a:after {}
 #exchange .present {}
 #exchange .present a {}
 #exchange .contribution {}
 #exchange .contribution a {}
 ul.present_list {
  font-size: 80%;
  margin-bottom: 1.5em;
 }
 #exchange .exchange_link.contribution a:after {}
 ul.present_list li {}
 ul.present_list li a {}
 ul.present_list li a::before {}
 ul.present_list li span.num {}
 ul.present_list li span.merry {}
 /*------------------------------------

アイテム一覧

------------------------------------*/
 #item_list {
  margin: 3em auto 1em;
 }
 #item_list .ttl {
  font-size: 95%;
 }
 #item_list .ttl .main {}
 #item_list .ttl .main::before {}
 #item_list .ttl p {}
 ul.items {
  width: 92%;
  margin: 0 auto;
 }
 ul.items li {
  width: 30%;
 }
 ul.items li:last-child {
  display: none;
 }
 ul.items li a {}
 ul.items li a img {}
 ul.items li a p {}
 /*------------------------------------

リボン共通

------------------------------------*/
 .ttl {}
 .ribbon_wrap {
  font-size: 120%;
 }
 .ribbon_wrap::before, .ribbon_wrap::after {}
 .ribbon {
  z-index: 1;
 }
 .ribbon::before {}
 .ribbon.lt {}
 .ribbon.lb {}
 .ribbon.lt::before {}
 .ribbon.lb::before {}
 .ribbon.rt {}
 .ribbon.rb {}
 .ribbon.rt::before {}
 .ribbon.rb::before {}
 /*------------------------------------

ボタン共通

------------------------------------*/
 .btn_mr {
  margin: 1em auto 2em;
 }
 .btn_mr img {
  width: 35%;
 }
 .btn_mr a {
  font-size: 110%;
  width: 90%;
  border-width: 5px !important;
 }
 .btn_mr a::before, .btn_mr a::after {}
 .btn_mr a::after {}
	.btn_mr p { 
	font-size: 110%;
	}
 /*------------------------------------

merry point とは？ 詳しく

------------------------------------*/
 #merry_detail {
  padding: 1.5em 0 2em;
 }
 #merry_detail .inner {
  width: 90%;
  padding: 2.9em 1em .8em;
 }
 #merry_detail .ttl {
  font-size: 69%;
  width: 82%;
  padding: 1.2em 0;
 }
 #merry_detail .ttl .main {
  width: 76%;
 }
 #merry_detail .ttl .main img {}
 #merry_detail .ttl .main span.ruby {}
 #merry_detail .ttl span.txt {}
 #merry_detail .txt01 {}
 #merry_detail .txt01 p {
  font-size: 114%;
 }
 #merry_detail .txt01 .marker {}
 #merry_detail .txt02 {}
 #merry_detail .txt02 p {
  font-size: 90%;
  width: 95%;
  margin: 0 auto;
 }
 #merry_detail .txt03 {
  display: block;
 }
 #merry_detail .txt03 > div:first-child {
  width: 100%;
  height: 37vw;
  margin: 0 auto;
 }
 #merry_detail .txt03 p {
  font-size: 84%;
 }
 #merry_detail .txt03 p span {}
 #merry_detail .txt03 .meripo {
  width: 31%;
  margin: 0 auto;
 }
 #merry_detail .txt03 .meripo img {}
 #merry_detail .txt03 .meripo span {}
 /*------------------------------------

メリーポイントの確認方法

------------------------------------*/
 #confirmation {
  margin-top: 1em;
 }
 #confirmation .inner {}
 #confirmation .ttl {}
 #confirmation .ttl .main {}
 #confirmation .txt01 {
  width: 90%;
  margin: 1em auto 1em;
 }
 #confirmation .txt01 p {
  font-size: 90%;
 }
 #confirmation .txt01 img {
  width: 27vw;
 }
 #confirmation .txt02 {}
 #confirmation .txt02 img {}
 #confirmation .btn img {}
 /*------------------------------------

メリーポイントの貯め方

------------------------------------*/
 #accumulate {}
 #accumulate .inner {}
 #accumulate .ttl {}
 #accumulate .ttl .main {}
 #accumulate .txt01 {}
 #accumulate .txt01 p {
  font-size: 90%;
  width: 90%;
  margin: 0 auto;
 }
 #accumulate .txt02 {
  width: 92%;
  padding: .5em 0;
 }
 #accumulate .txt02 ul {
  font-size: 88%;
 }
 #accumulate .txt02 ul li {
  margin: .4em 0;
 }
 #accumulate .txt02 ul li:nth-child(2) {
  margin: 0 7% 0 0;
  ;
 }
 #accumulate .txt02 ul li p {}
 #accumulate .txt02 ul li div {
  min-width: auto;
 }
 #accumulate .txt02 ul li .price {}
 #accumulate .txt02 ul li .price::after {}
 #accumulate .txt02 ul li .merry {}
 #accumulate .txt02 ul li.example {
  font-size: 107%;
  margin: 0 5% 0 0;
 }
 /*------------------------------------

ほかにも

------------------------------------*/
 #other {}
 #other .inner {}
 #other .ttl {}
 #other .ttl .main {
  font-size: 112%;
 }
 #other .ttl .main::before, #other .ttl .main::after {
  height: 1.5em;
 }
 #other .ttl .main::after {}
 #other ul {}
 #other ul li {
  padding: 0 1em;
 }
 #other ul li .ttl {
  font-size: 90%;
  padding: .7em 0;
 }
 #other ul li .ttl::before {}
 #other ul li .ttl::after {
  margin: 0;
 }
 #other ul li .ttl.open_mr::after {}
 #other ul li .ttl:hover {}
 #other ul li .other_txt {
  display: block;
 }
 #other ul li .other_txt p {
  line-height: 1.8;
 }
 #other ul li .other_txt p span.red {}
 #other ul li img {
  width: 43%;
  margin: 0 auto;
 }
 .mark_program {}
 /*------------------------------------

メリーポイントの使い方

------------------------------------*/
 #merry_use {}
 #merry_use .inner {}
 #merry_use .ttl {}
 #merry_use .ttl .main {}
 #merry_use ul {}
 #merry_use ul li {
  display: block;
  margin-bottom: 1em;
  padding: 0 0 1em;
 }
 #merry_use ul li img {
  /* float: left; */ width: 47%;
  margin: 0 auto;
 }
 #merry_use ul li .ttl {
  font-size: 120%;
  display: inline-block; /* width: 56%; */
  margin: .2em 0 0; /* float: right; */
  text-align: center;
 }
 #merry_use ul li .txt {
  text-align: center;
 }
 #merry_use ul li p {
  display: inline-block;
  clear: both;
  text-align: justify;
 }
 #merry_use ul li a {}
 #merry_use ul li a::before {}
 #merry_use .txt03 {}
 /*------------------------------------

よくあるご質問

------------------------------------*/
 #question {}
 #question .inner {}
 #question .ttl {
  min-width: auto;
 }
 #question .ttl:after {
  right: -5em;
 }
 #question .ttl .main {}
 #question ul {
  width: 90%;
  margin: 0 auto 2em;
 }
 #question ul li {}
 #question ul li .q_ttl {
  font-size: 95%;
  margin: 1.8em auto .5em;
  padding: .4em 0;
  align-items: center;
 }
 #question ul li .q_ttl::before {
  width: 2.5em;
  height: 2.5em;
  margin: -.5em .5em 0 -.5em;
 }
 #question ul li .q_ttl p {
  line-height: 1.3;
  width: 84%;
  margin: 0;
  letter-spacing: .03em;
 }
 #question ul li p.answer {
  font-size: 85%;
 }
 #question .btn_mr a {}
	#question .link_bnr {
width: 92%;
margin: 2em auto;
}
}