@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/**/
/*==========================================
Common CSS
==========================================*/
body {
  position: relative;
  font-size: clamp(0.875rem, 0.774rem + 0.43vw, 1.125rem); /*375～1300：14～18px*/
  line-height: 1.6;
  color: #000;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
  font-weight: 500;
  animation: fadein 1s forwards;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
img {
  max-width: 100%;
  vertical-align: middle;
}
/*-------------
見出し
---------------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}
/*-------------
column
---------------*/
.wrap1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrap1040 {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 767px) {
  .wrap1200, .wrap1000 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/*-------------

---------------*/ :root {
  /**/
  --space120: clamp(3.75rem, 2.23rem + 6.49vw, 7.5rem);
  --space80: clamp(2.5rem, 1.486rem + 4.32vw, 5rem);
  --space60: clamp(1.875rem, 1.115rem + 3.24vw, 3.75rem);
  --space40: clamp(1.25rem, 0.743rem + 2.16vw, 2.5rem);
  --space30: clamp(0.938rem, 0.511rem + 1.82vw, 1.875rem);
  /**/
  --orange: #F07700;
  /*375～1200間*/
  --fs30: clamp(1.5rem, 1.33rem + 0.73vw, 1.875rem); /*24～30*/
  --fs24: clamp(1.125rem, 0.955rem + 0.73vw, 1.5rem); /*18～24*/
  --fs14: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem); /*12～14*/
}
/*-------------
表示・非表示
---------------*/
@media screen and (min-width:768px) { /*PC*のみで表示*/
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}
@media screen and (max-width:767px) { /*スマホのみで表示*/
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}
/*-------------
link
---------------*/
a {
  text-decoration: none;
  color: inherit;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  transition: .3s;
  opacity: .8;
}
a:active {
  text-decoration: none;
}
a.page-link {
  text-decoration: underline;
}
/*-------------
電話番号
---------------*/
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
  a[href^="tel:"] {
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  a[href^="tel:"]:hover {
    text-decoration: underline;
  }
}
/*==========================================
header
==========================================*/
header {
  display: flex;
  background: #fff;
  padding: 0 0 15px 12px;
}
header .higo {
  max-width: 190px;
}
header .code {
  font-size: 10px;
  margin: 12px 0 0 25px;
  text-align: center;
}
header .flex {
  width: 509px;
  display: flex;
  flex-direction: column;
  margin: 12px 0 0 25px;
}
header .flex .flex_top {
  display: flex;
}
header .kfg {
  max-width: 182.72px;
}
header .kagoshima {
  max-width: 127.5px;
}
header .flex .flex_bottom {
  display: flex;
  margin-top: 5px;
}
header .kfgs {
  max-width: 105px;
}
header .kyu_ds {
  max-width: 190.91px;
}
header .creation {
  max-width: 154px;
}
header .flex .flex_top div, header .flex .flex_bottom div {
  margin-right: 30px;
}
@media screen and (max-width:767px) {
  header {
    padding: 0 0 5px 5px;
  }
  header .higo {
    width: 98px;
  }
  header .flex {
    margin-left: 5px;
  }
  header .kfg {
    max-width: 27px;
    margin-left: 0px;
  }
}
/*----------------------------------------------------
main
------------------------------------------------------*/
@media screen and (min-width:768px) {
  main {
    min-width: 1300px;
  }
}
/*----------------------------------------------------
fv
------------------------------------------------------*/
.fv {
  background-image: linear-gradient(#f8d1cd, #f6faeb);
}
/*----------------------------------------------------
present
------------------------------------------------------*/
.present {
  background-image: linear-gradient(#f6faeb, #f8d1cd);
  padding-top: var(--space60);
  padding-bottom: var(--space60);
}
.present__inner {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: var(--space80);
}
.present__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.present__subTtl {
  color: var(--orange);
  text-decoration: underline;
}
.present__detail {
  display: flex;
  margin-top: var(--space40);
  margin-bottom: var(--space40);
}
.present__detailA {
  border-right: 1px solid var(--orange);
  padding-right: var(--space60);
  padding-left: var(--space40);
  text-align: center;
}
.present__detailB {
  padding-left: var(--space60);
  padding-right: var(--space40);
  text-align: center;
}
.present__memo {
  text-indent: -1em;
  padding-left: 1em;
  margin-left: var(--space40);
  margin-right: var(--space40);
}
@media screen and (max-width:767px) {
  .present {
    padding-top: 0;
  }
  .present__inner {
    padding: 1.25rem;
  }
  .present__detail {
    flex-direction: column;
  }
  .present__detailA {
    border-right: 0;
    border-bottom: 1px solid var(--orange);
    padding: 0;
    padding-bottom: var(--space60);
  }
  .present__detailB {
    padding: 0;
    padding-top: var(--space60);
  }
  .present__memo {
    margin: 0;
  }
}
.kumamonPay {
  background: #FFFFC8;
  margin-right: var(--space40);
  margin-left: var(--space40);
  margin-top: var(--space60);
  padding: var(--space40) var(--space60);
  display: flex;
  align-items: center;
  gap: var(--space60);
}
.kumamonPay__logo {
  text-align: center;
}
.kumamonPay__dl {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 1rem;
}
.kumamonPay__qr {
  max-width: 100px;
}
.kumamonPay__btn {
  max-width: 273px;
}
@media screen and (max-width:767px) {
  .kumamonPay {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }
  .kumamonPay__dl {
    gap: 15px;
  }
}
.method {
  margin-top: var(--space80);
}
.method__ttl {
  background: url("images/method__ttl-bg.png");
  height: 77px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 77px;
  font-size: var(--fs30);
}
.method__detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space40);
}
.method__detailQr {
  text-align: center;
}
.method__detailStep dl + dl {
  margin-top: 1em;
}
.method__detailStep dd {
  margin-top: .5em;
}
.method__detailStepMemo {
  margin-top: 2em;
}
.method__detailStepMemo span {
  font-size: var(--fs14);
}
.method__cv {
  margin-top: var(--space60);
  display: flex;
  justify-content: center;
}
@media screen and (max-width:768px) {
  .method__ttl {
    height: 60px;
    line-height: 60px;
  }
  .method__detail {
    grid-template-columns: 1fr;
  }
  .method__detailStep dt {
    max-width: 50px;
  }
  .method__detailQr {
    max-width: 60%;
    margin: 0 auto;
  }
  .method__detailStep {
    margin-top: var(--space40);
  }
}
/*----------------------------------------------------
overview
------------------------------------------------------*/
.overview {
  padding: var(--space60) 0;
}
.overview__ttl {
  font-size: var(--fs30);
  text-align: center;
}
.overviewList {
  margin-top: var(--space40);
}
.overviewList__listTtl {
  background: #E25762;
  width: 100%;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
.overviewList__listTxt {
  display: flex;
  justify-content: center;
  margin-top: .5em;
}
.overviewList__listTxt--large {
  font-size: var(--fs24);
}
.overviewList__listTxt li {
  text-indent: -1em;
  padding-left: 1em;
}
.overviewList__listTxt li span {
  color: #E25762;
}
.overviewList__table {
  width: 100%;
  margin-top: 1em;
  display: grid;
}
.overviewList__table thead, .overviewList__table tbody, .overviewList__table tr {
  display: contents;
}
.overviewList__table th, .overviewList__table td {
  display: block;
}
.overviewList__table th {
  background: #F8ECED;
  padding: 10px 20px;
}
.overviewList__table td {
  padding: 10px 20px;
}
.overviewList__table li {
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (min-width:768px) {
  .overview__pc {
    display: inline-block;
	    text-indent: -1em;
  padding-left: 1em;
  }
  .overview__sp {
    display: none;
	  visibility: hidden
  }
}
@media screen and (max-width:767px) {
  .overview__pc {
    display: none;
	  visibility: hidden
  }
  .overview__sp {
    display: inline-block;
	    text-indent: -1em;
  padding-left: 1em;
  }
}
/*tarms*/
.overviewList__table--tarms {
  grid-template-columns: 1fr 1fr;
}
.overviewList__table--tarms th {
  border-bottom: solid 1px #707070;
  border-top: solid 1px #707070;
  text-align: left;
}
.overviewList__table--tarms td {
  border-bottom: solid 1px #707070;
}
.overviewList__table--tarms th + th, .overviewList__table--tarms td + td {
  border-left: 1px solid #707070;
}
@media screen and (max-width:767px) {
  .overviewList__table--tarms {
    grid-template-columns: 1fr;
  }
  .overviewList__table--tarms .item1 {
    order: 1;
  }
  .overviewList__table--tarms .item2 {
    order: 3;
  }
  .overviewList__table--tarms .item3 {
    order: 2;
  }
  .overviewList__table--tarms .item4 {
    order: 4;
  }
  .overviewList__table--tarms th + th, .overviewList__table--tarms td + td {
    border-left: none;
  }
  .overviewList__table td {
    padding: 10px;
  }
  .overviewList__table--tarms .item3 {
    border-bottom: none;
  }
}
/*method*/
.overviewList__table--method {
  grid-template-columns: 1fr 2fr;
  border-bottom: 1px solid #707070;
}
.overviewList__table--method th {
  border-top: 1px solid #707070;
  text-align: left;
}
.overviewList__table--method td {
  border-top: 1px solid #707070;
  border-left: 1px solid #707070;
}
.overviewList__table--method th {
  display: flex;
  align-items: center;
}
.overviewList__table--method dl {
  display: flex;
}
.overviewList__table--method dl + dl {
  margin-top: 10px;
}
.overviewList__table--method dt {
  background: #F8ECED;
  width: 100px;
  padding: .5em 0;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overviewList__table--method dd {
  padding: .5em;
}
.overviewList__table--method .item8 {
  padding: 0;
}
.overviewList__table--method .row2 {
  padding: 10px 20px;
}
.overviewList__table--method .row2 + .row2 {
  border-top: dashed 1px #707070;
}
@media screen and (max-width:767px) {
  .overviewList__table--method {
    grid-template-columns: 1fr;
  }
  .overviewList__table--method .row2 {
    padding: 10px;
  }
  .overviewList__table--method td {
    border-left: none;
  }
}
/*----------------------------------------------------
webAccount
------------------------------------------------------*/
.webAccount {
  background: #0C77A5;
  padding: var(--space40) var(--space80);
}
@media screen and (max-width:767px) {
  .webAccount {
    padding: var(--space40);
  }
}
.webAccount__inner {
  background: #fff;
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 10px;
  padding: var(--space60) var(--space80);
  box-sizing: border-box;
}
@media screen and (max-width:767px) {
  .webAccount__ttl-l {
    max-width: 80%;
    margin: 0 auto;
  }
  .webAccount__ttl-l--m {
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
  }
}
.webAccount__cnt {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: var(--space40);
}
.webAccount__list {
  margin-top: .5em;
  font-size: var(--fs24);
  font-weight: 700;
}
.webAccount__list li {
  text-indent: -1em;
  padding-left: 1em;
}
.webAccount__memo {
  margin-top: 1em;
}
.webAccount__cv {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space30);
  margin-top: var(--space30);
}
@media screen and (max-width:767px) {
  .webAccount__inner {
    padding: 20px;
  }
  .webAccount__cnt {
    flex-direction: column;
  }
  .webAccount__img {
    max-width: 60%;
    margin: 0 auto;
  }
}
/*----------------------------------------------------
attention
------------------------------------------------------*/
.attention {
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--space60) 20px;
}
.attention__ttl--l {
  color: #0C77A5;
  margin-top: .5em;
}
.attention li {
  text-indent: -1em;
  padding-left: 1em;
}
/*----------------------------------------------------
contact
------------------------------------------------------*/
.contact {
  border-top: 1px solid #707070;
}
.contact__wrap {
  max-width: 1080px;
  padding: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
@media screen and (max-width:767px) {
  .contact__wrap {
    padding: 5px;
    gap: 10px;
  }
}
/*----------------------------------------------------
footer
------------------------------------------------------*/
footer .txt-area {
  background: #3c4950;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 100px;
  font-size: 0.875rem;
}
footer .txt-area img.logo-higobank {
  max-width: 364px;
}
footer .txt-area p.privacy {
  text-decoration: underline;
  margin-top: 30px;
}
footer .txt-area p.privacy a {
  color: #fff;
}
footer .txt-area p.bankcode {
  margin-top: 10px;
}
footer .txt-area p.copyright {
  font-size: 0.75rem;
  margin-top: 20px;
}
@media screen and (max-width:767px) {
  footer .txt-area img.logo-higobank {
    width: 90%;
  }
}
.cv {
  width: 100%;
  background: #F07700;
  padding: 15px;
  text-align: center;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
}