@charset "utf-8";

/*==================================
	common
==================================*/
/* Hanken Grotesk */
@font-face {
  font-family: "HankenLatin";
  src: url("/fonts/HankenGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* 半角英数字・半角記号 */
  unicode-range: U+0020-007E;}

/* 全体のフォント指定 */
html { font-size: 62.5%; scroll-behavior: smooth; }
body {font-family: "Hiragino Sans", sans-serif; font-weight: 200; letter-spacing: 0.1em;font-size: 1.6rem; line-height: 2;color: #2c2c2c; font-feature-settings: "palt";  overflow-x: hidden;}
*,
*::before,
*::after { box-sizing: border-box;}
body,h1,h2,h3,p,ul,ol,figure { margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,span { font-weight: inherit;}
h1 { font-size: 4.6rem; font-weight: 100; line-height: 1.8; letter-spacing: .5rem;}
h2 { font-size: 4.1rem; font-weight: 200; line-height: 1.8; letter-spacing: .08em;}
h3 { font-size: 3.2rem; font-weight: 200;}
h4 { font-size: 2.2rem; font-weight: 200; letter-spacing: .09em;}
ul,ol { list-style: none;}
a { color: inherit; text-decoration: none}
button,input,textarea { font: inherit;}

/* もっと見るボタン */
.viewmore-btn {font-size: 1.8rem; display: flex;align-items: center;gap: 16px;text-decoration: none; margin: 45px auto 0; width: fit-content;}
.viewmore-btn .arrow { width: 52px; height: 28px; background: #49986a; border-radius: 100px; position: relative; flex-shrink: 0;}
.viewmore-btn .arrow::before { content: ""; position: absolute; top: 50%; left: 18px; width: 13px; height: 1px; background: #fff; transform: translateY(-50%);}
.viewmore-btn .arrow::after { content: ""; position: absolute; top: 50%; left: 25px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translateY(-50%) rotate(45deg); }

.pc-only {display: block;}
.sp-only {display: none;}
.jost { font-family: "Jost", sans-serif;}
.indent { text-indent: -1em; padding-left: 1em;}


@media screen and (max-width: 768px) {
body { line-height: 1.85; font-size: 1.5rem;}
h1 { font-size: 3.6rem; font-weight: 100; line-height: 1.8; letter-spacing: .5rem;}
h2 { font-size: 3rem;}
h3 { font-size: 2.2rem; font-weight: 200;}
h4 { font-size: 2rem; font-weight: 200; letter-spacing:.1em;}
p { font-size: 1.5rem;}
.pc-only {display: none;}
.sp-only {display: block;}

/* もっと見るボタン */
.viewmore-btn {font-size: 1.6rem; gap: 8px;}
.viewmore-btn .arrow { width: 46px;}
.viewmore-btn .arrow::before { left: 15px;}
.viewmore-btn .arrow::after { left: 23px;}
}

/* 余白 */
html, body { width:100%; overflow-x:hidden; }
img { max-width:100%; height:auto; display: block; }
section { padding: 120px 0;}
.container .inner{ width: min(100% - 40px, 1200px); margin-inline: auto;}
.wrapper { width: 1100px; max-width: calc(100% - 40px); margin: 0 auto;}

@media screen and (max-width: 768px) {
section { padding: 80px 0; }
.wrapper { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
}


/*==================================
	section
==================================*/
.section-title { font-size: 4rem; font-weight: 100; letter-spacing: 0.08em;}
.section-title .en { margin-left: 20px; color: #4aa871; font-size: 1.4rem; font-weight: 300; letter-spacing: 0.04em;}
.text { margin-top:30px;}

@media screen and (max-width: 768px) {
.section-title { font-size: 2.4rem; font-weight: 100; letter-spacing: 0.1em; line-height: 1.4;}
.section-title .en { margin-left: 0;}
.text { margin-top:20px;}
}

/*==================================
	header
==================================*/
.hd { display: flex; justify-content: space-between; align-items: center; padding: 30px; position:absolute; top:0; left:0; width:100%; z-index:1; position: fixed; z-index: 99998;}
.nav { margin-left: 28px;}
.nav-list { display: flex; list-style: none; gap: 12px;  margin: 0; padding: 0;}
.nav-list a { text-decoration: none; font-weight: 200; font-size: 1.5rem;}
.header-logo img {width: 220px; margin-left: 20px;}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 24px; flex-shrink: 0;}
.header-tel { display: flex; justify-content: flex-end;}
.header-tel img { width: 24px;}
.header-tel a { display: flex; align-items: center; gap: 8px; font-size: 4.2rem}
.header-btn{display: flex; justify-content: center; align-items: center; border: none; border-radius: 5px; background-color: #3f8c5f; color: #fff;font-weight: 300; font-size: 1.5rem; padding: 10px 22px; letter-spacing: 0.04em;}
.header-btn :hover { background-color: #2f7c4f;}

@media screen and (max-width:1380px) {
.nav { display:none; }
.header-right { display:none; }
.hd { padding:20px 30px; }
}
@media screen and (max-width:767px){
.header-logo img { margin-left: 0; width: 170px;}
.nav { display:none; }
.header-right { display:none; }
.hd { padding:20px 20px 20px 30px;}
}

/*==================================
	hamburger
==================================*/
body.menu-open #fv .main-label { opacity:0; visibility:hidden; }
.hamburger { display:none; width:48px; height:48px; border:none; border-radius:5px; padding:0; cursor:pointer; background-color: transparent;}
.hamburger span { display:block; width:36px; height:1px; background:#2c2c2c; margin:7px auto; }
.hamburger-menu { position:fixed; top:0; right:0; width:320px; height:100vh; padding:40px 30px; background:#fff; z-index:4; transform:translateX(100%); opacity:0; visibility:hidden; transition:.4s ease; }
.hamburger-menu.is-open { transform:translateX(0); opacity:1; visibility:visible; }
.hamburger-menu-head { position:relative; display:flex; justify-content:space-between; align-items:center; padding-bottom:38px; border-bottom:1px solid #eee; }
.hamburger-menu-head img { width:150px; }
.hamburger-close { position:absolute; background-color: transparent; border: none; right: 20px; width: 48px; height: 48px; cursor: pointer;}
.hamburger-close span { position:absolute; width: 32px; height: 1px; background-color: #2c2c2c; display: inline-block;}
.hamburger-close span:first-of-type { transform: translateX(-17px) rotateZ(45deg);}
.hamburger-close span:last-of-type { transform: translateX(-17px) rotateZ(-45deg);}
.hamburger-menu ul { margin:0; padding:0; list-style:none; }
.hamburger-menu li { border-bottom:1px solid #eee; }
.hamburger-menu li a { display:block; padding:18px 0; color:#333; text-decoration:none; font-size:1.5rem; }
.hamburger-tel { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:28px; color:#2c2c2c; text-decoration:none; font-size:2.6rem; line-height:1.4; letter-spacing:.08em; }
.hamburger-tel img { width:26px; height:auto; display:block; }
.hamburger-contact { display:flex; justify-content:center; align-items:center; width:100%; margin-top:22px; padding:16px 20px; background:#3f8c5f; color:#fff; text-align:center; text-decoration:none; border-radius:8px; font-size:1.5rem; box-sizing:border-box; }

@media screen and (max-width:1380px) {
.header-right { display:none; }
.hamburger { display:block; margin-left:auto; flex-shrink:0; }
.hamburger-menu { width: 100%;}
.hamburger-menu ul { text-align: center; } 
}
@media screen and (max-width:767px){
.hamburger-menu{ width:100%; padding:30px 20px;}
.hamburger-close { right: -5px; top: -11px;width: 50px; height: 50px;}
}


/*==================================
	fv
==================================*/
#fv { display:flex; justify-content: center; gap: 6%; padding:0 0 100px; background: url("../img/fv_bg.jpg") no-repeat center center; background-size: cover;}
/* #fv .fv-photo{ position:relative;}
#fv .fv-photo .main-photo{ width:100%; height:100vh; object-fit:cover; display:block; overflow:visible;}
#fv .fv-photo .main-label{ position: absolute; width: 60%; left:50px; bottom: 100px; z-index:1;} */
#fv .fv-photo { width: 42vw; height: 100vh; min-height: 700px; overflow: hidden; position: relative;}
#fv .fv-photo .main-photo{ width:100%; height:100%; object-fit:cover; /*display:block*/ overflow:visible;}
#fv .fv-photo .main-label{ position: absolute;width: 57%;min-width: 370px;left: 37px;bottom: 29px;z-index: 1;}
#fv .fv-title { width:34%; display: flex; align-items: center;}
#fv .fv-title .box { max-width: 480px;}
#fv .title{ font-size: clamp(1.4rem, 1.5vw, 2.2rem); color:#777;letter-spacing:.08em; font-weight:200; display: inline-block; border-bottom: 1px solid #ddd;}
#fv h2 { margin-top:7%; font-size: clamp(2.3rem, 2.91vw, 4.1rem); font-weight: 100;}
#fv .fv-price { margin-top:11%; display:flex; width:100%;  border:1px solid #ddd; background:rgba(255,255,255,.75); }
#fv .price-label { width:37%; min-width: 105px; max-width: 180px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 10px; border-right:1px dotted #ddd; color:#777; line-height:1.5; }
#fv .price-label span { font-size:clamp(1.4rem, 1.5vw, 2.2rem); font-weight:200; }
#fv .price-label strong { font-size:clamp(1.8rem, 1.5vw, 2.9rem); font-weight:200; }
#fv .price-main { flex:1; display:flex; align-items:center; justify-content:center; padding:18px 10px; color:#2c2c2c; line-height:1; }
#fv .price-main .num { font-size: clamp(2.9rem, 3vw, 5.8rem); font-weight:100;}
#fv .price-main .yen-wrap { position:relative; padding-left: 4px;}
#fv .price-main .tax { position:absolute; top:-12px; left:2%; font-size:clamp(0.8rem, 1vw, 1.1rem); color:#2c2c2c; white-space:nowrap; }
#fv .price-main .yen { font-size:clamp(1.8rem, 2vw, 2.9rem); font-weight:100; position: relative;}
@media screen and (min-width: 678px) and (max-width: 1200px) {
#fv {justify-content: start;}
#fv .fv-photo {width: 55vw;}
#fv .price-main .tax { top: -51%; left: 0%;}
#fv .fv-photo .main-label { min-width: 288px;}
}
@media screen and (max-width:767px){
#fv { flex-direction: column; gap: 0px; padding: 0;}
#fv .fv-title .box { width: 100%; max-width: none;}
#fv h2 { font-size: 2.6rem;}
#fv .fv-photo{ width:100%; height: 60svh; min-height: 0;}
#fv .fv-photo .main-photo{ width:100%; height: 100%; object-fit: cover;}
#fv .fv-photo .main-label{ width: 100%;max-width: 300px;bottom: 0;left: 0;padding: 30px;}
#fv .fv-title{ width: 100%; padding: 30px; justify-content: center;}
#fv .title{ font-size:1.7rem;}
#fv .fv-price { max-width: 320px; margin-top: 24px;}
#fv .price-main .yen-wrap { padding-left: 2px;}
#fv .price-main .num { font-size: 3.8rem; font-weight:200; }
#fv .price-main .yen { font-size: 2.1rem; }
#fv .price-main .tax { font-size: 1rem; left: 0;}
/* #fv .fv-price { margin-top:30px; flex-direction: column; }
#fv .price-label { width:100%; flex-direction: row; align-items: baseline; max-width: none; border-bottom:1px dotted #ddd; color:#777; border-right: none;}
#fv .price-main { align-items:baseline; }
#fv .price-main .tax { transform:translateX(-40%);} */
}

/*==================================
	message
==================================*/
#message {position:relative; padding: 200px 0; background: url("../img/message_bg.jpg") no-repeat center center; background-size: cover; overflow:visible;}
#message .message-inner { position: relative; display: flex; align-items: center; gap: 150px; }
#message .message-photo { position: relative; width: 50%; height: 760px; }
#message .message-photo .photo { position: absolute; object-fit: cover; z-index: 2;}
#message .message-photo img { border-radius: 8px;}
#message .photo01 { top: -45%; right: -170%; }
#message .photo02 { top: -20%; right: 20%;}
#message .photo03 { top: 20%; right: 90%;}
#message .photo04 { top: 52%; right: 15%;}
#message .message-text { width: 55%; z-index:1; }
#message .background-txt { font-size: 20rem; color: rgba(0,0,0,.04); line-height: 1;position: absolute; bottom: 90%; right: -18%; z-index:1;}
#message .message-text h1 { margin-top: -20px;}
#message .message-text p { margin-top: 80px; font-size: 1.8rem; line-height: 2.4;}

@media screen and (max-width:767px){
#message { padding: 40px 0 100px;}
#message .message-text h1 { font-size: 3.4rem;}
#message .message-inner { flex-direction: column; gap: 0; }
#message .message-text { width: 100%; }
.photo-box { position: relative; width: min(100%, 900px); aspect-ratio: 900 / 850; margin: 0 auto;}

#message .message-photo { width: 100%; height: auto;}
#message .message-photo.group2 .photo-box { margin: 40px auto 0;}
#message .photo01 { width: 50%; top: 37%; left: 54%;}
#message .photo02 { width: 34%; top: 1%; left: 20%;}
#message .photo03 { width: 34%; top: 64%; left: 6%;}
#message .photo04 { width: 60%; top: 0%; left: 41%;}
#message .background-txt { font-size: 9rem; bottom: auto; top: 14%; right: auto; left: 3%;}
#message .message-text { margin-top: 40px;}
#message .message-text .en { top: -350px; right: -40px; font-size: 10rem;}
#message .message-text p { margin-top: 40px; font-size: 1.6rem; line-height: 2.4; letter-spacing: 0.1em;}
}

/*==================================
	message-reason
==================================*/
#message .wrapper { display: flex; justify-content: space-between; gap: 80px; padding: 100px 0;}
#message h3 {font-size: 2.6rem; font-weight: 200; letter-spacing: 0.14em;}
#message .reason-inner .en { margin-left: 0; color: #c5c5c5; font-size: 1.65rem; font-weight: 200; letter-spacing: 0.08em; line-height: 1.84;}
#message .reason-list { width: 68%; }
#message .reason-list li { padding: 32px 0 36px 30px; border-top: 1px solid #ddd; }
#message .reason-list li:last-child { border-bottom: 1px solid #ddd; }
#message .reason-list span { display: block; color: #3f8c5f; font-size: 2.4rem; font-weight: 200; }
#message .reason-list p { margin-top: 2px; font-size: 1.6rem; line-height: 2; font-weight: 200; }

@media screen and (max-width:767px){
#message .wrapper { flex-direction: column; gap:10px; padding: 0;}
#message .wrapper .section-title { width: 100%; }
#message .wrapper .section-title .en { margin-left: 10px;}
#message .reason-inner { margin-top: 100px;}
#message h3 { font-size: 2.1rem;line-height: 1.3; margin-bottom: 14px;}
#message .reason-inner .en { font-size: 1.4rem;}
#message .reason-list { width: 100%; }
#message .reason-list li { padding: 24px 0;}
#message .reason-list span { font-size: 1.8rem;}
#message .reason-list p { font-size: 1.5rem;}
}

/*==================================
	message-media
==================================*/
#message .media-inner { display:flex;justify-content:space-between; gap:80px;}
#message .media-inner .section-title { width:32%;}
#message .media-inner .en { margin-left: 0; color: #c5c5c5; font-size: 1.65rem; font-weight: 200; letter-spacing: 0.08em; line-height: 1.84;}
#message .media-list{ width:68%; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
#message .media-list li{ background:#fff; border-radius:4px;aspect-ratio:1.8/1; display:flex; justify-content:center; align-items:center;padding:15px;}
#message .media-list img{ display:block; width:auto; height:auto; max-width:80%; max-height:50px;}
#message .media-list .empty{ visibility:hidden;}

@media screen and (max-width:767px){
#message .media-inner { flex-direction: column; gap:1px; margin-top: 80px;}
#message .media-inner .section-title { width:100%;}
#message .media-inner .en { font-size: 1.4rem;}
#message .media-list{ width:100%; grid-template-columns:repeat(2,1fr); margin-top: 10px;}
#message .media-list .empty{ display: none;}
}

/*==================================
	area
==================================*/
#area{ padding:120px 0; background: #f6f6f3;}
#area .area-inner { width:1380px; max-width:calc(100% - 40px); padding:80px; margin: 0 auto; background:#eeeee9; border-radius:8px;}
#area .wrapper { display:flex; justify-content:space-around; align-items:center; max-width: 100%;}
#area .area-content {width:40%;}
#area .area-map { width:60%;}
#area .area-map img { width:100%; display:block;}
#area .section-title .en { display:block; margin:0; color: #3f8c5f;}
#area .area-list { margin-top:50px;}
#area .label {  display:flex; align-items:center; column-gap: 4px; font-size: 2rem; font-weight: 200; margin-top: 150px;}
#area .label::before { content:""; display:inline-block; width:30px; height:30px; background:url("../img/icon_area.png") no-repeat center center; background-size:contain;}
#area .area-list ul { display:flex; flex-wrap:wrap; margin-top:20px; padding:0; list-style:none; column-gap: 6px; row-gap: 10px;}
#area .area-list li { padding: 9px 15px; border:1px solid #49986a; border-radius:999px; color:#49986a; font-size:1.5rem; line-height:1; letter-spacing: 0.04em;}
/*#area .area-list li:first-child { background:#3f8c5f; color:#fff;}*/
#area .area-btn { margin-top: 60px; text-align: center;}
#area .area-btn a { display: inline-flex; align-items: center; gap: 18px; font-size: 1.8rem; font-weight: 200;}
#area .area-btn span { display: inline-grid; place-items: center; width: 46px; height: 26px; border-radius: 999px; background: #3f8c5f; color: #fff; line-height: 1;}
#area .campaign-inner { width: min(980px, calc(100% - 40px)); margin: 0 auto; text-align:center; padding: 100px 0;}
#area .campaign-inner .section-title { display: inline-block; border-bottom: 1px solid #ddd; font-size: 3.8rem;}
#area .campaign-list{ display:flex; justify-content:center; gap:40px; margin-top:40px;}
#area .campaign-list a { display:block; width:calc((100% - 40px) / 2); max-width:520px;}
#area .campaign-list img { width:100%; height:auto; display:block;}

@media screen and (max-width:767px){
#area{ padding: 12% 0;}
#area .area-inner { padding: 13% 7%; max-width: calc(100% - 24px);}
#area .wrapper { flex-direction: column; gap: 30px; width: 100%;}
#area .area-content { width:100%;}
#area .label { font-size: 1.8rem;}
#area .section-title .en { padding: 0 0 6px 3px;}
#area .area-list { margin-top:30px;}
#area .label::before {  width:26px; height:26px;}
#area .area-list ul { column-gap: 4px; row-gap: 6px; margin-top: 10px;}
#area .area-list li { font-size: 1.4rem; padding: 8px 13px;}
#area .area-map { width:100%;}
#area .label { margin-top: 0px; column-gap: 2px;}
#area .campaign-inner { padding: 50px 0; width: min(1100px, calc(100% - 40px)); margin: 0 auto;}
#area .campaign-inner .section-title { font-size: 2.4rem;}
#area .campaign-list { flex-direction: column; gap: 20px; margin-top: 24px; gap: 16px; align-items: center;}
#area .campaign-list a { width:100%; max-width: 400px;}
}

/*==================================
	staff
==================================*/
#staff .staff-swiper { margin-top:50px; overflow:hidden; }
#staff .swiper-slide { border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff; height:auto;}
#staff .member-img img { width: 100%; display: block; border-radius: 10px 10px 0 0;}
#staff .member-content { padding:  28px 30px 28px;}
#staff .member-content .txt { font-size: 1.8rem; line-height: 2; color: #2c2c2c; font-weight: 300;}
#staff .career { margin-top: 24px; display: flex; align-items: center; gap: 12px; color: #176336; font-size: 1.5rem;}
#staff .career span { display: inline-block; padding: 4px 14px; border: 1px solid #49986a; border-radius: 4px; font-size: 1.4rem; line-height: 1;}
#staff .swiper-button-prev,
#staff .swiper-button-next{ width:auto; height:auto; margin-top:0; color:#999;}
#staff .swiper-pagination{ position:static; margin-top:16px; text-align:center; }
#staff .swiper-pagination-bullet { background: #d5d5d5; opacity: 1;}
#staff .swiper-pagination-bullet-active { background:#3f8c5f; }

@media screen and (max-width:767px){
#staff .staff-swiper { overflow: inherit;}
}

/*==================================
  plans
==================================*/
#plans { position: relative; padding: 120px 0; background: url("../img/plans_bg.jpg") no-repeat center center; background-size: cover;}
#plans::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.45);}
#plans .wrapper{ position:relative; z-index:1;}
#plans .section-title{ color:#fff;}
#plans .section-title .en{ color:#fff;}
#plans .plans-content { display: flex; margin-top: 60px; border-radius: 8px; overflow:visible;}
#plans .plan { position: relative; width: 50%; text-align: center; }
#plans .popular.plan {  background: #fff; outline: 3px solid #49986a; border-radius: 8px 0 0 8px; z-index: 1;}
#plans .spot.plan {  background: #fff;border-radius: 0 8px 8px 0;}
#plans .plan + .plan { border-left: 1px solid #ddd; }
#plans .popular.plan .plan-head { position: relative; padding: 50px 20px 30px; background-color: #f6f6f3; border-radius: 8px 0 0 0;}
#plans .spot.plan .plan-head { position: relative; padding: 50px 20px 30px; background-color: #f6f6f3; border-radius: 0 8px 0 0;}
#plans .plan-head .sub { font-size: 2.0rem; font-weight: 200; line-height: 1.5;}
#plans .plan-head h3 { letter-spacing: 0.15em;}
#plans .badge { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: inline-block; padding: 4px 50px; border-radius: 999px; background: #3f8c5f; color: #fff; font-weight: 300;}
#plans .price { padding: 34px 0 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.9rem;}
#plans .price .price-num { font-size: 5rem; letter-spacing: -0.01em; padding: 0 6px; line-height: 1;}
#plans .price .tax { color: #7b7b7b; font-size: 1.5rem;}
#plans .recommend { padding: 28px 40px 44px;}
#plans .recommend p { font-size: 2.0rem;}
#plans .recommend ul{ width:fit-content; margin:10px auto 0;}
#plans .recommend li { position: relative; padding-left: 32px; text-align: left;}
#plans .recommend li::before {  position: absolute; content: ""; left: 0; top: 0.45em; width: 18px; height: 18px; background: url("../img/icon_check.png") no-repeat center center; background-size: contain;}
#plans .viewmore-btn { color: #fff;}
#plans .viewmore-btn .arrow { background: #ffffff;}
#plans .viewmore-btn .arrow::before { background: #2c2c2c;}
#plans .viewmore-btn .arrow::after { border-top: 1px solid #2c2c2c; border-right: 1px solid #2c2c2c;}

@media screen and (max-width:767px){
#plans .plans-content { flex-direction: column; margin-top: 40px;}
#plans .plan { width: 100%; }
#plans .popular.plan{ border-radius: 8px;}
#plans .spot.plan { border-radius: 8px; margin-top: 20px;}
#plans .popular.plan .plan-head { border-radius: 8px 8px 0 0;}
#plans .spot.plan .plan-head { border-radius: 8px 8px 0 0;}
#plans .badge { padding: 4px 28px; font-size: 1.4rem;}
#plans .popular.plan .plan-head,#plans .spot.plan .plan-head { padding: 30px 8% 20px;}

#plans .plan-head .sub { font-size: 1.8rem;}
#plans .plan-head h3 { line-height: 1.3;}
#plans .price { padding: 20px 8%;}
#plans .price .price-num { font-size: 4rem;}
#plans .price .tax { font-size: 1.3rem; line-height: 1.2;}
#plans .recommend { padding: 20px 8% 28px;}
#plans .recommend p { font-size: 1.8rem;}
#plans .recommend ul { margin: 6px auto 0;}
#plans .recommend li {    font-size: 1.4rem; padding: 4px 0 0 24px; margin-bottom: 2px; line-height: 1.7;}
}


/*==================================
	service
==================================*/
#service .ranking-list { display: flex; justify-content: space-between; margin-top: 50px;}
#service .ranking-list li { width: calc((100% - 80px) / 3);}
#service .service-img { position: relative; border-radius: 8px; overflow: hidden;}
#service .service-img::after { position: absolute; content: ""; width: 100px; height: 100px; left: -55px; top: -55px; display: block; transform: rotateZ(45deg);}
#service li:nth-of-type(1) .service-img::after { background-color: #c2a641;}
#service li:nth-of-type(2) .service-img::after { background-color: #9c9b99;}
#service li:nth-of-type(3) .service-img::after { background-color: #ad9985;}
#service .service-img .number { position: absolute; left: 11px; top: -1px; z-index: 1; color: #fff; font-weight: 300; font-size: 2.1rem;}
#service .service-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
#service .ranking-list h4 { margin-top: 12px;}
#service .ranking-list p { margin-top: 4px;}
#service .other-service { margin-top: 60px; padding: 26px 5%; border: 1px solid #ddd; display: flex; align-items: center; column-gap: 50px;}
#service .other-service p { white-space: nowrap; font-weight: 200; font-size: 1.7rem;}
#service .other-service ul { display: flex; align-items: center; column-gap: 18px; font-size: 1.5rem;}
#service .other-service li { position: relative; white-space: nowrap;}
#service .other-service li:not(:last-child)::after { content: "/"; margin-left: 18px; color: #c5c5c5;}
#service .service-btn { margin-top: 45px; text-align: center;}
#service .service-btn a { display: inline-flex; align-items: center; gap: 18px; font-size: 1.8rem; font-weight: 200;}
#service .service-btn span { display: inline-grid; place-items: center; width: 46px; height: 26px; border-radius: 999px; background: #3f8c5f; color: #fff; line-height: 1;}

@media screen and (max-width:767px){
#service .ranking-list { flex-direction: column; gap: 50px; }
#service .ranking-list li { width: 90%; margin: 0 auto;}
#service .other-service { width: 91%; margin: 0 auto; flex-direction: column; row-gap: 8px; padding: 5% 6%; margin-top: 40px; align-items: start;}
#service .other-service ul { flex-wrap: wrap; justify-content: left; font-size: 1.5rem; column-gap: 6px; row-gap: 4px;}
#service .other-service li:not(:last-child)::after { margin-left: 6px;}
}

/*==================================
	voice
==================================*/
#voice { position: relative; padding: 120px 0; background: url("../img/voice_bg.jpg") no-repeat center center; background-size: cover; }
#voice .voice-inner { display: flex; justify-content: flex-start; align-items: center; gap: 50px; margin-top: 50px; }
#voice .voice-photo { width: 50%; }
#voice .voice-photo img { width: 100%; display: block; border-radius: 8px; }
#voice .voice-text { width: 42%; text-align: center; }
#voice .text { font-size: 1.8rem;}
#voice .voice-labels { display: flex; justify-content: center; align-items: center; column-gap: 25px; margin-top: 45px; }
#voice .voice-label { width: 200px; height: auto; }
#voice .voice-point { margin-top: 45px; text-align: left; }
#voice .voice-point p { padding-bottom: 14px; padding-left: 14px; border-bottom: 1px solid #ddd; font-size: 1.8rem; font-weight: 200; color: #666; }
#voice .voice-point ul { margin-top: 18px; padding-left: 14px; list-style: none; }
#voice .voice-point li { margin-top: 4px; font-size: 1.6rem; color: #888; }
#voice .review { display: flex; column-gap: 24px; margin-top: 60px; padding: 0; list-style: none; }
#voice .review li { width: calc((100% - 48px) / 3); padding: 28px; border: 1px solid #ddd; border-radius: 6px; background: rgba(255,255,255,.85); display: flex; flex-direction: column;
justify-content: space-between;}
#voice .review-title { display: flex; justify-content: space-between; align-items: flex-end; font-size: 1.8rem; color: #666; margin-bottom: 20px;}
#voice .star { margin-top: 8px; color: #c2a641;}
#voice .review .name { margin-top: 24px; font-size: 1.4rem; color: #656565; }
#voice .voice-btn { margin-top: 45px; text-align: center;}
#voice .voice-btn a { display: inline-flex; align-items: center; gap: 18px; font-size: 1.8rem; font-weight: 200;}
#voice .voice-btn span { display: inline-grid; place-items: center; width: 46px; height: 26px; border-radius: 999px; background: #3f8c5f; color: #fff; line-height: 1;}

@media screen and (max-width:767px){
#voice { padding: 70px 0;}
#voice .voice-inner { flex-direction: column; margin-top: 30px; gap: 0;}
#voice .voice-photo { width: 100%;}
#voice .voice-text { width: 100%; text-align: center; }
#voice .text { font-size: 1.6rem; margin-top: 40px;}
#voice .voice-point p { padding-bottom: 10px; padding-left: 4px;}
#voice .voice-point { margin-top: 40px; width: 96%; margin: 40px auto 0}
#voice .voice-point ul { padding-left: 4px;}
#voice .voice-point li { font-size: 1.5rem;}
#voice .voice-labels { column-gap: 10px; width: 86%; margin: 24px auto;}
#voice .voice-label { width: calc((100% - 10px) / 2);}
#voice .review { flex-direction: column; margin-top: 50px; row-gap: 16px;}
#voice .voice-point ul { margin-top: 18px; list-style: none; }
/* #voice .voice-labels  {width: calc((100% - 10px) / 2); column-gap: 10px; } */
#voice .review li { width: 100%; padding: 4% 7% 6%;}
#voice .review .name { margin-top: 20px;}
}

/*==================================
	note
==================================*/
#note { position: relative; background: url("../img/note_bg.jpg") no-repeat center center; background-size: cover;}
#note .note-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 50px;}
#note .text { margin-top:20px;}
#note .swiper-slide { background:#fff; padding:28px 28px 20px;}
#note .swiper-slide a { display:block; color:inherit; text-decoration:none; }
#note .swiper-slide img { width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; }
#note .swiper-slide p { font-size:1.5rem; line-height:2; color:#2c2c2c; height: 4em; margin: 24px auto 30px;}
#note .swiper-slide time { display:block; font-size:1.5rem; color:#999;}
#note .swiper-button-prev,
#note .swiper-button-next{ width:auto; height:auto; margin-top:0; color:#999;}
#note .swiper-pagination{ display:none;}
#note .swiper-pagination-bullet { background:#d5d5d5; opacity:1 }
#note .swiper-pagination-bullet-active { background:#3f8c5f;}
#note .btn-wrapper { width: 1100px;  max-width: calc(100% - 40px); margin: 0 auto;}
#note .viewmore-btn { margin: 45px 0 0 auto;}

@media screen and (max-width:767px){
#note .note-head { flex-direction: column; align-items: flex-start; margin-bottom: 30px;}
#note .text { margin-top: 24px;}
#note .note-list { overflow-x:visible;}
#note .note-btn { text-align: center;}
#note .swiper-pagination{ display:block; position: static; margin-top: 16px; text-align: center;}
#voice .review-title { margin-bottom: 10px;}
#note .viewmore-btn { margin: 45px auto;}
}


/*==================================
	insta
==================================*/
#insta { background:#f6f6f3;}
#insta .section-title { font-size: 4.6rem; font-weight: 200; letter-spacing: 0.08em;}
#insta .insta-head { display:flex; justify-content:space-between; align-items:center;  margin-bottom:50px;}
#insta .insta-head .fixBaseline {transform: translateY(9px); display: inline-block;}
#insta .insta-head .en {     color: #2c2c2c; font-weight: 200; font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 3px 22px; border: 1px solid #ddd; border-radius: 999px; margin-left: 14px;}
#insta .insta-list { display:flex; gap:8px; margin:0; padding:0; list-style:none; flex-wrap: wrap;}
#insta .insta-list li { flex:1;}
#insta .insta-list img { width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; border-radius:4px;}

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

@media screen and (max-width:767px){
#insta .section-title { font-size: 3rem;}
#insta .text { margin-top: 24px;}
#insta .insta-head{ flex-direction: column; align-items: flex-start; margin-bottom: 30px;}
#insta .insta-head .fixBaseline { transform: translateY(0px); transform: translateX(4px);}
#insta .insta-head .en{	margin-left: 0; padding: 4px 15px;}
#insta .insta-list li { flex:inherit; width: 48%;}
}


/*==================================
	faq
==================================*/
#faq { padding:120px 0;}
#faq .wrapper { display:flex;justify-content:space-between; align-items:flex-start;}
#faq .faq-title { flex-shrink:0;}
#faq .faq-list { width:70%;}
#faq .faq-title .section-title { display:block;line-height:1.6; padding-top: 20px;}
#faq .faq-title .section-title .en { display:block; margin:12px 0 0; padding:0; border:none; background:none; color:#4aa871; font-size:1.2rem;}
#faq .faq-item { padding:30px 0px 34px 30px; border-bottom:1px solid #ddd;}
#faq .faq-question,#faq .faq-answer { display:flex; gap:22px; margin-bottom: 15px;}
#faq .qa { width:24px; flex-shrink:0; font-size:2rem; font-weight:300; color:#888; line-height:1.8;}
#faq .faq-question p { font-size:1.8rem;}
#faq .faq-answer { font-size:1.5rem; color:#666; margin:0;}

@media screen and (max-width:767px){
#faq { padding:50px 0;}
#faq .wrapper { display:flex; flex-direction: column; align-items: center;}
#faq .faq-item { padding: 7% 0 5%;}
#faq .faq-title { width:100%;}
#faq .faq-list {width: 100%;}
#faq .faq-question,#faq .faq-answer { column-gap:4px; margin-bottom: 10px;}
#faq .faq-question p { font-size:1.7rem;}
#faq .faq-answer p { padding-top: 2px;}
#faq .qa { font-size: 1.7rem;}
}

/*==================================
	contact
==================================*/
#contact  { padding:80px 0; }
#contact .wrapper { margin:0 auto 100px; display:flex; align-items:center; justify-content:center; background: #f6f6f3; border-radius: 8px;}
#contact .contact-photo { width:50%; }
#contact .contact-photo img { width:100%; display:block; border-radius: 8px 0 0 8px;}
#contact .contact-text { width: 60%; padding: 70px 50px; text-align: center; }
#contact .contact-text .title { display:inline-block; margin-bottom:40px; border-bottom:1px solid #3f8c5f; color:#3f8c5f;font-size: 1.7rem;}
#contact .contact-tel { display:flex; align-items:center; column-gap:10px; justify-content: center;font-size:4.8rem; line-height:1;}
#contact .contact-tel img { width:28px; }
#contact .contact-time { margin-top:12px; font-size:1.3rem; color:#888; }
#contact .contact-btns { display:flex; justify-content: center; column-gap:12px; margin: 30px auto 40px; padding:0; list-style:none; }
#contact .contact-btns li { width:200px; }
#contact .contact-btns a { display:flex; justify-content:center; align-items:center; height:56px; border-radius:5px; border:1px solid #3f8c5f; }
#contact .contact-btns .web a { background:#fff; color:#3f8c5f; font-size: 1.8rem; font-weight: 200; }
#contact .contact-btns .line a { background:#3f8c5f; color:#fff; font-size: 1.8rem; font-weight: 200;}

@media screen and (max-width:767px){
#contact { padding:0; }
#contact .wrapper { flex-direction: column; margin: 0 auto 80px;}
#contact .contact-photo { width:100%; }
#contact .contact-photo img { height: 210px; object-fit: cover;}
#contact .contact-text { width: 100%; padding: 10% 8% 15%;}
#contact .contact-text .title { margin-bottom: 11%;}
#contact .contact-tel { font-size:3.8rem; column-gap: 6px;}
#contact .contact-tel img { width: 20px; transform: translateY(2px);}
#contact .contact-time { line-height: 1.4; margin-top: 10px;}
#contact .contact-btns { flex-direction: column; align-items: center; row-gap: 8px; margin: 11% auto 0;}
#contact .contact-btns li { width:100%; }
}

/*==================================
	footer
==================================*/
.footer { position: relative; padding: 100px 0; }
.footer-inner { width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 80px;}
.footer-left { width: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 320px;}
.footer-logo img { width: 220px;}
.footer-copy { margin-top: 20px; font-size: 1.4rem;}
.footer-company { }
.company-name { width: 90%; font-size: 2rem; font-size: 1.8rem;}
.company-address { font-size: 1.5rem;}
.footer-map { width:100%; }
.footer-map iframe { width:100%; height:320px; display:block; border:0; }
.footer-bottom { width: 90%; margin: 50px auto 0; padding-top: 30px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center;}
.footer-links { display: flex; column-gap: 24px;}
.footer-links a,
.footer-site a { font-size: 1.3rem;}
.copyright { margin-top: 40px; text-align: center; font-size: 1.2rem;}
.footer .bg { height: 2224px; background: url(../img/message_bg.jpg) no-repeat center top; background-size: cover; position: absolute; bottom: 0; display: block; width: 100%; z-index: -1;}

@media screen and (max-width:767px){
.footer { padding: 50px 0 40px; line-height: 1.7;}
.footer-inner { width: min(1100px, calc(100% - 40px)); flex-direction: column; row-gap: 20px;}
.footer-left { width: 100%; height: auto;}
.footer-logo img { width: 180px;}
.footer-copy { margin-top: 20px; font-size: 1.4rem;}
.footer-company { margin-top: 50px;}
.company-name { width: 90%; font-size: 1.6rem; margin-bottom: 6px;}
.company-address { font-size: 1.4rem;}
.footer-map iframe { height:260px; }
.footer-bottom { width: min(1100px, calc(100% - 40px)); flex-direction: column; align-items: flex-start; gap: 20px;}
.footer-links { row-gap: 6px; flex-direction: column;}
.copyright { font-size: 1.1rem;}
}