@charset "UTF-8";



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

 * body

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

body {

   background: #fff;

   color: #2D2D2D;

   font-family: "Noto Sans JP", sans-serif;

   font-weight: 400;

   font-size: 16px;

   line-height: 1.6;

   letter-spacing: 0;

   min-width: inherit;

   min-height: inherit;

   max-height: 100%;

   position: relative;

}



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

   body {

      font-size: 14px;

   }

}



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

 * <main>

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

main {

   clear: both;

   width: 100%;

   box-sizing: border-box;

   position: relative;

   margin: 0;

   padding: 0;

}



/* Animation */

.fade-in {

   filter: blur(20px);

   opacity: 0;

   background: linear-gradient(270deg, #111 0%, #777 100%);

   background-clip: text;

   -webkit-background-clip: text;

   transition-delay: 200ms;

   transition-duration: 600ms;

   transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.fade-in[style*="visible"] {

   filter: blur(0);

   opacity: 1;

   background: linear-gradient(90deg, black 0%, black 100%);

   background-clip: text;

   -webkit-background-clip: text;

}



.fade-in-up {

   transition-delay: 200ms;

   transition-duration: 800ms;

   transform: translate(0px, 24px);

   opacity: 0;

}



.fade-in-up[style*="visible"] {

   transform: translate(0px, 0px);

   opacity: 1;

}



/* -- -- */

.img_effect {

   display: inline-block;

   overflow: hidden;

   position: relative;

}



.img_effect:after {

   content: "";

   animation-duration: 300ms;

   animation-fill-mode: forwards;

   animation-delay: 300ms;

   display: block;

   position: absolute;

   top: 0;

   left: 0;

   height: 100%;

   width: 100%;

   background-color: #fff;

}



.img_effect[style*="visible"]:after {

   animation-name: homeTileAnimation;

}



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

 * Custom

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

/* -- heading -- */

.h2 {

   font-family: "Noto Serif JP", serif;

   font-weight: 400;

   font-size: 39px;

   line-height: 1.4;

}



.h2 .sub {

   display: block;

   font-family: "Abhaya Libre", serif;

   font-size: 19px;

}


.h-16 {

   font-size: 18px;

   line-height: 26px;

}

.h-18 {

   font-size: 18px;

   line-height: 26px;

}



.h-20 {

   font-weight: 500;

   font-size: 20px;

   line-height: 30px;

}



.h-22 {

   font-weight: 500;

   font-size: 22px;

   line-height: 32px;

}



.h-24 {

   font-weight: 500;

   font-size: 24px;

   line-height: 35px;

}



.h-25 {

   font-weight: 500;

   font-size: 25px;

   line-height: 35px;

}



.h-26 {

   font-weight: 500;

   font-size: 26px;

   line-height: 35px;

}



.h-28 {

   font-weight: 500;

   font-size: 28px;

   line-height: 40px;

}



.h-32 {

   font-weight: 500;

   font-size: 32px;

   line-height: 46px;

}



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

   .h2 {

      font-size: 24px;

   }



   .h2 .sub {

      font-size: 12px;

   }


.h-16 {

      font-size: 14px;

      line-height: 22px;

   }
	
   .h-18 {

      font-size: 16px;

      line-height: 24px;

   }



   .h-20 {

      font-size: 18px;

      line-height: 26px;

   }



   .h-22 {

      font-size: 20px;

      line-height: 30px;

   }



   .h-25 {

      font-size: 24px;

      line-height: 35px;

   }
}

/* button */

.button {

   position: relative;

}



.button a {

   display: inline-flex;

   justify-content: center;

   align-items: center;

   width: 320px;

   height: 56px;

   background: #fff;

   color: #CD5B28;

   border: 1px solid #CD5B28;

   font-family: "Noto Serif JP", serif;

   font-weight: 400;

   font-size: 20px;

   letter-spacing: 0;

   line-height: 30px;

   border-radius: 0px;

   margin: 0;

   padding: 0;

   box-sizing: border-box;

   text-align: center;

   position: relative;

   z-index: 1;

}



.button a:before {

   content: "";

   position: absolute;

   z-index: -1;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background: #CD5B28;

   -webkit-transform: scaleX(0);

   transform: scaleX(0);

   -webkit-transform-origin: 0 50%;

   transform-origin: 0 50%;

   -webkit-transition-property: transform;

   transition-property: transform;

   -webkit-transition-duration: 0.3s;

   transition-duration: 0.3s;

   -webkit-transition-timing-function: ease-out;

   transition-timing-function: ease-out;

}



.button a:after {

   content: '';

   width: 42px;

   height: 7px;

   background: url("../img/common/btn-arrow.png") no-repeat center top/cover;

   position: absolute;

   top: 50%;

   right: 16px;

   transform: translate(0, -50%);

   transition: all 0.3s;

}



.button a:hover {

   color: #fff;

   opacity: 1;

}



.button a:hover:before {

   -webkit-transform: scaleX(1);

   transform: scaleX(1);

}



.button a:hover:after {

   background-image: url("../img/common/btn-arrow-wh.png");

}



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

   .button {

      text-align: center;

   }



   .button a {

      width: 295px;

      font-size: 18px;

   }

}



/* -- -- */

.txt-udl {

   text-decoration: underline;

}



a.txt-udl:hover {

   text-decoration: none;

}



.txt-c {

   text-align: center;

}



.txt-j {

   text-align: justify;

}



.txt-r {

   text-align: right;

}



.txt-uppercase {

   text-transform: uppercase;

}



.cl-orange {

   color: #CD5B28;

}



.cl-cream {

   color: #F8F1EB;

}



.cl-blue {

   color: #0096DF;

}



.cl-white {

   color: #fff;

}



.cl-black {

   color: #2D2D2D;

}



.cl-grey {

   color: #D0D0D0;

}



.hightlight {

   background-image: linear-gradient(#fae428, #fae428);

   background-size: 100% 33px;

   background-repeat: no-repeat;

   background-position: left bottom;

}



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

   .hightlight {

      background-size: 100% 15px;

   }

}



.fw-r {

   font-weight: 400;

}



.fw-m {

   font-weight: 500;

}



.fw-smb {

   font-weight: 600;

}



.fw-b {

   font-weight: 700;

}



.fw-black {

   font-weight: 900;

}



.bdra-10 {

   border-radius: 10px;

}



.bdra-20 {

   border-radius: 20px;

}



.bdra-24 {

   border-radius: 24px;

}



.bdra-30 {

   border-radius: 30px;

}



.bdra-50 {

   border-radius: 30px;

}



.bdra-64 {

   border-radius: 64px;

}



.shadow {

   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



.clear {

   clear: both;

}



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

   .bdra-20 {

      border-radius: 10px;

   }



   .bdra-30 {

      border-radius: 15px;

   }



   .bdra-50 {

      border-radius: 25px;

   }



   .bdra-64 {

      border-radius: 32px;

   }

}



/* -- --*/

.w600 {

   max-width: 600px;

   margin: 0 auto;

}



.w800 {

   max-width: 800px;

   margin: 0 auto;

}



.w1000 {

   max-width: 1000px;

   margin: 0 auto;

}



/* -- --*/

.section-space {

   padding: 100px 0 160px;

}



.mt60 {

   margin-top: 60px;

}



.pt100 {

   padding-top: 100px;

}



.pb160 {

   padding-bottom: 160px;

}



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

   .section-space {

      padding: 56px 0;

   }



   .mt60 {

      margin-top: 40px;

   }



   .pt100 {

      padding-top: 56px;

   }



   .pb160 {

      padding-bottom: 56px;

   }

}



/* -- --*/

.bg-cl01 {

   background: #F8F1EB;

}

.bg-gray {

	background: #f9f9f9;

}



/* -- -- */

.img-zoom,

.img-zoom figure,

.img-zoom .img {

   display: block;

   overflow: hidden;

}



.img-zoom>img,

.img-zoom .img-obj {

   transition: 0.6s ease-in-out;

}



.img-zoom:hover {

   opacity: 1;

}



.img-zoom:hover>img,

.img-zoom:hover .img-obj {

   transform: scale(1.07);

   filter: brightness(0.8);

}



/* -- -- */

.effect-bnr a {

   display: block;

   background-color: #030c17;

   position: relative;

}



.effect-bnr a:after {

   content: '';

   position: absolute;

   top: 30px;

   right: 30px;

   bottom: 30px;

   left: 30px;

   border: 1px solid #fff;

   box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1);

   opacity: 0;

   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

   transition: opacity 0.35s, transform 0.35s;

   -webkit-transform: scale3d(1.1, 1.1, 1);

   transform: scale3d(1.1, 1.1, 1);

}



.effect-bnr a:hover {

   opacity: 1;

}



.effect-bnr a:hover:after {

   opacity: 1;

   -webkit-transform: scale3d(1, 1, 1);

   transform: scale3d(1, 1, 1);

}



.effect-bnr a:hover img {

   opacity: 0.3 !important;

}



/* -- --*/

.tb-style {

   position: relative;

   line-height: 1.4;

}



.tb-style dl {

   display: table;

   width: 100%;

   border-top: 1px solid #D0D0D0;

   border-bottom: 1px solid #D0D0D0;

}



.tb-style dl+dl {

   border-top: 0;

}



.tb-style dl dt,

.tb-style dl dd {

   display: table-cell;

   height: 50px;

   vertical-align: middle;

}



.tb-style dl dt {

   width: 300px;

   background-color: #F8F1EB;

   padding: 5px 10px;

   position: relative;

}



.tb-style dl dd {

   padding: 5px 24px;

}



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



   .tb-style dl dt,

   .tb-style dl dd {

      height: 70px;

   }



   .tb-style dl dt {

      width: 42%;

   }



   .tb-style dl dt {

      padding: 5px 8px;

   }



   .tb-style dl dd {

      padding: 5px 16px;

   }

}



/* -- -- */

.swiper {

   overflow: hidden;

   position: relative;

}



.swiper-wrapper {

   transition-timing-function: linear;

}



.swiper-button-next,

.swiper-button-prev {

   width: 70px;

   height: 70px;

   border-radius: 50%;

   overflow: hidden;

   background-color: #1C4B68;

   transition: all 0.3s;

}



.swiper-button-next:after,

.swiper-button-prev:after {

   width: 100%;

   height: 100%;

   font-size: 0;

}



.swiper-button-next:after {

   background: url("../img/common/slider-next.png") no-repeat center/23px auto;

}



.swiper-button-prev:after {

   background: url("../img/common/slider-prev.png") no-repeat center/23px auto;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

   opacity: 0.7;

}



.swiper-pagination {

   display: flex;

   align-items: center;

   gap: 12px;

   width: auto;

   position: static;

   margin: 0;

   padding-right: 10px;

}



.swiper-pagination .swiper-pagination-bullet {

   display: block;

   width: auto;

   height: auto;

   border-radius: 0;

   background: transparent;

   opacity: 1;

   font-weight: 600;

   font-size: 14px;

   letter-spacing: 0.04em;

   line-height: 30px;

   margin: 0;

}



.swiper-pagination .swiper-pagination-bullet-active {

   color: #53B075;

}



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



   .swiper-button-next,

   .swiper-button-prev {

      width: 40px;

      height: 40px;

   }

}



/* -- --*/

.slick-arrow {

   display: block;

   width: 49px;

   height: 10px;

   background: transparent;

   border: 0;

   font-size: 0;

   outline: 0;

   cursor: pointer;

   transition: all 0.3s;

   position: relative;

   z-index: 1;

}



.slick-arrow:before {

   content: '';

   width: 100%;

   height: 100%;

   background: no-repeat center / 100% auto;

   position: absolute;

   top: 0;

   left: 0;

}



.slick-prev:before {

   background-image: url("../img/common/slider-prev.png");

}



.slick-next:before {

   background-image: url("../img/common/slider-next.png");

}



.slick-arrow:hover {

   opacity: 0.5;

}



.slick-arrow.slick-disabled {

   opacity: 0.5;

   pointer-events: none;

}



.slider-nav {

   display: flex;

   justify-content: center;

   align-items: flex-start;

   gap: 20px;

}



.slider-nav .slick-prev {

   order: 1;

}



.slider-nav .slick-next {

   order: 3;

}



.slider-nav .slick-dots {

   order: 2;

   padding-top: 5px;

}



.slick-dots {

   display: flex;

   justify-content: center;

   align-items: center;

   gap: 8px;

}



.slick-dots li {

   width: 6px;

   height: 6px;

   position: relative;

}



.slick-dots button {

   display: block;

   width: 100%;

   height: 100%;

   background-color: #D0D0D0;

   border: 0;

   font-size: 0;

   transition: all 0.3s;

   cursor: pointer;

}



.slick-dots .slick-active button,

.slick-dots li:hover button {

   background-color: #CD5B28;

}



@media screen and (min-width: 1201px) {

   .slick-dots li button:hover {

      opacity: 0.7;

   }

}



/* -- --*/

.photo-full img {

   width: 100%;

   max-width: inherit;

}



.img-obj {

   width: 100%;

   max-width: inherit;

   height: 100%;

   object-fit: cover;

}



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

   .photo-full {

      width: 100%;

      height: 60vw;

   }



   .photo-full img {

      height: 100%;

      object-fit: cover;

   }

}



/* -- --*/

hr {

   border: 0;

}



/* -- --*/

.ovh {

   overflow: hidden;

}



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

 * <header>

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

header {

   display: flex;

   align-items: center;

   gap: 20px;

   background: #fff;

   width: 100%;

   height: 88px;

   z-index: 100;

   box-sizing: border-box;

   position: sticky;

   top: 0;

   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);

   padding: 0 20px;

}



header .logo {

   flex: 1 0 0;

}



header .logo a {

   display: block;

   max-width: 320px;

}



#navbar {

   display: flex;

   align-items: center;

   gap: 20px;

}



#navbar .nav-list {

   display: flex;

   gap: 20px;

   color: #CD5B28;

}



#navbar .nav-list a {

   border-bottom: 1px solid transparent;

}



#navbar .nav-list a:hover {

   border-bottom-color: #CD5B28;

}

#navbar .nav-list p {
   display: none;
   padding-left: 25px;
   padding-top: 10px;
}
#navbar .nav-list p a {
   font-size: 14px;
   display: block;
   border: none;
   padding: 12px 0 0;

}


#navbar .nav-btn {

   display: flex;

   align-items: center;

   gap: 5px;

}



#navbar .nav-btn a {

   display: flex;

   align-items: center;

   justify-content: center;

   width: 175px;

   height: 48px;

   background-image: radial-gradient(circle, #73D1FF, #0096E0);

   background-position: bottom center;

   background-size: 100% 200%;

   color: #fff;

   text-align: center;

   font-weight: 700;

   font-size: 16px;

   border-radius: 50px;

}



#navbar .nav-btn a:hover {

   background-color: #2D2D2D;

   opacity: 1;

}



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

   #navbar {

      gap: 10px;

   }



   #navbar .nav-list {

      gap: 10px;

   }

}



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

   header {

      height: 72px;

      padding: 0 20px;

   }



   header .logo {

      padding-left: 0;

   }



   header .logo a {

      max-width: 240px;

   }



   .hamburger {

      display: block;

   }



   #navbar {

      flex-direction: column;

      justify-content: center;

      align-items: inherit;

      gap: 20px;

      background: #0096DF;

      width: 100%;

      height: 100vh;

      position: fixed;

      top: 0;

      left: 0;

      box-sizing: border-box;

      overflow-y: auto;

      padding: 100px 64px;

      opacity: 0;

      visibility: hidden;

      transition: all 0.3s linear;

   }



   #navbar:before {

      content: '';

        width: 185px;
        height: 250px;

      background: url("../img/common/logo-footer.webp") no-repeat center top/cover;

      position: absolute;

      right: 12px;

      bottom: 24px;

      opacity: 0.4;

   }



   #navbar .nav-list {

      flex-direction: column;

      gap: 20px;

      width: 100%;

      font-size: 20px;

      color: #fff;

      font-family: "Noto Serif JP", serif;

   }



   #navbar .nav-btn {
      display: none;
      flex-direction: column;

      gap: 20px;

      width: 100%;

   }



   #navbar .nav-btn a {

      justify-content: flex-start;

      width: 100%;

      height: auto;

      background: transparent;

      font-size: 20px;

      font-family: "Noto Serif JP", serif;

      font-weight: 400;

   }
   #navbar .nav-list a:hover {
      opacity: 1;
   }
#navbar .nav-list p {
   display: block;
}


   .navOpen #navbar {

      opacity: 1;

      visibility: visible;

   }

}



@media screen and (min-width: 1024px) {

   #navbar {

      height: auto !important;

   }

}



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

 * <footer>

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

footer {

   background-color: #CD5B28;

   color: #fff;

}



footer .wrap {

   display: flex;

   justify-content: space-between;

   gap: 20px;

   padding-top: 75px;

   padding-bottom: 80px;

}



footer .logo {

   width: 168px;

}



footer nav div {

   display: flex;

 	flex-direction:column;
	
	align-items: flex-start;

   gap: 13px;

}

footer .st-footernav{

	display: flex;

	justify-content:flex-end;

	gap: 40px;

}

footer nav p {

   text-align: right;

   padding-top: 10px;

}



footer nav a {

   border-bottom: 1px solid transparent;

}



footer nav a:hover {

   border-bottom-color: #fff;

}



footer address {

   display: flex;

   justify-content: center;

   align-items: center;

   height: 60px;

   border-top: 1px solid #ED7741;

   font-size: 15px;

}



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

   footer .wrap {

      flex-direction: column;

      justify-content: center;

   }



   footer .logo {

      margin: 0 auto;

   }



   footer nav div {

      justify-content: center;

   }



   footer nav p {

      text-align: center;

   }

}



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

   /* 1つ目のグループ（お知らせ〜料金表）を2列にする */

   footer .st-footernav nav:nth-of-type(1) div {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

   }



   /* プライバシーポリシー <p> の余白調整 */

   footer nav p {

      padding-top: 0;

      margin: 0; 

   }



   /* ★追加：2つ目のグループ全体の上に余白を空ける */

   footer .st-footernav nav:nth-of-type(2) {

      margin-top: 24px; /* ここでお好みの隙間に調整してください（20px〜30px程度がおすすめです） */

   }



   /* 2つ目のグループ（美肌レーザー以降）を1列にする */

   footer .st-footernav nav:nth-of-type(2) div {

      display: grid;

      grid-template-columns: 1fr;

   }



   /* 2つ目のグループのaタグ（リンク）の罫線を消し、高さを詰める */

   footer .st-footernav nav:nth-of-type(2) div a {

      border: none;

      height: 35px;

   }



   footer {

      padding-bottom: 75px;

   }

	footer .st-footernav{

		display: block;

		gap: 0;

	}

	footer nav div{

		gap: 0;

	}

}



.ft-fixed-btn {

   position: fixed;

   right: 10px;

   bottom: 10px;

   left: 10px;

   z-index: 9;

   transition: all 0.3s;

}



.ft-fixed-btn.fixed {

   opacity: 1;

   visibility: visible;

}



.ft-fixed-btn ul {

   display: grid;

   grid-template-columns: repeat(2, 1fr);

   gap: 5px;

}



.ft-fixed-btn a {

   display: flex;

   justify-content: center;

   align-items: center;

   border-radius: 50px;

   width: 100%;

   height: 64px;

   font-weight: 500;

   font-size: 18px;

   background-image: radial-gradient(circle, #73D1FF, #0096E0);

   background-position: bottom center;

   background-size: 100% 200%;

   color: #fff;

   position: relative;

}



.ft-fixed-btn a:after {

   content: '';

   display: none;

   width: 30px;

   height: 5px;

   background: url("../img/common/btn-arrow-wh.png") no-repeat center top/100% auto;

   position: absolute;

   top: 50%;

   right: 20px;

   transform: translateY(-50%);

}



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

   footer .wrap {

      padding: 30px 0 0;

   }



   footer .logo {

      width: 114px;

      margin: 0 auto;

      padding-bottom: 20px;

   }



   footer nav div {

      display: grid;

      grid-template-columns: 1fr;

      gap: 0px;

      text-align: center;

   }



   footer nav p {

      padding-top: 0;

   }



   footer nav a {

      display: flex;

      justify-content: center;

      align-items: center;

      height: 50px;

      border: 1px solid #ED7741;

      box-sizing: border-box;

      margin-bottom: -1px;

      font-size: 12px;

   }



   footer nav a:nth-child(even) {

      border-left: 0;

   }



   footer address {

      height: 75px;

      font-size: 10px;

      border-top: 0;

   }

}



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

 * Key

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

#kv {

   display: flex;

   align-items: center;

   height: 300px;

   position: relative;

}



#kv:after {

   content: '';

   width: 100%;

   height: 100%;

   background-color: rgba(0, 0, 0, 0.2);

   position: absolute;

   top: 0;

   left: 0;

}



#kv .kv-img {

   position: absolute;

   top: 0;

   left: 0;

}



#kv .wrap {

   z-index: 1;

}



#kv .kv-title {

   max-width: max-content;

   min-width: 465px;

   margin: 0 auto;

   color: #fff;

}



#kv .kv-title span {

   display: block;

}



#kv .kv-title .fnt-noto-serif {

   font-weight: 400;

   font-size: 39px;

   border-bottom: 1px solid;

   padding-bottom: 15px;

}



#kv .kv-title .fnt-abhaya-libre {

   font-weight: 400;

   font-size: 19px;

   text-transform: capitalize;

   padding-top: 20px;

}



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

   #kv {

	   height: 150px;

      padding: 0 20px;

   }



   #kv .kv-title {

      width: 100%;

      max-width: 100%;

      min-width: 100%;

   }



   #kv .kv-title .fnt-noto-serif {

      font-size: 24px;

      padding-bottom: 10px;

   }



   #kv .kv-title .fnt-abhaya-libre {

      font-size: 16px;

      padding-top: 10px;

   }

}



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

 * breadcrumbs

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

.breadcrumbs {

   width: 100%;

   color: #857d77;

   font-weight: 500;

   font-size: 10px;

   letter-spacing: 0.08em;

   line-height: 20px;

   border-bottom: 1px solid #000;

   position: relative;

   margin: 0px 0;

   padding: 15px 0 14px;

}



.breadcrumbs ul {

   display: flex;

   flex-wrap: wrap;

}



.breadcrumbs ul li+li:before {

   content: '〉';

   display: inline-block;

   vertical-align: baseline;

   margin: 0 15px;

}



.breadcrumbs a {

   color: #0068b6;

}



.breadcrumbs a:hover {

   text-decoration: underline;

}



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

   .breadcrumbs {

      border-top: 2px solid #898989;

      padding: 0;

   }



   .breadcrumbs .wrap {

      overflow-x: auto;

      overflow-y: hidden;

      padding: 5px 10px;

   }



   .breadcrumbs ul {

      width: max-content;

   }



   .breadcrumbs ul li+li:before {

      margin: 0 10px;

   }

}



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

   .breadcrumbs {

      position: relative;

   }

}



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

 * 404

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

#content-404 {

   text-align: center;

   font-size: 14px;

   line-height: 22px;

   padding: 60px 0 115px;

}



#content-404 .txt {

   padding-top: 20px;

}



#content-404 .button {

   text-align: center;

   padding-top: 60px;

}



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

   #content-404 {

      padding: 40px 0 0;

   }



   #content-404 .txt {

      text-align: justify;

   }

}



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

 * section cta

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

.section__cta {

   display: grid;

   grid-template-columns: repeat(2, 1fr);

   align-items: center;

   background-color: #F8F1EB;

}



.section__cta .gmap {

   width: 100%;

   height: 640px;

}



.section__cta .gmap iframe {

   display: block;

   width: 100%;

   height: 100%;

}



.section__cta .col {

   padding: 80px 20px;

}



.section__cta h2 {

   display: flex;

   justify-content: center;

   align-items: center;

   gap: 12px;

   font-weight: 500;

   font-size: 24px;

}



.section__cta h2 img {

   max-width: 43px;

}



.section__cta .txt {

   line-height: 1.8;

   padding-top: 30px;

}



.section__cta table {

   width: 586px;

   margin: 40px auto 0;

}



.section__cta table th,

.section__cta table td {

   line-height: 1.4;

   border: 1px solid #F8F1EB;

   text-align: center;

   vertical-align: middle;

   height: 50px;

}



.section__cta table thead th {

   background-color: #002060;

   color: #fff;

   font-weight: 700;

}



.section__cta table tbody th,

.section__cta table tbody td {

   background-color: #fff;

   color: #2D2D2D;

}



.section__cta table tbody th {

   line-height: 1.8;

}



.section__cta table tbody th span {

   display: block;

   width: 0;

   height: 6px;

   margin: 0 auto;

   border-left: 1px solid #2D2D2D;

}



.section__cta table tbody td img {

   max-width: 18px;

}



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

   .section__cta table {

      width: 100%;

   }

}



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

   .section__cta {

      display: flex;

      flex-direction: column-reverse;

   }



   .section__cta .col {

      width: 100%;

      max-width: 586px;

      box-sizing: border-box;

   }

}



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

   .section__cta .gmap {

      height: 200px;

      min-height: 200px;

   }



   .section__cta .col {

      padding: 40px 12px;

   }



   .section__cta h2 {

      font-size: 18px;

   }



   .section__cta .txt {

      padding-top: 30px;

   }



   .section__cta table {

      margin-top: 30px;

   }



   .section__cta table th,

   .section__cta table td {

      font-size: 13px;

      line-height: 1.6;

      height: 40px;

   }



   .section__cta table tbody td img {

      max-width: 12px;

   }

}