@charset "UTF-8";
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/
/* import reset */
/*===============================================
 *	全体
===============================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");
@import url("https://fonts.cdnfonts.com/css/d-din");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");
@import url("https://db.onlinewebfonts.com/c/251039e6849ad977a8bfc40b564dce89?family=Didot");
* {
  font-family: "Noto Sans JP", sans-serif; }

html {
  font-size: calc((100vw - 320px) / 140 + 16px); }

body {
  color: #112044;
  font-size: 100%;
  height: 100%;
  overflow: hidden; }

body.fixed {
  width: 100%;
  height: 100%;
  position: fixed; }

html,
body {
  min-height: 100vh;
  box-sizing: border-box; }

article {
  background-repeat: no-repeat;
  background-size: cover;
  letter-spacing: 0.08em;
  padding: 5% 5% 0;
  width: 100%; }

section {
  width: 100%; }

img {
  max-width: 100%;
  height: auto; }

.grd {
  background: linear-gradient(90deg, #fc4c5e 25%, #8a61f7 80%);
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.btns {
  margin: 0% auto 17%;
  width: 75vw; }

.btns a {
  color: #fff; }

.btns .blue {
  align-items: center;
  background: linear-gradient(103deg, #7267fd 0%, #619cff 72%);
  display: flex;
  justify-content: center; }

.btns .red {
  align-items: center;
  background: linear-gradient(103deg, #fd676b 0%, #fe7866 40%, #f58446 79%);
  display: flex;
  justify-content: center; }

.red {
  background: linear-gradient(103deg, #fd676b 0%, #fe7866 40%, #ff9961 79%); }

.purple {
  background: linear-gradient(103deg, #f83b32 0%, #da24e6 79%); }

.blue {
  background: linear-gradient(103deg, #7267fd 0%, #619cff 72%); }

.text-red {
  color: #f8355f;
  font-weight: 800; }

.fadeIn {
  opacity: 0;
  transition: 2s; }

.fadeIn.is-show {
  opacity: 1; }

.title-back,
.title-back02 {
  background-image: url(/assets/img-guest/title_back-7c3d94adb5a6113a6818bde77990e53183cf57f878b3274f7f04d225177ad8f6.png);
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
  width: 100%; }

.title-back {
  height: 16vw;
  margin-left: -6%;
  display: inline-block;
  padding: 0% 10% 4% 7%; }

.title-back02 {
  height: 15vw;
  margin-bottom: 0.3em;
  margin-left: -15%;
  display: inline-block;
  padding: 0% 12% 2% 17%; }

@media screen and (min-width: 768px) {
  .title,
  .titles {
    font-size: 4rem;
    font-weight: 700;
    z-index: 5; }
  .titles h2 {
    font-size: 4.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2; }
  .btns .blue {
    border-radius: 120px;
    box-shadow: 3px 5.5px 14px rgba(135, 137, 138, 0.44);
    font-size: 2.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-bottom: 6%;
    height: 6vh;
    padding: 9.5% 1% 10%; }
  .btns .red {
    border-radius: 150px;
    box-shadow: 3px 5.5px 14px rgba(135, 137, 138, 0.44);
    font-size: 3.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 10%;
    height: 7.7vw;
    padding: 10% 3%; } }

@media screen and (max-width: 767px) {
  .titles {
    font-size: 1.9rem; }
  .title {
    font-size: 1.5rem; }
  .title,
  .titles {
    font-weight: 700;
    padding-top: 5%;
    z-index: 5; }
  .title-sub {
    padding-left: 5%; }
  .title-sub .sub-msg {
    display: flex;
    justify-content: flex-end;
    padding-top: 3%;
    letter-spacing: 0.02em; }
  .titles h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.002em;
    line-height: 1.4; }
  .btns .blue {
    box-shadow: 3px 5.5px 14px rgba(135, 137, 138, 0.44);
    border-radius: 25px;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-bottom: 6%;
    height: 6vh;
    padding: 5.5% 1% 6%; }
  .btns .red {
    border-radius: 25px;
    box-shadow: 3px 5.5px 14px rgba(135, 137, 138, 0.44);
    display: flex;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 10%;
    height: 6vh;
    padding: 5% 3% 5%; } }

/*===============================================
 *	banner
===============================================*/
.banner {
  /* display: none; */
  position: fixed;
  z-index: 99998;
  bottom: 0;
  right: 0; }

.banner a {
  text-decoration: none; }

.close-button {
  position: absolute;
  z-index: 99999;
  border: none;
  cursor: pointer; }

.X::before,
.X::after {
  content: "";
  position: absolute;
  background: #000000; }

.X::before {
  transform: translate(-50%, -50%) rotate(45deg); }

.X::after {
  transform: translate(-50%, -50%) rotate(-45deg); }

@media screen and (min-width: 768px) {
  .banner {
    margin: -2% 20% 0;
    width: 60vw; }
  .X::before,
  .X::after {
    top: 7.5vw;
    left: 3vw;
    width: 3.5px;
    height: 4vw; } }

@media screen and (max-width: 767px) {
  .banner {
    margin-top: -6%; }
  .banner {
    width: 100%;
    margin: 0px; }
  .banner-close {
    top: 8px;
    right: 15px; }
  .banner-copy-br {
    display: none; }
  .X::before,
  .X::after {
    top: 58px;
    left: 5vw;
    width: 1px;
    height: 22px; } }

/*===============================================
 *	hamburger
===============================================*/
.container {
  width: 100%;
  overflow: hidden; }

.header {
  background: #fff;
  width: 100%; }

.header__inner {
  position: relative;
  z-index: 10; }

.hamburger {
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%; }

.header__logo {
  align-items: center;
  display: flex; }

.header__menu {
  background: #fff;
  position: fixed;
  visibility: hidden; }

.header__inner.active .header__menu {
  opacity: 1;
  visibility: visible; }

.header__menu-btn {
  align-items: end;
  background-color: #fc5c6d;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center; }

.header__menu-btn span:nth-child(-n+3) {
  background: #ffffff;
  display: block;
  position: absolute; }

.menu-msg {
  color: #fc5c6d; }

.menu__list {
  background: #fff;
  list-style: none;
  overflow-y: scroll; }

.guidance {
  background-image: url(/assets/img-guest/menu_sub_back-a5132ee7d9a1e8d2d1da63952fb7dda5a2fcd8ca5bb40f859ec7d509a7f70cf2.jpg);
  background-size: cover; }

.menu-list-sub {
  background-color: #fff;
  color: #112044; }

.menu-list-sub a {
  background-color: #fc5c6d;
  color: #fff;
  text-align: center; }

.menu-list-sub .btn-red {
  align-items: center;
  display: flex;
  justify-content: center; }

.menu__link {
  color: #112044;
  display: block; }

/* パソコンサイズ用のCSS  */
@media screen and (min-width: 768px) {
  .header {
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.23);
    width: 100%; }
  .header__logo {
    font-size: 0;
    height: 20vh;
    width: 36vw; }
  .header__menu {
    height: 100%;
    opacity: 0;
    overflow-y: scroll;
    position: fixed;
    transition: opacity .2s ease;
    top: 19.9vh;
    width: 100%;
    z-index: 5;
    -webkit-overflow-scrolling: touch; }
  .header__inner.active .header__menu {
    opacity: 1; }
  .header__menu-btn {
    border-radius: 50%;
    line-height: 200px;
    margin-left: 19%;
    height: 150px;
    padding: 5px;
    width: 150px; }
  .header__menu-btn span:nth-child(-n+3) {
    border-radius: 45px;
    width: 88px;
    height: 10px; }
  .header__menu-btn span:nth-child(1) {
    top: 60px;
    transition: all .2s ease; }
  .header__inner.active .header__menu-btn span:nth-child(1) {
    top: 68px;
    transform: rotate(45deg); }
  .header__menu-btn span:nth-child(2) {
    top: 84px;
    transition: all .2s ease; }
  .header__inner.active .header__menu-btn span:nth-child(2) {
    top: 68px;
    transform: rotate(-45deg); }
  .menu-msg {
    padding: 0 3%;
    font-size: 2.2rem; }
  .menu__list {
    border-top: 1px solid #d7d7d7;
    padding: 4% 8% 3%; }
  .guidance {
    padding: 1% 0 14%; }
  .menu-list-sub {
    border-radius: 60px;
    box-shadow: 5px 6px 8px rgba(135, 137, 138, 0.34);
    margin: 8% 6%;
    padding: 5%; }
  .menu-list-sub h4 {
    font-size: 3.43rem;
    font-weight: 500; }
  .menu-list-sub p {
    font-size: 1.6rem;
    margin: 2% 0 10%; }
  .menu-list-sub a {
    border-radius: 140px;
    font-size: 1.74rem;
    padding: 2% 6% 2.5%; }
  .menu-list-sub .btn-red {
    margin: 0; }
  .menu__link {
    font-size: 2.3rem;
    font-weight: 600;
    padding: 2.3% 2%; } }

@media screen and (max-width: 767px) {
  .header {
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.23);
    width: 100%; }
  .header__logo {
    font-size: 0;
    height: 10vh;
    margin-left: -1vw;
    width: 48vw; }
  .header__menu {
    height: calc(100vh - 50px);
    opacity: 0;
    overflow-y: scroll;
    position: fixed;
    top: 9.9vh;
    transition: opacity .2s ease;
    z-index: 5;
    width: 100%; }
  .header__inner.active .header__menu {
    opacity: 1; }
  .header__menu-btn {
    border-radius: 50%;
    line-height: 200px;
    margin-left: 14%;
    height: 50px;
    padding: 5px;
    width: 50px; }
  .header__menu-btn span:nth-child(-n+3) {
    border-radius: 45px;
    width: 24px;
    height: 3px; }
  .header__menu-btn span:nth-child(1) {
    top: 21px;
    transition: all .2s ease; }
  .header__inner.active .header__menu-btn span:nth-child(1) {
    top: 23px;
    transform: rotate(45deg); }
  .header__menu-btn span:nth-child(2) {
    top: 28px;
    transition: all .2s ease; }
  .header__inner.active .header__menu-btn span:nth-child(2) {
    top: 23px;
    transform: rotate(-45deg); }
  .menu-msg {
    padding: 3%; }
  .menu__list {
    border-top: 1px solid #d7d7d7;
    padding: 4% 8% 10%; }
  .guidance {
    padding: 1% 0 15%; }
  .menu-list-sub {
    border-radius: 7px;
    box-shadow: 5px 6px 8px rgba(135, 137, 138, 0.34);
    margin: 8% 6%;
    padding: 5%; }
  .menu-list-sub h4 {
    font-size: 1.13rem;
    font-weight: 500; }
  .menu-list-sub p {
    font-size: 0.74rem;
    margin: 3% 0 12%; }
  .menu-list-sub a {
    border-radius: 20px;
    font-size: 0.74rem;
    padding: 2% 6% 2.5%; }
  .menu-list-sub .btn-red {
    margin: 0; }
  .menu__link {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 5% 2%; }
  .menu__list li:nth-child(5) a {
    font-size: 0.9rem;
    padding: 5% 2% 0 !important; } }

/*===============================================
 *	TOP
===============================================*/
.top {
  padding: 0;
  color: #112044; }

.top .top-img {
  background-image: url(/assets/img-guest/top_ky-da440342e2f94f54cf3cbd96c6097887f0d30aa6b10957a1cecbdf5d255d944e.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

.top .top-img .red {
  position: relative; }

.top .top-img .red::after {
  background-image: url(/assets/img-guest/top_ky_btn-1e51a70496070983c82cfd0ccfb9022c073beb57e749aa7b874c2f328a3c9862.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 81%;
  transform: translateY(28%);
  width: 3vw; }

.top-title-comment {
  background-image: url(/assets/img-guest/top_comment_back-de6085ea0e13556e52eab27a05359d08af3f2a2499a83371dc217b8510af90bb.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 1%; }

.top-point {
  background-image: url(/assets/img-guest/point_box-9939f57a91ac4010e627e236d64b226008e335039a85ccc84da8113acabc9e84.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 1%;
  margin: 9% 9% 7%; }

.top-mainmsg {
  position: relative; }

.top-mainmsg::after {
  background-image: url(/assets/img-guest/top_title_Matchingapp-66f863fa3ef61fb85eac44f19efcb5ce0c6359574dbb5774179ea4d90639673f.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 31%;
  transform: skewY(-1deg) translateY(52%);
  width: 51vw; }

.top ul li {
  position: relative; }

.top ul li:before,
.top ul li:after {
  content: "";
  display: block;
  position: absolute; }

.top ul li:before {
  background: #fc5c6d; }

.top .arrow {
  color: #fc5c6d;
  display: inline-block;
  position: relative;
  transform: translateX(-25%) rotate(45deg);
  vertical-align: middle; }

.top .arrow::before,
.top .arrow::after {
  content: '';
  position: absolute;
  background: currentColor; }

.top .btn-msg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.top .btn-msg p {
  color: #6e6c88; }

.top .top-btn {
  position: relative;
  top: 2vw; }

body .top .login-btn {
  margin: 6vw auto;
  width: 47vw; }

.top .login-btn .red {
  background: #fff;
  border: solid 2px #ec327c;
  box-shadow: none; }

.login-btn a {
  color: #ec327c; }

@media screen and (min-width: 768px) {
  .top {
    padding: 0; }
  .top-img {
    padding: 51% 0 0%;
    width: 100%;
    height: 83.5vw; }
  .top .btns {
    margin: 0% auto 13%;
    width: 41vw; }
  .top .btns a {
    font-size: 2.3rem; }
  .top .top-img .red::after {
    left: 34vw !important;
    transform: translateY(27%);
    width: 3vw !important; }
  .top .btns a div {
    font-size: 3rem; }
  .top-mainmsg {
    display: flex;
    font-size: 10.5vw;
    font-weight: 600;
    justify-content: center;
    margin: 1% 0% 4%;
    line-height: 1; }
  .top ul {
    padding: 5% 0% 5% 8%;
    letter-spacing: 0.04em; }
  .top ul li {
    font-size: 3.3vw;
    font-weight: 700;
    padding-left: 26px;
    padding-bottom: 6%;
    width: 66vw; }
  .top ul li:before {
    border-radius: 55px;
    border: 1px solid #fc5c6d;
    height: 2.5rem;
    left: -3vw;
    top: 17px;
    width: 2.5rem; }
  .top ul li:after {
    border-left: 7.4px solid #ffffff;
    border-bottom: 7.4px solid #ffffff;
    border-radius: 41px 130px 42px 30px;
    height: 0.9rem;
    left: -2.3vw;
    top: 1.2rem;
    transform: rotate(-45deg);
    width: 1.5rem;
    -webkit-transform: rotate(-45deg); }
  .top-point h4 {
    display: flex;
    font-size: 4vw;
    font-weight: 900;
    justify-content: center;
    padding-top: 5%; }
  .top .btn-msg {
    margin-bottom: 10%; }
  .top .btn-msg h2 {
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 2%; }
  .top .btn-msg p {
    font-size: 2vw;
    letter-spacing: 0.02em; } }

@media screen and (max-width: 767px) {
  .top {
    padding: 0; }
  .top-img {
    padding: 17.5% 0;
    width: 100%; }
  .top-img .btns {
    margin: 36% auto 3%;
    width: 40vw; }
  .top-img .btns .red {
    border-radius: 25px;
    box-shadow: 3px 5.5px 14px rgba(135, 137, 138, 0.44);
    display: flex;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    height: 8.5vw;
    top: -2.2vw;
    padding: 2% 3%; }
  .top-mainmsg {
    display: flex;
    font-size: 3rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.3;
    padding: 0% 0% 8%; }
  .marck {
    font-weight: 900;
    margin: 0 -4%; }
  .top-point h4 {
    display: flex;
    font-size: 1rem;
    font-weight: 900;
    justify-content: center;
    padding-top: 5%; }
  .top ul {
    padding: 5% 0% 1% 6%;
    letter-spacing: 0.04em; }
  .top ul li {
    font-size: 0.75rem;
    font-weight: 800;
    padding-bottom: 5%;
    padding-left: 24px;
    padding-top: 1%; }
  .top ul li:before {
    border-radius: 30px;
    border: 1px solid #fc5c6d;
    height: 18px;
    left: 0;
    top: 3px;
    width: 18px; }
  .top ul li:after {
    border-left: 2.4px solid #ffffff;
    border-bottom: 2.4px solid #ffffff;
    border-radius: 35px 85px 38px 28px;
    height: 5px;
    left: 4px;
    top: 9px;
    transform: rotate(-45deg);
    width: 11px;
    -webkit-transform: rotate(-45deg); }
  .top .btn-msg {
    margin-bottom: 7%; }
  .top .btn-msg h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 2%; }
  .top .btn-msg p {
    font-size: 0.55rem;
    letter-spacing: 0.01em; }
  .top .login-btn .red {
    border-radius: 25px;
    display: flex;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 10%;
    height: 5vh;
    justify-content: center;
    padding: 5% 3% 5%; } }

/*===============================================
 *	worry
===============================================*/
.worries_point {
  background-image: url(/assets/img-guest/worries_point_back.logo-72355682210b8af3cec966c8bfd008278c673c62085bda604cab1ce33e6e91e7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -12.5%;
  padding: 2% 5% 0;
  height: 100%;
  width: 100%; }

.worry {
  padding: 0; }

.worry-list {
  margin: 13% auto;
  width: 88vw; }

@media screen and (min-width: 768px) {
  .worries_point {
    padding: 5% 5% 0%; }
  .worry .worry-list img {
    width: 90vw; } }

/*===============================================
 *	point
===============================================*/
.point {
  padding: 9.5rem 0 0rem; }

.point .point-title {
  background-image: url(/assets/img-guest/point_text_h2-34f3a85c2e748d39def22ef5464896d2b45162339ccb42a21443160093c6e6f1.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: -18%;
  width: 87%; }

.point-img img {
  margin-top: 215px; }

.point-text {
  color: #112044;
  padding: 1% 2% 2%; }

.point li p {
  position: relative; }

.point-therapist-list {
  display: flex;
  justify-content: center; }

.point .point02 {
  margin-left: -4%; }

@media screen and (min-width: 768px) {
  .point {
    padding: 37.5vw 0 2.5rem; }
  .point-text img {
    padding-top: 8%;
    width: 75vw; }
  .point h2 {
    font-size: 7.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6%;
    margin-left: 18%; }
  .point h2 span {
    font-size: 4rem; }
  .point h3 {
    font-size: 3.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5; }
  .point h3 span {
    font-size: 3.7rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.7; }
  .point h3 .shot {
    letter-spacing: -0.047em;
    line-height: 1.3; }
  .point h3 span span {
    font-size: 4.65rem;
    font-weight: 600;
    line-height: 1.3; }
  .point-text-sub {
    margin: 4% -2% 7%; }
  .point-text-sub .grd {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 4.7rem;
    margin-bottom: 3%; }
  .point-text-sub .note {
    text-align: center;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 2.8rem;
    padding-top: 52vw; }
  .point-text-sub .note span {
    margin-left: -1%; }
  .point ul {
    margin-top: 0%; }
  .point li {
    margin: -1% 1%; }
  .point li p {
    font-size: 0.67rem; }
  .point-therapist-list {
    height: 10vh;
    margin: -7% -2% -0%; }
  .point-therapist-list {
    text-align: center; }
  .point-therapist-list img {
    width: 36vw; }
  .point01 img {
    margin-top: 30%; }
  .point02 img {
    margin-top: 11%; } }

@media screen and (max-width: 767px) {
  .point h2 {
    font-size: 2.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: -1%;
    margin-left: 19.5%;
    padding-bottom: 3%; }
  .point h2 span {
    font-size: 1rem;
    padding-left: 6px; }
  .point h3 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
    padding-top: 5%;
    text-align: center;
    margin: 0 2%; }
  .point h3 span {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.065em;
    line-height: 1.7; }
  .point h3 .shot {
    letter-spacing: -0.047em;
    line-height: 1.3; }
  .point h3 span span {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.3; }
  .point-text-sub {
    margin: 4% -2% 12%; }
  .point-text-sub .grd {
    display: flex;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.7rem;
    margin-bottom: 3%;
    text-align: center;
    justify-content: center; }
  .point-text-sub .note {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1rem;
    margin-top: 3.5em;
    text-align: center; }
  .point-sp {
    display: flex;
    padding: 8% 11% 2% 5%;
    justify-content: center; }
  .point-text-sub .note span {
    margin-left: -1%; }
  .point ul {
    margin-bottom: 6vw;
    margin-top: 0%;
    padding: 0 5%; }
  .point li {
    margin: -1% 0%; }
  .point li p {
    font-size: 0.67rem; }
  .point-therapist-list {
    height: 22vh;
    margin: -7% -2% -0%; }
  .point-therapist-list img {
    width: 36vw; }
  .point01 img {
    margin-top: 30%;
    width: 40vw; }
  .point02 img {
    margin-top: 14%; } }

/*===============================================
 *	Voice
===============================================*/
.voice {
  background-color: #fff;
  padding: 0; }

.voice-list-wrapper .voice-back {
  background-color: #f8f8f8;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  height: auto; }

.voice-list-wrapper ul {
  align-items: stretch;
  display: flex;
  gap: 3%;
  justify-content: center; }

.voice-user {
  display: flex;
  align-items: center; }

.voice-name {
  box-sizing: border-box;
  color: #fff;
  display: flex;
  gap: 0%;
  height: 4vh;
  justify-content: center;
  line-height: 4vh;
  position: relative;
  text-align: center;
  width: 49vw; }

.voice-name::before {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-width: 2vh 0vh 2vh 1.5vh;
  border-color: transparent transparent transparent #f8f8f8;
  border-style: solid; }

.voice-name:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 2.1vh 1.5vh 2vh 0vh;
  border-color: transparent #f8f8f8 transparent transparent;
  border-style: solid; }

.voice .left {
  margin-left: 4.7%; }

@media screen and (min-width: 768px) {
  .voice .title-sub {
    margin-left: 4%;
    margin-top: 6%; }
  .voice .title {
    font-size: 5rem !important;
    padding-top: 11%;
    text-align: start;
    line-height: 1.7; }
  .voice .sub-msg {
    font-size: 2.3rem;
    font-weight: 800;
    margin: -15% 0 -1% 56vw; }
  .voice .sub-msg img {
    width: 29vw; }
  .voice-list-wrapper .voice-back {
    margin: 8% 0 10%;
    padding: 3%; }
  .voice-list-wrapper p {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.8;
    padding: 5% 3%; }
  .voice-user img {
    width: 35vw; }
  .voice-text {
    width: 60%;
    margin: auto 0; }
  .voice-name {
    font-size: 2.9rem;
    font-weight: 500;
    padding-bottom: 2%;
    padding-left: 4%; }
  .voice-name span {
    padding: 0 11%; }
  .voice-name:after {
    top: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-width: 7vh 4.2vh 7vh 0px; }
  .voice-name::before {
    border-width: 7vh 0px 7vh 4.2vh; }
  .voice .user03 {
    margin-bottom: 0; }
  .voice-name {
    gap: 0%;
    height: 15vh;
    line-height: 14vh;
    width: 45vw; } }

@media screen and (max-width: 767px) {
  .voice .title {
    font-size: 1.7rem;
    font-weight: 400;
    text-align: start;
    line-height: 1.6; }
  .voice .sub-msg {
    font-weight: 800;
    margin: -18% 0 0% 60%;
    width: 27%; }
  .voice-list-wrapper .voice-back {
    margin: 8% 0 10%;
    padding: 3%; }
  .voice-list-wrapper p {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.8;
    padding: 5% 3%; }
  .voice-user img {
    width: 35vw; }
  .voice-text {
    width: 60%;
    margin: auto 0; }
  .voice-name {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0vw 0 8vw 7%; }
  .voice .user03 {
    margin-bottom: 0; }
  .voice-name span {
    padding: 0 11%; } }

/*===============================================
 *	flow
===============================================*/
.flow {
  background-color: #fff7fc; }

.flow-list-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.flow-text {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center; }

.flow-text h3 {
  background-color: #e62da0;
  color: #fff; }

.flow .swiper-pagination-bullet {
  background-color: #8b8b8b; }

.flow .swiper-pagination-bullet-active {
  background-color: #e62da0; }

@media screen and (min-width: 768px) {
  .flow {
    padding: 11% 0 12%; }
  .flow .title-sub {
    margin-left: 5%; }
  .flow .title {
    font-size: 4.9rem;
    font-weight: 600; }
  .flow .title-back02 {
    margin-left: -15%;
    padding: 0% 12% 2% 19%; }
  .flow .title-sub .sub-msg {
    margin: -5% 0 -8% 29vw;
    width: 58vw; }
  .flow .title-sub .sub-msg img {
    width: 53vw; }
  .flow .text-red {
    font-size: 2.3rem; }
  .flow-list {
    margin-left: 8%;
    padding-top: 13%; }
  .flow-text {
    padding-top: 5%; }
  .flow-text h3 {
    border-radius: 10vh;
    font-size: 4.2rem;
    font-weight: 600;
    padding: 1%;
    width: 29vw; }
  .flow-text h4 {
    font-size: 4.05rem;
    font-weight: 700;
    margin: 6% 0 5%;
    width: 100%; }
  .flow-text p {
    font-size: 2.3rem;
    font-weight: 600; }
  .flow-img {
    width: 60vw; }
  .flow .swiper-horizontal {
    padding-bottom: 5%; }
  .flow .swiper-pagination-bullet {
    width: 62px;
    height: 1.7px;
    opacity: 1;
    border-radius: 6px; }
  .flow .swiper-pagination-bullet:nth-child(2) {
    margin-left: 30px; }
  .flow .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin-left: 15px; }
  .flow #mainview .swiper-pagination-bullet {
    margin-left: 25px; } }

@media screen and (max-width: 767px) {
  .flow {
    padding: 5% 0 12%; }
  .flow .title {
    font-size: 1.9rem;
    font-weight: 600;
    text-align: start;
    line-height: 1.3; }
  .flow .title-back02 {
    height: 15vw;
    margin-left: -15%;
    padding: 0% 12% 2% 13%; }
  .flow .sub-msg {
    font-weight: 800;
    margin: -10% 0 -8% 29%;
    width: 63vw; }
  .flow-list {
    margin-left: 8%;
    padding-top: 13%; }
  .flow-text {
    padding-top: 5%; }
  .flow-text h3 {
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1%;
    width: 29vw; }
  .flow-text h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 6% 0 5%;
    width: 100%; }
  .flow-text p {
    font-size: 0.6rem;
    font-weight: 600; }
  .flow-img {
    width: 60vw; }
  .flow .swiper-horizontal {
    padding-bottom: 18%; }
  .flow .swiper-pagination-bullet {
    width: 62px;
    height: 1.7px;
    opacity: 1;
    border-radius: 6px; }
  .flow .swiper-pagination-bullet:nth-child(2) {
    margin-left: 30px; }
  .flow .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin-left: 15px; }
  .flow #mainview .swiper-pagination-bullet {
    margin-left: 25px; } }

/*===============================================
 *	Initiatives
===============================================*/
.Initiatives {
  color: #112044; }

.Initiatives ul {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto; }

.Initiatives li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 50%; }

@media screen and (min-width: 768px) {
  .Initiatives {
    padding: 5% 4% 0; }
  .Initiatives .titles {
    font-size: 4.82rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .Initiatives .title-back {
    height: 15.5vw;
    margin-left: -10%;
    display: inline-block;
    padding: 0% 10% 6% 7%; }
  .Initiatives .title-sub {
    padding-left: 5%; }
  .Initiatives .title-sub .sub-msg {
    margin: -2% 0 -1% 38vw;
    width: 58vw; }
  .Initiatives .title-sub .sub-msg img {
    width: 53vw; }
  .Initiatives .Initiatives-shot img {
    width: 25vw; }
  .Initiatives img {
    width: 30vw; }
  .Initiatives li {
    margin: 3% 0% 10%; }
  .Initiatives li h4 {
    font-size: 3.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    padding: 8% 0 4%; }
  .Initiatives li p {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.04em; }
  .Initiatives .jbra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10vw 0; }
  .Initiatives .jbra img {
    width: 85vw !important; }
  .Initiatives .jbra p {
    color: #112044;
    text-align: center;
    margin: 3% 0; }
  .Initiatives .jbra p:nth-child(2) {
    font-weight: 700 !important;
    font-size: 3.1rem !important; }
  .Initiatives .jbra p:nth-child(4) {
    font-size: 1.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important; } }

@media screen and (max-width: 767px) {
  .Initiatives {
    padding: 5% 4% 0; }
  .Initiatives .titles {
    font-size: 1.82rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .Initiatives .sub-msg img {
    font-weight: 800;
    margin: -4% 2% -16% 5%;
    width: 66vw; }
  .Initiatives .title-back {
    height: 17vw;
    margin-left: -10%;
    padding: 1% 15% 4% 7%; }
  .Initiatives .title-sub {
    padding-left: 5%; }
  .Initiatives .sub-msg {
    margin-top: 0%;
    margin-bottom: 15%; }
  .Initiatives .Initiatives-shot img {
    width: 25vw; }
  .Initiatives img {
    width: 30vw; }
  .Initiatives li {
    margin: 3% 0% 10%; }
  .Initiatives li h4 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    padding: 8% 0 4%; }
  .Initiatives li p {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em; }
  .Initiatives .jbra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10vw 0; }
  .Initiatives .jbra img {
    margin: 0% 0 3%;
    width: 55vw; }
  .Initiatives .jbra p {
    color: #112044;
    text-align: center;
    margin: 3% 0; }
  .Initiatives .jbra p:nth-child(2) {
    font-weight: 700;
    font-size: 1.1rem; }
  .Initiatives .jbra p:nth-child(4) {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em; } }

/*===============================================
 *	btn-banner02
===============================================*/
.btn-banner02 {
  background-image: url(/assets/img-guest/btn-banner02_back-e7dbaaa7b8c06d36ca1e9a065f003a28cf3d6e4f0547f1b7f8f53152d63047c6.jpg);
  background-repeat: no-repeat;
  background-size: cover; }

.btn-banner02 h2 {
  display: flex;
  justify-content: center; }

.banner-text {
  display: flex;
  justify-content: center; }

.btn-banner02 .Note {
  color: #6e6c88; }

.btn-banner02 .CTA_img {
  display: flex;
  justify-content: end;
  padding-bottom: 3%; }

@media screen and (min-width: 767px) {
  .btn-banner02 {
    padding: 5%; }
  .btn-banner02 h2 {
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .banner-text {
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 4% 0 2%; }
  .btn-banner02 .Note {
    font-size: 2rem;
    padding-left: 3%; }
  .btn-banner02 .btns {
    margin: 10% 5% 12%;
    width: 50vw; }
  .btn-banner02 .CTA_img {
    padding-bottom: 3%; }
  .btn-banner02 img {
    width: 80vw; } }

@media screen and (max-width: 767px) {
  .btn-banner02 {
    padding: 5%; }
  .btn-banner02 h2 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .banner-text {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2;
    margin: 4% 0 2%; }
  .btn-banner02 .Note {
    font-size: 0.7rem;
    padding-left: 3%; }
  .btn-banner02 .btns {
    margin: 10% 5% 12%;
    width: 50vw; }
  .btn-banner02 .CTA_img {
    padding-bottom: 3%; }
  .btn-banner02 img {
    width: 80vw; } }

/*===============================================
 *	Choose
===============================================*/
.Choose {
  padding: 0; }

.Choose .title .text-red {
  color: #fff;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  padding-left: 4%; }

.Choose-top {
  padding: 0% 5% 0; }

.Choose dl {
  background-color: #fde7e9; }

.Choose dt {
  color: #fa6776; }

.Choose dd::after {
  content: "";
  display: inline-block;
  position: absolute; }

.Choose dd {
  color: #fa6776;
  position: relative; }

.Choose-what-wrapper {
  background-image: url(/assets/img-guest/sp_Choose-what_wrapper_back-c98e441495b59262e3c20f2a7f052512c8d14b652e6d787f6471dbced6f5d98a.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5% 5% 14%; }

@media screen and (min-width: 768px) {
  .Choose .title-sub {
    padding: 0; }
  .Choose .title {
    font-size: 5.2rem;
    font-weight: 500;
    letter-spacing: 0.04em; }
  .Choose .title-back {
    height: 19vw;
    margin-left: -6%;
    padding: 0% 5% 4% 0%;
    line-height: 1.8; }
  .Choose .title .shot {
    letter-spacing: -0.02em;
    margin-right: -2%; }
  .Choose .title-sub .sub-msg {
    margin: -2% 0 -1% 34vw;
    width: 58vw; }
  .Choose .title-sub .sub-msg img {
    width: 53vw; }
  .Choose .title .text-red {
    letter-spacing: -0.04em;
    padding-left: 4%; }
  .Choose .title .text-red span {
    font-size: 2.3rem; }
  .Choose .title .text-red span {
    font-size: 6.4rem;
    font-weight: 500;
    line-height: 1.1; }
  .Choose .sub-msg {
    font-size: 2rem;
    padding-left: 4%;
    padding-top: 2%; }
  .Choose ul {
    padding-top: 5%; }
  .Choose li {
    padding: 5% 1cap 7%; }
  .Choose dl {
    border-radius: 8vh;
    margin: 0% 5%;
    padding: 5% 8% 10%; }
  .Choose dt {
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0%; }
  .Choose dd::after {
    left: -3%;
    bottom: -6vh;
    width: 60.5vw;
    height: 4vh;
    border-radius: 30px;
    background: linear-gradient(90deg, #fa6776 30%, #fbb596 90%); }
  .Choose dd {
    font-weight: 600;
    font-size: 3.5rem;
    margin-left: -1%;
    padding-top: 2%; }
  .Choose-what-wrapper h2 {
    font-size: 4rem;
    font-weight: 700; }
  .Choose-what-wrapper h2 span {
    margin-left: -4%; }
  .Choose-what-wrapper h2 span span {
    margin-left: 3%; }
  .Choose-what-wrapper p {
    color: #112044c9;
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 2;
    margin: 8% 0% 9% 3%; }
  .Choose-what-wrapper h3 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.8;
    margin-left: 2%; }
  .Choose-what-wrapper h3 span {
    margin-left: -3%; }
  .Choose-what-wrapper .btns {
    margin: 16% 2% 17%;
    width: 68vw; } }

@media screen and (max-width: 767px) {
  .Choose .title-sub {
    padding: 0; }
  .Choose .title {
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-top: -5%;
    padding-top: 0% !important; }
  .Choose .title-back {
    height: 19vw;
    margin-left: -6%;
    padding: 0% 5% 4% 0%;
    line-height: 1.8; }
  .Choose .title-back02 {
    height: 17vw;
    margin-bottom: 0.3em;
    margin-left: -32%;
    display: inline-block;
    padding: 0% 12% 0% 30%; }
  .Choose .title .shot {
    letter-spacing: -0.02em;
    margin-right: -2%; }
  .Choose .title .text-red span {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.1; }
  .Choose .sub-msg {
    padding-left: 4%;
    padding-top: 2%; }
  .Choose .sub-msg img {
    margin: -5% 5% -7% 0;
    width: 63vw; }
  .Choose ul {
    padding-top: 5%; }
  .Choose li {
    padding: 5% 1cap 3%; }
  .Choose dl {
    border-radius: 15px;
    margin: 0% 5%;
    padding: 5% 8% 10%; }
  .Choose dt {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0%; }
  .Choose dd::after {
    left: -3%;
    bottom: -12px;
    width: 60.5vw;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #fa6776 30%, #fbb596 90%); }
  .Choose dd {
    font-weight: 600;
    font-size: 1.5rem;
    margin-left: -1%;
    padding-top: 1%; }
  .Choose-what-wrapper h2 {
    font-size: 1.34rem;
    font-weight: 700; }
  .Choose-what-wrapper h2 span {
    margin-left: -4%; }
  .Choose-what-wrapper h2 span span {
    margin-left: 3%; }
  .Choose-what-wrapper p {
    color: #112044c9;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 2;
    margin: 6% 0% 7% 3%; }
  .Choose-what-wrapper h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.8;
    margin-left: 2%; }
  .Choose-what-wrapper h3 span {
    margin-left: -3%; }
  .Choose-what-wrapper .btns {
    margin: 26% 2% 17%;
    width: 68vw; } }

/*===============================================
 *	Comparison
===============================================*/
.Comparison {
  padding: 0%;
  background-color: #fff7fc;
  padding: 0% 5% 5%; }

.Comparison-bottom p img {
  width: 90vw; }

.grd-red {
  background: linear-gradient(103deg, #fd676b 0%, #fe7866 40%, #ff9961 79%);
  display: inline-block;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media screen and (min-width: 768px) {
  .Comparison .title-sub {
    padding-left: 5%;
    padding-bottom: 6%; }
  .Comparison .titles {
    font-size: 5rem;
    font-weight: 600;
    padding-top: 2%; }
  .Comparison .text-red {
    font-size: 2rem; }
  .Comparison .title-back {
    height: 19vw;
    margin-left: -6%;
    padding: 0% 5% 4% 0%;
    line-height: 1.8; }
  .Comparison .title-sub .sub-msg {
    margin: -2% 0 -1% 34vw;
    width: 58vw; }
  .Comparison .title-sub .sub-msg img {
    width: 53vw; }
  .Comparison h3 {
    font-size: 3.1rem;
    font-weight: 800;
    letter-spacing: 0.002em;
    padding: 5% 0% 6% 7%; } }

@media screen and (max-width: 767px) {
  .Comparison .title-sub {
    padding-left: 5%;
    padding-bottom: 6%; }
  .Comparison .titles {
    font-weight: 600;
    padding-top: 0%; }
  .Comparison .title-back02 {
    font-weight: 400;
    height: 17vw;
    margin-bottom: 0.3em;
    margin-left: -26%;
    margin-top: -5%;
    padding: 0% 12% 0% 20%; }
  .Comparison .sub-msg img {
    margin: -5% 5% -3% 0;
    width: 54vw; }
  .Comparison h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.002em;
    padding: 5% 0% 6% 7%; } }

/*===============================================
 *	Video
===============================================*/
video {
  margin: 9% 11% 0;
  width: 77vw; }

/*===============================================
 *	btn-banner03
===============================================*/
.banner03-greeting {
  background-image: url(/assets/img-guest/banner_greeting_back-79c3b00f65fcf84040ffdc9c57de84f8969a0c88f2e73d394d2c634433487a57.jpg);
  background-repeat: no-repeat;
  background-size: cover; }

.btn-banner03 .CTA_img {
  display: flex;
  justify-content: end; }

@media screen and (min-width: 768px) {
  .banner03-greeting {
    padding: 5% 5% 0; }
  .btn-banner03 {
    padding: 9% 2%; }
  .btn-banner03 h2 {
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .btn-banner03 .banner-text03 {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin: 4% 0 2%; }
  .btn-banner03 .btns {
    margin: 10% 4% 12%;
    width: 64vw; }
  .btn-banner03 .CTA_img {
    padding-bottom: 3%; }
  .btn-banner03 img {
    width: 80vw; }
  .btn-banner03 .btn a {
    letter-spacing: 0.03em; } }

@media screen and (max-width: 767px) {
  .banner03-greeting {
    padding: 5% 5% 0; }
  .btn-banner03 {
    padding: 9% 2%; }
  .btn-banner03 h2 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.02em; }
  .btn-banner03 .banner-text03 {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin: 4% 0 2%; }
  .btn-banner03 .btns {
    margin: 10% 10% 12%;
    width: 64vw; }
  .btn-banner03 .CTA_img {
    padding-bottom: 3%; }
  .btn-banner03 img {
    width: 80vw; }
  .btn-banner03 .btn a {
    letter-spacing: 0.03em; } }

/*===============================================
 *	greeting
===============================================*/
.greeting {
  color: #112044;
  padding: 7% 0% 10%; }

@media screen and (min-width: 768px) {
  .greeting h4 {
    font-size: 3.1rem;
    font-weight: 700;
    margin-bottom: 2%; }
  .greeting p {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 2.1; } }

@media screen and (max-width: 767px) {
  .greeting h4 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 2%;
    letter-spacing: 0.02em; }
  .greeting p {
    display: flex;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2;
    justify-content: flex-start; } }

/*===============================================
 *	footer
===============================================*/
.footer-log {
  display: flex;
  padding: 4% 0 8%;
  justify-content: center; }

.footer-log img {
  width: 50vw; }

/*===============================================

 *	ブラウザリセット

===============================================*/
/* resset.dev • v5.0.2 */
/* # =================================================================
    # Global selectors
   # ================================================================= */
* {
  font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; }

html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4; }

*,
::before,
::after {
  background-repeat: no-repeat;
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit; }

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit; }

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0; }

body {
  font-size: 100%; }

table {
  font-size: inherit; }

/* # =================================================================
    # General elements
     # ================================================================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%; }

address, em {
  font-style: normal; }

strong, th {
  font-weight: normal; }

hr {
  display: none;
  overflow: visible;
  /* Show the overflow in Edge and IE */
  height: 0;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */ }

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */ }

summary {
  display: list-item;
  /* Add the correct display in all browsers */ }

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */ }

[hidden] {
  display: none;
  /* Add the correct display in IE */ }

abbr[title] {
  border-bottom: none;
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted; }

a {
  background-color: transparent;
  text-decoration: none;
  outline: none;
  /* Remove the gray background on active links in IE 10 */ }

br {
  letter-spacing: normal; }

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */ }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */ }

pre {
  font-size: 100%;
  /* Correct the odd `em` font sizing in all browsers */ }

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */ }

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

table {
  border-color: inherit;
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  /* Remove text indentation in Chrome, Edge, and Safari */ }

iframe {
  border-style: none; }

th, td {
  text-align: left;
  border: none;
  font-weight: normal; }

li {
  list-style-type: none; }

ul, ol, dl {
  margin: 0;
  list-style-position: outside;
  list-style-type: none; }

li, dt, dd {
  font-size: 100%; }

dt {
  font-weight: normal; }

small {
  font-size: 100%; }

/* # =================================================================
    # Forms
     # ================================================================= */
form, input {
  padding: 0;
  margin: 0; }

input {
  border-radius: 0; }

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */ }

[type='search'] {
  -webkit-appearance: textfield;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */ }

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */ }

textarea {
  overflow: auto;
  /* Internet Explorer 11+ */
  resize: vertical;
  /* Specify textarea resizability */ }

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */ }

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */ }

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ }

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */ }

/* Apply cursor pointer to button elements */
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
  cursor: pointer; }

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  outline: 1px dotted ButtonText; }

button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS */ }

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none; }

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0; }

/* Style select like a standard input */
select {
  -moz-appearance: none;
  /* Firefox 36+ */
  -webkit-appearance: none;
  /* Chrome 41+ */ }

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */ }

select::-ms-value {
  color: currentColor;
  /* Internet Explorer 11+ */ }

legend {
  border: 0;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge 18- and IE */ }

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit;
  /* Change font properties to `inherit` in Chrome and Safari */ }

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default; }

ifram {
  border: none; }

iframe:not([seamless]) {
  border: none; }

/* # =================================================================
    # Specify media element style
     # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */ }

img, fieldset {
  border: 0;
  vertical-align: bottom; }

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline; }

/* # =================================================================
    # Accessibility
     # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy='true'] {
  cursor: progress; }

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer; }

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled='true'] {
  cursor: default; }

/*===============================================
	clearFix
===============================================*/
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/**/
