@charset "UTF-8";
/* header
-------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN",
 "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: #000;

}

#header {
  background-color: #fff;
  border-bottom: solid 1px #eee;
  padding: 0.5em 0 0.8em;
}

#header > .inner {
  width: 1200px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#header > .inner > .logo-outer h1 {
  font-size: small;
  margin: 0 0 0.5em;
  width: fit-content;
}

#header > .inner > .telmail {
  display: flex;
  color: #fff;
  font-size: 1em;
}

#header > .inner > .telmail li:first-child {
  margin-right: 0.5em;
}

@media screen and (max-width: 768px) {
  #header > .inner {
    justify-content: center;
  }
  #header > .inner > .logo-outer h1 {
    display: none;
  }
  #header > .inner > .logo-outer > .logo {
    margin-top: 0.5em;
    text-align: center;
  }
  #header > .inner > .telmail {
    display: none;
  }
}

#mv {
  background-color: #CCC;/*d1e3f6 女性画像背景*/
  background-image: url(../images/mv-r.png), url(../images/mv-l.png);
  background-size: contain, auto;
  background-position: left 55vw top, right 5vw bottom;/*60 25*/
  background-repeat: no-repeat, no-repeat;
}

#mv > .inner {
  width: 1200px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  padding: 2.5em 0;
}

#mv > .inner > .main {
  background-color:rgba(255,255,255,0.2);/*トップ画像背景*/
  width: fit-content;
  padding: 1em 1.5em;
  color: #fff;
}

#mv > .inner > .main > .homesupport {
  font-size: 2.4em;
  font-weight: bold;
  margin-bottom: 1em;
  line-height: 1.2;
}

#mv > .inner > .main > .homesupport li {
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

#mv > .inner > .main > .homesupport li:nth-child(1) {
  margin-bottom: 0.2em;
}

#mv > .inner > .main > .homesupport li:nth-child(2) {
  background-color: #F36;/*#2e5260 トップ画像文字背景色*/
  line-height: 1;
  padding: 0.2em 0.2em 0.3em 0.2em;
}

#mv > .inner > .main > .homesupport li:nth-child(3) {
  font-size: 1.7em;
  margin-bottom: 0.2em;
}

#mv > .inner > .main > .homesupport li:nth-child(3) span {
  font-size: 0.6em;
}

#mv > .inner > .main > .homesupport li:nth-child(4) span {
  display: inline-block;
}

#mv > .inner > .main > .homesupport li:nth-child(4) span.logo {
  background-color: #fff;
  line-height: 1;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-right: 0.2em;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

#mv > .inner > .main > .homesupport li:nth-child(4) span.sub {
  font-size: 1.2em;
}

#mv > .inner > .main > .catch {
  display: flex;
  justify-content: space-between;
}

#mv > .inner > .main > .catch > li {
  background: url(../images/mv-catch.png) no-repeat left top;
  background-size: cover;
  color: #FFF;/*444　 トップ画面丸の中の文字1*/
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.3;
  text-align: center;
  padding: 0 0 0 15px;
  width: 9em;
  height: 8em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#mv > .inner > .main > .catch > li em {
  color: #FFF;/*cc3333 トップ画面丸の中の文字2*/
  font-size: 1.5em;
}

.toformBtn a {
  display: flex;
  flex-direction: column;
  background-color: #cc3333;
  color: #fff;
  text-align: center;
  width: 16em;
  padding: 0.5em 0;
  line-height: 1;
  font-size: 1em;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
}

.toformBtn a span.time {
  margin-top: 0.3em;
  font-size: x-small;
}

.toformBtn a::after {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  content: "→";
  position: absolute;
  right: 1em;
  top: calc(50% - 0.5em);
}

.toformBtn a:hover {
  opacity: 0.8;
}

.toformBtn a:hover::after {
  right: 0.5em;
}

@media screen and (max-width: 768px) {
  #mv {
    background-size: contain, auto;
    background-position: left 55vw bottom, right 5vw bottom;
  }
  #mv > .inner > .main {
    width: 80%;
    padding: 1em 1.5em;
    color: #fff;
  }
  #mv > .inner > .main > .homesupport {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 1em;
    line-height: 1.2;
  }
  #mv > .inner > .main > .homesupport li:nth-child(1) {
    margin-bottom: 0.2em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(2) {
    background-color: #2e5260;
    line-height: 1;
    padding: 0.2em 0.2em 0.5em 0.2em;
    width: fit-content;
  }
  #mv > .inner > .main > .homesupport li:nth-child(3) {
    font-size: 1.7em;
    margin-bottom: 0.2em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(3) span {
    font-size: 0.6em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(4) span.logo {
    display: block;
    width: 60%;
    margin: auto;
  }
  #mv > .inner > .main > .homesupport li:nth-child(4) span.sub {
    display: block;
    text-align: right;
  }
  #mv > .inner > .main > .catch > li {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 480px) {
  #mv {
    background-size: 60vw, 780px;
    background-position: left 50vw bottom, right 0 bottom;
    padding-bottom: 58vw;
  }
  #mv > .inner {
    padding: 1em 0;
  }
  #mv > .inner > .main {
    width: 100%;
    padding: 1em;
    color: #fff;
  }
  #mv > .inner > .main > .homesupport {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(1) {
    margin-bottom: 0.2em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(2) {
    line-height: 1;
    padding: 0.2em 0.2em 0.5em 0.2em;
    width: fit-content;
  }
  #mv > .inner > .main > .homesupport li:nth-child(3) {
    font-size: 1.2em;
    margin-bottom: 0.2em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(3) span {
    font-size: 0.6em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(4) {
    font-size: 1em;
  }
  #mv > .inner > .main > .homesupport li:nth-child(4) span.logo {
    display: block;
    width: 60vw;
    margin: auto;
  }
  #mv > .inner > .main > .homesupport li:nth-child(4) span.sub {
    display: block;
    text-align: right;
  }
  #mv > .inner > .main > .catch > li {
    font-size: 0.7em;
  }
}

/* contents
-------------------------------------------------------------- */
.cont {
  background-color: #fff;
}

.cont > .inner {
  width: 1200px;
  max-width: calc(100% - 1em);
  margin: 0 auto;
  padding: 3em 0 3em;
}

.cont > .inner > h1 {
  font-size: 2.5em;
  font-weight: 900;
  text-shadow: 1px 1px 1px #fff;
  text-align: center;
  line-height: 1.2;
  width: fit-content;
  margin: 0 auto 1.5em;
  background: linear-gradient(to bottom, rgb(255, 255, 0,0) 60%, yellow 60%, yellow 0) !important;文字背景の黄色*/
}

.cont > .inner > h1 em {
  color: #ff3366;/* 0071b9 大文字 */
  font-size: 1.3em;
}

@media screen and (max-width: 768px) {
  .cont {
    background-color: #fff;
  }
  .cont > .inner {
    padding: 2em 0 2em;
  }
  .cont > .inner > h1 {
    font-size: 2em;
  }
}

@media screen and (max-width: 480px) {
  .cont > .inner {
    padding: 1em 0;
  }
  .cont > .inner > h1 {
    font-size: 1.2em;
  }
}


.contact-bnr {
  border-top: solid 2px #efefef;
  background-color: #d1e3f6;
  background-image: url(../images/bnr-bk.png), url(../images/mv-l.png);
  background-size: auto, 1200px;
  background-position: left 68vw bottom, right 40vw bottom;
  background-repeat: no-repeat, no-repeat;
}


.contact-bnr > .inner {
  width: 1200px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  padding: 2.5em 0;
}

.contact-bnr > .inner > .main {
  width: 850px;
  max-width: 100%;
}

.contact-bnr > .inner > .main > .homesupport {
  background-color: rgba(148, 212, 240, 0.6);
  width: 100%;
  padding: 0.2em 0.5em 0.5em;
  color: #fff;
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.2;
}

.contact-bnr > .inner > .main > .homesupport > li {
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

.contact-bnr > .inner > .main > .homesupport > li:nth-child(1) {
  font-size: 1.7em;
  margin-bottom: 0.2em;
}

.contact-bnr > .inner > .main > .homesupport > li:nth-child(1) span {
  font-size: 0.6em;
}

.contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span {
  display: inline-block;
}

.contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span.logo {
  background-color: #fff;
  line-height: 1;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-right: 0.2em;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

.contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span.sub {
  font-size: 1.2em;
}

.contact-bnr > .inner > .telmail {
  width: 850px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 1.25em;
}

.contact-bnr > .inner > .telmail li:first-child {
  margin-right: 0.5em;
}

@media screen and (max-width: 768px) {
  .contact-bnr {
    background-size: 40vw, 1200px;
    background-position: left 70vw bottom, right 30vw bottom;
  }
  .contact-bnr > .inner {
    padding: 2em 0;
  }
  .contact-bnr > .inner > .main {
    width: 68vw;
  }
  .contact-bnr > .inner > .main > .homesupport {
    font-size: 1.6em;
    font-weight: bold;
  }
  .contact-bnr > .inner > .main > .homesupport > li:nth-child(1) {
    font-size: 1.7em;
    margin-bottom: 0.2em;
  }
  .contact-bnr > .inner > .main > .homesupport > li:nth-child(1) span {
    font-size: 0.6em;
  }
  .contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span {
    display: block;
    width: fit-content;
  }
  .contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span.logo {
    margin: auto;
    width: 70%;
  }
  .contact-bnr > .inner > .main > .homesupport > li:nth-child(2) span.sub {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
  }
}

@media screen and (max-width: 480px) {
  .contact-bnr {
    background-size: 60vw, 660px;
    background-position: left 50vw bottom, right 20vw bottom;
  }
  .contact-bnr > .inner {
    padding: 1em 0 12em;
  }
  .contact-bnr > .inner > .main {
    width: 100%;
  }
  .contact-bnr > .inner > .main > .homesupport {
    font-size: 1em;
    font-weight: bold;
  }
}

#taishoh {
  background-color: #FFF;/*e9e9e9 震災ケース*/
}

#taishoh > .inner {
  padding-bottom: 6em;
}

#taishoh > .inner > .main {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  #taishoh > .inner {
    padding-bottom: 2em;
  }
  #taishoh > .inner > .main {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 480px) {
  #taishoh > .inner > .main > li {
    width: 40%;
  }
}

#riyu > .inner > ul {
  display: flex;
  justify-content: space-between;
}

#riyu > .inner > ul > li {
  width: 210px;
  max-width: calc((100% - 2em) / 5);
  margin-right: 0.5em;
  display: flex;
  flex-direction: column;
}

#riyu > .inner > ul > li:last-child {
  margin-right: 0;
}

#riyu > .inner > ul > li > .main > h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0071ba;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.3;
  height: 4em;
  margin: 0;
  text-align: center;
}

#riyu > .inner > ul > li > .main > p {
  font-size: 0.9em;
  margin: 0;
}

@media screen and (max-width: 480px) {
  #riyu > .inner > ul {
    flex-direction: column;
  }
  #riyu > .inner > ul > li {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    flex-direction: row;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: solid 1px #ccc;
  }
  #riyu > .inner > ul > li:last-child {
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  #riyu > .inner > ul > li > .image {
    width: 35%;
  }
  #riyu > .inner > ul > li > .main {
    width: 65%;
    padding-left: 1em;
  }
  #riyu > .inner > ul > li > .main > h2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    margin-bottom: 0.5em;
    text-align: left;
  }
}

#mazu {
  background-color: #bfe5f6;
}

#mazu > .inner > .main {
  background-color: #fff;
  padding: 3em;
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

#mazu > .inner > .main > ul {
  margin: 0 auto;
  width: fit-content;
}

#mazu > .inner > .main > ul li {
  display: flex;
  font-size: 1.3em;
  margin-bottom: 1em;
}

#mazu > .inner > .main > ul li:last-child {
  margin-bottom: 0;
}

#mazu > .inner > .main > ul li span {
  color: #cc3333;
  display: inline-block;
  margin-right: 0.5em;
}

#mazu > .inner > .main > ul li p {
  margin: 0;
}

@media screen and (max-width: 480px) {
  #mazu > .inner > .main {
    padding: 1em;
  }
  #mazu > .inner > .main > ul li {
    font-size: 1em;
  }
}

#flow > .inner > ul {
  display: flex;
  justify-content: center;
}

#flow > .inner > ul > li.ya {
  position: relative;
  width: 50px;
}

#flow > .inner > ul > li.ya::after {
  position: absolute;
  content: "";
  top: calc(50% - 50px);
  left: calc(50% - 15px);
  width: 50px;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid #e445a1;
}

#flow > .inner > ul > li:not(.ya) {
  font-size: 1em;
  margin-bottom: 1.1em;
  width: 220px;
  max-width: calc((100% -3em) / 4);
  display: flex;
  flex-direction: column;
}

#flow > .inner > ul > li:not(.ya):last-child {
  margin-right: 0;
}

#flow > .inner > ul > li:not(.ya) .image {
  order: 1;
}

#flow > .inner > ul > li:not(.ya) .content {
  order: 2;
}

#flow > .inner > ul > li:not(.ya) .content p {
  order: 3;
  margin: 0;
  color: #2e5260;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 480px) {
  #flow > .inner > ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  #flow > .inner > ul > li.ya {
    position: relative;
    width: 100%;
    height: 35px;
  }
  #flow > .inner > ul > li.ya::after {
    position: absolute;
    content: "";
    top: 0;
    left: calc(50% - 40px);
    width: 40px;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-top: 25px solid #e445a1;
  }
  #flow > .inner > ul > li:not(.ya) {
    font-size: 1em;
    margin-bottom: 1.1em;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }
  #flow > .inner > ul > li:not(.ya):last-child {
    margin-right: 0;
  }
  #flow > .inner > ul > li:not(.ya) .image {
    order: 1;
    text-align: center;
  }
  #flow > .inner > ul > li:not(.ya) .content {
    order: 2;
  }
  #flow > .inner > ul > li:not(.ya) .content p {
    order: 3;
    margin: 0;
    color: #2e5260;
    font-weight: bold;
    text-align: center;
  }
}

#support {
  background-color: #FFF;/*e9e9e9*/
}

#support > .h1-outer {
  background-color: #093;/*やじるし帯e9e9e9　0071ba*/
  color: #fff;
}

#support > .h1-outer > h1 {
  width: 1200px;
  max-width: calc(100% - 1em);
  margin: 0 auto;
  font-size: 1.2em;
  text-align: center;
  padding: 0.6em 0 0.6em;
  position: relative;
}

#support > .h1-outer > h1::after {
  position: absolute;
  content: "";
  top: 100%;
  left: calc(50% - 50px);
  width: 50px;
  height: 0;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 25px solid #093;/*0071ba 三角やじるし▼*/
}

#support > .inner {
  width: 960px;
  max-width: calc(100% - 1em);
  margin: 40px auto 0;
  padding-bottom: 3em;
}

#support > .inner > .main {
  padding: 1em 2em;
  background-color: #FFF;/*e9f6fc*/
  border: solid 10px #ff5575;/*0071ba 火災保険説明文太枠*/
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

#support > .inner > .main em {
  color: #e445a1;
}

#support > .inner > .main > ul > li:nth-child(1) {
  margin-bottom: 1.5em;
}

#support > .inner > .main > ul > li:nth-child(2) {
  margin-bottom: 1.5em;
}

#support > .inner > .main > ul > li:nth-child(2) > span {
  display: block;
  font-size: 1.2em;
}

#support > .inner > .main > ul > li:nth-child(2) > span:nth-child(1) {
  text-align: left;
  margin-bottom: 0.5em;
}

#support > .inner > .main > ul > li:nth-child(2) > span:nth-child(2) {
  margin-bottom: 0.5em;
  max-width: 80%;
}

#support > .inner > .main > ul > li:nth-child(2) > span:nth-child(3) {
  text-align: right;
}

#support > .inner > .main > ul > li:nth-child(3) > ul {
  width: fit-content;
  margin: auto;
}

#support > .inner > .main > ul > li:nth-child(3) > ul > li {
  display: flex;
}

#support > .inner > .main > ul > li:nth-child(3) > ul > li span {
  margin-right: 0.5em;
  color: #e445a1;
}

#support > .inner > .main > ul > li:nth-child(3) > ul > li p {
  margin: 0;
}

#support > .inner > .bottom {
  color: #fff;
  background-color: #0071ba;
  margin: auto;
  padding: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-weight: bold;
}

#support > .inner > .bottom img {
  margin-right: 0.5em;
}

@media screen and (max-width: 480px) {
  #support > .inner {
    margin: 30px auto 0;
    padding: 1em 0;
  }
  #support > .inner > .main {
    padding: 1em;
    font-size: 1.2em;
  }
  #support > .inner > .main > ul > li:nth-child(1) {
    margin-bottom: 1.5em;
  }
  #support > .inner > .main > ul > li:nth-child(2) {
    margin-bottom: 1.5em;
  }
  #support > .inner > .main > ul > li:nth-child(2) > span {
    display: block;
    font-size: 1.2em;
  }
  #support > .inner > .main > ul > li:nth-child(2) img {
    width: 80%;
  }
  #support > .inner > .main > ul > li:nth-child(3) > ul {
    font-size: 0.8em;
  }
  #support > .inner > .bottom {
    display: block;
    text-align: center;
    font-size: 1.5em;
  }
  #support > .inner > .bottom img {
    margin-right: 0.2em;
  }
}

#voices {
  background-color: #bfe5f6;
}

#voices > .inner > ul {
  background-color: #fff;
  padding: 1em 1.5em;
  display: flex;
}

#voices > .inner > ul > li {
  width: calc(100% / 3);
  padding-left: 5em;
  margin-right: 4vw;
}

#voices > .inner > ul > li h2 {
  margin-bottom: 0.5em;
}

#voices > .inner > ul > li h2.red {
  color: #cc3333;
}

#voices > .inner > ul > li h2.blue {
  color: #0071ba;
}

#voices > .inner > ul > li p {
  font-size: 0.8em;
  margin: 0;
}

#voices > .inner > ul > li:nth-child(1) {
  background: url(../images/voicebg01.png) no-repeat left center;
  background-size: contain;
}

#voices > .inner > ul > li:nth-child(2) {
  background: url(../images/voicebg02.png) no-repeat left center;
  background-size: contain;
}

#voices > .inner > ul > li:nth-child(3) {
  background: url(../images/voicebg03.png) no-repeat left center;
  background-size: contain;
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  #voices {
    background-color: #bfe5f6;
  }
  #voices > .inner > ul {
    background-color: #fff;
    padding: 1em 1.5em;
    display: flex;
    flex-direction: column;
  }
  #voices > .inner > ul > li {
    width: 100%;
    padding-left: 5.5em;
    padding-bottom: 1em;
    margin-right: 0;
    margin-bottom: 1em;
    border-bottom: solid 1px #ccc;
  }
  #voices > .inner > ul > li h2 {
    margin-bottom: 0.5em;
  }
  #voices > .inner > ul > li h2.red {
    color: #cc3333;
  }
  #voices > .inner > ul > li h2.blue {
    color: #0071ba;
  }
  #voices > .inner > ul > li p {
    font-size: 1em;
    margin: 0;
  }
  #voices > .inner > ul > li:nth-child(3) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

#rei > .inner > ul {
  display: flex;
  justify-content: space-between;
}

#rei > .inner > ul > li {
  width: calc((100% - 1em) / 4);
}

#rei > .inner > ul > li > .image-outer {
  margin-bottom: 0.5em;
}

#rei > .inner > ul > li > .image-outer h2 {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #2e5260;
  margin-bottom: 0.2em;
}

#rei > .inner > ul > li > .main h3 {
  color: #e445a1;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5em;
}

#rei > .inner > ul > li > .main h4 {
  color: #2e5260;
  font-size: 1.2em;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

#rei > .inner > ul > li > .main h4 span {
  display: block;
}

#rei > .inner > ul > li > .main p {
  margin: 0;
  font-size: 0.9em;
  padding: 0 0.5em;
}

@media screen and (max-width: 480px) {
  #rei > .inner > ul {
    flex-direction: column;
  }
  #rei > .inner > ul > li {
    width: 100%;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: solid 1px #ccc;
  }
  #rei > .inner > ul > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  #rei > .inner > ul > li > .image-outer {
    text-align: center;
  }
  #rei > .inner > ul > li > .image-outer h2 {
    font-size: 1.2em;
  }
  #rei > .inner > ul > li > .main h3 {
    font-size: 1.2em;
  }
  #rei > .inner > ul > li > .main h4 {
    font-size: 1em;
  }
  #rei > .inner > ul > li > .main h4 span {
    display: inline-block;
    margin-right: 0.5em;
    font-weight: bold;
  }
}

#faq {
  background-color: #EEE;/*bfe5f6 FAQ 背景*/
}

#faq > .inner > .main {
  background-color: #fff;
  padding: 3em;
  width: 960px;
  max-width: 100%;
  margin: auto;
}

#faq > .inner > .main dl {
  margin: 0;
}

#faq > .inner > .main dl dt {
  background: url(../images/faq-q.png) no-repeat left top;
  padding: 0.1em 1em 0.5em 3em;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

#faq > .inner > .main dl dd {
  background: url(../images/faq-a.png) no-repeat left 2.5em top;
  padding: 0 1em 1.5em 6.5em;
  margin-bottom: 1.5em;
  border-bottom: solid 1px #ccc;
}

#faq > .inner > .main dl dd:last-of-type {
  padding: 0 1em 0 6.5em;
  margin-bottom: 0;
  border-bottom: none;
}

@media screen and (max-width: 480px) {
  #faq > .inner > .main {
    padding: 1em;
  }
  #faq > .inner > .main dl dt {
    background-size: 40px;
    padding: 0 0 0.5em 3em;
    font-size: 1em;
  }
  #faq > .inner > .main dl dd {
    background: url(../images/faq-a.png) no-repeat left 1em top;
    background-size: 40px;
    padding: 0 0 1em 4em;
    margin-bottom: 1em;
    font-size: 0.9em;
  }
  #faq > .inner > .main dl dd:last-of-type {
    padding: 0 0 0 4em;
    margin-bottom: 0;
    border-bottom: none;
  }
}

#confirm,
#contact-form {
  padding: 3em 0 3em;
  background-color: #e9e9e9;
}

#confirm > .inner,
#contact-form > .inner {
  background-color: #fff;
  padding: 1em 3em 3em;
  width: 960px;
  max-width: calc(100% - 2em);
}

#confirm > .inner > form#mailformpro .mfp_colored,
#contact-form > .inner > form#mailformpro .mfp_colored {
  background-color: #fff;
}

#confirm > .inner > form#mailformpro dl,
#contact-form > .inner > form#mailformpro dl {
  background-color: #fff;
  margin: 0;
}

#confirm > .inner > form#mailformpro dl.order,
#contact-form > .inner > form#mailformpro dl.order {
  display: none;
}

#confirm > .inner > form#mailformpro dl dt,
#confirm > .inner > form#mailformpro dl dd,
#contact-form > .inner > form#mailformpro dl dt,
#contact-form > .inner > form#mailformpro dl dd {
  font-size: 16px;
}

#confirm > .inner > form#mailformpro dl dt,
#contact-form > .inner > form#mailformpro dl dt {
  width: 250px;
  text-align: left;
  padding-left: 10px;
}

#confirm > .inner > form#mailformpro dl dt .must,
#confirm > .inner > form#mailformpro dl dt .notmust,
#contact-form > .inner > form#mailformpro dl dt .must,
#contact-form > .inner > form#mailformpro dl dt .notmust {
  background-color: #ff0000;
  border: none;
  text-shadow: none;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: normal;
  margin: 0px 10px;
  border-radius: 4px;
  box-shadow: none;
  background-image: none;
  background-size: 100% 100%;
  float: right;
  color: #fff;
}

#confirm > .inner > form#mailformpro dl dt .notmust,
#contact-form > .inner > form#mailformpro dl dt .notmust {
  background-color: #0066cc;
}

#confirm > .inner > form#mailformpro dl dd,
#contact-form > .inner > form#mailformpro dl dd {
  padding: 10px 5px 10px 270px;
}

#confirm > .inner > form#mailformpro dl dd input[type="text"],
#confirm > .inner > form#mailformpro dl dd input[type="email"],
#confirm > .inner > form#mailformpro dl dd input[type="tel"],
#contact-form > .inner > form#mailformpro dl dd input[type="text"],
#contact-form > .inner > form#mailformpro dl dd input[type="email"],
#contact-form > .inner > form#mailformpro dl dd input[type="tel"] {
  min-width: 90%;
}

#confirm > .inner > form#mailformpro dl dd input::placeholder,
#confirm > .inner > form#mailformpro dl dd textarea::placeholder,
#contact-form > .inner > form#mailformpro dl dd input::placeholder,
#contact-form > .inner > form#mailformpro dl dd textarea::placeholder {
  color: #999;
}

#confirm > .inner > form#mailformpro dl dd input[name="ご注文個数"],
#contact-form > .inner > form#mailformpro dl dd input[name="ご注文個数"] {
  width: 12em;
}

#confirm > .inner > form#mailformpro dl dd .with-label > li > label .must,
#confirm > .inner > form#mailformpro dl dd .with-label > li > label .notmust,
#contact-form > .inner > form#mailformpro dl dd .with-label > li > label .must,
#contact-form > .inner > form#mailformpro dl dd .with-label > li > label .notmust {
  background-color: #ff0000;
  border: none;
  text-shadow: none;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: normal;
  margin: 0px 10px;
  border-radius: 4px;
  box-shadow: none;
  background-image: none;
  background-size: 100% 100%;
  float: right;
  color: #fff;
}

#confirm > .inner > form#mailformpro dl dd .with-label > li > label .notmust,
#contact-form > .inner > form#mailformpro dl dd .with-label > li > label .notmust {
  background-color: #0066cc;
}

#confirm > .inner > form#mailformpro dl dd .with-label > li input[type="text"],
#contact-form > .inner > form#mailformpro dl dd .with-label > li input[type="text"] {
  width: 200px;
  max-width: 90%;
  min-width: inherit;
}

#confirm > .inner > form#mailformpro dl dd p,
#contact-form > .inner > form#mailformpro dl dd p {
  font-size: small;
  margin: 0;
}

#confirm > .inner > form#mailformpro button.mfp_element_submit,
#contact-form > .inner > form#mailformpro button.mfp_element_submit {
  border: none;
  width: 340px;
  height: 80px;
  text-shadow: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#confirm > .inner > form#mailformpro button.mfp_element_submit:hover,
#contact-form > .inner > form#mailformpro button.mfp_element_submit:hover {
  opacity: 0.8;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

#confirm > .inner > form#mailformpro .mfp_element_textarea,
#contact-form > .inner > form#mailformpro .mfp_element_textarea {
  width: 100% !important;
  min-height: 80px !important;
}

#confirm > .inner > form#mailformpro .mfp_element_submit,
#contact-form > .inner > form#mailformpro .mfp_element_submit {
  font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN",
 "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  display: inline-block;
  font-size: 1.6em;
  border: none;
  background-image: none;
  background-color: #cc3333 !important;
  box-shadow: 3px 3px 0 #970000;
  color: #fff;
  border-radius: 0.3em;
  position: relative;
  line-height: 1;
  text-align: center;
  margin: auto;
}

#confirm > .inner > form#mailformpro .mfp_element_submit::after,
#contact-form > .inner > form#mailformpro .mfp_element_submit::after {
  position: absolute;
  content: "";
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.4em solid #fff;
  right: 0.5em;
  top: calc(50% - 0.4em);
}

#confirm > .inner > form#mailformpro .mfp_element_submit:active, #confirm > .inner > form#mailformpro .mfp_element_submit:focus,
#contact-form > .inner > form#mailformpro .mfp_element_submit:active,
#contact-form > .inner > form#mailformpro .mfp_element_submit:focus {
  outline: none;
}

#confirm > .inner > form#mailformpro .privacy,
#contact-form > .inner > form#mailformpro .privacy {
  margin: 2em auto;
  width: 700px;
  max-width: 100%;
  border: solid 1px #ccc;
  padding: 1em;
  height: 16em;
  overflow: auto;
  font-size: 0.7em;
}

#confirm > .inner > form#mailformpro .privacy h3,
#contact-form > .inner > form#mailformpro .privacy h3 {
  text-align: center;
}

#confirm > .inner > form#mailformpro #validation-errors,
#contact-form > .inner > form#mailformpro #validation-errors {
  font-size: 0.8em;
  background-color: #fff1fb;
  color: #cc0000;
  padding: 1em;
  margin-bottom: 1em;
}

#confirm > .inner form .formBtm {
  margin-top: 2em;
}

@media screen and (max-width: 768px) {
  #confirm > .inner > form#mailformpro dl dt,
  #confirm > .inner > form#mailformpro dl dd,
  #contact-form > .inner > form#mailformpro dl dt,
  #contact-form > .inner > form#mailformpro dl dd {
    font-size: 16px;
  }
  #confirm > .inner > form#mailformpro dl dt,
  #contact-form > .inner > form#mailformpro dl dt {
    width: 100%;
    padding: 10px 10px 5px 5px;
  }
  #confirm > .inner > form#mailformpro dl dt .must,
  #confirm > .inner > form#mailformpro dl dt .notmust,
  #contact-form > .inner > form#mailformpro dl dt .must,
  #contact-form > .inner > form#mailformpro dl dt .notmust {
    float: none;
    display: inline-block;
  }
  #confirm > .inner > form#mailformpro dl dd,
  #contact-form > .inner > form#mailformpro dl dd {
    padding: 0 10px 10px 10px;
  }
  #confirm > .inner > form#mailformpro dl dd .with-label > li > label .must,
  #confirm > .inner > form#mailformpro dl dd .with-label > li > label .notmust,
  #contact-form > .inner > form#mailformpro dl dd .with-label > li > label .must,
  #contact-form > .inner > form#mailformpro dl dd .with-label > li > label .notmust {
    margin: 0 10px 0 0;
    float: none;
    display: inline-block;
  }
  #confirm > .inner > form#mailformpro dl dd .with-label > li input[type="text"],
  #contact-form > .inner > form#mailformpro dl dd .with-label > li input[type="text"] {
    width: 200px;
    max-width: 90%;
    min-width: inherit;
  }
  #confirm > .inner > form#mailformpro button.mfp_element_submit,
  #contact-form > .inner > form#mailformpro button.mfp_element_submit {
    background: url(../images/btn01.png) no-repeat center center;
    background-size: contain;
    max-width: 340px;
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  #confirm,
  #contact-form {
    background-size: 5em;
    padding: 2em 0;
  }
  #confirm > .inner,
  #contact-form > .inner {
    padding: 1em;
  }
  #confirm > .inner > form#mailformpro,
  #contact-form > .inner > form#mailformpro {
    padding: 0;
  }
}

.returnToHome {
  margin-top: 3em;
  text-align: center;
}

/* footer
-------------------------------------------------------------- */
#footer {
  background-color: #4d4d4d;
  color: #fff;
  font-size: 0.7em;
}

#footer > .inner {
  padding: 2em 0;
  width: 960px;
  max-width: calc(100% - 2em);
  margin: 0 auto;
  text-align: center;
}

#footer > .inner ul {
  margin: 0 1em;
}

#footer > .inner ul li {
  list-style: none;
}

#footer > .inner ul li label {
  display: inline-block;
  margin-right: 1em;
}

#footer p {
  text-align: center;
  padding: 1em;
  margin: 0;
}

@media screen and (max-width: 480px) {
  #footer > .inner {
    display: block;
  }
  #footer > .inner .ftr-logo {
    margin: 0;
  }
  #footer > .inner ul {
    margin: 0;
  }
}

/* misc
-------------------------------------------------------------- */
#fixed-contact {
  background-color: #fff;
  border-top: solid 1px #ccc;
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.5em;
  -webkit-box-shadow: 0 0 16px #666;
  -moz-box-shadow: 0 0 16px #666;
  -ms-box-shadow: 0 0 16px #666;
  -o-box-shadow: 0 0 16px #666;
  box-shadow: 0 0 16px #666;
}

#fixed-contact ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

#fixed-contact ul li {
  display: block;
  margin-right: 0;
}

#fixed-contact ul li:last-child {
  margin-left: 0.5em;
}

#fixed-contact ul li a img {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#fixed-contact ul li a img:hover {
  opacity: 0.8;
}

#fixed-contact ul li > .toformBtn {
  width: 100%;
}

#fixed-contact ul li > .toformBtn a {
  margin: 0 auto;
  font-size: 1.2em;
}

#fixed-contact ul li > .toformBtn a span.time {
  font-size: small;
}

@media screen and (max-width: 768px) {
  #fixed-contact {
    display: block;
  }
}

@media screen and (max-width: 360px) {
  #fixed-contact ul li:last-child {
    margin-left: 5px;
  }
}

#totop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  opacity: 0.6;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  border: solid 1px #fff;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#totop .arrow {
  position: absolute;
  top: calc(50% - 5px);
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 12px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}

#totop:hover {
  opacity: 1;
}

.flt-L {
  float: left;
}

.flt-R {
  float: right;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.em {
  font-size: 34px;
  font-weight: bold;
  display: inline-block;
}

.f-M {
  font-size: 16px;
}

.f-L {
  font-size: 24px;
}

.f-LL {
  font-size: 36px;
}

@media screen and (max-width: 768px) {
  .em {
    font-size: 24px;
  }
  .f-M {
    font-size: 16px;
  }
  .f-L {
    font-size: 20px;
  }
  .f-LL {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .em {
    font-size: 20px;
  }
  .f-M {
    font-size: 16px;
  }
  .f-L {
    font-size: 20px;
  }
  .f-LL {
    font-size: 20px;
  }
}

.uline {
  background: linear-gradient(to bottom, rgba(255, 255, 0, 0) 60%, yellow 60%, yellow 0) !important;
}

.op img {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.op img:hover {
  opacity: 0.8;
}

.c-red {
  color: #ff0000;
}

.both10 {
  clear: both;
  height: 10px;
}

.both20 {
  clear: both;
  height: 20px;
}

.both30 {
  clear: both;
  height: 30px;
}

.both50 {
  clear: both;
  height: 50px;
}

.mt00 {
  margin-top: 0 !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb00 {
  margin-bottom: 0 !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.pt00 {
  padding-top: 0 !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pl00 {
  padding-left: 0 !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pr00 {
  padding-right: 0 !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb00 {
  padding-bottom: 0 !important;
}

.forWide {
  display: block !important;
}

.for768,
.for480,
.for320 {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .for768 {
    display: block !important;
  }
  .forWide,
  .for480,
  .for320 {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .for480 {
    display: block !important;
  }
  .forWide,
  .for768,
  .for320 {
    display: none !important;
  }
}

@media screen and (max-width: 320px) {
  .for320 {
    display: block !important;
  }
  .forWide,
  .for768,
  .for480 {
    display: none !important;
  }
}

.pc {
  display: initial;
}

.mb {
  display: none;
}

.mb768 {
  display: none;
}

.mb380 {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .mb768 {
    display: initial;
  }
}

@media screen and (max-width: 480px) {
  .pc {
    display: none;
  }
  .mb768 {
    display: none;
  }
  .mb {
    display: initial;
  }
}

@media screen and (max-width: 380px) {
  .mb {
    display: initial;
  }
  .mb380 {
    display: initial;
  }
}