@charset "utf-8";

/* reset.css */

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}


/* variables */
:root {
  --color-primary: #E60000;
  --color-secondary: #876528;
  --color-tertiary: #FAF6EF;

  --bg-benefit: linear-gradient(to left, 0% rgba(135, 101, 40, 0.9) , 50% rgba(135, 101, 40, 0.75), 100% rgba(135, 101, 40, 0.9));

  --color-gray: #333333;
  --color-gray2: #5A5A5A;
  --color-gray3: #8D8D8D;
  --color-gray4: #DDDDDD;
  --color-gray5: #F6F6F6;
  --color-pink: #FFE9E5;
  --color-white: #FFFFFF;

  --font-goshic: "Hiragino Kaku Gothic ProN", sans-serif;

  --width-content: 130rem;
  --width-inner: 68.4rem;
  
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;

  line-height: 1.8;
  margin:0;
  overflow: auto;
}

ol, ul {
  list-style: none;
}

.list-wrap {
    list-style:  none;  
    margin:  0;         
    padding: 0;        
}
 
 
.list:before {
    content:  "";     
    width:  10px;               
    height:  10px;             
    display:  inline-block;    
    background-color:#876528;  
    list-style: square;        
    position:  relative;        
    top: -1px;                  
    margin-right: 5px;          
}

a {
  color: inherit;
	text-decoration: none;
}

.footer-account{
	display:none;
}


@media (min-width: 769px) {
  a,[role="button"] {
    transition: all 0.2s ease;
  }
  a.btn::after {
    transition: all 0.2s ease;
  }
  a:not(.btn):hover {
    text-decoration: none;
    opacity: 0.8;
  }
  [role="button"]:hover {
    opacity: 0.8;
  }
  a.btn:hover {
    opacity: 0.8;
  }
  a.btn:hover::after {
    -webkit-transform: translate3d(4px, -50%, 0);
    -moz-transform: translate3d(4px, -50%, 0);
    transform: translate3d(4px, -50%, 0);
  }
  [role="button"] {
    cursor: pointer;
  }

  footer {
    padding-bottom: 8rem;
  }
}

/* helper */
@media (max-width: 768px) {
  .-pc { display: none!important; }
  .-ta-l-sp { text-align: left!important; }
  .-ta-c-sp { text-align: center!important; }
  .-ta-r-sp { text-align: right!important; }
}
@media (min-width: 769px) { .-sp { display: none!important; } }

.l-container {
  max-width: var(--width-content);
  padding: 0 2rem;
  margin: 0 auto;
}
.l-inner {
  max-width: var(--width-inner);
  margin: 0 auto;
}

/* header */

.local-header-container {
  background: var(--color-gray);
  padding: 1.5rem;
}

  .local-header-container > h1 {
  max-width: var(--width-content);
    margin: 0 auto;
  }

.local-header-navigation {
  background: var(--color-white);
  border-bottom: 0.1rem solid var(--color-gray4);
  border-top: 0.1rem solid var(--color-gray4);
  padding: 1.5rem;
}

.local-header-navigation > nav {
  max-width: var(--width-content);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.local-header-navigation > nav > div {
  margin: 0 2.4rem;
}

.local-header-navigation > nav a {
  text-decoration: none;
}


/* hero */

.hero {
  background: url('../img/img-bg-hero-pc.jpg') center no-repeat;
  background-size: cover;
  height: 45rem;
}

.hero-main {
  padding: 6rem 0 5rem;
}

.hero-main > h2 {
  font-size: 5.2rem;
  line-height: 1.4;
}

.hero-main > h2 > span {
  display: inline-block;
  padding: 0 1.5rem;
  border-bottom: 0.2rem solid var(--color-secondary);
  background: var(--color-white);
  font-feature-settings: "palt";
}
.hero-main > h2 > span:nth-of-type(2) {
  margin-top: 0.3rem;
}

.hero-sub {
  font-size: 2.4rem;
  margin-bottom: 5.4rem;
}

/* section */

.section-container {
  padding: 8rem 0;
}
.section-container.campaign-top {
  padding: 0;
}

.section-container#about,
.section-container#howto {
  background: var(--color-white);
}

.section-container.campaign-top {
  background: var(--color-gray4);
}

.section-container#costandrisk,
.section-container#faq,
.section-container#contact {
  background: var(--color-gray5);
}

.section-container.campaign {
  background: var(--color-pink);
}

.section-container#costandrisk {
  padding-bottom: 0;
}

/* hdg, text */

.hdg-2 {
  font-size: 3.6rem;
  text-align: center;
}

#about .hdg-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#about .hdg-2 img{
  display: inline-block;
  width: 32rem;
  padding-bottom: 0.5rem;
  margin-right: 1rem;
}

.hdg-sub {
  color: var(--color-gray3);
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 4.6rem;
}

.text {
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
  margin-top: 2rem;
}

.box-caution-miraivalue__text{
  margin: 18px 0 0;
}

/* button */

.btn {
  border: 0.2rem solid var(--color-primary);
  border-radius: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 1rem 3rem 1rem 2rem;
  position: relative;
  max-width: 36.4rem;
}

.btn:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.6rem;
  border-width: 0.6rem 0 0.6rem 0.5rem;
  border-style: solid;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.btn > div {
  flex: 1 1 100%;
}

.btn .small {
  font-size: 1.4rem;
  font-weight: normal;
}

.btn .large {
  font-size: 2.4rem;
}

.btn.-primary {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn.-secondary {
  background: var(--color-primary);
  color: var(--color-white);
  margin-bottom: 2rem;
}

.btn.-secondary2 {
  background: #8d8d8d;
  color: var(--color-white);
  margin-bottom: 2rem;
  border: 0.2rem solid #8d8d8d;
  font-size: 1.6rem;
}

.btn.-tertiary {
  background: var(--color-white);
  border-color: var(--color-gray);
  color: var(--color-gray);
}

.btn.-primary .nega {
  background: var(--color-primary);
  color: var(--color-white);
  display: inline-block;
  line-height: 1;
  padding: 0.4rem;
  margin: 0 0.4rem;
}

.btn.-secondary .nega {
  background: var(--color-white);
  color: var(--color-primary);
  display: inline-block;
  line-height: 1;
  padding: 0.4rem;
  margin: 0 0.4rem;
}

.btn.-primary::after {
  border-color: transparent var(--color-primary);
}

.btn.-secondary::after {
  border-color: transparent var(--color-white);
}

.btn.-secondary2::after {
  border-color: transparent var(--color-white);
}

.btn.-tertiary::after {
  border-color: transparent var(--color-gray);
}

/* box */

.box {
  
}

.box-1 {
  background: var(--color-gray5);
  padding: 2rem;
}

.box-1-hdg {
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
}

.box-1-lead {
  color: var(--color-secondary);
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
}

.box-2 {
  background: var(--color-tertiary);
  border: 0.2rem solid var(--color-secondary);
  padding: 4rem 5rem;
  margin: 5rem 0 0;
}

.box-2-hdg {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 4rem;
}

.box-3 {
  border: 0.2rem solid var(--color-gray4);
  padding: 4rem 5rem;
  margin: 5rem 0 0;
}

.box-3-hdg {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 4rem;
}

.box-4 {
    box-sizing: border-box;
    padding: 30px 30px 25px;
}


/* caution */

.l-container.caution {
  margin-top: 8rem;
}

/* about */

.about-content-1 {
  display: flex;
}

.about-content-1-desc {
  flex: 1 1 40%;
}

.about-content-1-pct {
  flex: 1 1 60%;
  margin: 0 0 0 3rem;
}

.smallcap{
  float:right;
  font-size: 1.4rem;
}

.smallcap2{
  font-size: 1.4rem;
  margin:0 0 4rem;
}

.about-content-1-desc-lead {
  font-size: 3.2rem;
  font-weight: bold;
  margin: 0 0 2rem;
  line-height: 1.5;
}

.about-content-1-desc-text {
  font-size: 1.8rem;
  margin: 0 0 2rem;
}

.about-content-1-desc-note {
  background: var(--color-white);
  color: var(--color-gray2);
  padding: 1.6rem;
  font-size: 1.4rem;
}

.about-content-1-pct > img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.about-content-2 {
  
}

.about-content-2-item {
  display: flex;
}

.about-content-2-item:nth-child(n+2) {
  margin: 4rem 0 0;
}

.about-content-2-num {
  border-right: 0.2rem solid var(--color-gray4);
  color: var(--color-primary);
  flex: 0 1 9rem;
  font-size: 5.5rem;
  font-weight: bold;
  margin: 0 5rem 0 0;
}

.about-content-2-content {
  display: flex;
  flex: 1 1 calc(100% - 9rem);
  flex-basis: calc(100% - 9rem);
}

.about-content-2-desc {
  flex: 1 1 calc(100% - 30rem);
  flex-basis: calc(100% - 30rem);
}

.about-content-2-title {
  font-size: 3.2rem;
  font-weight: bold;
  margin: 0 0 1rem;
}

.about-content-2-title sup {
  color: var(--color-primary);
}

.about-content-2-text {
  font-size: 1.8rem;
}

.about-content-2-note {
  font-size: 1.4rem;
  margin: 2rem 0 0;
}

.about-content-2-note:before {
  content: '�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E';
  color: var(--color-primary);
}

.about-content-2-pct {
  flex: 1 1 30rem;
  margin: 0 0 0 2rem;
}

.about-content-3-pct {
  flex: 1 1 30rem;
  margin: 0 4rem 0 4rem;
  float: left;
}

  .about-content-3-pct-sp {
   display: none;
  }

.about-content-3-title {
  color: var(--color-secondary);
  font-size: 2.3rem;
  font-weight: bold;
  margin: 0 0 1rem;
}


/* cost */

.cost-content-1 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}

.cost-content-1 span {
  font-weight: 500;
}
.cost-content-1 span2 {
  font-weight: bold;
}

.cost-content-1 span strong {
  font-size: 6rem;
  color: var(--color-primary);
}

.cost-content-2 {
  background: var(--color-white);
  font-size: 1.6rem;
  padding: 2rem;
  margin: 3rem 0 0;
}

.cost-content-3 {
  background: var(--color-tertiary);
  padding: 8rem 1.5rem;
  margin: 8rem 0 0;
}

.cost-content-3 > .l-container {
  border: 0.1rem solid var(--color-secondary);
  padding: 4rem 1.5rem;
}

.cost-content-3-hdg {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 2rem;
}

.cost-content-3-hdg span {
  display: inline-block;
  position: relative;
}

.cost-content-3-hdg span::before,
.cost-content-3-hdg span::after {
  background: var(--color-secondary);
  content: '';
  position: absolute;
  display: block;
  height: 0.1rem;
  width: 6rem;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.cost-content-3-hdg span::before {
  left: -7rem;
}

.cost-content-3-hdg span::after {
  right: -7rem;
}


.cost-content-3-lead {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0 0 2rem;
}

.cost-content-3-lead strong {
  color: var(--color-primary);
  display: inline-block;
  line-height: 1;
}

.cost-content-3-text {
  font-size: 1.8rem;
  margin: 0 0 1rem;
}


.cost-content-3-contacts {
  display: flex;
}

.cost-content-3-contacts-item {
  flex: 1 1 33.333%;
  margin: 0 2rem;
  display: flex;
}

.cost-content-3-contacts-icon {
  flex: 0 1 7.5rem;
  margin: 0 0 1.5rem;
}

.cost-content-3-contacts-desc {
  flex: 0 1 calc(100% - 7.5rem);
  flex-basis: calc(100% - 7.5rem);
}

.cost-content-3-contacts-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 1rem;
}

.cost-content-3-contacts-detail {
  font-size: 1.4rem;
}
.cost-detail-link {
  font-size: 2.4rem;
}
.cost-detail-link a {
  font-size: 3.4rem;
  font-weight: bold;
}


/* campaign */
.campaign .l-container > div {
  text-align: center;
}
.campaign .l-container > div.campaign__title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: end;
}
/* campaign-top */
.campaign-top {
  padding: 0;
}

.campaign-top a > div {
  display: flex;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 4rem 0 0;
  justify-content: center;
  align-items: top;
}

.campaign-top__title-sub,
.campaign__title-sub{
  margin-bottom: 1.5rem;
}

.campaign-top__title-sub span,
.campaign__title-sub span{
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 2.3rem;
  font-weight: bold;
  padding: 0.6rem 1rem;
}

.campaign-top__title{
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.campaign__top-title-pct {
  margin-left: 30px;
}

.campaign__top-title-pct p.note-text {
  margin: 5px 0;
}

.campaign__top-title-pct img {
  width: 120px;
  display: inline-block;
}

.campaign__top-title-arrow {
  position: relative;
  display: block;
  padding-bottom: 4rem;
  font-size: 2.3rem;
  font-weight: bold;
  width: 214px;
  margin: 0 auto;
  margin-top: 10px;
}

.campaign__top-title-arrow:before {
  content: '';
  margin: 0 auto;
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 0;
  width: 0;
  border: solid 13px transparent;
  border-top: solid 10px #e60000;
}

.campaign__top-title-arrow_sp {
  display: none;
}

.campaign-top__title span.u-red {
  color: var(--color-primary);
}

.campaign-top__date{
  font-size: 2.3rem;
  font-weight: bold;
}

.campaign-top__date span {
  display: inline-block;
}

/* campaign main */
.campaign__title-pct {
  margin-left: 30px;
}

.campaign__title{
  margin-bottom: 0.5rem;
}

.campaign__title.hdg-2{
  display: flex;
  align-items: center;
  border-bottom: solid 2px #333333;
  border-top: solid 2px #333333;
}

.campaign__title.hdg-2 img {
  width: 110px;
  padding: 10px 0 10px 10px;
}

.campaign__title-text p:nth-of-type(1){
  font-size: 2.2rem;
  font-weight: bold;
}

.campaign__title-text p:nth-of-type(2){
  font-size: 3.4rem;
  font-weight: bold;
}

.campaign__title-text p span:not(.u-red){
  display: inline-block;
  font-size: 2.8rem;
  padding: 0 1rem;
  margin-right: 1rem;
  color: var(--color-white);
  background: var(--color-primary);
}

.campaign__title-text p.note-text {
  display: inline-block;
}

.campaign__box {
  background: var(--color-white);
  padding: 4rem 5rem;
  margin: 5rem 0 0;
}

.campaign__box:last-of-type{
  margin: 5rem 0 5rem;
}

.campaign__box h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 4rem;
}

.campaign__box h2 span{
  border-bottom: 0.3rem solid var(--color-primary);
}
.campaign__box--about ul li,
.campaign__box--date p:first-of-type,
.campaign__box--condition h3,
.campaign__box--send p {
  font-size: 2.4rem;
  font-weight: bold;
}
.campaign__box--condition h3 {
  margin-bottom: 1rem;
}
.campaign__box--condition__text{
  width: 67rem;
  margin: 0 auto;
}
.campaign__box--condition__text .list-dot__list{
  text-align: left;
  font-size: 1.8rem;
  line-height: 2;
}
.campaign__box .note-text {
  display: inline-block;
  text-align: center;
}
.campaign__box--about .note-text {
  margin-top: 1.8rem;
}
.campaign__box--alart {
  background: var(--color-gray5);
}
.campaign__box--alart ul {
  font-size: 1.6rem;
  text-align: left;
}

.campaign__box--about ul{
  line-height: 2;
  display: inline-block;
  text-align: left;
  margin-top: 0;
}

dt{
  margin: 18px 0 10px;
}
dt:nth-of-type(2){
  margin: 28px 0 10px;
}
dd .list-dot__list{
  margin-bottom: 10px;
}
.terms .fontB{
  font-size: 2.5rem;
}

 .box-container{
  border:0.1rem solid var(--color-gray3);
}

.img-box img{
  margin: auto;
  width: auto;
}

.img-box-sp{
  display: none;
}

/* howto */

.howto-content-1 {
  display: flex;
  margin: 6rem 0;
}

.howto-content-1-item {
  border: 0.1rem solid var(--color-gray4);
  flex: 1 1 33.333%;
  padding: 6rem 1.5rem 4rem;
  margin: 0 1rem;
  position: relative;
}

.howto-content-1-num {
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-white);
  display: flex;
  font-size: 3.6rem;
  font-weight: bold;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 8rem;
  width: 8rem;
  line-height: 1;
  padding: 1rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -4rem, 0);
}

.howto-content-1-num span {
  flex: 1 1 100%;
  font-size: 1.6rem;
}

.howto-content-1-pct {
  height: 12rem;
  margin: 4rem 0 4rem;
}

.howto-content-1-pct img {
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.howto-content-1-lead {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0 0 3rem;
  min-height: 9rem;
}

.howto-content-text {
  font-size: 1.4rem;
  margin: 0 0 2rem;
}

.howto-content-1-text {
  font-size: 1.4rem;
  margin: 0 0 2rem;
}

.howto-content-1-note_text {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
}

.howto-content-1-note_text::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  color: #e60000;
}

.howto-content-1-text + .howto-content-1-note_text,
.howto-content-1-note_text + .howto-content-1-text {
  margin-top: 10px;
}

.howto-content-1-link {
  text-align: center;
}

.howto-content-1-gray {
    text-align: center;
    background: #8d8d8d;
    color: #ffffff;
    margin-bottom: 2rem;
    padding: 1rem;
	font-weight:bold;
	font-size: 1.8rem;
}

.howto-content-3 {
  max-width: 100rem;
  margin: 0 auto 0;
  padding: 0 4rem;
  text-align: center;
}

.howto-content-3-1,
.howto-content-3-2 {
  margin: 2rem 0 0;
}

.howto-content-3-1-hdg,
.howto-content-3-2-hdg {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: bold;
  padding: 1.6rem;
}

.howto-content-3-1-content,
.howto-content-3-2-content {
  background: var(--color-white);
  padding: 4rem;
}

.howto-content-2-1-content {
  background: var(--color-white);
}

.howto-content-3-1-hdg {
  background: var(--color-primary);
}

.howto-content-3-1-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-content-3-1-content-item {
  flex: 0 1 40%;
  margin: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-content-3-1-item {
  flex: 1 1 15rem;
  margin: 0 2rem;
}

.margin {
  margin:  3rem;
}

.howto-content-3-1-item img {
  margin: 0 auto;
}

.howto-content-3-2-hdg {
  background: var(--color-gray3);
}

.section-container#howto .box-1 {
  padding: 4rem;
}


/* faq */

.faq-content {
  background: var(--color-white);
}

.faq-content:nth-child(n+2) {
  margin: 2rem 0 0;
}

.faq-content-question,
.faq-content-answer {
  position: relative;
  padding: 2rem 9rem;
  line-height: 1.5;
}

.faq-content-question {
  font-size: 2.4rem;
  font-weight: bold;
}

.faq-content-question-logo {
  color: var(--color-primary);
}

.faq-content-question::before {
  content: 'Q';
  color: var(--color-primary);
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.faq-content-question::after {
  background: url('../img/img-icon-open.svg') center no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  height: 4rem;
  width: 4rem;
  position: absolute;
  right: 2rem;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  z-index: 1;
}

.faq-content-answer {
  display: none;
}

.faq-content-answer::before {
  content: 'A';
  color: var(--color-gray);
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.faq-content-answer-text {
  font-size: 1.8rem;
}

.faq-content.-open .faq-content-answer {
  display: block;
}

.faq-content.-open .faq-content-question::after {
  background: url('../img/img-icon-close.svg') center no-repeat;
  background-size: 100%;
}

.faq-content-2 {
  margin: 5rem 0 0;
}

.faq-content-2 .btn {
  margin: 0 auto;
}

/* contact */

.contact-content {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0;
}

.contact-content-item {
  background: var(--color-white);
  flex: 50%;
  margin: 1rem;
  text-align: center;
}

.contact-content-hdg {
  background: var(--color-gray2);
  color: var(--color-white);
  font-size: 2rem;
  font-weight: bold;
  padding: 1.6rem;
}

.contact-content-body {
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  padding: 2rem;
  height: 6.2rem;
}

.contact-content-tel {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: bold;
  text-decoration: none;
}

.contact-content-tel img {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.fixed-btn-wrap {
  background: var(--color-white);
  padding: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.fixed-btn-wrap .btn {
  margin: 0 1rem;
}

.local-footer {
  background: var(--color-gray2);
  color: var(--color-white);
  padding: 5rem 0;
}

.local-footer-hdg {
  font-size: 2rem;
  font-weight: bold;
}

.local-footer-hdg img {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
}

.local-footer-text {
  font-size: 1.4rem;
  margin: 1rem 0 0;
}
.local-footer-text a {
  text-decoration: underline;
}


/* sp layout */

@media (max-width: 768px) {
  /* header */

  .local-header-container > h1 {
    text-align: center;
  }

  .local-header-container > h1 img{
    display: inline-block;
  }

  .local-header-navigation {
    font-size: 1.2rem;
    overflow-x: auto;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
  }

  .local-header-navigation > nav {
    flex-wrap: wrap;
  }

  .local-header-navigation > nav > div {
    margin: 0.6rem 1.4rem 0;
    display: inline-block;
  }


  /* hero */

  .hero {
    background: url('../img/img-bg-hero-sp.jpg') 30% center no-repeat;
    background-size: cover;
  }

  .hero-main {
    padding: 1.6rem 0;
  }

  .hero-main > h2 {
    font-size: 3.4rem;
    margin-bottom: 1rem;
  }

  .hero-main > h2 > span {
    padding: 0 0.8rem;
  }

  .hero-sub {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

  .hero-btn {
    display: none;
  }

  /* section */

  .section-container {
    padding: 4rem 0;
  }

  /* hdg, text */

  .hdg-2 {
    font-size: 2.8rem;
  }

  #about .hdg-2 img{
    width: 25rem;
    padding-bottom: 0.6rem;
    margin-right: 0.8rem;
  }

  .hdg-sub {
    font-size: 1.2rem;
  }

  .text {
    font-size: 1.4rem;
  }

.box-caution-miraivalue__text{
  margin: 1.5rem 0 0;
}

  /* box */

  .box-1 {
    padding: 2rem 2rem;
  }

  .box-1-hdg {
    font-size: 2rem;
  }

  .box-1-lead {
    font-size: 1.8rem;
  }

  .box-2 {
    padding: 2rem 2rem 4rem;
    margin: 2rem 0 2rem;
  }

  .box-2-hdg {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .box-3 {
    padding: 2rem 2rem;
    margin: 2rem 0 0;
  }

  .box-3-hdg {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  /* caution */

 .l-container.caution {
   margin-top: 4rem;
 }

  /* about */

  .about-content-1 {
    display: block;
  }

  .about-content-1-pct {
    margin: 0;
  }

  .about-content-1-desc-lead {
    font-size: 2.4rem;
  }

  .about-content-1-desc-text {
    font-size: 1.4rem;
  }

  .about-content-1-desc-note {
    border: 0.2rem solid var(--color-gray4);
    border-radius: 0.3rem;
    font-size: 1rem;
    line-height: 1;
    padding: 1rem;
    margin: 0 0 2rem;
  }

  .about-content-1-desc-note::before {
    content: url("../img/img-icon-exclamation-2.svg");
    vertical-align: middle;
    margin-right: 1rem;
  }

  .about-content-2-item {
    display: flex;
  }

  .about-content-2-item:nth-child(n+2) {
    margin: 4rem 0 0;
  }

  .about-content-2-num {
    flex: 0 1 4rem;
    font-size: 4rem;
    padding: 0 2rem 0 0;
    margin: 0 2rem 0 0;
  }

  .about-content-2-content {
    display: block;
  }

  .about-content-2-title {
    font-size: 1.8rem;
  }

  .about-content-2-text {
    font-size: 1.4rem;
    margin: 0 0 1.6rem;
  }

  .about-content-2-note {
    font-size: 1.4rem;
    margin: 2rem 0 0;
  }

  .about-content-2-pct {
    margin: 0;
  }

  .about-content-2-pct img {
    margin: 0 auto;
  }

	
  .about-content-3-pct {
    display:none;
  }
	
  .about-content-3-pct-sp {
	display: block;
    margin: 0 auto;
  }
	
  .about-content-3-title {
    color: var(--color-secondary);
    font-size: 2.1rem;
    font-weight: bold;
    margin: 1rem auto;
    text-align: center;
}
	
  /* cost */

  .cost-content-1 {
    font-size: 1.6rem;
  }

  .cost-content-1 span strong {
    font-size: 4.5rem;
  }
	  .cost-content-1 {
	 color: #333333;
    font-weight: 500;
 }
  .cost-content-2 {
    font-size: 1rem;
    margin: 2rem 0 0;
  }

  .cost-content-3 {
    padding: 5rem 1.5rem;
    margin: 5rem 0 0;
  }

  .cost-content-3 > .l-container {
    padding: 4rem 1.5;
  }

  .cost-content-3-hdg {
    font-size: 2rem;
    margin: 0 0 2.8rem;
  }

  .cost-content-3-lead {
    margin: 0 0 2rem;
  }

  .cost-content-3-lead strong {
    
  }

  .cost-content-3-text {
    font-size: 1.4rem;
    margin: 0 0 4rem;
  }

  .cost-content-3-contacts {
    display: block;
  }

  .cost-content-3-contacts-item {
    margin: 2rem 0 0;
  }

  .cost-content-3-contacts-item:first-child {
    margin-top: 0;
  }

  .cost-content-3-contacts-icon {
    margin: 0;
  }
.cost-detail-link {
  font-size: 1.6rem;
  line-height: 1.4;
}
.cost-detail-link a {
  font-size: 2.4rem;
}

  /* campaign */
	
 /* campaign-top */
  .campaign-top a > div {
	display: block;
  }
  .campaign-top__title-sub,
  .campaign__title-sub{
    margin-bottom: 1rem;
  }

  .campaign-top__title-sub span,
  .campaign__title-sub span{
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
  }

  .campaign-top__title{
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
  }
  .campaign__top-title-pct {
	display: inline-block;
	margin-top: 10px;
    margin-left: inherit;
  }
  .campaign__top-title-arrow {
	width: 124px;
    font-size: 1.8rem;
    padding-left: 16px;
  }
  .campaign__top-title-arrow:before {
    border: solid 10px transparent;
    border-top: solid 8px #e60000;
    top: 10px;
  }
  .campaign__top-title-arrow_pc {
	display: none;
}	
  .campaign__top-title-arrow_sp {
	display: block;
}
  .campaign-top__date{
    font-size: 1.8rem;
  }
  .campaign-top__title span:nth-of-type(2), .campaign-top__date span {
    display: inline-block;
	}

  /* campaign main */
  .campaign__title{
    margin-bottom: 0.8rem;
  }
  .campaign .l-container > div.campaign__title{
    display: block;
  }
  .campaign__title span{
    display: inline-block;
  }
  .campaign__title.hdg-2 {
	display: inline-flex;
	font-size: 2.4rem;
  }
  .campaign__title.hdg-2 img {
	width: 60px;
  }
  .campaign__title-text p:nth-of-type(1){
    font-size: 1.7rem;
  }

  .campaign__title-text p:nth-of-type(2){
    font-size: 2.4rem;
  }

  .campaign__title-text p:nth-of-type(2) span:not(.u-red){
    font-size: 2rem;
    padding: 0 0.8rem;
    margin-right: 0.6rem;
  }
  .campaign__title-pct {
	display: none;
	}
  .campaign-content-1:nth-of-type(2) p.text span{
    display: inline-block;
    text-align: left;
  }

  .campaign__box {
    padding: 2rem 2rem;
    margin: 2rem 0 0;
  }

  .campaign__box:last-of-type{
    margin: 2rem 0 2rem;
  }

  .campaign__box h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .campaign__box--about h2+p {
    text-align: left;
  }
  .campaign__box--about ul li,
  .campaign__box--date p:first-of-type,
  .campaign__box--condition h3,
  .campaign__box--send p {
    font-size: 1.8rem;
  }
  .campaign__box--about ul{
    line-height: 1.3;
  }
  .campaign__box--about ul li:nth-of-type(2){
    margin-top: 1.5rem;
  }
  .campaign__box--about span.u-red {
    display: block;
    text-align: center;
  }
  .campaign__box--condition__text{
    width: auto;
    max-width: 76rem;
  }
  .campaign__box--condition__text .list-dot{
    margin: 1rem 0;
  }
  .campaign__box--condition__text .list-dot:last-child{
    margin-bottom: 0;
  }
  .campaign__box--condition__text .list-dot__list{
    font-size: 1.4rem;
    line-height: 1.8;
  }
  .campaign__box .note-text {
    text-align: left;
  }
  .campaign__box--about .note-text {
    margin-top: 1.5rem;
  }
  .campaign__box--alart ul {
    font-size: 1.4rem;
  }

  .note-text.u-center{
    display: inline-block;
    text-align: left;
    padding-left: 0;
  }
  .box-container .list-dot__list{
    font-size: 1.4rem;
  }
  
.img-box img{
    display:none;
	}

.img-box-sp{
	display: block;
}

  /* howto */

  .howto-content-1 {
    display: block;
    margin: 0 0 4rem;
  }

  .howto-content-1-item {
    padding: 5rem 2rem 3rem;
    margin: 6rem 0 0;
  }

  .howto-content-1-num span {
    font-size: 1.6rem;
  }

  .howto-content-1-pct {
    height: auto;
    margin: 0 0 2rem;
  }

  .howto-content-1-pct img {
    height: auto;
    width: auto;
    margin-top: 4rem;
  }

  .howto-content-1-lead {
    margin: 0 0 2rem;
    min-height: auto;
  }

  .howto-content-1-text {
    min-height: auto;
  }

  .howto-content-1-link .btn {
    max-width: none;
  }

  .howto-content-3 {
    max-width: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .howto-content-3-1,
  .howto-content-3-2 {
    margin: 2rem 0 0;
  }
	

  .howto-content-3-1-hdg,
  .howto-content-3-2-hdg {
    font-size: 1.6rem;
  }

  .howto-content-3-1-content,
  .howto-content-3-2-content {
    padding: 2rem 1.5rem;
  }
	
.howto-content-2-1-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
  .howto-content-3-1-content-item {
    flex: 1 1 50%;
    margin: 0 1rem;
  }

  .howto-content-3-1-item {
    margin: 0;
  }

  .howto-content-3-1-item img {
    margin: 0 auto;
  }

  .howto-content-3-2-content .btn {
    max-width: none;
  }

  .section-container#howto .box-1 {
    padding: 2rem 1.5rem;
  }

  /* faq */

  .faq-content-question,
  .faq-content-answer {
    position: relative;
    padding: 1.5rem 5rem;
  }

  .faq-content-question {
    font-size: 1.6rem;
  }

  .faq-content-question::before {
    font-size: 3rem;
    top: 1.2rem;
    left: 1.5rem;
  }

  .faq-content-question::after {
    height: 2rem;
    width: 2rem;
  }

  .faq-content-question {
    font-size: 1.6rem;
  }

  .faq-content-answer::before {
    font-size: 3rem;
    top: 1.2rem;
    left: 1.5rem;
  }

  .faq-content-answer-text {
    font-size: 1.4rem;
  }

  .faq-content-2 {
    margin: 5rem 0 0;
  }

  .faq-content-2 .btn {
    margin: 0 auto;
  }

  /* contact */

  .contact-content {
    display: block;
    margin: 2rem 0 0;
  }

  .contact-content-item {
    margin: 2rem 0 0;
  }

  .contact-content-hdg {
    font-size: 1.6rem;
  }

  .contact-content-body {
    font-size: 1.4rem;
    padding: 1.5rem;
    height: auto;
  }

  .contact-content-tel {
    font-size: 2.4rem;
  }

  .fixed-btn-wrap .btn {
    display: block;
    flex: 1 1 50%;
    text-align: left;
    font-size: 1.2rem;
    padding: 0.5rem 0.5rem 0.5rem 0.8rem;
    margin: 0 2rem 0 0px;
    max-width: none;
  }

  .local-footer {
    padding: 4rem 0;
  }

  footer {
    padding-bottom: 5.8rem;
  }
	
/* スクロール */
.scroll_list{
  margin: 0 auto;
  padding: 0;
  width: 100%;  
  overflow-x: auto;  /* 横スクロールの持E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E*/
  white-space: nowrap;  /* 横スクロールの持E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E*/
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
  position: relative;
}
.scroll_list li{
  display: inline-block;  /* 横並びにする持E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E*/
  list-style: none;
  height: 100%;  /* 横スクロールする篁E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�の高さを指宁E*/
　scroll-snap-align: start;
}
.list1{
  margin-left: 0;
}
.list2{
  margin-left: 0px;
  width: 100%;
}

.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

	.center-arrow{
  position: sticky;
  transform: translateY(500px);
    z-index: 1;
	}
}


/* modal */

#modal {
  display: flex;
  align-items: center;
  position: fixed;
  inset: 0;
  margin: 2rem;
  z-index: 1001;
}

.modal-container {
  background: var(--color-white);
  font-size: 1rem;
  line-height: 1.8;
  padding: 3rem;
  position: relative;
}

#modal-close {
  background: url('../img/img-icon-time.svg') center no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
  position: absolute;
  right: 0;
  top: -4.2rem;
}

#modal-overlay {
  background: var(--color-gray);
  opacity: 0.8;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

@media (max-width: 364px) {
  .hero-main > h2 {
    font-size: 2.9rem;
  }
  .hdg-2{
    font-size: 2.7rem;
  }
  #about .hdg-2 img{
    width: 22rem;
    padding-bottom: 0.6rem;
    margin-right: 0.5rem;
  }
}

@media (max-width: 333px) {
  .campaign__title.hdg-2{
    font-size: 2.5rem;
  }

  .campaign-top__title-sub span,
  .campaign__title-sub span{
    font-size: 1.7rem;
    padding: 0.4rem 0.9rem;
  }

  .campaign-top__title{
    font-size: 2.3rem;
    margin-bottom: 0.6rem;
  }
  .campaign__title{
    margin-bottom: 0.9rem;
  }

  .campaign-top__date{
    font-size: 1.7rem;
  }

  .campaign__title-text p:nth-of-type(1){
    font-size: 1.4rem;
  }

  .campaign__title-text p:nth-of-type(2){
    font-size: 2rem;
  }
  .campaign__title-text p:nth-of-type(2) span:not(.u-red){
    font-size: 1.8rem;
    padding: 0 0.5rem;
    margin-right: 0.5rem;
  }


/*  .campaign__title-text p:nth-of-type(2) span{
    font-size: 1.8rem;
    padding: 0 0.7rem;
    margin-right: 0.5rem;
  }*/
}

/* パンくず用スタイルを移椁E*/

@media (min-width: 769px) {

  .pkz {
    min-width: 1024px;
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 50px;
  }
}