@charset "utf-8";
/*===============================================
 *	ブラウザリセット
===============================================*/
@font-face {font-family: 'Noto Sans JP';font-style: bold;font-weight: 900;src: url('../fonts/NotoSansJP-Black.woff2') format('woff2'),url('../fonts/NotoSansJP-Black.woff') format('woff');font-display: swap;}
@font-face {font-family: 'Noto Sans JP';font-style: bold;font-weight: 700;src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2'),url('../fonts/NotoSansJP-Bold.woff') format('woff');font-display: swap;}
@font-face {font-family: 'Noto Sans JP';font-style: medium;font-weight: 500;src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2'),url('../fonts/NotoSansJP-Medium.woff') format('woff');font-display: swap;}
@font-face {font-family: 'Noto Serif JP';font-style: bold;font-weight: 700;src: url('../fonts/NotoSerifJP-Bold.woff2') format('woff2'),url('../fonts/NotoSerifJP-Bold.woff') format('woff');font-display: swap;}
a:hover img {filter: alpha(opacity=85);-moz-opacity: 0.85;opacity: 0.85;}
html {overflow-x: hidden;overflow-y: scroll;}
body {font-size: 100%;font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', Meiryo, sans-serif;letter-spacing: 0;height: 100%;}
table {font-size: inherit;}
select, input, textarea {font: 99% arial, helvetica, clean, sans-serif;}
pre, code {font: 115% monospace; font-size: 100%;}
br {letter-spacing: normal;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;font-style: normal;font-weight: normal;}
address, em {font-style: normal;}
strong, th {font-weight: normal;}
table {border-collapse: collapse;border-spacing: 0;border: none;}
th, td {text-align: left;border: none;font-weight: normal;}
hr {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img, fieldset {border: 0;vertical-align: bottom;}
li {list-style-type: none;box-sizing: border-box;}
ul, ol, dl {margin: 0;list-style-position: outside;list-style-type: none;}
li, dt, dd {font-size: 100%;}
dt {font-weight: normal;}
a {text-decoration: underline;outline: none;}
a:hover {text-decoration: none;}
form, input {padding: 0;margin: 0;}
iframe{border:none;}
picture{display: block;}
figure{margin: 0;}
img{display:block;height:auto;width:100%;}
*{margin: 0;padding: 0;}
/* --------------このサイトオリジナル設定--------------- */
a {color: #333;outline: none;text-decoration:none;}
.txt_link{text-decoration: underline var(--site-primary);}
:root {
  --site-primary: #2a5298;
  --site-secondary: #be9b4a;
  --site-basecolor: #ecf6fc;
  --site-keycolor: #fc8024;
}
/*====================== clearFix ======================*/
.clearfix:before, .clearfix:after {content: "";display: block;overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
/*=============================================== *
	パターン
===============================================*/
.base-fl {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;}
.row {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
.row-rev {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.space-btw {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.space-around {-ms-flex-pack: distribute;justify-content: space-around;}
.js-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.al-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.al-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.al-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.al-base {-webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline;}
.md_radius{border-radius: 6px;overflow: hidden;height: fit-content;}
.left-border{border-left: 20px solid #333;padding:15px 0 15px 25px;}

.left-border .border-ttl{font-size: 20px;font-weight: bold;position: relative;display: inline-block;margin-bottom: 1em;}
.left-border .border-ttl::before{content: '';position: absolute;bottom: -10px;display: inline-block;width: 80px;height: 3px;left: 0%;background-color: #333;
}


.sec_ttl{font-size: 50px;font-weight: bold;position: relative;margin-bottom: 60px;line-height: 1.3;}
.sec_ttl span{position: relative;}
.sec_ttl span::before {content: "";position: absolute;top: -10px;left: -20px;width: 30px;height: 30px;border-top: 2px solid #333;border-left: 2px solid #333;}
.sec_ttl span::after {content: "";position: absolute;bottom: -10px;right: -20px;width: 30px;height: 30px;border-bottom: 2px solid #333;border-right: 2px solid #333;}

.min-ttl{font-size: 37px;font-weight: bold;margin: 40px 0;}
.min-en{font-size: 20px;position: relative;display: inline-block;padding: 0 55px 0 0;}
.min-en::after{content: '';position: absolute;top: 50%;display: inline-block;width: 45px;height: 1px;background-color: black;}
.min-en:after {right: 0;}

.bg_basecolor{background: var(--site-basecolor);}
.bg_primarycolor{background: var(--site-primary);}
.bg_white{background: #fff;}
.bg_red{background: #d21d25;}
.border-box{border:2px solid var(--site-primary);border-radius: 6px;}
.bg_strip{  background:url(../img/common/stripe.png)no-repeat var(--site-primary);background-position: right top;}

@media only screen and (max-width: 960px) {
.sec_ttl{font-size: 36px;}
.sec_ttl span{position: relative;}
.sec_ttl span::before {content: "";position: absolute;top: -10px;left: -20px;width: 20px;height: 30px;border-top: 2px solid #333;border-left: 2px solid #333;}
.sec_ttl span::after {content: "";position: absolute;bottom: -10px;right: -20px;width: 20px;height: 30px;border-bottom: 2px solid #333;border-right: 2px solid #333;}
.min-ttl{font-size: 30px;}
.min-en{font-size: 16px;}
}


@media only screen and (max-width: 568px) {
.sec_ttl{font-size: 32px;margin-bottom: 30px;}
.min-ttl{font-size: 20px; margin: 30px 0 20px;}
.min-en{font-size: 14px;padding: 0 35px 0 0;}
.min-en::after{width: 30px;}
.left-border{border-left: 15px solid #333;padding:10px 0 10px 15px;}
}
/*===============================================

 *	common

===============================================*/
html body {background: #fff;color: #333;font-size: 17px;line-height: 1.6;-webkit-text-size-adjust: 100%;letter-spacing: 0.05em;position: relative;}
section{overflow: hidden;}
em {font-weight: bold;}
sup{font-size: 10px;}
.sp {display: none;}
.inner { max-width: 1470px;margin: 0 auto;width: 100%;position: relative;}
.sm_inner{max-width: 1300px;margin: 0 auto;width: 100%;position: relative;}
.txt-small{font-size: 13px;}
.center {text-align: center;}
.right {text-align: right;}
.txt-caution{font-size:12px;}
.txt-orange{color: var(--site-keycolor);}
.txt-color{color: var(--site-primary);}
.txt-white{color: #ffffff;}
.txt-red{color: #e41111;font-weight: bold;}
.inner_space{padding: 60px 0 80px;}
.bnr_taiken{margin: 20px 0;}
.annotation_txt{font-size: 14px;color: #a09e9e;}
@media screen and (min-width: 769px) {
a[href^="tel:"] {pointer-events: none;}
}
@media only screen and (max-width: 1024px) {
.inner {margin: 0 auto;max-width: initial;width: 94%;}
}
@media only screen and (max-width: 960px) {
html body {font-size: 15px;}
.inner {width: 92%;}
}
@media only screen and (max-width: 568px) {
html {scroll-padding-top: 65px;}
.inner {width: 89.4vw;}
.pc {display: none;}
.sp {display: block;}
.inner_space{padding: 6% 0 10%;}
}
/*===============================================
 *	br
===============================================*/
@media screen and (min-width:1025px){
.br-pc{display:block;}
.br-tb{display:none;}
.br-sp{display:none;}
}
@media screen and (min-width:481px) and (max-width: 1024px) {
.br-pc{display:none;}
.br-tb{display:block;}
.br-sp{display:none;}
}
@media screen and (max-width: 480px) {
.br-pc{display:none;}
.br-tb{display:none;}
.br-sp{display:block;}
}
/*===============================================
 *	Table
===============================================*/
table.basic-tbl {border-top: #ccc 1px solid;border-left: #ccc 1px solid;width: 100%;}
table.basic-tbl th, table.basic-tbl td{padding: 10px;border-bottom: #ccc 1px solid;box-sizing: border-box;}
table.basic-tbl td {background: #fff;border-right: #ccc 1px solid;}
@media only screen and (max-width: 960px){
table.basic-tbl {width: 100%;}
table.basic-tbl th, table.basic-tbl td {padding: 10px;}
table.basic-tbl th {font-size: 13px;}
table.basic-tbl td {font-size: 13px;}
}
@media only screen and (max-width: 568px){
table.basic-tbl tr:first-child th {border-top: #ccc 1px solid;}
}
/*-----------------------------------------------
 *	background
-----------------------------------------------*/
.bg_geometry{background: url(../img/top/geometry_bg.jpg)no-repeat;background-position: center top;background-size: cover;}
/*===============================================
 *	Btn
===============================================*/
.btn-basic {text-align: center;margin: 0 auto;max-width: 340px;width: 100%;font-size: 20px;position: relative;z-index: 10;}
.btn-basic a::after {content: "";display: block;position: absolute;top: calc(50% - 5px);right: 30px;width: 25px;height: 5px;border: none;border-right: 2px solid #FFF;border-bottom: 1px solid #FFF;transform: skew(45deg);transition: .3s;}
.btn-basic a {border-radius: 30px;padding:15px 0;text-align: center;color: #fff;background-image: linear-gradient(90deg, #f7b32b, #fd7022);transition: 0.3s;cursor:pointer;position: relative;text-decoration: none;display: block;width: 100%;}
.btn-basic a:hover {text-decoration: none;background-image: linear-gradient(90deg,#fd7022,#f7b32b);}
.btn-basic a:hover::after {right: 20px; width: 30px;}


.btn-line {max-width: 330px;width: 100%;font-size: 20px;position: relative;z-index: 10;}
.btn-line a {display: block;width: 100%;box-sizing: border-box; padding: 15px 60px 15px 50px; border-radius: 30px;text-align: center;color: #fff;background-image: linear-gradient(90deg, #06c655, #4dc764);transition: 0.3s;cursor: pointer;position: relative;text-decoration: none;}
.btn-line a::after {content: "";display: block;position: absolute;top: calc(50% - 5px);right: 30px;width: 20px;height: 5px;border: none;border-right: 2px solid #FFF;border-bottom: 1px solid #FFF;transform: skew(45deg);transition: .3s;}
.btn-line a:hover {text-decoration: none;background-image: linear-gradient(90deg, #4dc764, #06c655);}
.btn-line a:hover::after {right: 20px; width: 25px;}

/*===============================================
 *	header
===============================================*/
#header_area {
  background: #fff;
  max-width: 1470px;
  position: fixed;
  top: 40px;
  transform: translateX(-50%);
  left: 50%;
  border-radius: 50px;
  z-index: 999;
  padding: 10px 0;
}

#header_wrap {
  max-width: 1470px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

#header_wrap .logo {
  max-width: 180px;
}

.header_inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
}

.pc_nav.pc {
  margin-left: auto;
}

.pc_nav.pc ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.menu-item-text a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  transition: 0.3s;
}

.menu-item-line .btn-line {
  margin: 0;
}

.menu-item-insta a {
  display: block;
  line-height: 0;
  transition: opacity 0.3s;
}

.menu-item-insta img {
  display: block;
  width: 40px;
  height: auto;
}

.sp_insta_area.sp {
  display: none;
}

@media only screen and (max-width: 1024px) {
  #header_wrap {
    padding: 0 0 0 20px;
    width: 94%;
  }
  #header_area {
    max-width: 94%;
  }
  .header_inner {
    max-width: 94%;
  }
  }

  @media only screen and (max-width: 960px) {
  #header_wrap .logo {
    max-width: 174px;
  }
}

@media only screen and (max-width: 568px) {
  #header_area {
    position: fixed;
    left: 0px;
    top: 0;
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease;
    z-index: 99999;
    transform: translateY(0);
    padding: 0;
    border-radius: 0;
  }
  #header_wrap {
    padding: 0;
    margin: 0;
    max-width: 100%;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
  }
  #header_wrap .logo {
    max-width: 130px;
    margin-left: 20px;
  }
  .header_inner {
    max-width: none;
    margin: 0;
    width: auto;
  }
  .pc_nav.pc {
    display: none;
  }
  .sp_insta_area.sp {
    display: block;
    margin-left: auto;
    line-height: 0;
  }
  .sp_insta_area.sp img {
    display: block;
    width: 35px;
    height: auto;
  }
  .menu_box {
    margin-left: 0;
  }
}
/*
#header_area{background: #fff;max-width: 1470px;position: fixed;top:40px;transform: translateX(-50%); left: 50%; border-radius: 50px;z-index: 999;padding: 10px 0;}
#header_wrap {max-width: 1470px;margin: 0 auto;}
#header_wrap .logo{max-width: 180px;margin-right: auto;}
.header_inner{max-width: 1300px;margin: 0 auto;}

@media only screen and (max-width:1024px) {
#header_wrap {padding: 0 0 0 20px;width: 94%;}
#header_area{max-width: 94%;}
.header_inner{max-width: 94%;}
}
@media only screen and (max-width: 960px) {
#header_wrap .logo{max-width: 174px;}

}
@media only screen and (max-width: 568px) {
#header_area{position: fixed;left: 0px;top:0;width: 100%;max-width: 100%; transition: all 0.3s ease;z-index: 99999;transform: translateY(0);padding: 0;border-radius: 0;}
#header_wrap {padding: 0 0 0 5%;margin: 0;max-width: 100%;display: flex;width: 100%;box-sizing: border-box;}
#header_wrap .logo{max-width: 100px;}
.header_inner{max-width: 50%;margin: 0;}
.hd_btn_area .btn-line{font-size: 14px;width: 100%;}
.hd_btn_area .btn-line a{width: 100%;padding: 10px 40px 10px 10px;}
}
*/
/*=============================================== *
	Gnavi
===============================================*/
.global_nav {width: 100%;max-width: 895px;}
.global_nav ul li {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;position: relative;}
.global_nav ul li a {color: #616161;font-size: 17px;line-height: 1.4;font-weight: bold;display: block;text-align: center;padding: 10px;}
.global_nav ul li a:hover{border-bottom: var(--site-primary) 2px solid;padding: 10px 10px 8px;}
.global_nav ul li.hd_line{background: #06c755;}
.global_nav ul li img{margin: 0 auto;}
.global_nav ul li.hd_line a{padding: 21px 24px 20px;}
.global_nav ul li.hd_mail a{padding: 22px 0 20px;}
.global_nav ul li.hd_line a,
.global_nav ul li.hd_mail a{color: #fff;font-size: 15px;}
.global_nav ul li.hd_line a:hover,
.global_nav ul li.hd_mail a:hover{border-bottom: none;opacity: .85;}
.global_nav ul li.hd_line img{max-width: 38px;}
.global_nav ul li.hd_mail img{max-width: 40px;margin-bottom: 7px;}
.global_nav ul li.hd_mail{background: #3a75bb;}
@media only screen and (max-width: 960px) {
.global_nav {display: none;}
.global_nav ul {width: 96vw;}
.global_nav ul li a {font-size: 14px;}
}

/*=============================================== *
	SP Menu
===============================================*/
.menu_box {width: 60px;height: 60px;background: var(--site-primary);margin-left: auto;display: none;}
.menu_btn {position: relative;height: 22px;top: 13px;}
.menu_btn span {position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);height: 3px;background-color: #fff;-webkit-transition: all 0.4s;transition: all 0.4s;}
.menu_btn span:nth-child(1) {top: 0;}
.menu_btn span:nth-child(2) {top: 10px;}
.menu_btn span:nth-child(3) {bottom: 0;}
.menu_btn span:not(.txt) {width: 25px;}
.menu_btn span.txt {width: 100%;background: none;bottom: 0;text-align: center;}
.menu_btn span.txt::after {content: 'menu';font-size: 10px;color: #fff;}
.menu_box.active span:nth-child(1) {-webkit-transform: translate(-12px, 10px) rotate(-45deg);transform: translate(-12px, 10px) rotate(-45deg);}
.menu_box.active span:nth-child(2) {opacity: 0;}
.menu_box.active span:nth-child(3) {-webkit-transform: translate(-12px, -9px) rotate(45deg);transform: translate(-12px, -9px) rotate(45deg);}
.menu_box.active span.txt::after {content: 'close';}
.menu_content {background:#fff; width: 100%;height: 100%;position: fixed;z-index: 200;-webkit-transition: all 0.5s;transition: all 0.5s;top: -120%;padding-bottom: 60px;overflow: scroll;-webkit-overflow-scrolling: touch;}
.menu_content ul {border-top: 1px solid #e2e2e2;display: flex; flex-direction: column;}
.menu_content li {width: 100%;}
.menu_content li a {font-size: 16px;font-weight: bold;display: block;position: relative;padding: 18px 0 18px 3%;border-bottom: 1px solid #999;}
.menu_content li a::after {content: '';background: url("../img/common/icon_arrow_right_blue.svg") no-repeat;width: 10px;height: 16px;position: absolute;right: 5%;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.menu_content .btn-line{
  margin: 20px auto;
}
.menu_content.open {top: 85px;}
@media only screen and (max-width: 960px) {
/*.menu_box {display: block;}
.menu_box {width: 70px;height: 70px;}*/
}
@media only screen and (max-width: 568px) {
.menu_box {display: block;}
.menu_box {width: 60px;height: 60px;margin-left: 20px;}
.menu_content.open {top: 60px;}
.menu_content .nav_copy{margin-top: 20px;font-size: 12px;}
.menu_content .cv_box {padding: 15px 30px 20px;}
.menu_content .cv_box .camp_ttl {padding: 0;margin: 0 3.5% 8px;}
.menu_content .cv_box p {font-size: 14px;}
.menu_content .cv_box .appeal-box div{gap:3vw;}

.menu_content .cv_box .tel-box{border: 2px solid var(--site-primary); border-radius:6px;padding: 10px;background: #fff;margin-bottom: 10px;}

.menu_content .cv_box .tel-box .tel-number{font-size: 32px;font-weight: 900;color: #444;letter-spacing: 1.5px;position: relative;padding-left: 50px;margin-bottom: 5px;line-height: 1.3;}
.menu_content .cv_box .tel-box .tel-number::before{content: ''; background: url(../img/top/common/icon_tel.png)no-repeat; background-size:contain; position: absolute; left: 0;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;}
.menu_content .cv_box .tel-box span{display: block; background:#c8e8fe ; color: #444;padding: 5px 0;border-radius: 6px;font-size: 12px;}

}


/*===============================================
 *	Main visual
===============================================*/



#mv_wrap {
    height: 911px;
    min-height: 700px;
    display: flex;
    align-items: center;
    position: relative;
    background: url('../img/common/mv_bg.jpg') no-repeat center center / cover; 
    overflow: hidden;
    padding: 0;
}

/* Background Overlay (Diagonal cut in design) */
#mv_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, rgba(10, 25, 100, 0.9) 0%, rgba(10, 25, 100, 0.7) 45%, rgba(10, 25, 100, 0) 70%);
    z-index: 1;
}

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

.mv_inner { max-width: 1300px;margin: 0 auto;width: 100%;position: relative;}


.hd_mv_head {
    font-size: 75px;
    line-height: 1.3;
    font-weight: bold;
    color: #fff;
    margin-bottom: 25px;
}

.mv_lead {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mv_lead::after {
    content: "";
    width: 80px;
    height: 1px;
    background: #fff;
}

.mv_desc {
    font-size: 20px;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 40px;
}

/* MV Button */
.mv_txtbox .btn-line {
    margin: 0;
    text-align: left;
}
.mv_txtbox .btn-line a{
}


.scroll {
    /* --- 配置設定 --- */
    position: absolute;
    left: 50%;
    bottom: 30px; /* MVの下からの位置 */
    transform: translateX(-50%); /* 中央寄せ */
    
    /* --- サイズとテキスト設定 --- */
    width: fit-content;
    display: flex; 
    flex-direction: column;
    align-items: center;
    gap: 10px; 
    color: #ffffff; 
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    z-index: 100; 
}


.scroll::before {
    content: "";
    position: absolute;
    top: 35px; 
    left: 50%;
    transform: translateX(-50%);
    width: 4px; 
    height: 8px; 
    background-color: #ffffff; 
    border-radius: 1px;
    animation: scroll-vivid 2s ease-in-out infinite;
    z-index: 2; 
}

/* マウスの枠 */
.scroll::after {
    content: "";
    display: block;
    /* サイズ設定 */
    width: 28px; /* マウスの幅 */
    height: 48px; /* マウスの高さ */
    /* 色設定 */
    border: 2px solid #ffffff; /* 純白の枠線 */
    border-radius: 15px;
    box-sizing: border-box; /* 枠線をサイズに含める */
    z-index: 1;
    opacity: 1; /* 枠は絶対に透過させない */
}


@keyframes scroll-vivid {
    0% {
        opacity: 1; /* 開始から白 */
        top: 35px; /* マウス上部 */
    }
    50% {
        opacity: 1; /* ここまで白 */
        top: 45px; /* マウス中央へ移動 */
    }
    100% {
        opacity: 0; /* ここで消す */
        top: 55px; /* マウス下部 */
    }
}
/* Responsive Adjustments */
@media only screen and (max-width: 1024px) {
  .mv_inner{
    max-width: 94%;
  }
    .hd_mv_head { font-size: 48px; }
}

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

    #mv_wrap {height: 753px;}
    .hd_mv_head { font-size: 32px; }
    .mv_lead { font-size: 20px; }
    .mv_desc { font-size: 14px; }
    .mv_txtbox .btn-line a{font-size: 16px;margin: 0 auto; width: 80%;}
}




/*===============================================
 *	PRO QUALITY
===============================================*/

.quality {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
}

.quality-container {
  display: flex;
  justify-content: flex-end; /* コンテンツを右に寄せる */
  align-items: center;
  position: relative;
  min-height: 540px;
}

.quality-img {
  /* 画面左端から中央まで突き抜ける配置 */
  position: absolute;
  left: calc(50% - 50vw);
  top: 0;
  width: calc(60%);
  max-width: 920px;
  height: 100%;
  z-index: 1;
}

.quality-img img {
  width: 100%;
  object-fit: cover;
}

.quality-content {
  width: 50%;
  position: relative;
  z-index: 2;
  padding-left: 60px;
  margin-top: 50px;
}

.quality-en {
  display: block;
  margin-left: 20px;
  position: relative;
  z-index: 1;
}

.quality-box {
  background: #fff;
  padding: 40px;
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
  border-radius: 6px;
}

.quality-ttl {
  font-size: 50px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  margin: 10px 0 30px 30px;
}

.quality-ttl::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -20px;
  width: 30px;
  height: 30px;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
}

.quality-ttl::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -20px;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.quality-lead {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
  letter-spacing: 0;
}

.quality-desc {
  font-size: 17px;
  line-height: 2;
  margin-bottom: 30px;
  color: #444;
}

.quality-check {
  display: flex;
  gap: 30px;
}

.quality-check li {
  position: relative;
  gap: 20px;
  font-size: 20px;
  padding-left: 40px;
}

.quality-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 30px;
  background-color: #3162a0;
  background:url(../img/top/icon_check.png)no-repeat;
  background-size:contain ;
}

/*===============================================
 * COACH SECTION
===============================================*/

.coach-ttl{
  font-size: 37px;
  font-weight: bold;
  margin: 40px 0;
}
.coach-en{
  font-size: 20px;
  position: relative;
  display: inline-block;
  padding: 0 55px 0 0;
}
.coach-en::after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
.coach-en:after {
  right: 0;
}
.coach-list{
  margin-bottom: 40px;
}
.coach-list li{
  width: 31.5%;
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}
.coach-list .coach-last{
  width: 100%;
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}
.coach-body{
  padding: 20px 25px 30px;
  display: flex;
  flex-direction: column;
}

.coach-body .name{
  font-size: 26px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 30px;
}
.coach-body .name-en{
  font-size: 17px;
  font-weight: normal;
}
.coach-body .name small{
  font-size:16px;
}
.coach-last .coach-img{
  width: 30%;
}
.coach-last .coach-body{
  width: 70%;
  box-sizing: border-box;
}
.coach-last .info{
  justify-content: space-evenly;
}
.coach-last .info .profile{
  gap: 20px;
  align-items: anchor-center;
}

.coach-last .coach-body .name{
  margin-bottom: 10px;
}
.coach-last .link{
  margin-top: 0;
  text-align: center;
}

.info-ttl{
  font-weight: bold;
}
.info-list:first-child .info-ttl{
  padding: 0.25em 0.5em;
  border-left: solid 5px #1d2088;
  margin-bottom: 10px;
  font-size: 18px;
}
.info-list{
  margin-bottom: 20px;
}

.info-txt{
  letter-spacing: 0;
}
.link{
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0;
}
.link a{
    color: #2a5298;
    position: relative;
    padding-left: 40px;
    display: inline-block;
}
.link a::before{
  content: '';
  background: url(../img/common/icon-wiki.svg)no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}
.coach-item:last-child .link a::before{
  background: url(../img/common/icon_link.svg)no-repeat;
}
.coach-body p{
  margin-bottom: 25px;
}
.coach-last .coach-body p{
  margin-bottom: 10px;
}


@media only screen and (max-width: 1024px) {
  .quality {
    background-size: cover;
  }
  .quality-ttl{
    font-size: 36px;
  }
}
@media only screen and (max-width: 960px) {
  .quality-container { flex-direction: column; }
  .quality-img {
    position: relative;
    left: auto;
    width: 100%;
    height: 350px;
  }
  .quality-content {
    width: 100%;
    padding-left: 0;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 568px) {
.quality{
  padding: 40px 0;
} 
.quality-img{
  height: auto;
}
.quality-content{
  margin-top: 20px;
}
.quality-box{
  padding: 20px;
}
.quality-container{
}
.quality-ttl{
  font-size: 24px;
}
.quality-lead{
  font-size: 18px;
}
.quality-desc{
  font-size: 15px;
}
.quality-check{align-items: center;}
.quality-check li{
  font-size: 17px;
  padding-left: 30px;
}
.quality-check li::before{
  width: 25px;
  height: 20px;
}


.coach-ttl{font-size: 28px;}
.coach-en{font-size: 14px;}
.coach-list{flex-direction: column;gap: 20px;}
.coach-list li{width: 100%;}
.coach-last{
  flex-direction: column;
}
.coach-last .coach-img{
  width: 100%;
}
.coach-last .info .profile,
.coach-last .info{
  flex-direction: column;
  align-items: flex-start;
  gap:0;
}
.coach-last .info{
  margin-bottom: 20px;
}
.coach-last .coach-body{
  width: 100%;
}
.coach-last .info .profile .info-list:first-child{
  margin-bottom: 0;
}
.coach-list {
    margin-bottom: 20px;
}
.coach-last .link{
  text-align: left;
}

}

/*===============================================
 *	method
===============================================*/
.method{
  padding: 60px 0 80px;
  position: relative;
}
.method::after{
  content: '';
  background: url(../img/top/method_txt.png)no-repeat;
  background-size: contain;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 800px;
  height: 358px;
}
.method_intro{
  margin-bottom: 60px;
  gap: 20px;
}
.method_txt{
  color: #fff;
}
.method-title{
  font-size: 50px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 30px;
}
.method_txt .concept{
  color: var(--site-primary);
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  padding:5px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.method_img{
  margin-right: 60px;
}
.method_point{
    position: relative;
    z-index: 2;}

.method_point li{
  background: #fff;
  border-radius: 10px;
  margin-bottom: 60px;
  max-width: 1160px;
  padding: 20px;
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}
.method_point li:nth-child(2){
  margin-left: auto;
}
.method_point li:last-child{
  margin-bottom: 0;
}

.method_point li h3{
  font-size: 20px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.method_point li h3::before{
  content: '';
  position: absolute;
  bottom: -10px;
  display: inline-block;
  width: 80px;
  height: 3px;
  left: 0%;
  background-color: #333;
}

@media only screen and (max-width: 1024px) {
  .method-title{font-size: 36px;}
.method_txt .concept{font-size: 24px;}
.method_img{margin-right: 0;}
}
@media only screen and (max-width: 960px) {}
@media only screen and (max-width: 568px) {
  .method{padding: 30px 0 60px;background-size: 100% 100%;}
  .method_intro{flex-direction: column;margin-bottom: 40px;}
  .method-title{font-size: 32px;}
  .method_txt .concept{font-size: 20px;}
  .method_point li{margin-bottom: 30px;}
  .method_point li .left-border{padding: 10px 0 10px 15px;}
  .method::after{width: 354px; height: 158px;}
}



/*===============================================
 *	FEATURES
===============================================*/
.features{
  background: url(../img/top/futures_bg.jpg)no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 130px 0 100px;
}
.features-title{
  position: relative;
}

.features-title::before{
  content: '';
  background: url(../img/top/features_txt.png)no-repeat;
  background-size: contain;
  width: 540px;
  height: 60px;
  position: absolute;
  top:-50px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}

.features_list{
  gap: 20px;
}
.features_list li{
  width: 23%;
  position: relative;
}

.features_list li::before{
  content: '';
  background: url(../img/top/icon_education.png)no-repeat;
  background-size: auto;
  width:80px;
  height:80px ;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}
.grad-border-block {
    background:linear-gradient(90deg, #f7b32b, #fd7022);
    border-radius: 10px;
    padding: 4px;
}
.features_list li:nth-child(2):before{
  background: url(../img/top/icon_safety.png)no-repeat;
}
.features_list li:nth-child(2) .grad-border-block {
    background:linear-gradient(90deg, #d8de01, #93c41d);
}

.features_list li:nth-child(3):before{
  background: url(../img/top/icon_support.png)no-repeat;
}
.features_list li:nth-child(3) .grad-border-block {
    background:linear-gradient(90deg, #44e6fc, #06a3dd);
}

.features_list li:nth-child(4):before{
  background: url(../img/top/icon_balancing.png)no-repeat;
}
.features_list li:nth-child(4) .grad-border-block {
    background:linear-gradient(90deg, #b443fb, #7006dd);
}
.features_list .sub-title{
  font-size: 18px;
}
.features_list h3{
  font-size: 25px;
  font-weight: bold;
  margin:15px 0;
  line-height: 1.3;
}

.grad-border-content {
    background: #fff;
    border-radius: 5px;
    padding: 45px 20px 30px;
}
.grad-border-content .txt{
  width: 52%;
}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 960px) {
  .features{
    padding: 90px 0 40px;
  }
  .features-title::before{
    width: 50%;
  }
  .features_list{
      flex-wrap: wrap;
      gap: 60px 20px;
    }
  .features_list li{
    width: 48%;
  }
}
@media only screen and (max-width: 568px) {
  .features-title::before{
    width: 100%;
  }
  .features_list{
    flex-direction: column;
  }
  .features_list li{
    width: 100%;
  }
  .features .sec_ttl{
    margin-bottom: 70px;
  }
  .features_list h3{
    font-size: 20px;
    margin: 10px 0 15px;
  }
  .grad-border-content .txt{
    width: 100%;
  }
}

/*===============================================
 *	area
===============================================*/
.area{
  background: url(../img/top/area_bg.jpg)no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 130px 0 90px;
}
.area-title{
  position: relative;
}

.area-title::before{
  content: '';
  background: url(../img/top/area_txt.png)no-repeat;
  background-size: contain;
  width: 303px;
  height: 59px;
  position: absolute;
  top:-50px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}

.area_list{
  gap: 20px;
  margin-top: 40px;
}
.area_list li{
  width: 48%;
}
.area_list li .grad-border-content{
  padding: 30px;
  gap: 20px;
}
.area_list li:nth-child(2) .grad-border-block{
    background: linear-gradient(90deg, #c2c2c2, #343434);
}
.area_list li .photo{
  width: 42%;
}

.area_list li h3{
  font-size: 25px;
  font-weight: bold;
  position: relative;
  padding-left: 45px;
  margin-bottom: 10px;
}
.area_list li h3::before{
  content: "";
  width: 33px;
  height: 2px;
  background: linear-gradient(90deg, #f7b32b, #fd7022);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.area_list li:nth-child(2) h3::before{
  background: linear-gradient(90deg, #c2c2c2, #343434);
}
.area_list li p{
  margin-bottom: 20px;
}
@media only screen and (max-width: 1024px) {
.area_list li h3{font-size: 20px;}
.btn-basic a{font-size: 16px;}
}

@media only screen and (max-width: 960px) {
  .area{
    background-size: cover;
    background-position: left top;
    padding: 100px 0 40px;
  }
.area-title .sec_ttl{
  margin-bottom: 30px;
}
.area-title::before{
  width:35% ;
}
.area_list li .grad-border-content{
  flex-direction: column;
}
}

@media only screen and (max-width: 568px) {
  .area{padding: 90 0 40px;
  }
  .area-title::before {
        width: 55%;
  }
  .area_list{
    flex-direction: column;
  }
  .area_list li{
    width: 100%;
  }
  .area_list li .photo{
  width: 100%;
}
}
/*===============================================
 *	Footer
===============================================*/
footer{background: #ececec;}
.footer .footer_logo{max-width: 239px;}
.footer_nav{gap:20px;padding: 10px 0 20px;}
.footer_nav ul{ gap:1vw;width: 65%;}
.copy{text-align: center;border-top: 2px solid #dfdfdf;padding: 40px 0;}
.footer .footer_nav ul li a:hover{text-decoration: underline}
.footer .footer_nav ul li.btn-line a{text-decoration: none;}
@media only screen and (max-width: 1024px) {
.fooer-nav li a{font-size: 15px;}
.footer_nav ul{ gap:30px;width: 100%;align-items: center;}
}
@media only screen and (max-width: 960px) {
  footer{padding: 30px 0 0;}
  .footer .footer_logo{width: 20%;}
  .fooer_nav{gap: 5px;}
  .copy{gap: 0;}
  .copy a{margin-right: 5px;}
}
@media only screen and (max-width: 568px) {
  footer{padding: 10px 0 0;}
  .footer .row{flex-direction: column;}
  .footer .footer_logo {width: 50%;}
  .footer_nav ul{gap: 20px;}
  .footer .btn-line a{width: 70%;font-size: 14px; padding: 15px 30px 15px 20px;margin: 0 auto;}
  .copy{padding: 20px 0;font-size: 12px;}
}

/* =========================================
   スクロールアニメーション用
   ========================================= */
/* 共通設定：初期状態は透明 */
.inview {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease; /* 1.2秒かけてゆっくり動く */
    will-change: opacity, transform; /* パフォーマンス最適化 */
}

/* 左からスライドしてくる動き（初期位置を左にずらす） */
.inview.fadeleft {
    transform: translateX(-50px);
}

/* 右からスライドしてくる動き（初期位置を右にずらす） */
.inview.faderight {
    transform: translateX(50px);
}

/* 表示されたとき（JSで付与するクラス） */
.inview.is-active {
    opacity: 1;
    transform: translateX(0); /* 元の位置に戻る */
}


/*===============================================
 *	TOPページのポップアップ
===============================================*/
/* オーバーレイ（黒い半透明の背景） */
.popup-overlay {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* ポップアップの中身をまとめるコンテナ */
.popup-content {
  width: 100%;
  max-width: 500px;
  text-align: center;
  position: relative; /* 閉じるボタンの配置基準 */
  animation: popupFadeIn 0.5s ease-out;
}

/* 閉じるボタン（×ボタン）のデザイン */
.close-button {
  position: absolute;
  top: 15px; /* 画像の上からの距離 */
  right: 0; /* 画像の右からの距離 */
  font-size: 36px; /* ×の大きさ */
  color: #b91515; /* ×の色。画像の配色に合わせて変更してください */
  cursor: pointer;
  z-index: 10000; /* 画像より上に配置 */
  transition: color 0.3s, transform 0.3s;
  line-height: 1; /* 行の高さを調整して中央に */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 視認性を高める影 */
}

.close-button:hover {
  color: #ffcccc; /* ホバー時の色（少しピンクっぽくするなど） */
  transform: scale(1.1); /* ホバー時に少し大きくする */
}

/* 画像のレスポンシブ対応 */
.popup-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* LINEボタンのデザイン */
.line-button {
  display: block;
  background-color: #06C755;
  color: #ffffff;
  text-decoration: none;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s;
}

.line-button:hover {
  opacity: 0.8;
}

/* ポップアップ時のアニメーション */
@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*===============================================
 *	スタッフ追加
===============================================*/
.staff-list {
  margin: 40px 0;
}
.staff-list li {
  width: 31.5%;
  box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}
.staff-img {
  width: 100%;
  aspect-ratio: 461 / 415;
  background-color: #b0b0b0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coming-soon {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.staff-body {
  padding: 20px 25px 30px;
  display: flex;
  flex-direction: column;
}
.staff-body .name {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
}
.staff-body .name-en {
  font-size: 17px;
  font-weight: normal;
}
.staff-birth {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
@media only screen and (max-width: 1024px) {
  .staff-list {
    flex-direction: column;
    gap: 20px;
  }
  .staff-list li {
    width: 100%;
  }
}
@media only screen and (max-width: 568px) {
  .staff-list {
    margin-bottom: 20px;
  }
  .staff-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .staff-img {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: auto;
  }
  .staff-body {
    width: 60%;
    padding: 15px;
    box-sizing: border-box;
  }
  .staff-body .name {
    font-size: 18px;
    margin-bottom: 6px;
    text-align: left;
  }
  .staff-body .name-en {
    font-size: 13px;
  }
  .staff-birth {
    font-size: 12px;
    margin-bottom: 8px;
    text-align: left;
  }
  .staff-body .info-txt {
    font-size: 12px;
  }
  .coming-soon {
    font-size: 14px;
  }
}