@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
body {
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  line-height: 2.2;
  color: #000000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 1px;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  padding-top: 5em;
  font-weight: 600;
}

#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.offcanvas #page {
  overflow: hidden;
  position: absolute;
}

.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 0px;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
figure {
  color: #000;
  font-weight: bold;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #2D6CDF;
}

::-moz-selection {
  color: #fff;
  background: #C8A97E;
}

::selection {
  color: #fff;
  background: #C8A97E;
}

.fh5co-nav {
  width: 100%;
  padding: 0;
  z-index: 1001;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #036;
}

.fh5co-nav .top-menu {
  padding: 20px;
  background: #145C84;
  background: linear-gradient(-45deg, #04428A 0%, #04428A 50%, #023878 50%, #023878 100%);

}

@media screen and (max-width: 480px) {
  .fh5co-nav .top-menu {
    padding: 0;
    margin: 0;
  }

}

@media screen and (max-width: 850px) {
  .fh5co-nav .top-menu {
    padding: 0 10px;
  }

}

.fh5co-nav .top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0px 0;
  margin-bottom: 0;
}

.fh5co-nav .top .num,
.fh5co-nav .top .fh5co-social,
.fh5co-nav .top .site {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
}

@media screen and (max-width: 768px) {

  .fh5co-nav .top .num,
  .fh5co-nav .top .fh5co-social,
  .fh5co-nav .top .site {
    padding: 5px 10px;
  }
}

.fh5co-nav .top .site {
  float: left;
  font-weight: 300;
  margin-top: 0px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 480px) {
  .fh5co-nav .top .site {
    display: none;
  }
}

.fh5co-nav .top .num {
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  letter-spacing: 0px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.fh5co-nav .top .fh5co-social {
  margin: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.fh5co-nav .top .fh5co-social li {
  font-size: 14px;
  display: inline-block;
}

.fh5co-nav .top .fh5co-social li a {
  padding: 7px 7px;
}

.fh5co-nav .top .fh5co-social li a i {
  font-size: 14px;
}

.fh5co-nav #fh5co-logo {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.1em;


}

@media screen and (max-width: 812px) {
  .fh5co-nav .menu-1 {
    display: none;
  }
}

.fh5co-nav ul {
  padding: 0;
  margin: 1em 0 0;
}

.fh5co-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
  font-weight: 500;
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fh5co-nav ul li a {
  font-size: 16px;
  padding: 30px 10px;
  color: #FFFFFF;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  font-weight: bold;
}

@media screen and (max-width: 1080px) {
  .fh5co-nav ul li a {
    font-size: 14px;
    padding: 30px 8px;
    color: #ffffff;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
}



.fh5co-nav ul li a:hover,
.fh5co-nav ul li a:focus,
.fh5co-nav ul li a:active {
  color: #AAAAAA;
}

.fh5co-nav ul li.has-dropdown {
  position: relative;
}

.fh5co-nav ul li.has-dropdown .dropdown {
  width: 200px;
  -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #000;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

.fh5co-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%;
  left: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #000;
  border-width: 8px;
  margin-left: -8px;
}

.fh5co-nav ul li.has-dropdown .dropdown li {
  display: block;
  margin-bottom: 7px;
}

.fh5co-nav ul li.has-dropdown .dropdown li:last-child {
  margin-bottom: 0;
}

.fh5co-nav ul li.has-dropdown .dropdown li a {
  padding: 10px 0;
  display: block;
  color: #fff;
  line-height: 1.2;
  text-transform: none;
  font-size: 16px;
  letter-spacing: 0;
}

.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
  color: #fff;
}

.fh5co-nav ul li.has-dropdown:hover a,
.fh5co-nav ul li.has-dropdown:focus a {
  color: #fff;
}

.fh5co-nav ul li.btn-cta a {
  padding: 30px 0px !important;
  color: #fff;
}

.fh5co-nav ul li.btn-cta a span {
  background: #C8A97E;
  padding: 4px 10px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 1;
  -moz-border-radius: 1;
  -ms-border-radius: 1;
  border-radius: 1;
}

.fh5co-nav ul li.btn-cta a:hover span {
  -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}

.fh5co-nav ul li.active>a {
  font-weight: 400;
}

#fh5co-hero {
  min-height: 630px;
  height: 630px;
  background: #fff url(../images/loader.gif) no-repeat center center;
}

@media screen and (max-width: 480px) {
  #fh5co-hero {
    min-height: 0;
    height: 396px;
  }

}

#fh5co-hero .btn {
  font-size: 24px;
}

#fh5co-hero .btn.btn-primary {
  padding: 14px 30px !important;
}

#fh5co-hero .flexslider {
  border: none;
  z-index: 1;
  margin-bottom: 0;
}

#fh5co-hero .flexslider .slides {
  position: relative;
  overflow: hidden;
}

#fh5co-hero .flexslider .slides li {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  min-height: 630px;
  height: 630px;
  position: relative;
}

@media screen and (max-width: 480px) {
  #fh5co-hero .flexslider .slides li {

    min-height: 396px;
    height: 396px;
    position: relative;
  }

}

#fh5co-hero .flexslider .slides li:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  z-index: 1;
}

#fh5co-hero .flexslider .flex-control-nav {
  bottom: 40px;
  z-index: 1000;
}

@media screen and (max-width: 480px) {
  #fh5co-hero .flexslider .flex-control-nav {
    bottom: 80px;
    z-index: 1000;
  }

}

#fh5co-hero .flexslider .flex-control-nav li a {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  width: 12px;
  height: 12px;
  cursor: pointer;
}

#fh5co-hero .flexslider .flex-control-nav li a.flex-active {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
}

#fh5co-hero .flexslider .flex-direction-nav {
  display: none;
}

#fh5co-hero .flexslider .slider-text {
  display: table;
  opacity: 0;
  min-height: 630px;
  height: 630px;
  z-index: 9;
}

@media screen and (max-width: 480px) {
  #fh5co-hero .flexslider .slider-text {
    min-height: 420px;
    height: 420px;
    z-index: 9;
  }

}

#fh5co-hero .flexslider .slider-text>.slider-text-inner {
  display: table-cell;
  vertical-align: middle;
  min-height: 700px;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner h1,
#fh5co-hero .flexslider .slider-text>.slider-text-inner h2 {
  margin: 0;
  padding: 0;
  color: white;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner h1 {
  margin-bottom: 20px;
  font-size: 40px;
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 2px 2px 5px #000000,
    -2px 2px 5px #000000,
    2px -2px 5px #000000,
    -2px -2px 5px #000000;
  color: #FFF;
}

@media screen and (max-width: 768px) {
  #fh5co-hero .flexslider .slider-text>.slider-text-inner h1 {
    color: #fff;
    text-shadow: 2px 2px 5px #000000,
      -2px 2px 5px #000000,
      2px -2px 5px #000000,
      -2px -2px 5px #000000;
    font-size: 30px;
  }
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner h2 {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 30px;
  color: #fff;
  text-shadow: 2px 2px 5px #000000,
    -2px 2px 5px #000000,
    2px -2px 5px #000000,
    -2px -2px 5px #000000;
  font-weight: 600;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner h2 a {
  color: rgba(255, 255, 255, 0.5);
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner .btn {
  padding: 18px 30px !important;
  color: #fff;
  border: none !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner .btn:hover {
  background: #C8A97E;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner .fh5co-lead {
  font-size: 20px;
  color: #fff;
}

#fh5co-hero .flexslider .slider-text>.slider-text-inner .fh5co-lead .icon-heart {
  color: #d9534f;
}

.fh5co-bg-section {
  background-color: #F9F9F9;
}

.txt {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  font-size: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.15em;
}

#fh5co-course-categories,
#fh5co-counter,
#fh5co-course,
#fh5co-testimonial,
#fh5co-blog,
#fh5co-about,
#fh5co-contact,
#fh5co-footer {
  padding: 7em 0;
  clear: both;
}

#fh5co-pricing {
  padding: 10em 0;
  clear: both;
  margin: 5em 0;
}   

#fh5co-staff {
  padding: 7em 0 0 0;
  clear: both;
}

#fh5co-staff h1 {
  font-size: 3.2rem;
  line-height: 1.5;
}

#fh5co-about {
  padding: 0;
  clear: both;
}

#fh5co-register {
  padding: 7em 0 0;
  clear: both;
}

@media screen and (max-width: 768px) {

  #fh5co-course-categories,
  #fh5co-counter,
  #fh5co-course,
  #fh5co-pricing,
  #fh5co-register,
  #fh5co-testimonial,
  #fh5co-blog,
  #fh5co-about,
  #fh5co-staff,
  #fh5co-contact {
    padding: 3em 0;
  }
}

@media screen and (max-width: 480px) {
  #fh5co-about {
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  #fh5co-footer {
    padding: 3em 0;
  }

}

.services {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 40px;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.services h3 {
  font-size: 20px;
  font-weight: 600;
  font-family: 'Lustria', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.services h3 a {
  color: #000;
}

.services .icon {
  width: 90px;
  height: 90px;
  background: rgba(0, 0, 0, 0.04);
  display: table;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 992px) {
  .services .icon {
    margin: 0 auto 30px auto;
  }
}

.services .icon i {
  display: table-cell;
  vertical-align: middle;
  font-size: 40px;
  line-height: 40px;
  color: #000;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.services:hover .icon,
.services:focus .icon {
  background: #2D6CDF;
}

.services:hover .icon i,
.services:focus .icon i {
  color: #fff;
}

.fh5co-counters {
  padding: 7em 0;
  position: relative;
  background-color: #F4F9F9;
}

.fh5co-counters .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background: rgba(0, 0, 0, 0.8);
}

.fh5co-counters .counter-wrap {
  border: 1px solid red !important;
}

.fh5co-counters .fh5co-counter {
  font-size: 44px;
  display: block;
  color: white;
  font-family: "Roboto Slab", serif;
  width: 100%;
  font-weight: 400;
  margin-bottom: .1em;
}

.fh5co-counters .fh5co-counter-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  margin-bottom: 2em;
  display: block;
  font-family: "Roboto Slab", serif;
}

.fh5co-counters .icon i {
  font-size: 45px;
  color: #fff;
}

.course {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  margin-bottom: 30px;
}

.course .desc,
.course .course-img {
  width: 50%;
  display: inline-block;
}

@media screen and (max-width: 768px) {

  .course .desc,
  .course .course-img {
    width: 100%;
  }
}

.course .course-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
  .course .course-img {
    height: 270px;
  }
}

.course .desc {
  padding: 1.7em;
  background: #fafafa;
}

.course .desc h3 {
  font-size: 18px;
  font-weight: 400;
}

.course .desc h3 a {
  color: #000;
}

.course .desc .date {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
}

.course .desc .btn-course {
  border: 2px solid rgba(0, 0, 0, 0.8) !important;
  background: transparent;
  color: rgba(0, 0, 0, 0.8) !important;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 11px 15px !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

.course .desc .btn-course:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
}

.course:hover .course-img {
  -webkit-box-shadow: inset -70px 0px 77px 11px rgba(0, 0, 0, 0.74);
  -moz-box-shadow: inset -70px 0px 77px 11px rgba(0, 0, 0, 0.74);
  box-shadow: inset -70px 0px 77px 11px rgba(0, 0, 0, 0.74);
}

.fh5co-social-icons {
  margin: 0;
  padding: 0;
}

.fh5co-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.fh5co-social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  color: #2D6CDF;
  padding-left: 10px;
  padding-right: 10px;
}

.fh5co-social-icons li a i {
  font-size: 20px;
}

.fh5co-contact-info ul {
  padding: 0;
  margin: 0;
}

.fh5co-contact-info ul li {
  padding: 0 0 0 40px;
  margin: 0 0 30px 0;
  list-style: none;
  position: relative;
  color: rgba(0, 0, 0, 0.8);
}

.fh5co-contact-info ul li:before {
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fh5co-contact-info ul li.address:before {
  font-size: 30px;
  content: "\e9dc";
}

.fh5co-contact-info ul li.phone:before {
  font-size: 23px;
  content: "\ea3b";
}

.fh5co-contact-info ul li.email:before {
  font-size: 23px;
  content: "\e91e";
}

.fh5co-contact-info ul li.url:before {
  font-size: 23px;
  content: "\e9df";
}

.fh5co-contact-info ul li a {
  color: rgba(0, 0, 0, 0.8);
}


.fh5co-heading {
  margin-bottom: 5em;
}

.fh5co-heading h2 {
  font-size: 28px;
  margin-bottom: 20px;
  line-height: 2;
  color: #000;
  text-transform: uppercase;
  position: relative;
  color: #333333;
  margin-top: 20px;
  font-weight: 600;
  text-align: center;
}

.fh5co-heading p {
  font-size: 16px;
}

#fh5co-testimonial {
  position: relative;
  background-color: #FFFFFF;
}

#fh5co-testimonial .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background: rgba(31, 95, 139, 0.7);
}

#fh5co-testimonial .testimony-slide {
  text-align: center;
  position: relative;
  color: #000 !important;
}

#fh5co-testimonial .testimony-slide span {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  display: block;
}

#fh5co-testimonial .testimony-slide span small {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 3px;
}

#fh5co-testimonial .testimony-slide .user {
  display: block;
  width: 480px;
  height: 235px;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
  margin-bottom: 10px;
  -ms-border-radius: 50%;
}

#fh5co-testimonial .testimony-slide blockquote {
  border: none;
  margin: 30px auto;
  width: 70%;
  position: relative;
  padding: 0;
}

@media screen and (max-width: 768px) {
  #fh5co-testimonial .testimony-slide blockquote {
    width: 85%;
  }
}

#fh5co-testimonial .arrow-thumb {
  position: absolute;
  top: 40%;
  display: block;
  width: 100%;
}

#fh5co-testimonial .arrow-thumb a {
  font-size: 32px;
  color: #dadada;
}

#fh5co-testimonial .arrow-thumb a:hover,
#fh5co-testimonial .arrow-thumb a:focus,
#fh5co-testimonial .arrow-thumb a:active {
  text-decoration: none;
}

#fh5co-testimonial .owl-theme .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.3) !important;
}

#fh5co-testimonial .owl-theme .owl-dots .active span {
  background: white !important;
}

#fh5co-testimonial .fh5co-heading {
  margin-bottom: 3em;
}

#fh5co-testimonial .fh5co-heading h2 {
  color: #000;
  margin-bottom: 20px !important;
  margin-top: 20px;
  font-family: 'Zen Old Mincho', serif;
}

#fh5co-testimonial .fh5co-heading h2:after {
  background: transparent !important;
}

#fh5co-testimonial .fh5co-heading p {
  color: #000000;
}

#fh5co-testimonial .fh5co-heading span {
  padding: 7px 15px;
  position: relative;
}

#fh5co-testimonial .fh5co-heading span:before {
  position: absolute;
  top: 24px;
  left: -40px;
  content: '';
  width: 40px;
  height: 1px;
  background: white;
}

#fh5co-testimonial .fh5co-heading span:after {
  position: absolute;
  top: 24px;
  right: -40px;
  content: '';
  width: 40px;
  height: 1px;
  background: white;
}

.wrap-price {
  padding: 2em 4em;
}

.pricing__feature-list {
  width: 100%;
  float: left;
}

.pricing__feature-list li {
  margin-bottom: 10px;
}

.pricing__item {
  width: 100%;
  float: left;
  clear: both;
}

@media screen and (max-width: 768px) {
  .pricing__item {
    margin-bottom: 30px;
  }
}

.fh5co-event {
  position: relative;
  padding-left: 120px;
  width: 100%;
  float: left;
  margin-bottom: 30px;
}

.fh5co-event .date {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.03);
  display: table;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.fh5co-event .date span {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  width: 100px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}

.fh5co-event h3 {
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.fh5co-event h3 a {
  color: black;
}

.fh5co-blog {
  margin-bottom: 30px;
  border: 7px solid #0559AA;
  float: left;
  width: 100%;
  background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  .fh5co-blog {
    width: 100%;
  }
}

.fh5co-blog .blog-img-holder {
  display: block;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  height: 270px;
}

.fh5co-blog .blog-text {
  position: relative;
  width: 100%;
  padding: 30px;
  float: left;
  background-color: #FFFFFF;
}

.fh5co-blog .blog-text span {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 20px;
  color: #C6260D;
}

.fh5co-blog .blog-text span.comment {
  float: right;
}

.fh5co-blog .blog-text span.comment a {
  color: rgba(0, 0, 0, 0.3);
}

.fh5co-blog .blog-text span.comment a i {
  padding-left: 7px;
}

.fh5co-blog .blog-text h3 {
  margin-bottom: 0px;
  line-height: 2;
  font-weight: 600;
  font-size: 60px;
  color: #0559AA;
}

@media screen and (max-width: 480px) {
  .fh5co-blog .blog-text h3 {
    font-size: 24px;
  }

}

.fh5co-blog .blog-text h3 a {
  color: black;
}

.fh5co-blog .blog-text .btn-blog {
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.8);
  color: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

.fh5co-blog .blog-text .btn-blog:hover {
  color: #fff !important;
}

#fh5co-register {
  background-color: #003366;
}

#fh5co-register .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: rgba(0, 0, 0, 0.8);
}

#fh5co-register h2,
#fh5co-register h3,
#fh5co-register p {
  color: #000;
}

#fh5co-register .btn-reg {
  background: transparent;
  border: 2px solid #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

.simply-countdown {
  /* The countdown */
  margin-top: 3em;
  margin-bottom: 3em;
}

.simply-countdown>.simply-section {
  /* coutndown blocks */
  display: inline-block;
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 5px;
  position: relative;
  border: 2px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.simply-countdown>.simply-section>div {
  /* countdown block inner div */
  display: table-cell;
  vertical-align: middle;
  height: 115px;
  width: 120px;
}

.simply-countdown>.simply-section .simply-amount,
.simply-countdown>.simply-section .simply-word {
  display: block;
  color: white;
  /* amounts and words */
}

.simply-countdown>.simply-section .simply-amount {
  font-size: 40px;
  /* amounts */
}

.simply-countdown>.simply-section .simply-word {
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  /* words */
}

.staff {
  width: 100%;
  float: left;
  display: block;
  margin-bottom: 40px;
}

.staff .staff-img {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
  display: table;
}

.staff .staff-img:before {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: rgba(255, 255, 255, 0.9);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.staff .staff-img .fh5co-social {
  opacity: 0;
  display: table-cell;
  vertical-align: middle;
  height: 300px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
}

.staff .staff-img .fh5co-social li {
  display: inline-block;
  padding: 0 7px;
}

.staff h3 {
  font-size: 18px;
}

.heading12 {
  position: relative;
  font-size: 26px;
}

.heading12::before {
  content: attr(data-number);
  display: inline-block;
  margin-right: 20px;
  color: #000000;
  font-size: 30px;
  border-bottom: 1px solid #498ee0;
}

.staff h3 a {
  color: #000;
}

.staff span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}

.staff:hover .staff-img:before {
  opacity: 1;
}

.staff:hover .staff-img .fh5co-social {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#fh5co-gallery {
  padding-top: 2.5em;
}

#fh5co-gallery h2 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 2.5em;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
}

#fh5co-gallery h2 span {
  border: 2px solid rgba(0, 0, 0, 0.8);
  padding: 10px 15px;
  position: relative;
}

#fh5co-gallery h2 span:before,
#fh5co-gallery h2 span:after {
  position: absolute;
  top: 18px;
  bottom: 0;
  content: '';
  width: 100px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

#fh5co-gallery h2 span:before {
  lett: 0;
  margin-left: -125px;
}

#fh5co-gallery h2 span:after {
  right: 0;
  margin-right: -110px;
}

.gallery {
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 300px;
}

.gallery:hover {
  -webkit-box-shadow: inset 0px 0px 124px 11px rgba(0, 0, 0, 0.74);
  -moz-box-shadow: inset 0px 0px 124px 11px rgba(0, 0, 0, 0.74);
  box-shadow: inset 0px 0px 124px 11px rgba(0, 0, 0, 0.74);
}



#map {
  width: 100%;
  height: 500px;
  position: relative;
}

@media screen and (max-width: 812px) {
  #map {
    height: 200px;
  }
}

#fh5co-offcanvas {
  position: absolute;
  z-index: 1901;
  width: 270px;
  background: black;
  top: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 75px 40px 40px 40px;
  overflow-y: auto;
  display: none;
  -moz-transform: translateX(270px);
  -webkit-transform: translateX(270px);
  -ms-transform: translateX(270px);
  -o-transform: translateX(270px);
  transform: translateX(270px);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

@media screen and (max-width: 812px) {
  #fh5co-offcanvas {
    display: block;
  }
}

.offcanvas #fh5co-offcanvas {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}

#fh5co-offcanvas a {
  color: #FFFFFF;
}

#fh5co-offcanvas a:hover {
  color: rgba(255, 255, 255, 0.8);
}

#fh5co-offcanvas ul {
  padding: 0;
  margin: 0;
}

#fh5co-offcanvas ul li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#fh5co-offcanvas ul li>ul {
  padding-left: 20px;
  display: none;
}

#fh5co-offcanvas ul li.offcanvas-has-dropdown>a {
  display: block;
  position: relative;
}

#fh5co-offcanvas ul li.offcanvas-has-dropdown>a:after {
  position: absolute;
  right: 0px;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ea1c";
  font-size: 20px;
  color: #FFFFFF;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.uppercase {
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.gototop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.gototop.active {
  opacity: 1;
  visibility: visible;
}

.gototop a {
  width: 50px;
  height: 50px;
  display: table;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.gototop a i {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}

.gototop a:hover,
.gototop a:active,
.gototop a:focus {
  text-decoration: none;
  outline: none;
}

.fh5co-nav-toggle {
  width: 25px;
  height: 53px;
  cursor: pointer;
  text-decoration: none;
  background: #069;

}

.fh5co-nav-toggle.active i::before,
.fh5co-nav-toggle.active i::after {
  background: #444;
}

.fh5co-nav-toggle:hover,
.fh5co-nav-toggle:focus,
.fh5co-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}

.fh5co-nav-toggle i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 2px;
  color: #252525;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #252525;
  transition: all .2s ease-out;
}

.fh5co-nav-toggle i::before {
  content: '';
  font-size: 12px;
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}

.fh5co-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}

.fh5co-nav-toggle.fh5co-nav-white>i {
  color: #fff;
  background: #fff;
}

.fh5co-nav-toggle.fh5co-nav-white>i::before,
.fh5co-nav-toggle.fh5co-nav-white>i::after {
  background: #fff;
}

.fh5co-nav-toggle.fh5co-nav-white.active>i {
  color: #fff;
  background: #C59D80;
}

.fh5co-nav-toggle.fh5co-nav-white.active>i::before,
.fh5co-nav-toggle.fh5co-nav-white.active>i::after {
  background: #fff;
}

.fh5co-nav-toggle i::before {
  top: -7px;
}

.fh5co-nav-toggle i::after {
  bottom: -7px;
}

.fh5co-nav-toggle:hover i::before {
  top: -10px;
}

.fh5co-nav-toggle:hover i::after {
  bottom: -10px;
}

.fh5co-nav-toggle.active i {
  background: transparent;
}

.fh5co-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.fh5co-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.fh5co-nav-toggle {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 21;
  padding: 6px 0 0 13px;
  display: block;
  margin: 0 auto;
  display: none;
  height: 53x;
  width: 53px;
  z-index: 2001;
  border-bottom: none !important;
  position: fixed;

}

@media screen and (max-width: 812px) {
  .fh5co-nav-toggle {
    display: block;
  }
}


.btn-primary {
  background: #C8A97E;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #437be2 !important;
  border-color: #C8A97E !important;
}

.btn-primary.btn-outline {
  background: transparent;
  color: #2D6CDF;
  border: 2px solid #C8A97E;
}

.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
  background: #2D6CDF;
  color: #fff;
}

.btn-success {
  background: #5cb85c;
  color: #fff;
  border: 2px solid #5cb85c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: #4cae4c !important;
  border-color: #4cae4c !important;
}

.btn-success.btn-outline {
  background: transparent;
  color: #5cb85c;
  border: 2px solid #5cb85c;
}

.btn-success.btn-outline:hover,
.btn-success.btn-outline:focus,
.btn-success.btn-outline:active {
  background: #5cb85c;
  color: #fff;
}

.btn-info {
  background: #5bc0de;
  color: #fff;
  border: 2px solid #5bc0de;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background: #46b8da !important;
  border-color: #46b8da !important;
}

.btn-info.btn-outline {
  background: transparent;
  color: #5bc0de;
  border: 2px solid #5bc0de;
}

.btn-info.btn-outline:hover,
.btn-info.btn-outline:focus,
.btn-info.btn-outline:active {
  background: #5bc0de;
  color: #fff;
}

.btn-warning {
  background: #f0ad4e;
  color: #fff;
  border: 2px solid #f0ad4e;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: #eea236 !important;
  border-color: #eea236 !important;
}

.btn-warning.btn-outline {
  background: transparent;
  color: #f0ad4e;
  border: 2px solid #f0ad4e;
}

.btn-warning.btn-outline:hover,
.btn-warning.btn-outline:focus,
.btn-warning.btn-outline:active {
  background: #f0ad4e;
  color: #fff;
}

.btn-danger {
  background: #d9534f;
  color: #fff;
  border: 2px solid #d9534f;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: #d43f3a !important;
  border-color: #d43f3a !important;
}

.btn-danger.btn-outline {
  background: transparent;
  color: #d9534f;
  border: 2px solid #d9534f;
}

.btn-danger.btn-outline:hover,
.btn-danger.btn-outline:focus,
.btn-danger.btn-outline:active {
  background: #d9534f;
  color: #fff;
}

.btn-outline {
  background: none;
  border: 2px solid gray;
  font-size: 16px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  box-shadow: none;
}

.btn.with-arrow {
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.btn.with-arrow i {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -8px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.btn.with-arrow:hover {
  padding-right: 50px;
}

.btn.with-arrow:hover i {
  color: #fff;
  right: 18px;
  visibility: visible;
  opacity: 1;
}

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 14px;
  font-weight: 400;
}

.form-control:active,
.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #000;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

.row-pb-sm {
  padding-bottom: 2em !important;
}

.fh5co-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
}

.row-padded-mb {
  margin-bottom: 3em !important;
}

.col-padded {
  margin: 0 !important;
  padding: 0 !important;
}

.js .animate-box {
  opacity: 0;
}

/*# sourceMappingURL=style.css.map */
#menu .btn-navbar {
  font-size: 20px;
  color: #000;
  padding: 5px 15px;
  float: right;
  border: 3px solid #000;
}

.google-maps {
  position: relative;
  padding-bottom: 30%;
  height: 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
  }

}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

.btn-vertical-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
  text-align: center;
  background-color: #F79826;
  font-size: 18px;
}

.btn-vertical-border:before {
  position: absolute;
  display: inline-block;
  content: '';
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: #E9E7F3;
}

.btn-vertical-border a {

  color: #ffffff;

}

.o-3column.col-md-4 {
  padding-left: 0px;
}

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width:641px) {
  .footer_area {
    display: none;
  }
}

/*スマホ～641pxの幅サイズまで*/
@media screen and (max-width:640px) {
  .footer_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
  }

}

.proj-bottom {
  padding-bottom: 4em;
}

.fh5co-project {
  margin-bottom: 30px;
}

.o-3column .col-md-4 {
  padding: 0;
  margin: 0;
}

.fh5co-project {
  background: #000;
}

.fh5co-project img {
  display: block;
  opacity: .6;
}

.fh5co-project>a {
  display: block;
  color: #000;
  position: relative;
  bottom: 0;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.fh5co-project>a img {
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.fh5co-project>a:after {
  opacity: 0;
  visibility: hidden;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  -webkit-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
  -ms-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
  z-index: 8;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.fh5co-project>a h3,
.fh5co-project>a span {
  z-index: 12;
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 50px;
  color: #fff;
  margin: 0;
  padding: 0;
  opacity: 1;
  font-size: 24px;
  font-weight: 600;
  visibility: visible;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.fh5co-project>a span {
  font-size: 14px;
  bottom: 20px;
}

.fh5co-project>a:hover {
  -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
}

.fh5co-project>a:hover:after {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .fh5co-project>a:hover:after {
    opacity: 0;
    visibility: hidden;
  }
}

.fh5co-project>a:hover h3,
.fh5co-project>a:hover span {
  opacity: 1;
  bottom: 55px;
}

.fh5co-project>a:hover span {
  bottom: 15px;
}

.fh5co-project>a:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (max-width: 768px) {
  .fh5co-project>a:hover img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

#fh5co-about {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  width: 100%;
}

#fh5co-about .fh5co-2col {
  width: 50%;
}

@media screen and (max-width: 1200px) {
  #fh5co-about .fh5co-2col {
    width: 100%;
  }
}

#fh5co-about .fh5co-text {
  padding: 2em 6em;
  text-align: left;
  background: #145C84;
  background: linear-gradient(45deg, #04428A 0%, #04428A 50%, #023878 50%, #023878 100%);

}

@media screen and (max-width: 1200px) {
  #fh5co-about .fh5co-text {
    padding: 1em;
  }
}

#fh5co-about .fh5co-text .btn {
  color: #fff;
}

#fh5co-about .fh5co-text .heading {
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  padding-bottom: 30px;
  text-align: center;
  font-size: 28px;
  margin-top: 20px;
  font-weight: bold;
}

#fh5co-about .fh5co-text .heading:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 2px;
  left: 50%;
  background: #ffffff;
  margin-left: -20px;
}

#fh5co-about .fh5co-text p {
  line-height: 2.2;
  color: #FFFFFF;
  font-size: 16px;
}

#fh5co-about .fh5co-text p span.firstcharacter {
  float: left;
  color: #903;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 10px;
  padding-left: 3px;
  font-style: italic;
  top: -20px;
  position: relative;
  color: #fff;
  font-family: "Playfair Display", serif;
}

#fh5co-about .fh5co-bg {
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 1200px) {
  #fh5co-about .fh5co-bg {
    width: 100%;
    min-height: 500px;
  }
}

@media screen and (max-width: 768px) {
  #fh5co-about .fh5co-bg {
    width: 100%;
    min-height: 300px;
  }
}

#fh5co-featured {
  padding: 7em 0;
  background-color: #00002D;
}

@media screen and (max-width: 768px) {
  #fh5co-featured {
    padding: 0;
  }
}

#fh5co-featured .fh5co-heading .heading {
  position: relative;
  padding-top: 30px !important;
  color: #fff;
}

#fh5co-featured .fh5co-heading .heading:before,
#fh5co-featured .fh5co-heading .heading::before {
  height: 64px;
  width: 64px;
  position: absolute;
  content: "";
  background: url(../images/0103-served-plate_64.png) no-repeat;
  top: 0;
  left: 50%;
  margin-top: -50px;
  margin-left: -32px;
}

#fh5co-featured .fh5co-heading .sub-heading {
  color: #FFFFFF;
}

#fh5co-featured .fh5co-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}

#fh5co-featured .fh5co-grid h2 {
  font-size: 20px;
  margin-bottom: 0;
  padding-bottom: 20px;
  font-weight: 600;
  font-family: 'Lustria', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding-top: 20px;
}

#fh5co-featured .fh5co-grid p {
  line-height: 2.5;
  font-size: 16px;
  color: #222;
}

#fh5co-featured .fh5co-grid .pricing {
  font-size: 40px;
  display: block;
  padding-top: 20px;
}

#fh5co-featured .fh5co-grid .pricing:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  left: 50%;
  margin-left: -20px;
  background: #fb6e14;
}

#fh5co-featured .fh5co-grid .arrow-left:before,
#fh5co-featured .fh5co-grid .arrow-left::before {
  content: "";
  position: absolute;
  z-index: 999;
  top: 50px;
  left: 0;
  margin-left: -15px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #f5f5f5;
}

@media screen and (max-width: 768px) {

  #fh5co-featured .fh5co-grid .arrow-left:before,
  #fh5co-featured .fh5co-grid .arrow-left::before {
    right: auto !important;
    left: 15px !important;
    top: 0 !important;
    margin-top: -15px !important;
    margin-left: 0px !important;
    border-top: none !important;
    border-left: 15px solid transparent !important;
    border-right: 15px solid transparent !important;
    border-bottom: 15px solid #f5f5f5 !important;
  }
}

#fh5co-featured .fh5co-grid .arrow-right:before,
#fh5co-featured .fh5co-grid .arrow-right::before {
  content: "";
  position: absolute;
  z-index: 999;
  top: 50px;
  right: 0;
  margin-right: -15px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #f5f5f5;
}

@media screen and (max-width: 992px) {

  #fh5co-featured .fh5co-grid .arrow-right:before,
  #fh5co-featured .fh5co-grid .arrow-right::before {
    right: auto !important;
    left: 0 !important;
    margin-left: -15px !important;
    border-left: none !important;
    border-right: 15px solid #f5f5f5 !important;
  }
}

@media screen and (max-width: 768px) {

  #fh5co-featured .fh5co-grid .arrow-right:before,
  #fh5co-featured .fh5co-grid .arrow-right::before {
    right: auto !important;
    left: 15px !important;
    top: 0 !important;
    margin-top: -15px !important;
    margin-left: 0px !important;
    border-top: none !important;
    border-left: 15px solid transparent !important;
    border-right: 15px solid transparent !important;
    border-bottom: 15px solid #f5f5f5 !important;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half {
  width: 50%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}

@media screen and (max-width: 992px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half {
    width: 100%;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-text {
  background: #f5f5f5;
}

#fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-special-1 {
  background: #faebcd;
}

#fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-special-1.arrow-left:before,
#fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-special-1.arrow-left::before {
  border-right: 15px solid #faebcd;
}

@media screen and (max-width: 768px) {

  #fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-special-1.arrow-left:before,
  #fh5co-featured .fh5co-grid>.fh5co-v-half .fh5co-special-1.arrow-left::before {
    border-left: 15px solid transparent !important;
    border-right: 15px solid transparent !important;
    border-bottom: 15px solid #faebcd !important;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-v-col-2 {
  width: 50%;
  padding: 20px;
  position: relative;
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-v-col-2.fh5co-bg-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 768px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-v-col-2.fh5co-bg-img {
    height: 200px;
  }
}

@media screen and (max-width: 768px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-v-col-2 {
    width: 100%;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2 {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2>.fh5co-v-col-2 {
  width: 50%;
  position: relative;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2>.fh5co-v-col-2 {
    width: 100%;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2>.fh5co-v-col-2.fh5co-bg-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 768px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2>.fh5co-v-col-2.fh5co-bg-img {
    height: 200px;
  }
}

#fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2.fh5co-reversed .fh5co-bg-img {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
}

@media screen and (max-width: 992px) {
  #fh5co-featured .fh5co-grid>.fh5co-v-half>.fh5co-h-row-2.fh5co-reversed .fh5co-bg-img {
    position: relative;
    right: inherit;
    top: inherit;
    bottom: inherit;
  }
}

#fh5co-counter {
  color: #000;
}

.margin40 {
  margin-bottom: 40px;
}

.margin60 {
  margin-bottom: 60px;
}

a.btn_02 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 6% 0 12%;
  color: #fff;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition-duration: 0.2s;
  background-color: #000000;
}

a.btn_02:hover {
  background: #333333;
  color: #fff;
}

a.btn_02:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #C70A51;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}

a.btn_02:hover:before {
  border-color: transparent transparent transparent #fff;
}

@media screen and (max-width: 480px) {
  #fh5co-counter {
    display: none;
  }
}

#fh5co-featured .fh5co-heading p {
  color: #FFF;
}

#fh5co-featured .fh5co-heading h2 {
  color: #FFF;
}

/* footer */

footer {
  margin-top: 0px;
  padding: 65px 0;
  color: #aaabab;
  background-color: #003366;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ECE6E6;

}

.footer-bottom {
  padding: 5px 0;
  color: #fff;
  background-color: #000033;
}

.footer-bottom a {
  float: left;
  clear: both;
}

footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}

footer,
footer a,
.footer-bottom a {
  color: #FFFFFF;
  font-size: 14px;
}

.footer-bottom a {
  float: right;
  margin-left: 0px;
}

footer a:hover {
  color: #ef8829;
}

footer h5 {
  font-size: 14px;
  color: #fff;
  line-height: 25px;
  font-weight: 600;
}

footer ul {
  margin: 15px 0 0;
  padding: 0;
}

footer ul li {
  padding: 1px 0;
  list-style-type: none;
}

.copyright a {
  color: #fff;
}

/* CSS for Footer-Top CMS start */
.footer-top-cms {
  display: inline-block;
  width: 100%;
  color: #aaabab;
  border-bottom: 1px solid #808080;
  padding: 0 0 45px;
  margin: 0 0 30px 0;
}

.footer-logo {
  float: left;
}

.footer-desc {
  width: 710px;
  display: inline-block;
  margin: 0 0 0 50px;
}

.newslatter input {
  height: 48px;
  width: 390px !important;
  border-color: #808080;
  border-right: 0 none;
}

.newslatter .btn.btn-large.btn-primary {
  padding: 12px 28px;
  font-size: 18px;
}

.footer-social {
  float: right;
}

.newslatter h5,
.footer-social h5 {
  margin: 0 0 10px;
}

.footer-social ul {
  padding: 0;
  margin: 0;
}

.footer-social li {
  float: left;
  list-style-type: none;
  margin: 0 8px 0 0;
}

.footer-social li a {
  border: 1px solid #808080;
  height: 48px;
  width: 48px;
  display: block;
  text-align: center;
  line-height: 50px;
  color: #808080;
}

.footer-social li a:hover {
  border: 1px solid #ef8829;
  color: #ef8829;
}

.footer-social li a .fa {
  font-size: 20px;
}

/* CSS for Footer-Top CMS end */

/* CSS for Footer-Top CMS start */
.footer-bottom-cms {
  float: right;
  width: auto;
  margin: 9px 0 0;
}

.footer-bottom .copyright {
  margin: 10px 0px;
  font-size: 12px;
}

/* CSS for Footer-Top CMS end */

/* CSS for Footer-Bottom CMS start */

.footer-payment ul {
  margin: 0;
  padding: 0;
}

.footer-payment li {
  float: left;
  margin: 0 5px 0 0;
  list-style-type: none;
}

.footer-payment li:last-child {
  margin: 0;
}

/* CSS for Footer-Bottom CMS end */

/* CSS for Footer-Right CMS start */
.footer-contact ul {
  margin: 0;
  padding: 0;
}

.footer-contact ul li {
  list-style-type: none;
  padding: 0 20px
}

.footer-contact .fa {
  margin: 0 5px 0 0;
  float: left;
  clear: both;
  text-align: center;
  line-height: 20px;
  width: 15px;
}

.footer-contact .fa.fa-mobile {
  font-size: 18px;
}

.footer-contact .fa.fa-map-marker {
  font-size: 15px;
}

.footer-contact .fa.fa-envelope {
  font-size: 11px;
}

.footer-contact span {
  float: left;
}

/* CSS for Footer-Right CMS end */
/* 
 * 	Responsive CSS FooterFile
 *	v1.0
 */



@media only screen and (min-width: 980px) and (max-width: 1199px) {

  /* Footer */
  .footer-desc {
    width: 460px;
  }
}

@media (max-width: 979px) {

  /* Footer */

  .footer-logo,
  .footer-social {
    float: none;
    display: inline-block;
  }

  .footer-desc {
    width: 100%;
    display: inline-block;
    margin: 20px 0;
  }

  .footer-title {
    position: relative;
    cursor: pointer;
    margin: 0;
  }

  footer .ul-wrapper {
    display: none;
    margin: 5px 0 20px;
  }

  .newslatter .input-group {
    display: inline;
  }

  .newslatter .input-group .form-control {
    border-right: 1px solid;
    width: 100% !important;
  }

  .newslatter .btn.btn-large.btn-primary {
    margin: 20px 0 30px;
  }

  .toggle_div {
    width: 100%;
    display: block;
    margin: -25px 0 0;
    z-index: 999;
    padding: 10px 0;
    position: relative;
  }

  .toggle .toggle_div:before {
    font-family: "FontAwesome";
    content: '\f055';
    font-size: 22px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 6px;
    color: #fff;
  }

  .toggle.active .toggle_div:before {
    font-family: "FontAwesome";
    content: '\f056';
    font-size: 22px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 6px;
    color: #fff;
  }

  .cart .input-group .form-control.quantity {
    width: 83px;
    text-align: center;
  }

  .cart .input-group-btn:last-child>.btn,
  .input-group-btn:last-child>.btn-group {
    margin-left: 0;
  }

  .footer-block {
    margin: 10px 0;
    width: 100%;
  }

  #commentform input {
    width: auto;
  }

  #commentform label {
    margin: 0 0px 20px;
    width: 100px;
  }

  #comment {
    max-width: 100%;
  }

  .form-submit {
    margin-top: 20px;
  }
}


@media (max-width: 479px) {

  .footer-bottom .copyright,
  .footer-bottom-cms {
    float: none;
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  .footer-bottom-cms {
    margin: 10px 0 0;
  }

  .footer-bottom a {
    float: none;
  }

  .footer-payment li {
    float: none;
    display: inline-block;
    margin: 0 5px 5px 0;
  }

}

#fh5co-staff p {
  line-height: 2.2;
  padding-bottom: 1em;
}


#fh5co-counter h3 {
  font-family: 'Lato', "sans-serif !important;";
  font-size: 36px;
  color: #FFF;
}

#fh5co-staff h3 {
  font-size: 20px;
}

.pad30 {
  padding: 30px;
  font-family: 'Zen Old Mincho', serif;
}

.borderbox {
  background-color: #F2F2F2;
  border: 1px solid #EBEBEB;
  padding: 20px;
}

.table th,
.table td {
  border-top: 1px solid #000000;
}

table,
td,
th {
  border-bottom-width: 1px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-bottom-color: #000000;
}

#fh5co-menus {
  padding: 7em 0;
}

@media screen and (max-width: 768px) {
  #fh5co-menus {
    padding: 5em 0;
  }
}

#fh5co-menus .fh5co-heading .heading {
  position: relative;
  padding-top: 30px !important;
}

#fh5co-menus .fh5co-heading .heading:before,
#fh5co-menus .fh5co-heading .heading::before {
  height: 64px;
  width: 64px;
  position: absolute;
  content: "";
  background: url(../images/0401-vegan.png) no-repeat;
  top: 0;
  left: 50%;
  margin-top: -50px;
  margin-left: -32px;
}

#fh5co-menus .fh5co-heading .sub-heading {
  color: #a99c92;
}

#fh5co-menus .fh5co-food-menu {
  float: left;
  width: 100%;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  #fh5co-menus .fh5co-food-menu {
    margin-bottom: 30px;
    float: left;
    width: 100%;
    clear: none !important;
  }
}

#fh5co-menus .fh5co-food-menu h2 {
  margin-bottom: 50px;
  position: relative;
}

#fh5co-menus .fh5co-food-menu h2.fh5co-drinks {
  padding-left: 0px;
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#fh5co-menus .fh5co-food-menu h2.fh5co-drinks:before {
  background: url(../images/0301-pina-colada.png) no-repeat;
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 64px;
  height: 64px;
}

#fh5co-menus .fh5co-food-menu h2.fh5co-dishes {
  padding-left: 0px;
}

#fh5co-menus .fh5co-food-menu h2.fh5co-dishes:before {
  background: url(../images/0302-steak.png) no-repeat;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 45px;
}

#fh5co-menus .fh5co-food-menu ul {
  padding: 0;
  margin: 0;
}

#fh5co-menus .fh5co-food-menu ul li {
  padding: 0 0 20px 0;
  margin: 0 0 20px 0;
  border-bottom: 1px dotted #ccc;
  display: block;
  float: left;
  width: 100%;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc {
  clear: both;
  float: left;
  width: 100%;
  line-height: 2;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc>figure {
  width: 20%;
  float: left;
  position: relative;
  margin-right: 4%;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc>figure img {
  max-width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 0;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc>div {
  width: 75%;
  float: left;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc>div p {
  margin: 0;
  font-size: 16px;
  line-height: 2.2;
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-desc>div h3 {
  margin: 0 0 10px 0;
  padding: 1rem 3rem;
  font-size: 22px;
  color: #D22424;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

#fh5co-menus .fh5co-food-menu ul li .fh5co-food-pricing {
  float: right;
  width: 20%;
  text-align: right;
  font-size: 20px;
  color: #fb6e14;
}

.sam13 a {
  display: block;
  width: 100%;
  /* 横幅 */
  background-color: #ffffff;
  border: 1px solid #00171F;
  padding: 10px;
  /* a要素内の余白 */
  margin-bottom: 40px;
}

/* 以下マウスを載せたときのスタイル */
.sam13 a:hover {
  background-color: #EADDCC;
}

.search-result .thumbnail {
  border: none;
  margin: 0;
  padding: 0;
}

.search-result {}

.search-result .col-md-2 {
  border-right: 1px dotted #ccc;
  min-height: 140px;
}

.search-result ul {
  padding-left: 0 !important;
  list-style: none;
}

.search-result ul li {
  font: 400 normal .85em;
  line-height: 30px;
}

.search-result ul li i {
  padding-right: 5px;
}

.search-result .col-md-7 {
  position: relative;
}

.search-result h3 {
  font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding-top: 20px;
}

.search-result h3>a,
.search-result i {
  color: #248dc1 !important;
}

.search-result p {
  font-size: 16px;
  margin-bottom: 0px;
}

.search-result span.border {
  display: block;
  width: 97%;
  margin: 0 15px;
  border-bottom: 1px dotted #ccc;
}

#breadcrumb {
  background-color: #042159;

}

.breadcrumb {
  list-style: none;
  background-color: #042159;
  border-radius: 0px;
  padding: 3px 10px;
  margin-bottom: 0;
  font-size: 12px;
}

.breadcrumb li {
  text-transform: uppercase;
  font-weight: 500;
  color: #FFF;
}

.breadcrumb li a {
  color: #C90;
}

#heading-breadcrumbs {
  background-image: url(../images/fv_ttl_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  height: 500px;
}

@media screen and (max-width: 480px) {
  #heading-breadcrumbs {
    background-image: url(../images/fv_ttl_bg_sp.jpg);
    background-position: center top;
    height: 250px;
  }
}

.fh5co-headings {
  margin-bottom: 2em;
}

.fh5co-headings h1,
.fh5co-headings p {
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #000;
  position: relative;
  color: #ffffff;
  padding-top: 7em;
  text-shadow: 2px 2px 5px #000000,
    -2px 2px 5px #000000,
    2px -2px 5px #000000,
    -2px -2px 5px #000000;

}

@media screen and (max-width: 480px) {

  .fh5co-headings h1,
  .fh5co-headings p {
    font-size: 24px;
    padding-top: 6em;
  }
}

.fh5co-headings p {
  color: #FFF;
}

#fh5co-type {
  padding: 7em 0;
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

#fh5co-type>.fh5co-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9;
}

#fh5co-type>.container {
  z-index: 10;
  position: relative;
}

#fh5co-type .fh5co-type {
  float: left;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #fh5co-type .fh5co-type {
    margin-bottom: 30px;
  }
}

#fh5co-type h3 {
  margin-bottom: 30px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding-top: 50px;
  font-weight: 600;
}

#fh5co-type h3.with-icon {
  position: relative;
}

#fh5co-type h3.with-icon:before,
#fh5co-type h3.with-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -54px;
  margin-top: -125px;
  width: 104px;
  height: 104px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#fh5co-type h3.with-icon.icon-1:before,
#fh5co-type h3.with-icon.icon-1::before {
  background: url(../images/type-1.png) no-repeat center center;
}

#fh5co-type h3.with-icon.icon-2:before,
#fh5co-type h3.with-icon.icon-2::before {
  background: url(../images/type-2.png) no-repeat center center;
}

#fh5co-type h3.with-icon.icon-3:before,
#fh5co-type h3.with-icon.icon-3::before {
  background: url(../images/type-3.png) no-repeat center center;
}

#fh5co-type h3.with-icon.icon-4:before,
#fh5co-type h3.with-icon.icon-4::before {
  background: url(../images/type-4.png) no-repeat center center;
}

#fh5co-type p {
  color: #ffffff;
}

.under-wrapper li {
  display: inline;
}

.under-wrapper li {
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

.under-wrapper li+li {
  border-left: 0;
  border-right: 1px solid #333;
}

.footer-block {
  padding: 10px 0;
}

.info {
  font-size: 14px;
}

.fh5co-food-desc div h3 span {
  font-size: 14px;
  display: block;
  padding-top: 10px;
}

#floatMenu {
  background-color: #FF9900;
  position: absolute;
  top: 140px;
  right: 0;
  padding: 2em;
  z-index: 1001;
}

@media screen and (max-width:480px) {
  #floatMenu {
    display: none;
  }
}

.centering {
  padding: 3em;
}

.btn {
  color: #fff;
  /* 文字色 */
  padding: 16px 40px;
  /* 上下の余白、左右の余白 */
  text-decoration: none;
  /* デフォルトで入る下線を消す */
  border-radius: 30px;
  /* 角を丸くする */
  transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
  background-color: #F85050;
}

.btn:hover {
  opacity: .7;
}

.fh5co-footer-links li a span {
  font-size: 12px;
  letter-spacing: 0px;
}

#floatMenu .txt a {
  color: #FFF;
}

#fh5co-type h2 {}

#fh5co-footer h3 {
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
}

.border {
  padding: 20px 5px;
  border: 1px solid #DADADA;
  background-color: #FFF;
}

#fh5co-logo span {
  font-size: 24px;
  color: #FFFFFF;
}

@media screen and (max-width:480px) {
  #fh5co-logo span {
    display: none;
  }

  .fh5co-nav #fh5co-logo {
    font-size: 24px;
  }
}

a.btn_ao_b {
  display: flex;
  align-items: center;
  max-width: 500px;
  margin: 1em auto;
  padding: 1.3em;
  border: 2px solid #014897;
  background: #fff;
  text-decoration: none;
  transition: 0.3s;
}

a.btn_ao_b:hover {
  background-color: #e9f3fd;
}

a.btn_ao_b .b__text {
  display: block;
  flex-grow: 1;
  color: #004386;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-right: 15px;
  font-size: 18px;
}

a.btn_ao_b .b__text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 3px solid #014897;
  border-right: 3px solid #014897;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}

@media (max-width: 1200px) {
  a.btn_ao_b .b__text {
    font-size: 18px;
    padding-right: 20px;
  }

  a.btn_ao_b .b__text::after {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 736px) {
  a.btn_ao_b .b__text {
    font-size: 14px;
    padding-right: 20px;
  }

  a.btn_ao_b .b__text::after {
    width: 10px;
    height: 10px;
  }
}

.checkmark000 {
  padding-left: 24px;
  position: relative;
}

.checkmark000:before,
.checkmark000:after {
  content: "";
  display: block;
  position: absolute;
}

.checkmark000:before {
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1px solid #000000;
  left: 0;
  top: 2px;
}

.checkmark000:after {
  border-left: 2px solid #ff0000;
  border-bottom: 2px solid #ff0000;
  width: 10px;
  height: 6px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 3px;
  top: 5px;
}

#fh5co-staff h2 {
  padding: 1rem 2rem;
  border-left: 5px solid #D22424;
  background: #f4f4f4;
  font-size: 24px;
}

@media (max-width: 736px) {
  #fh5co-staff h1 {
    font-size: 2rem;
  }

  #fh5co-staff h2 {
    font-size: 18px;
  }
}

.sankaku {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-top: 40px solid #042159;
  margin: 0 auto;
}

/* Comments */
#comments ul {
  margin: 0 0 40px 0;
  padding: 0;
  list-style: none;
}

#comments li {
  margin: 0 0 50px 0;
  padding: 30px 20px 50px 30px;
  background-color: #F7FAFC;
  border: 1px solid #25548C;
}

#comments .avatar {
  float: left;
  margin: 0 10px 10px 0;
  padding: 3px;
}

#comments address {
  font-weight: bold;
}

#comments time {
  font-size: smaller;
}

#comments .comcont {
  display: block;
  margin: 0;
  padding: 0;
}

#comments .comcont p {
  margin: 15px 5px 5px 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.8em;
  font-weight: bold;
  color: #25548C;
}

.comcont {
  margin-bottom: 30px;
}

.beside-flow-01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin: 45px 0 80px;
  padding-bottom: 180px
}

@media screen and (max-width:768px) {
  .beside-flow-01 {
    margin: 30px 0 40px
  }
}

.beside-flow-01>.inner {
  margin-right: 75px;
  position: relative
}

.beside-flow-01>.inner:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 24px;
  border-color: transparent transparent transparent #c3e5e0;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -50px;
  position: absolute
}

.beside-flow-01>.inner:last-child {
  margin-right: 0
}

.beside-flow-01>.inner:last-child:before {
  display: none
}

.beside-flow-01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin: 45px 0 80px;
  padding-bottom: 20px;
}

.beside-flow-01>.inner::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 24px;
  border-color: transparent transparent transparent #042159;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -50px;
  position: absolute;
}

.unit-flow-01>.inner {
  background: #f7fafc;
  border: 1px solid #25548c;
  border-radius: 3.65px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  width: 110px;
  height: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: 25px;
}

.unit-flow-01>.inner .txt {
  font-weight: bold;
  color: #25548c;
  letter-spacing: 0.1em;
  font-size: 18px;
  line-height: 1.2;
}

.unit-flow-01>.inner .txt .add {
  font-weight: normal;
  font-size: 1.8rem;
}

.unit-flow-01>.inner .txt .en {
  text-orientation: upright;
}

/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}

/* sp */
@media only screen and (max-width: 480px) {

  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}


table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.tb01 th {
  padding: 10px;
  border: solid 1px #ccc;
  box-sizing: border-box;
  font-weight: 500;
}

.tb01 td {
  padding: 10px;
  border: solid 1px #ccc;
  box-sizing: border-box;
  background: #ffffff;
}

.tb01 th {
  background: #3095A3;
  color: #fff;
  width: 16em;
  /* セルの横幅：1.8文字分 */
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }

  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom: none;
  }

  .tb01 tr:last-child {
    border-bottom: solid 1px #ccc;
  }
}

.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn001 {
  display: block;
  max-width: 100%;
  border: 2px solid #333;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding: 16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}

.btn001:hover {
  background-color: #333;
  border-color: #333;
  color: #FFF;
}

/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox {
  width: auto;
  font-size: 0px;
  /* ラベルと開く部分を分離する時は数値を入れる */
  margin: 0 10px;
  /* ボックス全体の位置調整 */
}

.acbox label {
  width: auto;
  font-size: 16px;
  /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: left;
  background: #0559AA;
  /* ラベルの背景色 */
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 4px;
  /* ラベルの角の丸み */
  cursor: pointer;
  color: #FFF;
  border: 1px solid #6B831B;
}

.acbox label:hover {
  background: #022446;
  /* ラベルにマウスを乗せた時の背景色 */
  color: #FFFFFF;
}

.acbox input {
  display: none;
}

.acbox label:after {
  color: #fff;
  content: "▼";
  /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}

.acbox input:checked~label::after {
  content: "▲";
  /* ラベルをクリックした後のアイコン */
}

.acbox div {
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.6s;
  /* 開閉スピードの設定 */
}

.acbox input:checked~div {
  height: auto;
  padding: 18px;
  /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #FBFBFB;
  /* 開いた部分の背景色 */
  opacity: 1;
}

.acbox input:checked~label {
  background: #0559AA;
  /* クリック後のラベルの背景色 */
}

.acbox-under {
  font-size: 14px;
  /* 開いた部分の文字サイズ */
  color: #000000;
  /* 開いた部分の文字色 */
}

label {
  margin-bottom: 20px;
}

.top-menu p {
  font-size: 12px;
}

.test {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 20px 150px;
  border: 3px solid #000000;
  background-color: #FFF;
}

.test:before {
  position: absolute;
  top: -107%;
  left: -24px;
  content: '';
  width: 150px;
  height: 230%;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  background: #d22424;
}

.test span {
  font-size: 50px;
  position: absolute;
  z-index: 1;
  top: 0.2em;
  left: 18px;
  color: #fff;
}

@media screen and (max-width: 480px) {
  h2 {
    font-size: 16px;
  }

  .test span {
    font-size: 36px;

  }

  .test:before {
    width: 120px;

  }
}



/*#fh5co-type h2 {
    position: relative;
    padding: 0.8rem;
    margin-bottom: 0.2rem;
    background-image: linear-gradient(45deg, white 0 50%, #D22424 50%);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 26px;
	border: 3px solid #000000;
}

#fh5co-type h2:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #D22424 50%, white 0 50%);
    content: '';
    z-index: -1;
}
#fh5co-blog h2 {
    position: relative;
    padding: 0.8rem;
    margin-bottom: 0.2rem;
    background-image: linear-gradient(45deg, white 0 50%, #D22424 50%);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 26px;
	border: 3px solid #000000;
}

#fh5co-blog h2:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #D22424 50%, white 0 50%);
    content: '';
    z-index: -1;
}*/
#fh5co-logo a {
  color: #FFF;
  text-shadow:
    1px 1px 0px #000, -1px -1px 0px #000,
    -1px 1px 0px #000, 1px -1px 0px #000,
    1px 0px 0px #000, -1px 0px 0px #000,
    0px 1px 0px #000, 0px -1px 0px #000;
}

.number {
  font-size: 36px;
  font-family: Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 640px) {
  .number {
    font-size: 28px;
    color: #C00;
  }
}

.redcolor {
  color: #C00;
}

.ctitle {
  font-size: 24px;
  font-weight: 600;
  color: #0559AA;
}

#fh5co-blog .blog-text h4 {
  font-size: 24px;
  color: #044280;
  font-weight: 600;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #0559AA;
  font-size: 24px;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #022446;
}

a.btn_03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #228bc8;
  border: 1px solid #228bc8;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

a.btn_03:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}

a.btn_03:hover {
  background: #fff;
  color: #228bc8;
}

a.btn_03:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}


/* 2022/12/19追加分 */

/* ブログバナー */
.blog-banner{
  box-shadow: 0px 3px 8px rgba(100, 100, 100, 1);
  padding: 0;
}

.blog-banner img{
  width: 100%;
}

@media screen and (max-width: 812px) {

}

@media screen and (max-width: 480px) {
  /* ブログバナー */
  .blog-banner{
    /* width: 100%; */
    /* border: solid 1px #dbdbdb; */
    box-shadow: 0px 3px 8px rgba(100, 100, 100, 1);
    padding: 0;
  }

  .blog-banner img{
    width: 100%;
  }
}



/* 2023年3月追加分 */

/* 不動産担保融資とは？ */
.what-is-fudosantanpo__lr{
  display: flex;
  align-items: center;
}

.what-is-fudosantanpo__left{
  width: 56%;
  padding: 16px;
}

.what-is-fudosantanpo__right{
  width: 44%;
}

.what-is-fudosantanpo__image img{
  max-width: 100%;
  max-height: 100%;
}

/* よくある質問 */
.faq{
  padding-bottom: 20px;
}

.faq__questions{
  margin-top: 32px;
}

.faq dt{
  margin-top: 16px;
  background:#f7fafc;
  border: 1px solid #25548c;
  padding: 8px 16px 11px;
  line-height: 1.75;
  transition-duration: .3s;
}

.faq dt:hover{
  opacity: .7;
  cursor: pointer;
  transition-duration: .3s;
}

.faq dt .question{
  display: flex;
  height: 100%;
  line-height: 1.75;
}

.faq dt .question .alpha{
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 18px;
}

.faq dt .question .q-txt{
  margin-left: 8px;
  display: inline-block;
  width: calc(100% - 32px - 32px);
  transform: translateY(2px);
}

.faq dt .question .plus{
  text-align: right;
  display: inline-block;
  width: 32px;
  height: 32px;
  transform: translateY(2px);
  font-size: 18px;
}

.faq dd{
  /* margin-top: 12px; */
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 0px 16px;
  line-height: 1.75;
}

.faq dd .answer{
  display: flex;
}

.faq dd .answer .a-txt{
  margin-left: 16px;
}

/*CSS */
.faq dt {

}
.faq dd {
  height: 0;
  overflow: hidden;
}

.faq dd.show{
  height: initial;
  transition-duration: .5s;
}

.about_sansyo__image{
  width: 100%;
  height: 410px;
}

.about_sansyo__image img{
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}


/* 不動産担保融資に関連する記事一覧 */
.articles{
  margin-top: 7em;
}

.articles__articles{
  display: flex;
  flex-wrap: wrap; /*20230629変更*/
  justify-content: space-between;
}

.articles__articles article{
  margin-top: 32px; /*20230629変更*/
  width: 32%;
}

.articles__articles article .image{
  width: 100%;
}

.articles__articles article .image img{
  max-width: 100%;
  max-height: 100%;
}

.articles__articles article time{
  margin-top: 8px;
  display: block;
  font-size: 14px;
  text-align: left;
  color: #616161;
}

.articles__articles article .title{
  padding: 0;
  margin-top: 0px;
  font-size: 16px;
  text-align: left;
  line-height: 1.75 !important;
}

.articles__btn{
  margin-top: 32px;
}
/* 
.articles__btn a{
  padding-bottom: 2px;
  display: inline-block;
  border-bottom: solid 1px;
} */

/* リンクスタイル */
.sansyo_link{
  color: #497cff;
  border-bottom: solid 1px;
}

@media screen and (max-width: 480px) {
 .what-is-fudosantanpo__lr{
    flex-direction: column-reverse;
  }

  .what-is-fudosantanpo__left{
    padding: 0px;
    padding-top: 2rem;
    width: 100%;
  }

  .what-is-fudosantanpo__right{
    width: 100%;
  }

  .about_sansyo__image{
    width: 100%;
    height: auto;
  }


  /* 不動産担保融資に関連する記事一覧 */
  .articles{
    margin-top: 7em;
  }

  .articles__articles{
    display: flex; /*20230629変更*/
  }

  .articles__articles article{
    margin-top: 16px;/*20230629変更*/
    width: 48%;/*20230629変更*/
  }

  .articles__articles article time{
    font-size: 12px;/*20230629変更*/
  }
  
  .articles__articles article .title{
    font-size: 14px;/*20230629変更*/
    text-align: left;
    line-height: 1.5 !important;/*20230629変更*/
  }

  .articles__articles article:first-of-type{
    margin-top: 15px;
  }

  
  .articles__btn a{
    width: 100%;
  }

  /* リンクスタイル */
  .sansyo_link{
    color: #497cff;
    border-bottom: solid 1px;
  } 
}
/* ============================================================
 　ヘッダーの記述上書き
============================================================ */
@media screen and (min-width: 992px) {
  /* ロゴエリアを 33.3% から 25% くらいに狭める */
  .fh5co-nav .top-menu .col-md-4 {
    width: 20% !important;
  }
  /* その分、メニューエリアを 66.6% から 75% くらいに広げる */
  .fh5co-nav .top-menu .col-md-8 {
    width: 80% !important;
  }
}

/* 念のため、1200px以下になったら少しだけ余白を詰める保険 */
@media screen and (max-width: 1200px) {
  .fh5co-nav ul li a {
    font-size: 13px;      /* さらに小さく */
    padding: 30px 4px; /* 左右の余白を少し減らす */
  }
}

/* =======================================================
   ▼▼▼ ハンバーガーメニューの出現タイミングを 991px に早める ▼▼▼
======================================================= */
@media screen and (max-width: 991px) {
  /* ① PC用の横並びメニューを隠す */
  .fh5co-nav .menu-1 {
    display: none !important;
  }
  /* ② ハンバーガーアイコンを表示する */
  .fh5co-nav-toggle {
    display: block !important;
  }
  /* ③ スマホ用オフキャンバス（スライドメニュー）の枠を有効にする */
  #fh5co-offcanvas {
    display: block !important;
  }
  /* ④ ヘッダー全体の左右の余白をスマホ用に調整する */
  .fh5co-nav .top-menu {
    padding: 0 10px !important;
  }
}

/* ============================================================
 　LP
============================================================ */
:root {
	/* 色 */
	--black: #313131;
	--red: #d22424;
	--orange: #ff9900;
    --deep_orange: #e7761b;
    --yellow: #fff000;
	--white: #fff;
	--blue: #05428a;
    --deep_blue: #023878;
    --bg_blue: #e9f3fd;
    --bg_gray: #f4f4f4;
}

#nara_lp,
#osaka_lp {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
    color: var(--black);
    font-family: "ヒラギノ角ゴ Pro W3", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.sp {
    display: none;
}
.pc {
    display: block;
}

/* ▼▼▼ ここから魔法のコードに差し替え ▼▼▼ */

/* 画面幅が1520pxから769px（スマホに切り替わる直前）までの間、無段階で縮小する設定 */
@media screen and (max-width: 1600px) and (min-width: 769px) {
    #nara_lp, #osaka_lp {
        /* 1520pxの時のサイズ（62.5%）を基準に、画面幅(vw)に比例して全体を縮小させる魔法の計算式 */
        font-size: calc(100vw / 1600 * 62.5);
    }
}
/* ▲▲▲ 差し替えここまで ▲▲▲ */

/* 以降、350pxで14pxにしたいので1.4remで指定 */
/* font-size100%時、1.4rem=22.4pxなので、XXpx/22.4=目的の％ */
@media screen and (max-width: 768px){
	#nara_lp,
  #osaka_lp  {
		font-size: 93.75%;/* 1.4remで21px */
	}
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}
@media screen and (max-width: 530px){/* 350px*1.5 */
	#nara_lp,
    #osaka_lp  {
		font-size: 78.13%;/* 1.4remで17.5px */
	}
}
@media screen and (max-width: 430px){
	#nara_lp,
    #osaka_lp  {
		font-size: calc(2.551 * var(--js_vw));/* 392pxで10px 1.4remで14px */
	}
}

span.yellow {
    color: var(--yellow);
}

/* ---------- LP セクション 上下余白 ---------- */
.reason-section,
.menu-section,
.estate-section,
.area-section,
.flow-section,
.faq-section {
    width: 100%;
    padding: 10rem 0;
}

@media screen and (max-width: 768px) {
    .reason-section,
    .menu-section,
    .estate-section,
    .area-section,
    .flow-section,
    .faq-section {
        padding: 6rem 0;
    }
}
/* ---------- LP h2 ---------- */
h2.lp_h2 {
    position: relative;
    overflow: hidden;
    padding: 2rem 2rem 2rem 15rem;
    border: 3px solid #000000;
    background-color: var(--white);
    display: flex;
    align-items: center;
    min-height: 8rem;
    line-height: 1.4;
    margin-bottom: 0;
}
.lp_h2:before {
    position: absolute;
    top: -107%;
    left: -24px;
    content: '';
    width: 150px;
    height: 230%;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    background: var(--red);
    z-index: 0;
}
.lp_h2 span {
    font-size: 5rem;
    color: #fff;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    line-height: 1;
/*    font-family: 'Helvetica', 'Arial', sans-serif;*/
    font-family: "ヒラギノ角ゴ Pro W6";
}
/* スマホ版 */
@media screen and (max-width: 768px) {
    h2.lp_h2 {
        padding: 1.5rem 1rem 1.5rem 9rem;
        min-height: auto;
        font-size: 1.8rem;
    }
    .lp_h2 span {
        font-size: 3rem;
        left: 1rem;
    }
    .lp_h2:before {
        width: 10rem;
        left: -2rem;
    }
}

/* ---------- ヒーロー (メインビジュアル) ---------- */
.hero {
    position: relative;
    width: 100%;
    min-height: 60rem;
    background-repeat: no-repeat;
    background-color: var(--white); 
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden; /* はみ出し防止 */
    isolation: isolate;
}

#nara_lp, #osaka_lp {
    padding-top: 1.8rem;
}

#nara_lp .hero {
    background-image: url('../images/nara/hero.jpg');
    background-size: 102%;
    background-position: left -2rem center;
    background-color: #114373;
}

#osaka_lp .hero {
    background-image: url('../images/osaka/hero.jpg');
    background-size: 125%;
    background-position: left -25rem center;
    background-color: #114373;
}

/* 中身のテキストをグラデーションより上に来るように調整 */
.hero > * {
    position: relative;
    z-index: 3;
}

/* =======================================================
   共通のフィルター設定（形やぼかし、バグ回避の魔法など）
======================================================= */
.hero::before {
    content: "";
    display: block; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    mix-blend-mode: soft-light;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hero::after {
    content: "";
    display: block; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    -webkit-backdrop-filter: blur(0.8rem);
    backdrop-filter: blur(0.8rem);
    z-index: 2; 
    mix-blend-mode: hard-light;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* =======================================================
   奈良版（#nara_lp）のフィルター色
======================================================= */
/* 1枚目：奥にある明るいグラデーション */
#nara_lp .hero::before {
    background: linear-gradient(135deg, rgba(25, 105, 140, 0.5) 30%, rgba(25, 105, 140, 0.7) 80%);
}
/* 2枚目：手前にある濃紺のフィルwター */
#nara_lp .hero::after {
    background: linear-gradient(100deg, rgba(13, 77, 91, 0.3) 50%, rgba(28, 119, 131, 1) 80%);
}

/* =======================================================
   大阪版（#osaka_lp）のフィルター色
======================================================= */
/* 1枚目：奥にある明るいグラデーション */
#osaka_lp .hero::before {
    /* ▼大阪用の色に書き換えてください▼ */
    background: linear-gradient(135deg, rgba(15, 110, 165, 0.2) 30%, rgba(15, 110, 165, 0.5) 80%);
    mix-blend-mode: hard-light;
}
/* 2枚目：手前にある濃いフィルター */
#osaka_lp .hero::after {
    /* ▼大阪用の色に書き換えてください▼ */
    background: linear-gradient(100deg, rgba(12, 106, 127, 0.3) 50%, rgba(12, 106, 127, 0.8) 80%);
}

@media screen and (min-width: 1601px) {
    .hero::before { clip-path: polygon(calc(50% - 9.6rem) 0, 100% 0, 100% 100%, calc(50% + 14.4rem) 100%); }
    .hero::after  { clip-path: polygon(calc(50% + 11.2rem) 0, 100% 0, 100% 100%, calc(50% - 9.6rem) 100%); }
}

/* 1600px以下（標準PC〜タブレット）：画面の「右端」から文字と同じ単位(rem)で距離を測る */
@media screen and (max-width: 1600px) {
    .hero::before { clip-path: polygon(calc(100% - 88.6rem) 0, 100% 0, 100% 100%, calc(100% - 64.6rem) 100%); }
    .hero::after  { clip-path: polygon(calc(100% - 67.8rem) 0, 100% 0, 100% 100%, calc(100% - 88.6rem) 100%); }
}

/* --- コンテナ --- */
.hero-container {
    position: relative;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    padding: 0;
    color: #fff;
    z-index: 3; /* ここが重要 */
}

/* --- 右側のメインコンテンツ --- */
.hero-content-right {
    color: #fff;
    width: max-content;  /* ★中身の文字幅に合わせて、箱の形を絶対にキープする魔法！ */
    max-width: 100%;     /* はみ出し防止の保険 */
    padding-right: 6rem; /* ★縦書きテキストと被らないよう、右側に透明なバリア(余白)を張る */
    margin-right: 0;     /* 既存のマイナスマージンは削除してリセットします */
    text-align: center;
    z-index: 3;
    margin-left: auto; /* 右寄せにする */
    margin-top: 3rem;
}

/* メインキャッチ全体 */
.hero-catch {
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    color: #fff;
    font-style: italic; 
    text-shadow: 0 12px 16px rgb(18 20 27 / 56%);
}

/* 上の行（最短3日で） */
.hero-catch .catch-top {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: -1rem; 
}

/* ベースライン調整 */
.hero-catch .text-sai,
.hero-catch .text-tan,
.hero-catch .text-day {
    transform: translateY(-1.3rem); /* マイナスの値で上方向へ移動 */
}

.hero-catch .text-sai { font-size: 10rem; font-weight: 600; }
.hero-catch .text-tan { font-size: 8rem; font-weight: 600; }
.hero-catch .text-day { font-size: 8rem; font-weight: 600; }
.hero-catch .text-l { 
    font-size: 19.2rem; 
    font-weight: bold; 
    margin: 0 1.5rem; 
    line-height: 0.7; 
}

/* 事業融資可能 */
.hero-catch .catch-bottom {
    font-size: 9.6rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-top: 2rem;
    margin-bottom: 4rem;
    line-height: 1.1;
}

/* 3つのタグ（角丸枠） */
.hero-tags {
    display: flex;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-bottom: 3.2rem;
    text-shadow: 0 0 16px rgb(18 20 27 / 80%);
}
.hero-tags li {
    border: 1px solid #fff;
    border-radius: 50px;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.8rem 2.4rem 1rem; 
}

/* サブテキスト */
.hero-desc { 
    font-size: 2.1rem; 
    line-height: 1.8; 
    font-weight: bold;
}

/* --- 左上の「50年」バッジ --- */
.hero-badge-50 {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    font-style: italic;
    padding: 0;
    background: none;
    margin-top: -28rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 上下の行の共通設定 */
.hero-badge-50 .badge-top,
.hero-badge-50 .badge-bottom {
    position: relative;
    display: inline-block;
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", serif;
    font-weight: bold;
    white-space: nowrap; 
}

.hero-badge-50 .badge-top {
    margin-bottom: -4rem; 
    padding: 0.5rem 8rem 0.5rem 3rem; 
    left: 0;
}

.hero-badge-50 .badge-bottom {
    padding: 0.5rem 8rem 0.5rem 4rem; 
    left: 0; 
    margin-top: -1rem;
}

/* 斜めの白帯（背景） */
.hero-badge-50 .badge-top::before,
.hero-badge-50 .badge-bottom::before {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 100%;
    z-index: -1; 
    background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.1) 100%);
    clip-path: polygon(0 20%, 90% 20%, 100% 90%, 0% 90%);
}

/* 発光エフェクト */
.hero-badge-50 span,
.hero-badge-50 div {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgba(255,255,255,0.7);
}

.hero-badge-50 .badge-num { color: #b7aa00; font-size: 9rem; line-height: 0.9; margin-right: 0.5rem; }
.hero-badge-50 .badge-year { color: #b7aa00; font-size: 6rem; margin-right: 0.5rem; }
.hero-badge-50 .badge-text-s { color: #002434; font-size: 6rem; }
.hero-badge-50 .badge-bottom { color: #002434; font-size: 6rem; letter-spacing: 0.05em; }
.hero-badge-50 .badge-bottom .text-to { font-size: 5rem; margin: 0 0.2rem; }

/* --- 右端の縦書きテキスト --- */
.hero-vertical-text {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -13rem;
    margin-right: 1rem;
    transform: translateY(-50%);
    color: #fff;
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    letter-spacing: 0.2em;
    z-index: 3;
    line-height: 1;
    white-space: nowrap;
}

/* 縦書きの各行 */
.hero-vertical-text span {
    display: block; 
    white-space: nowrap; 
    border-block-start: 1px solid rgba(255, 255, 255, 0.8);
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    margin-inline-start: 1.2rem;
}

.hero-vertical-text .v-text-1,
.hero-vertical-text .v-text-2 {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

/* ▼▼▼ タブレット（横向き等 851px〜1024px）対応 ▼▼▼ */
/* ★変更：769px を 851px に変更 */
@media screen and (max-width: 1024px) and (min-width: 851px) {
    /* --- メインコンテンツの余白調整 --- */
    .hero-content-right {
        padding-right: 4rem;
        margin-top: 1rem;
    }

    /* --- メインコピーのフォントサイズを一回り（約75%）縮小 --- */
    .hero-catch .text-sai { font-size: 7.5rem; }
    .hero-catch .text-tan { font-size: 6rem; }
    .hero-catch .text-day { font-size: 6rem; }
    .hero-catch .text-l { font-size: 14.4rem; margin: 0 1rem; }
    .hero-catch .catch-bottom { font-size: 7.2rem; margin-top: 1.5rem; margin-bottom: 3rem; }
    .hero-catch .text-sai,
    .hero-catch .text-tan,
    .hero-catch .text-day {
        transform: translateY(-1rem);
    }

    /* --- タグ・サブテキストの縮小 --- */
    .hero-tags { margin-bottom: 2.5rem; }
    .hero-tags li { font-size: 1.6rem; padding: 0.6rem 1.6rem; }
    .hero-desc { font-size: 1.5rem; }

    /* --- 50年バッジの縮小 --- */
    .hero-badge-50 {
        transform: scale(0.7); /* 全体を70%サイズに縮小 */
        transform-origin: left center;
        margin-top: -20rem; /* 位置微調整 */
    }

    /* --- 縦書きテキストの縮小と配置 --- */
    .hero-vertical-text {
        font-size: 1.8rem;
        margin-top: -10rem;
    }
    .hero-vertical-text span {
        padding-block-start: 0.8rem;
        padding-block-end: 0.8rem;
    }
    
    /* --- ★ここがポイント！フィルターの追従位置も文字サイズに合わせて再計算 --- */
    .hero::before { clip-path: polygon(calc(100% - 66rem) 0, 100% 0, 100% 100%, calc(100% - 48rem) 100%); }
    .hero::after  { clip-path: polygon(calc(100% - 50rem) 0, 100% 0, 100% 100%, calc(100% - 66rem) 100%); }
}

/* ② 991px 以下：ハンバーガーメニュー切り替え後（ヘッダー高さ 57.8px） */
@media screen and (max-width: 991px) {
    .body-lp, #nara_lp, #osaka_lp { 
        padding-top: 0 !important; 
    }
}
/* =======================================================
   SP・タブレット版（850px以下）共通設定
======================================================= */
@media screen and (max-width: 850px) {
    /* ★魔法のスケール：画面幅に合わせてすべてをゴムのように伸縮させる */
    #nara_lp, #osaka_lp {
        font-size: calc(100vw / 37.5);
    }

    /* 斜めフィルターは画像化されたため共通で削除！ */
    .hero::before,
    .hero::after {
        display: none !important;
        content: none !important;
    }
}

/* ★ヘッダー高さ：812pxでナビゲーションが変わるタイミングで上書き */
@media screen and (max-width: 812px) {
    .body-lp, #nara_lp, #osaka_lp { padding-top: 2.8rem !important; }
}


/* =======================================================
   ▼▼▼ タブレット縦対応（850px 〜 768px / 820px基準） ▼▼▼
   ※iPad mini(768px) もこちらのレイアウトに含めます
======================================================= */
@media screen and (max-width: 850px) and (min-width: 768px) {
    
    /* ★820pxの画面幅を基準に、タブレットサイズをシームレスに拡大・縮小させる魔法 */
    #nara_lp, #osaka_lp {
        font-size: calc(100vw / 82.0);
    }

    /* --- 1. 大枠と背景色の設定 --- */
    .hero {
        flex-direction: column; 
        justify-content: flex-start; 
        min-height: 145vw; 
        padding: 0 0 12rem 0; 
        background-color: #114373 !important; 
    }
    
    #nara_lp .hero,
    #osaka_lp .hero { 
        background-position: center top; 
        background-size: 100% auto; 
        padding-bottom: 0; 
    }

    /* --- 3. コンテナ --- */
    .hero-container {
        width: 100%;
        display: block; 
        padding: 64rem 1.5rem 6rem; 
        margin-top: 0;
    }

    .hero-content-right {
        width: 100%; 
        max-width: 100%;
        padding: 0; 
        margin: 0;
    }

    /* --- 4. バッジと縦書きテキスト --- */
    .hero-badge-50 { 
        top: 5%; 
        margin-top: 0;
        margin-left: -0.2rem; 
        transform: none; 
    }
    .hero-badge-50 .badge-top { margin-bottom: -1.9rem; padding: 0.2rem 3.8rem 0.2rem 1.4rem; }
    .hero-badge-50 .badge-bottom { margin-top: -0.5rem; padding: 0.2rem 3.8rem 0.2rem 1.9rem; }
    .hero-badge-50 .badge-num { font-size: 9rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-year { font-size: 6rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-text-s { font-size: 6rem; }
    .hero-badge-50 .badge-bottom { font-size: 6rem; letter-spacing: 0.05em; }
    .hero-badge-50 .badge-bottom .text-to { font-size: 5rem; margin: 0 0.1rem; }

    .hero-vertical-text {
        right: 1.2rem;
        top: 56rem; 
        margin-top: 4.8rem; 
        transform: none; 
        font-size: 2.4rem; 
        line-height: 1.2;
        margin-right: 1rem;
        text-shadow: #015071 0 0 18px;
    }
    .hero-vertical-text span {
        padding-block-start: 0.1rem;
        padding-block-end: 0.3rem;
        margin-inline-start: 0;
        letter-spacing: 0.5px;
    }

    /* --- 5. メインコピー --- */
    .hero-catch { text-align: center; padding-left: 0; padding-right: 0.5rem; }
    .hero-catch .catch-top { justify-content: center; }
    .hero-catch .text-sai { font-size: 10rem; } 
    .hero-catch .text-tan { font-size: 8rem; } 
    .hero-catch .text-day { font-size: 8rem; } 
    .hero-catch .text-l { font-size: 20rem; margin: 0 0.5rem; }
    .hero-catch .catch-bottom { font-size: 9.5rem; margin-top: 0.9rem; margin-bottom: 3rem; }
    .hero-catch .text-sai, .hero-catch .text-tan, .hero-catch .text-day { transform: translateY(-0.6rem); }

    .hero-tags { gap: 1rem; margin-bottom: 2.5rem; }
    .hero-tags li { font-size: 2.4rem; padding: 1.2rem 2rem; white-space: nowrap; line-height: 1.6; display: flex; justify-content: center; align-items: center; border-radius: 50px; width: auto; }
    .hero-desc { font-size: 2.4rem; line-height: 1.6; }
}


/* =======================================================
   ▼▼▼ 大きめスマホ対応（767px 〜 391px / 430px基準） ▼▼▼
======================================================= */
@media screen and (max-width: 767px) and (min-width: 391px) {
    
    /* ★430pxの画面幅を基準に、全体をシームレスに拡大・縮小させる魔法 */
    #nara_lp, #osaka_lp {
        font-size: calc(100vw / 43.0);
    }

    /* --- 1. 大枠と背景色の設定 --- */
    .hero {
        flex-direction: column; 
        justify-content: flex-start; 
        min-height: auto; 
        padding: 0 0 5rem 0; 
        background-color: #114373 !important; 
    }
    
    #nara_lp .hero,
    #osaka_lp .hero { 
        background-position: center top; 
        background-size: 100% auto; 
        padding-bottom: 5rem;
    }

    #nara_lp .hero {
      background-image: url('../images/nara/hero_sp.jpg'); 
    }

    #osaka_lp .hero {
      background-image: url('../images/osaka/hero_sp.jpg'); 
    }


    /* --- 3. コンテナ --- */
    .hero-container {
        width: 100%;
        display: block; 
        padding: 35rem 1.5rem 0; 
        margin-top: 0;
    }

    .hero-content-right {
        width: 100%; 
        max-width: 100%;
        padding: 0; 
        margin: 0;
    }

    /* --- 4. バッジと縦書きテキスト --- */
    .hero-badge-50 { 
        top: 5%; 
        margin-top: 0;
        margin-left: -0.2rem; 
        transform: none; 
    }
    .hero-badge-50 .badge-top { margin-bottom: -1.9rem; padding: 0.2rem 3.8rem 0.2rem 1.4rem; }
    .hero-badge-50 .badge-bottom { margin-top: -0.5rem; padding: 0.2rem 3.8rem 0.2rem 1.9rem; }
    .hero-badge-50 .badge-num { font-size: 4.5rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-year { font-size: 3rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-text-s { font-size: 3rem; }
    .hero-badge-50 .badge-bottom { font-size: 3rem; letter-spacing: 0.05em; }
    .hero-badge-50 .badge-bottom .text-to { font-size: 2.5rem; margin: 0 0.1rem; }

    .hero-vertical-text {
        right: 1.2rem;
        top: 28rem; 
        margin-top: 4rem; 
        transform: none; 
        font-size: 1.5rem; 
        line-height: 1.2;
        margin-right: 0;
        text-shadow: #015071 0 0 18px;
    }
    .hero-vertical-text span {
        padding-block-start: 0.1rem;
        padding-block-end: 0.3rem;
        margin-inline-start: 0;
        letter-spacing: 0.5px;
    }

    /* --- 5. メインコピー --- */
    .hero-catch { text-align: center; padding-left: 0; padding-right: 0.5rem; }
    .hero-catch .catch-top { justify-content: center; }
    .hero-catch .text-sai { font-size: 5.5rem; } 
    .hero-catch .text-tan { font-size: 4.5rem; } 
    .hero-catch .text-day { font-size: 4.5rem; } 
    .hero-catch .text-l { font-size: 11rem; margin: 0 0.5rem; }
    .hero-catch .catch-bottom { font-size: 5rem; margin-top: 0.9rem; margin-bottom: 1.9rem; }
    .hero-catch .text-sai, .hero-catch .text-tan, .hero-catch .text-day { transform: translateY(-0.6rem); }

    .hero-tags { gap: 0.5rem; margin-bottom: 1.5rem; }
    .hero-tags li { font-size: 1.3rem; padding: 1rem 1.2rem; white-space: nowrap; line-height: 1.6; display: flex; justify-content: center; align-items: center; border-radius: 20px; width: 10rem; }
    .hero-desc { font-size: 1.6rem; line-height: 1.6; }
}


/* =======================================================
   ▼▼▼ 標準・小さめスマホ対応（390px以下 / 375px基準） ▼▼▼
======================================================= */
@media screen and (max-width: 390px) {

    /* ★375pxの画面幅を基準に、全体をシームレスに拡大・縮小させる魔法 */
    #nara_lp, #osaka_lp {
        font-size: calc(100vw / 37.5);
    }
    
    /* --- 1. 大枠と背景色の設定 --- */
    .hero {
        flex-direction: column; 
        justify-content: flex-start; 
        min-height: auto; 
        padding: 0 0 5rem 0; 
        background-color: #114373 !important; 
    }
    
    #nara_lp .hero,
    #osaka_lp .hero { 
        background-position: center top; 
        background-size: 100% auto; 
        padding-bottom: 5rem;
    }
    #nara_lp .hero {
      background-image: url('../images/nara/hero_sp.jpg'); 
    }

    #osaka_lp .hero {
      background-image: url('../images/osaka/hero_sp.jpg'); 
    }

            

    /* --- 3. コンテナ --- */
    .hero-container {
        width: 100%;
        display: block; 
        padding: 30rem 1.5rem 0; 
        margin-top: 0;
    }

    .hero-content-right {
        width: 100%; 
        max-width: 100%;
        padding: 0; 
        margin: 0;
    }

    /* --- 4. バッジと縦書きテキスト --- */
    .hero-badge-50 { 
        top: 3%; 
        margin-top: 0;
        margin-left: -0.2rem; 
        transform: none; 
    }
    .hero-badge-50 .badge-top { margin-bottom: -1.9rem; padding: 0.2rem 3.8rem 0.2rem 1.4rem; }
    .hero-badge-50 .badge-bottom { margin-top: -0.5rem; padding: 0.2rem 3.8rem 0.2rem 1.9rem; }
    .hero-badge-50 .badge-num { font-size: 4.5rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-year { font-size: 3rem; margin-right: 0.2rem; }
    .hero-badge-50 .badge-text-s { font-size: 3rem; }
    .hero-badge-50 .badge-bottom { font-size: 3rem; letter-spacing: 0.05em; }
    .hero-badge-50 .badge-bottom .text-to { font-size: 2.5rem; margin: 0 0.1rem; }

    .hero-vertical-text {
        right: 1.2rem;
        top: 22.5rem; 
        margin-top: 4rem; 
        transform: none; 
        font-size: 1.4rem; 
        line-height: 1.2;
        margin-right: 0;
        text-shadow: #015071 0 0 18px;
    }
    .hero-vertical-text span {
        padding-block-start: 0.1rem;
        padding-block-end: 0.3rem;
        margin-inline-start: 0;
        letter-spacing: 0.5px;
    }

    /* --- 5. メインコピー --- */
    .hero-catch { text-align: center; padding-left: 0; padding-right: 0.5rem; }
    .hero-catch .catch-top { justify-content: center; }
    .hero-catch .text-sai { font-size: 5.1rem; } 
    .hero-catch .text-tan { font-size: 4.1rem; } 
    .hero-catch .text-day { font-size: 4.1rem; } 
    .hero-catch .text-l { font-size: 10rem; margin: 0 0.5rem; }
    .hero-catch .catch-bottom { font-size: 4.4rem; margin-top: 0.9rem; margin-bottom: 1.9rem; }
    .hero-catch .text-sai, .hero-catch .text-tan, .hero-catch .text-day { transform: translateY(-0.6rem); }

    .hero-tags { gap: 0.5rem; margin-bottom: 1.5rem; }
    .hero-tags li { font-size: 1.2rem; padding: 1rem 1.2rem; white-space: nowrap; line-height: 1.6; display: flex; justify-content: center; align-items: center; border-radius: 20px; width: 10rem; }
    .hero-desc { font-size: 1.5rem; line-height: 1.6; }
}
/* --- CTAセクション全体 --- */
.cta-section {
    width: 100%;
    font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}

/* --- ヘッダー（オレンジ帯） --- */
.cta-header {
    background-color: var(--orange); /* オレンジ色 */
    color: var(--white);
    text-align: center;
    padding: 1rem;
    position: relative; /* 三角配置の基準 */
}

.cta-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
    color: var(--white);
    font-size: 3.2rem;
    text-shadow: #fa0000cf 0 0 24px;
}

/* ＼ ／ のスラッシュ装飾 */
.cta-title .deco-slash {
    font-weight: normal;
    margin: 0 10px;
}

/* 下の三角突起 */
.cta-triangle {
    position: absolute;
    bottom: -15px; /* 下にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px; /* 逆三角形を作る */
    border-color: var(--orange) transparent transparent transparent;
    z-index: 2;
}

/* --- コンテンツエリア（水色背景） --- */
.cta-body {
    background-color: var(--bg_blue);
    padding: 6rem 0 4.5rem;
}

.cta-container {
    max-width: 114rem;
    margin: 0 auto;
    display: flex; /* PCは横並び */
    justify-content: space-between;
    align-items: center;
    gap: 4rem; /* 左右の要素の間隔 */
}

/* --- 左側：電話番号エリア --- */
.cta-tel-area {
    flex: 1; /* 幅を確保 */
    text-align: center;
}

.tel-box {
    display: inline-block;
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    padding: 1.5rem 5.5rem;
    color: var(--blue);
    line-height: 1;
    width: 100%;
}

.tel-link {
    display: block;
    font-size: 5.6rem;
    font-weight: bold;
    color: var(--blue);
    text-decoration: none;
    line-height: 1.2;
    font-family: 'Helvetica', 'Arial', sans-serif; /* 数字を見やすく */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}
/* ホバーしても電話番号の色を変えない */
.tel-link:hover {
    opacity: 0.8;
    color: var(--blue);
}

.tel-time {
    font-size: 1.8rem;
    margin-top: 5px;
    color: var(--black);
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}

.tel-time span {
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* 電話アイコンSVGのサイズ */
.tel-box img {
    width: 3.5rem;
    height: auto;
}


/* --- 右側：ボタンエリア --- */
.cta-btn-area {
    flex: 1;
    text-align: center;
    position: relative;
}

.cta-btn-area a span{
    font-size: 3.2rem;
}

/* 白い吹き出しラベル */
.cta-label {
    background: var(--white);
    color: var(--orange);
    border: 2px solid var(--orange);
    display: inline-block;
    padding: 1rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
    top: -2.1rem; /* ボタンの上に重ねる */
    line-height: 1;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* スマホではみ出さないよう調整 */
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 立体的なオレンジボタン */
.cta-button {
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #ff9100, var(--orange)); /* 微妙なグラデ */
    color: var(--white);
    text-decoration: none;
    font-size: 4rem;
    font-weight: bold;
    padding: 5rem 3rem 3.4rem; /* 高さを出す */
    border-radius: 10px;
    width: 100%;
    margin: 0 auto;
    gap: 0;
    
    /* 立体感を出す影 */
    box-shadow: 0 6px 0 var(--deep_orange), 0 10px 10px rgba(0,0,0,0.15);
    transition: top 0.1s, box-shadow 0.1s;
    position: relative; /* 沈み込み用に設定 */
    top: 0;
}

/* メールアイコンSVG */
.cta-button img {
    width: 3rem;
    height: auto;
}

/* 右端の矢印 */
.arrow {
    margin-left: 1rem;
    font-family: monospace;
}

/* --- ボタンのホバーエフェクト（押す動き） --- */
.cta-button:hover {
    /* 影を減らして沈んだように見せる */
    box-shadow: 0 2px 0 var(--deep_orange), 0 4px 4px rgba(0,0,0,0.1);
    top: 4px; /* 実際にボタンを下げる */
    background: var(--orange); /* グラデーションを少し濃く */
    color: var(--white);
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .cta-header {
        padding: 1rem;
    }
    
    .cta-title {
        position: relative; /* スラッシュ配置の基準点にする */
        padding: 0 4rem; /* スラッシュが文字に被らないよう、左右に「逃げ」を作る */
        
        /* 文字サイズの調整（必要に応じて） */
        font-size: 1.6rem; 
        line-height: 1.4;
    }

    /* スラッシュ共通設定 */
    .cta-title .deco-slash {
        position: absolute; /* 文字列から独立させる */
        top: 50%; /* 親要素の上下真ん中に配置 */
        transform: translateY(-50%); /* 厳密なセンター補正 */
        margin: 0; /* PC用のマージンをリセット */
        
        /* スラッシュの見た目調整 */
        font-weight: 100; /* 細くスタイリッシュに */
        font-size: 1.2em; /* 文字より少し大きく */
    }

    /* 左のスラッシュ (＼) */
    .cta-title .deco-slash:first-child {
        left: 0.8rem; /* 左端からの距離 */
        font-size: 2.4rem;
    }

    /* 右のスラッシュ (／) */
    .cta-title .deco-slash:last-child {
        right: 0.8rem; /* 右端からの距離 */
        font-size: 2.4rem;
    }

    /* 縦積みに変更 */
    .cta-container {
        flex-direction: column; /* 縦並び */
        gap: 3rem;
    }

    /* 順序の入れ替え：ボタンを上に、電話を下に */
    .cta-btn-area {
        order: 1; /* 1番目 */
        width: 100%;
    }
    .cta-tel-area {
        order: 2; /* 2番目 */
        width: 100%;
    }

    /* スマホでの各サイズ微調整 */
    .cta-body {
        padding: 4rem 1.5rem 3rem;
    }

    .tel-link {
        font-size: 2.8rem; /* はみ出し防止のため少し小さく */
    }
    
    .tel-box {
        width: 100%;
        padding: 1.5rem 0; /* 横幅いっぱいに */
        gap: 2rem;
    }
    
    .tel-box img {
        width: 2.4rem;
    }
    
    .tel-time {
        font-size: 1rem;
    }
    
    .tel-time span {
        font-size: 1.1rem
    }

    .cta-label {
        font-size: 1.2rem;
        width: 95%; /* 横幅いっぱいに */
        padding: 0.6rem 1rem;
    }
    
    .cta-button {
        font-size: 2rem;
        padding: 2rem 3.2rem;
    }
    .cta-btn-area a span {
        font-size: 1.6rem;
    }
    .cta-button img {
        width: 2.4rem;
    }
}

/* --- セクション全体 --- */
.problem-section {
    position: relative;
    width: 100%;
    /* PC版では高さを確保して背景を見せる */
    min-height: 600px; 
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: flex-end; /* PCでは右寄せ配置 */
    overflow: hidden;
}

/* --- 背景画像とグレーの被せ --- */
.problem-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    /* 画像設定 */
    background-image: url('../images/lp_common/01.jpg'); /* パスは適宜変更してください */
    background-size: 300rem auto;
    background-position: -80rem bottom;
    background-repeat: no-repeat;
}

/* 画像の上に載せる「薄いグレー」のフィルター */
.problem-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 薄いグレーを透過させて重ねる */
    /* 色を濃くしたい場合は 0.2 を 0.5 などに上げてください */
    background-color: rgba(100, 100, 100, 0.3); 
}

/* --- コンテンツ配置用コンテナ --- */
.problem-container {
    position: relative;
    z-index: 2; /* 背景より上に */
    width: 100%;
    max-width: 114rem;
    margin: 10rem auto;
    padding: 0 2rem;
    display: flex;
    justify-content: flex-end; /* カードを右側に寄せる */
}

/* --- 白いカード --- */
.problem-card {
    position: relative; /* 擬似要素の基準点 */
    background: transparent; /* 透明にする */
    box-shadow: none; /* 影も消す */
    width: 50%; 
    padding: 6rem 0 6rem 4rem;
    margin-right: 5%;
    z-index: 2; /* 背景画像より手前に */
}

.problem-card::before {
    content: "";
    position: absolute;
    
    /* 上下左右の配置 */
    top: 0;
    bottom: 0;
    left: 0; 
    right: -30vw;
    
    /* 色と影のデザイン */
    background-color: var(--white);
    box-shadow: 0.5px 0.5rem 1rem 0 rgba(0,0,0,0.3); /* ここに影をつける */
    
    z-index: -1;
}

/* --- 見出し --- */
.problem-title {
    font-size: 3.8rem;
    color: var(--blue);
    font-weight: 300;
    margin-bottom: 3rem;
    line-height: 1.4;
    font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}

.problem-title span {
    font-size: 3rem;
}

/* --- リスト --- */
.problem-list {
    list-style: none;
    padding: 0 0 0 3rem;
    margin: 0;
}

.problem-list li {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--black);
    margin-bottom: 3rem;
    padding-left: 5rem; /* チェックマーク分の左空き */
    position: relative;
    line-height: 1.5;
}

.problem-list li:last-child {
    margin-bottom: 0;
}

/* チェックマーク (check.svg) */
.problem-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px; /* 位置微調整 */
    width: 4rem; /* アイコンサイズ */
    height: 4rem;
    background-image: url('../images/lp_common/check.svg'); /* SVG読み込み */
    background-size: contain;
    background-repeat: no-repeat;
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    
    /* 1. セクション全体：Flexboxを使って「ど真ん中」にカードを置く */
    .problem-section {
        display: flex;          /* 中身を整列させるモード */
        justify-content: center; /* 左右中央揃え */
        align-items: center;     /* 上下中央揃え */
        
        position: relative;
        width: 100%;
        min-height: 40rem;      /* 背景の人物をしっかり見せるため高さを確保 */
        }

    /* 2. 背景画像：エリア全体に広げる */
    .problem-bg {
        position: absolute;     /* 親要素に合わせて配置 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;           /* セクション全体を覆う */
        
        /* 画像の表示調整 */
        background-size: 200rem; 
        background-position: left 40% bottom 12%;
    }

    /* 3. コンテナ：幅調整 */
    .problem-container {
        position: relative;
        z-index: 2;             /* 背景より手前に */
        width: 100%;
        display: flex;
        justify-content: center; /* 念のため中央寄せ */
        margin: 6rem 0;
        padding: 0 1.5rem;
    }

    /* 4. 白いカード：画面の中央に配置 */
    .problem-card {
        width: 100%;
        margin: 0;
        background: var(--white);
        padding: 3rem 2rem;     /* 中の余白 */
        box-shadow: 0 15px 3rem rgba(0,0,0,0.4); 
    }

    /* --- PC用の「突き抜け背景」はスマホでは不要なので消す --- */
    .problem-card::before {
        content: none;
    }
    
    /* --- 文字サイズの微調整（読みやすく） --- */
    .problem-title {
        font-size: 2.2rem;
        text-align: center;
        margin-bottom: 2.4rem;
        font-weight: 900;
                
        text-align: justify;
        text-align-last: justify;
        text-justify: inter-character;
    }
    
    .problem-title span {
        font-size: 1.8rem;
    }
    
    .problem-list {
        padding-left: 0.2rem;
    }

    .problem-list li {
        font-size: 1.6rem;
        margin-bottom: 1.6rem;
        padding: 0.5rem 0 0 4rem;     /* アイコンスペース */
        text-align: left;       /* リストは左揃えの方が見やすい */
    }
    
    .problem-list li::before {
        top: 0;                 /* アイコン位置調整 */
        width: 3rem;
        height: 3rem;
    }
}

/* --- ラッパー（全体枠） --- */
.reason-wrapper {
    display: flex;
    justify-content: space-between; /* 均等配置 */
    gap: 4.5rem; /* カード間の余白 */
    width: 100%;
    max-width: 114rem; /* コンテンツ幅に合わせる */
    margin: 5rem auto 0; /* 見出しとの距離 */
    padding: 1.5rem 0 0; /* 上のラベルがはみ出る分の余白確保 */
}

/* --- カード単体 --- */
.reason-card {
    position: relative; /* ラベル配置の基準点 */
    width: 32%; /* 3等分 */
    display: flex;
    flex-direction: column; /* 高さを揃えるための設定 */
}

/* --- 上に浮いているラベル（理由①） --- */
.reason-label {
    position: absolute;
    top: -15px; /* 箱の上に半分飛び出させる */
    left: 50%;
    transform: translateX(-50%); /* 左右中央揃え */
    line-height: 1.2;
    
    background-color: var(--white); /* 背景白 */
    color: var(--blue); /* 文字青 */
    border: 2px solid var(--blue); /* 枠線青 */
    
    padding: 0.2rem 3.5rem; /* 横長のカプセル型に */
    border-radius: 5rem; /* 丸める */
    font-weight: bold;
    font-size: 1.8rem;
    z-index: 2; /* 青い箱より手前に */
    white-space: nowrap;
}

/* --- 青い見出しエリア --- */
.reason-title {
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    text-align: center;
    min-height: 10rem;
    padding: 2.5rem 3rem 1.5rem; /* 上の余白を多めにとってラベルとの被りを防ぐ */
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.2;
    
    margin: 0;
}

/* --- 白い本文エリア --- */
.reason-body {
    background-color: var(--white);
    border: 2px solid var(--blue);
    border-top: none; /* 上の線は青い見出しと繋げるため消す */
    padding: 2rem;
    flex-grow: 1; /* 3つの箱の高さを強制的に揃える魔法 */
}

.reason-body p {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--black);
    margin: 0;
    text-align: left; /* 本文は左揃え */
}

/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .reason-wrapper {
        flex-direction: column; /* 縦積みに */
        gap: 50px; /* 上下の間隔を広めに（ラベル分を考慮） */
        padding: 0 1.5rem; /* 左右の余白 */
    }

    .reason-card {
        width: 100%; /* 横幅いっぱい */
    }

    .reason-title {
        font-size: 1.8rem;
        min-height: auto;
        padding: 3rem 15px 15px;
    }

    .reason-body p {
        font-size: 1.4rem;
    }
    
    .reason-label {
        font-size: 1.4rem;
        padding: 0.2rem 2rem;
    }
}

/* --- section --- */
.menu-section {
    background-color: var(--bg_blue); /* 背景の薄い青 */
}

/* --- インナー幅制限（wrapper） --- */
.menu-wrapper {
    width: 100%;
    max-width: 114rem; /* コンテンツ幅 */
    margin: 0 auto;
}

/* --- カードリスト（グリッド） --- */
.menu-list {
    display: flex;
    justify-content: space-between; /* 均等配置 */
    gap: 4.5rem; /* カード間の隙間 */
    margin-top: 5rem; /* 見出しとの距離（見出しが入った時のために確保） */
}

/* --- 白いカード本体 --- */
.menu-card {
    background-color: var(--white);
    width: 32%; /* 3等分 */
    padding: 30px 25px; /* カード内の余白 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 優しい影 */
    
    /* 高さを揃える設定 */
    display: flex;
    flex-direction: column;
}

/* --- カード上部（アイコン＋タイトル＋下線） --- */
.menu-card-header {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 15px; /* アイコンと文字の間隔 */
    padding-bottom: 15px; /* 線までの距離 */
    border-bottom: 2px solid var(--blue); /* 青い下線 */
    margin-bottom: 20px; /* 本文との距離 */
    min-height: 80px; /* 3枚のカードで見出しの高さを揃えるために確保 */
}

/* --- アイコン画像 --- */
.menu-icon {
    width: 8.5rem; /* アイコンの幅 */
    flex-shrink: 0; /* 縮まないように固定 */
}

.menu-icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- タイトル文字 --- */
.menu-card-title {
    color: var(--blue);
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    text-align: center;
}

/* --- 本文 --- */
.menu-card-desc {
    font-size: 1.8rem;
    color: var(--black);
    line-height: 1.6;
    margin: 0;
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .menu-list {
        flex-direction: column; /* 縦積みに変更 */
        gap: 2rem;
        margin-top: 3rem;
        padding: 0 1.5rem;
    }

    .menu-card {
        width: 100%; /* 横幅いっぱい */
        padding: 25px 20px;
    }

    .menu-card-header {
        min-height: auto; /* スマホでは高さ固定しなくてOK */
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .menu-card-title {
        font-size: 1.6rem;
    }

    .menu-card-desc {
        font-size: 1.4rem;
    }
}

/* --- セクション全体 --- */
.message-section {
    position: relative;
    min-height: 35rem;
    
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    overflow: hidden;
}

#nara_lp .message-section {
    background-image: url('../images/nara/02.jpg');
    background-size: 120%;
    background-position: bottom 45% left 20%;
}

#osaka_lp .message-section {
    background-image: url('../images/osaka/02.jpg');
    background-size: 120%;
    background-position: left 0% top 32%;
}


/* --- 【変更点】左半分を覆う「半透明の白い壁」 --- */
.message-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    
    /* ★ここを変更：画面の左半分(50%)を完全に占領する */
    width: 50%; 
    height: 100%;
    
    /* ★ここを変更：グラデーションではなく、SP版と同じ「透けた白」単色にする */
    background-color: rgba(255, 255, 255, 0.92); 
    
    /* 必要であれば境界線に少し影を落として立体感を出す */
    /* box-shadow: 5px 0 15px rgba(0,0,0,0.1); */
    
    z-index: 1;
}

/* --- コンテナ --- */
.message-container {
    position: relative;
    z-index: 2; /* 白い壁より手前に */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- テキストエリア --- */
.message-content {
    width: 50%; 
    padding-right: 40px; 
    margin: 5rem 0;
}

/* --- 見出しや本文（変更なし） --- */
.message-title {
    color: var(--blue);
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.message-body p {
    font-size: 1.8rem;
    color: var(--black);
    line-height: 1.8;
    font-weight: 500;
}

.message-body .highlight {
    background: linear-gradient(transparent 60%, var(--yellow) 60%);
    font-weight: bold;
    font-size: 1.8rem;
    padding: 0 2px;
    margin-right: 5px;
    display: inline-block;
}


/* ▼▼▼ スマホ対応（768px以下）※変更なし ▼▼▼ */
@media screen and (max-width: 768px) {
    .message-section {
        min-height: auto;
        padding: 0 1.5rem;
    }
    
    #nara_lp .message-section {
        background-size: 500%;
        background-position: bottom 35% left 55%;
    }
    
    #osaka_lp .message-section {
        background-size: 500%;
        background-position: bottom 35% left 55%;
    }

    /* スマホでは「左半分の壁」は邪魔なので消す */
    .message-section::before {
        content: none;
    }
    .message-container {
        padding: 0;
    }
    /* スマホ用のカードスタイル */
    .message-content {
        width: 100%;
        padding: 4rem 1.5rem; /* 右余白リセット＆内側余白設定 */
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .message-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .message-body p {
        font-size: 1.6rem;
    }
}

.estate-wrapper {
    width: 100%;
    max-width: 114rem;
    margin: 0 auto;
}

/* --- 1. 水色バナーエリア --- */
.estate-banner {
    background-color: var(--bg_blue);
    padding: 3rem 4rem; /* 30px 40px */
    margin-top: 3rem; /* 30px */
    margin-bottom: 5rem; /* 50px */
    
    display: flex;
    align-items: center;
    gap: 3rem; /* 30px */
}

/* アイコン（ビル） */
.estate-banner-icon {
    width: 8rem;
    flex-shrink: 0;
}

.estate-banner-icon img {
    width: 100%;
    height: auto;
}

/* テキストエリア */
.estate-banner-text {
    color: var(--blue);
    line-height: 1.6;
    font-size: 2.4rem;
    font-weight: bold;
}

.estate-banner-text p {
    margin: 0;
}

/* --- 2. 3つのチェックポイント（グリッド） --- */
.estate-points {
    display: flex;
    justify-content: space-between;
    gap: 3rem; /* 30px */
}

/* --- カード本体 --- */
.estate-card {
    position: relative;
    width: 32%;
    background-color: var(--white);
    border: 0.3rem solid var(--blue); /* 2px -> 0.2rem */
    
    padding: 4rem 1.5rem 3rem; /* 40px 15px 30px */
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 14rem; /* 140px */
}

.estate-card p {
    color: var(--black);
    font-size: 3.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* --- 青い丸とチェックマーク --- */
.check-circle {
    position: absolute;
    /* 丸のサイズ(5rem)の半分をマイナス指定して中央に乗せる */
    top: -2.5rem; /* -25px */
    left: 50%;
    transform: translateX(-50%);
    
    width: 5rem;  /* 50px */
    height: 5rem; /* 50px */
    background-color: var(--blue);
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.check-circle img {
    width: 2.4rem; /* 24px */
    height: auto;
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .estate-wrapper {
        padding: 0 1.5rem;
    }
    
    .estate-banner {
        padding: 3rem 1.5rem; 
        gap: 1.5rem; 
        margin: 3rem 0;
    }
    
    .estate-banner-icon {
        width: 6rem; /* 60px */
    }

    .estate-banner-text {
        font-size: 1.6rem; 
        text-align: left; /* テキストを左寄せに */
    }

    .estate-points {
        flex-direction: column;
        gap: 2.5rem;
        margin-left: 2.5rem; /* ★重要：左に飛び出す丸の分だけ全体を右にずらす */
    }

    .estate-card {
        width: 100%;
        min-height: auto;
        
        /* padding調整：左に丸が来るので、左の余白をたっぷり取る */
        /* 上 右 下 左 */
        padding: 2rem 2rem 2rem 4rem; 
        
        /* 中身の配置調整 */
        justify-content: flex-start; /* 左寄せ */
        align-items: center; /* 上下中央揃え */
    }
    .estate-card p {
        text-align: left; /* テキストを左寄せに */
        font-size: 2rem;
    }
    .check-circle {
        /* 上下の位置：真ん中 */
        top: 50%;
        
        /* 左右の位置：左端から、丸の幅の半分(2.5rem)だけ外に出す */
        left: -2.5rem;
        
        /* 補正：上下の中央揃えのためにY軸方向だけずらす */
        transform: translateY(-50%);
        /* (以前の translateX(-50%) は上書きして消す) */
    }
}

/* --- セクション全体 --- */
.area-section {
    background-color: var(--bg_blue);
}

.area-wrapper {
    width: 100%;
    max-width: 114rem; /* 1140px */
    margin: 0 auto;
}

/* --- レイアウトコンテナ --- */
.area-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6rem;
    margin-top: 6rem; /* 見出しとの距離 */
}

/* --- 1. 左側：エリアリスト --- */
.area-list {
    width: 60%; /* リスト側の幅 */
    display: flex;
    flex-direction: column;
    gap: 6.5rem; /* リスト間の距離 */
}

/* リストアイテム（白い枠の箱） */
.area-item {
    position: relative; /* ラベル配置の基準 */
    background-color: var(--white);
    border: 0.3rem solid var(--blue); /* 2px */
    padding: 2rem;
}

/* 青いラベル（タブ） */
.area-label {
    position: absolute;
    top: -3.7rem; /* 枠の上に配置（高さに合わせて調整） */
    left: -0.3rem;
    
    background-color: var(--blue);
    color: var(--white);
    font-size: 1.8rem; /* 18px */
    font-weight: bold;
    padding: 0.6rem 2rem; /* 内側の余白 */
    margin: 0;
    line-height: 1.4;
}

/* リスト内のテキスト（本文） */
.area-text {
    color: var(--blue);
    font-size: 2.4rem; /* 24px */
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

/* 「ほか」などの小さい文字 */
.area-note {
    font-size: 1.6rem; /* 16px */
    font-weight: normal;
    color: var(--black);
}

/* --- 2. 右側：地図エリア --- */
.area-map {
    width: 40%; /* 地図側の幅 */
    position: relative; /* 吹き出し配置の基準 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-image img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.5;
    /* 地図の色味調整が必要ならここにfilterなど */
}

/* --- 地図上の吹き出し --- */
.map-bubble {
    position: absolute;
    /* 地図の中央に配置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中に置く */
    
    background-color: var(--white);
    border-bottom: 0.5rem solid var(--blue);
    padding: 2rem 3rem;
    text-align: center;
    white-space: nowrap; /* 改行させない */
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    z-index: 2;
}

/* 吹き出しのタイトル */
.map-title {
    font-size: 4.8rem; /* 48px */
    font-weight: bold;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
}

.map-title .highlight {
    background: linear-gradient(transparent 60%, var(--yellow) 60%);
    padding: 0 0.5rem;
    font-size: 4.8rem;
}

/* 吹き出しのサブテキスト */
.map-sub {
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--black);
    margin: 0;
    line-height: 1;
}

/* 吹き出しの下の三角突起 */
.map-bubble::after {
    content: "";
    position: absolute;
    bottom: -1.6rem; /* 位置調整 */
    left: 50%;
    width: 2.6rem; 
    height: 2.6rem; 
    background-color: var(--white);
    border-right: 0.5rem solid var(--blue);
    border-bottom: 0.5rem solid var(--blue);
    transform: translateX(-50%) rotate(45deg);
}

/* ▼▼▼ PC表示（769px以上）での地図拡大テクニック ▼▼▼ */
@media screen and (min-width: 769px) {
    
    /* 1. コンテナ：リストと地図の高さを強制的に揃える */
    .area-container {
        align-items: stretch; /* center から変更 */
        position: relative;
    }

    /* 2. リストエリア：地図より手前に表示させる */
    .area-list {
        position: relative;
        z-index: 2; /* 地図が拡大して被っても文字は読めるように */
    }

    /* 3. 地図エリア：配置の基準点にする */
    .area-map {
        position: relative;
        z-index: 1;
    }

    /* 4. 地図画像：枠を無視して拡大配置する魔法 */
    .map-image {
        position: absolute;
        transform: translate(-50%, -50%);
        max-width: none;
        z-index: -1;
    }
    
    #nara_lp .map-image {
        top: 55%;
        left: 50%;
        width: 80%;
    }
    
    #osaka_lp .map-image {
        top: 54%;
        left: 50%;
        width: 90%;
    }
    
    
    /* 吹き出しは地図より手前に */
    .map-bubble {
        z-index: 3;
    }
}

/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .area-wrapper {
        padding: 0 1.5rem;
    }
    
    .area-container {
        /* ★ここがポイント：逆順にして地図を上に持ってくる */
        flex-direction: column-reverse; 
        gap: 4rem;
        margin-top: 2rem;
    }

    /* --- リストエリア（下に来る） --- */
    .area-list {
        width: 100%;
        gap: 4rem; /* ラベルが被らないよう間隔を広げる */
    }

    .area-item {
        padding: 1.5rem;
        border: 0.2rem solid var(--blue); /* 2px */
    }

    .area-label {
        font-size: 1.2rem; /* 12px */
        top: -2.6rem; /* 位置微調整 */
        left: -0.2rem;
        padding: 0.4rem 1.5rem;
    }

    .area-text {
        font-size: 1.2rem; /* 12px */
    }

    .area-note {
        font-size: 1.0rem; /* 10px */
    }

    /* --- 地図エリア（上に来る） --- */
    .area-map {
        width: 100%;
        padding: 0;
    }
    
    .map-image img {
        width: 15rem;
    }

    /* スマホ版の吹き出し調整 */
    .map-bubble {
        padding: 1.5rem 2rem;
        border-width: 0.2rem;
        width: 100%;
    }

    .map-title,
    .map-title .highlight {
        font-size: 2.4rem; /* 24px */
    }

    .map-sub {
        font-size: 1.8rem; /* 18px */
    }
    
    .map-bubble::after {
        width: 1.6rem;
        height: 1.6rem;
        bottom: -1rem;
        border-width: 0.2rem;
    }
}

/* --- セクション全体 --- */
.flow-section {
    width: 100%;
    background-color: var(--white);
}

.flow-wrapper {
    width: 100%;
    max-width: 114rem; /* 1140px */
    margin: 0 auto;
}

/* --- フローリスト（親要素） --- */
.flow-list {
    display: flex;
    justify-content: space-between; /* 横並び均等配置 */
    list-style: none;
    padding: 0;
    margin: 5rem 0 0; /* 見出しとの距離 */
}

/* --- 各ステップ（li） --- */
.flow-item {
    position: relative; /* 線の基準点 */
    width: 18%; /* 5つ並べるので適度な幅に */
    display: flex;
    flex-direction: column; /* PCは縦積み（上が丸、下が文字） */
    align-items: center;    /* 中央揃え */
    z-index: 1; /* 線より手前に */
}

/* --- 青い丸（CSSで作成） --- */
.flow-circle {
    width: 10rem;  /* 100px */
    height: 10rem; /* 100px */
    background-color: var(--white);
    border: 0.2rem solid var(--blue); /* 2px */
    border-radius: 50%; /* 正円 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem; /* 文字との隙間 */
    background-color: var(--white); /* 線が透けないように背景色指定 */
}

/* アイコン画像サイズ */
.flow-circle img {
    width: 5rem;
    height: auto;
    max-height: 5rem;
}

/* --- テキスト --- */
.flow-text {
    color: var(--blue);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1; /* 余ったスペースを全部埋める */
    display: flex; /* 中身を整列させるモード */
    align-items: center; /* 垂直方向：中央 */
    justify-content: center; /* 水平方向：中央 */
}

/* --- ★PC用の連結線（横線） --- */
.flow-item::after {
    content: "";
    position: absolute;
    /* 丸の中心の高さに合わせる (10rem / 2 = 5rem) */
    top: 5rem; 
    left: 50%; /* 自分の中心からスタート */
    
    width: 100%; /* 次のアイテムの中心まで届く（Flexboxの特性利用） */
    height: 0.2rem; /* 線の太さ */
    background-color: var(--blue);
    z-index: -1; /* 丸の後ろに配置 */
}

/* 最後のアイテムには線を引かない */
.flow-item:last-child::after {
    content: none;
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .flow-wrapper {
        padding: 0 2rem;
    }
    
    .flow-list {
        flex-direction: column; /* 縦並びに変更 */
        gap: 0; /* 線を繋げるためgapは使わずmarginで調整 */
        margin-top: 3rem;
        padding: 0;
    }

    .flow-item {
        width: 100%;
        flex-direction: row; /* 横並び（左が丸、右が文字） */
        align-items: center; /* 上下中央 */
        gap: 2rem; /* 丸と文字の間隔 */
        padding-bottom: 4rem; /* 次の項目までの余白 */
    }

    .flow-circle {
        width: 7rem;  /* 70px（少し小さく） */
        height: 7rem; /* 70px */
        border-width: 0.2rem;
        margin-bottom: 0; /* PC用のマージンリセット */
        flex-shrink: 0; /* 丸が潰れないように */
        position: relative;
        z-index: 2; /* 線より手前に */
    }

    .flow-circle img {
        width: 3.5rem;
        max-height: 3.5rem;
    }

    .flow-text {
        text-align: left; /* 左揃えに変更 */
        font-size: 1.5rem; /* 15px */
        display: block; /* Flexbox解除 */
        flex-grow: 0; /* 伸びる設定解除 */
    }

    /* --- ★SP用の連結線（縦線） --- */
    /* PCの横線を上書き設定 */
    .flow-item::after {
        top: 3.5rem; /* 丸の中心（高さ）からスタート */
        left: 3.5rem; /* 丸の中心（幅）に合わせる */
        
        width: 0.2rem; /* 線の太さ */
        height: 100%; /* 次のアイテムまで伸ばす */
        
        /* PCの設定をリセット */
        /* background-color: var(--blue); はそのまま */
    }
    
    /* 最後のアイテムの線は消す */
    .flow-item:last-child {
        padding-bottom: 0; /* 最後の余白なし */
    }
    .flow-item:last-child::after {
        content: none;
    }
}

/* --- セクション全体 --- */
.faq-section {
    background-color: var(--bg_gray); /* 指定の背景色 */
}

.faq-wrapper {
    width: 100%;
    max-width: 114rem; /* コンテンツ幅 */
    margin: 0 auto;
    padding: 0;
}

/* --- リスト --- */
.faq-list {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* カード間の隙間 */
}

/* --- カード単体 --- */
.faq-item {
    background-color: var(--white);
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.05); /* ふんわりした影 */
    overflow: hidden; /* 角丸からはみ出ないように */
}

/* チェックボックスは隠す */
.faq-checkbox {
    display: none;
}

/* --- Qエリア（ラベル＝クリックできる部分） --- */
.faq-label {
    display: flex;
    align-items: baseline;
    padding: 2.5rem 3rem; /* 余白たっぷり */
    cursor: pointer;
    position: relative; /* 矢印配置の基準 */
    width: 100%;
    margin: 0; /* 既存CSSのリセット */
    transition: background-color 0.2s;
    line-height: 1;
}

/* ホバー時の挙動 */
.faq-label:hover {
    background-color: #fafafa; /* 微妙に色を変えて押せる感を出す */
}

/* Qアイコン */
.faq-icon-q {
    color: var(--blue);
    font-size: 3.2rem;
    font-weight: bold;
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin-right: 2rem;
    line-height: 1;
}

/* 質問テキスト */
.faq-q-text {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--black);
    padding-right: 3rem; /* 矢印と被らないように */
}

/* --- 右側の矢印（CSSで作る） --- */
.faq-arrow {
    position: absolute;
    right: 3rem;
    top: 50%;
    
    width: 1.2rem;
    height: 1.2rem;
    border-top: 0.3rem solid var(--blue);
    border-right: 0.3rem solid var(--blue);

    transform: translateY(-50%) rotate(135deg); 
    transition: transform 0.3s; 
    margin-top: 0; 
}
/* --- 開いた時の矢印回転 --- */
.faq-checkbox:checked + .faq-label .faq-arrow {
    /* ★変更：開いた時も「ど真ん中補正」を維持したまま回転させる */
    transform: translateY(-50%) rotate(-45deg); 
}


/* --- Aエリア（中身）のアニメーション機構 --- */
.faq-content {
    display: grid;
    grid-template-rows: 0fr; /* 初期状態：高さ0 */
    transition: grid-template-rows 0.3s ease-out; /* ヌルっと動かす */
    opacity: 0; /* 最初は透明 */
}

/* 開いた状態 */
.faq-checkbox:checked ~ .faq-content {
    grid-template-rows: 1fr;
    opacity: 1;
    
    /* 修正前：端から端までの線 */
    /* border-top: 1px solid #c9d6e4; */

    /* 修正後：CSSグラデーションで「長さ指定できる線」を描く */
    background-image: linear-gradient(var(--blue), var(--blue));
    
    /* 位置：左右中央、上端 */
    background-position: center top;
    
    /* 繰り返しなし */
    background-repeat: no-repeat;
    
    /* ★ここがポイント：サイズ指定 */
    /* 横幅：100%から左右2remずつ（計4rem）引いた長さ */
    /* 高さ：1px（線の太さ） */
    background-size: calc(100% - 4rem) 1px;
}

/* 中身のラッパー（アニメーション用） */
.faq-content-inner {
    overflow: hidden; /* これがないとアニメーションしない */
    display: flex; /* Aアイコンとテキストを横並び */
    align-items: baseline;
    padding: 0; /* 閉じてる時は余白なし */
    transition: padding 0.3s;
}

/* 開いた時の余白追加 */
.faq-checkbox:checked ~ .faq-content .faq-content-inner {
    padding: 2.5rem 3rem; 
}

/* Aアイコン */
.faq-icon-a {
    color: var(--red); /* 赤色 */
    font-size: 3.2rem;
    font-weight: bold;
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin-right: 2rem;
    line-height: 1;
}

/* 回答テキスト */
.faq-a-text {
    font-size: 2.4rem;
    color: var(--black);
    line-height: 1;
    margin: 0;
}


/* ▼▼▼ スマホ対応（768px以下） ▼▼▼ */
@media screen and (max-width: 768px) {
    .faq-wrapper {
        padding: 0 1.5rem;
    }
    
    .faq-list {
        margin-top: 3rem;
        gap: 1.5rem;
    }
    
    .faq-label {
        padding: 2rem;
    }
    
    .faq-icon-q, .faq-icon-a {
        font-size: 2rem;
        margin-right: 1.5rem;
    }
    
    .faq-q-text,
    .faq-a-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    .faq-checkbox:checked ~ .faq-content {
        /* スマホは左右1.5remずつ（計3rem）空ける場合 */
        background-size: calc(100% - 3rem) 1px;
    }
    
    .faq-checkbox:checked ~ .faq-content .faq-content-inner {
        padding: 2rem; 
    }

    .faq-arrow {
        right: 2rem;
    }
    
    .faq-label:hover {
        background-color: var(--white);
    }
}