*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Yu Gothic","Hiragino Sans","Noto Sans JP",sans-serif;
    color:#333;
    line-height:1.8;
    background:#fff;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ===========================
   header
=========================== */

header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 0 140px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  transition: 0.6s;
  opacity: 1;
}
header .header-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1000px;
}
header .header-menu li {
  position: relative;
  height: 20px;
}

header .header-menu li .menu-sublist {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  
  padding: 10px 15px; 
  transition: 0.4s;
  text-align: center;

  width: max-content;
  min-width: 180px;
  background-color: transparent;
  border-radius: 4px;
}
header .header-menu li .menu-sublist:hover {
  opacity: 1;
  pointer-events: auto;
}
header .header-menu li .menu-sublist li {
  height: 28px;
}
header .header-menu li .menu-sublist a {
  color: #fff;
  display: block;
  width: 100%;
  line-height: 28px;
  font-size: 14px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;  }
header .header-menu .item-sub:hover ul {
  opacity: 1;
  pointer-events: auto;
}
header .header-menu span {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  display: block;
  line-height: 20px;
}
header .header-menu a {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  transition: 0.3s;
  display: block;
  line-height: 20px;
}
header .header-menu a:hover {
  opacity: 0.6;
}
header.show {
  opacity: 1;
}
header.scrolled {
  position: fixed;
  height: 60px;
  background-color: #fff;
}
header.scrolled .header-menu li {
  height: 60px;
}
header.scrolled .header-menu li .menu-sublist {
  top: 60px;
  background-color: #333;
}
header.scrolled .header-menu li .menu-sublist li {
  height: 28px;
}
header.scrolled .header-menu li .menu-sublist a {
  line-height: 28px;
}
header.scrolled .header-menu a {
  color: #2E2E2E;
  line-height: 60px;
}
header.scrolled .header-menu span {
  color: #2E2E2E;
  line-height: 60px;
}

.fv {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  height: 100vh;
  background-image: url("../assets/img/fv-img.jpg?v=1");
  background-size: cover;
  z-index: 7;
}

.fv-cover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fv-cover img {
  width: 58vw;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: 0.8s ease-in-out;
  opacity: 0;
}
.fv-cover.show img {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  opacity: 1;
}

.slider-images {
  width: 100%;
  box-sizing: border-box;
  height: 40vw;
  position: relative;
  z-index: 1;
}

.slider-item {
  width: 100%;
  height: 40vw;
  background-size: cover;
  background-position: center;
}
.slider-item1 {
  background-image: url("../img/fv1.jpg");
}
.slider-item2 {
  background-image: url("../img/fv2.jpg");
}
.slider-item3 {
  background-image: url("../img/fv3.jpg");
}
.slider-item4 {
  background-image: url("../img/fv4.jpg");
}

@media screen and (max-width: 768px) {
  header {
    height: 60px;
    padding: 0 20px;
  }
  header .header-menu {
    display: none;
  }
  header.scrolled {
    background-color: #000;
  }
  .fv-cover img {
    width: 80vw;
  }
  .fv-text {
    right: 20px;
    font-size: 13px;
    line-height: 30px;
    text-align: right;
  }
  .fv-text span {
    font-size: 19px;
  }
  .fv-text span.num {
    font-size: 30px;
    margin-right: 4px;
  }
  .slider-images {
    height: calc(100vh - 110px);
  }
  .slider-item {
    height: calc(100vh - 110px);
  }
}
.section-head {
  max-width: 1120px;
  margin: auto;
  margin-bottom: 40px;
}
.section-head h2 {
  font-size: 48px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  color: #989898;
  position: relative;
  display: inline-block;
}
.section-head h2 span {
  opacity: 0;
  transition-delay: 0.4s;
}
.section-head h2:after {
  content: "";
  background-color: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.section-head .title-sub {
  display: block;
  font-weight: bold;
  font-size: 18px;
  opacity: 0;
  transition: 0.4s;
  transition-delay: 0.3s;
  transform: translateY(5px);
}
.section-head.show h2 span {
  opacity: 1;
}
.section-head.show h2:after {
  -webkit-animation: imagewipe 0.8s ease-in-out both;
          animation: imagewipe 0.8s ease-in-out both;
  opacity: 1;
}
.section-head.show .title-sub {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .section-head {
    margin-bottom: 30px;
  }
  .section-head h2 {
    font-size: 30px;
  }
  .section-head .title-sub {
    font-size: 15px;
  }
}
.section-content {
  width: auto;
  max-width: 1120px;
  margin: auto;
}



/* ===========================
   COMMON
=========================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}



.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title span{
    display:block;
    color:#8b1e3f;
    font-size:14px;
    font-weight:bold;
    letter-spacing:3px;
    margin-bottom:10px;
}

.section-title h2{
    font-size:38px;
    font-weight:700;
}

p{
    font-size:16px;
}

/* ===========================
   BUTTON
=========================== */

.hero-btn,
.contact-btn{

    display:inline-block;

    margin-top:40px;

    padding:18px 48px;

    background:#8b1e3f;

    color:#fff;

    border-radius:50px;

    transition:.4s;
}

.hero-btn:hover,
.contact-btn:hover{

    background:#b72f57;

    transform:translateY(-4px);

}

/* ===========================
   HERO
=========================== */

.service-hero{

    height:100vh;

    background:url(images/hero.jpg) center center/cover;

    position:relative;

    display:flex;

    align-items:center;

}

.service-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.service-hero__inner{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1200px;

    margin:auto;

    color:#fff;

}

.service-hero__sub{

    letter-spacing:5px;

    color:#fff;

    margin-bottom:20px;

}

.service-hero h1{

    font-size:64px;

    margin-bottom:25px;

    font-weight:700;

}

.service-hero__lead{

    font-size:22px;

    line-height:2;

    max-width:700px;

}

.service-hero{

    height:100vh;

    background:url("assets/img/Alleviatingdepression1.png") center center / cover no-repeat;

    position:relative;

    display:flex;

    align-items:center;

}


@media screen and (max-width: 768px) {
    .service-hero h1 {
        font-size: 70px;
    }
	   .service-hero__lead {
        font-size: 16px;
    }
	    .service-hero {
        min-height: 65vh;
        height: auto;
        padding: 100px 20px;
    }
	    .service-hero__inner {
        width: 92%;
        max-width: none;
    }
}
@media screen and (max-width: 480px) {
    .service-hero h1 {
        font-size: 33px;
    }
	    .service-hero__lead {
        font-size: 15px;
    }
	    .service-hero {
        min-height: 55vh;
        padding: 80px 20px;
    }
	    .service-hero__inner {
        width: 100%;
        max-width: none;
    }
}
/*=====================================
  ABOUT
======================================*/
.fade{
  margin-top:120px;
}

.service-about{
    background:#fff;
}

.about-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

.about-image{
    width:50%;
}

.about-image img{
    width:100%;
    border-radius:20px;
    object-fit:cover;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.about-text{
    width:50%;
}

.about-text p{
    margin-bottom:25px;
    line-height:2.2;
    color:#555;
}


  
  
  /* 実績 */
  
  .about-result{
  
  margin-top:40px;
  
  background:rgba(0,0,0,.50);
  
  color:#fff;
  
  padding:35px;
  
  border-radius:20px;
  
  text-align:center;
  
  }
  
  
  .about-result p{
  
  line-height:2;
  
  font-size:18px;
  
  }

  /*=====================================
  ABOUT SP
======================================*/
@media screen and (max-width:768px){

  .service-about{
      padding:80px 0;
  }
  
  .about-box{
      display:flex;
      flex-direction:column;
      gap:35px;
      align-items:center;
  }
  
  .about-image,
  .about-text{
      width:100%;
  }
  
  .about-image img{
      width:100%;
      max-width:420px;
      display:block;
      margin:0 auto;
  }
  
  .about-text{
      text-align:center;
  }
  
  .about-text p{
      font-size:15px;
      line-height:2;
  }
  
  .about-text p br{
      display:none;
  }
  
  .about-result{
      margin-top:40px;
      padding:25px;
  }
  
  .about-result p{
      font-size:15px;
      line-height:1.9;
  }
  
  .about-result p br{
      display:none;
  }
  
  }
/*=====================================
SERVICE
======================================*/
.survey-subsection{
margin:100px 0;
}


/*=====================================
サービス導入
======================================*/



.service-intro-head{

  text-align:center;

  max-width:850px;

  margin:0 auto 60px;

}


/*-------------------
英語タイトル
-------------------*/

.service-label{

  display:inline-block;

  font-size:14px;

  letter-spacing:.25em;

  color:#8b1e3f;

  font-weight:700;

  position:relative;

  padding:0 28px;

  margin-bottom:22px;

}

.service-label::before,
.service-label::after{

  content:"";

  position:absolute;

  top:50%;

  width:55px;
  height:1px;

  background:#d8d8d8;

}

.service-label::before{

  right:100%;

}

.service-label::after{

  left:100%;

}

/*-------------------
タイトル
-------------------*/

.service-intro-head h2{
  font-size:26px;

  font-weight:500;

  line-height:1.5;

  color:#555;

  margin-bottom:10px;

}

.service-intro-head h2 strong{

  display:block;

  font-size:40px;

  color:#222;

  font-weight:700;

  margin-top:6px;

}

/*-------------------
説明
-------------------*/

.service-intro-head p{

  font-size:18px;

  line-height:2;

  color:#555;

}

/*=====================================
画像
======================================*/

.service-intro-image{

  max-width:1050px;

  margin:70px auto;

}

.service-intro-image img{

  width:100%;

  display:block;

  border-radius:24px;

  box-shadow:0 18px 40px rgba(0,0,0,.08);

}

/*=====================================
CONTENTS
======================================*/

.service-intro-nav{

  margin-top:70px;

  text-align:center;

}

.service-intro-nav h3{

  font-size:30px;

  color:#222;

  letter-spacing:.08em;

  margin-bottom:8px;

}

.intro-nav-text{

  color:#888;

  margin-bottom:40px;

  font-size:16px;

}

/*-------------------
目次
-------------------*/

.intro-nav-grid{

  display:grid;

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

  gap:16px 28px;

  max-width:900px;

  margin:0 auto;

}

.intro-nav-grid a{

  text-decoration:none;

  color:#333;

  font-size:17px;

  text-align:left;

  padding:16px 0;

  border-bottom:1px solid #ececec;

  transition:.3s;

  position:relative;

  padding-left:24px;

}

.intro-nav-grid a::before{

  content:"";

  width:8px;
  height:8px;

  border-radius:50%;

  background:#8b1e3f;

  position:absolute;

  left:0;

  top:24px;

  transition:.3s;

}

.intro-nav-grid a:hover{

  color:#8b1e3f;

  padding-left:32px;

}

.intro-nav-grid a:hover::before{

  transform:scale(1.5);

}

/*=====================================
スクロール
======================================*/

html{

  scroll-behavior:smooth;

}

.survey-subsection{

  scroll-margin-top:110px;
}

/*=====================================
SP
======================================*/

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

.service-intro{

  padding:70px 0 80px;

}

.service-label{

  font-size:12px;

  padding:0 16px;

}

.service-label::before,
.service-label::after{

  width:30px;

}

.service-intro-head{

  margin-bottom:40px;

}

.service-intro-head h2{

  font-size:30px;

}

.service-intro-head h2 strong{

  font-size:34px;

}

.service-intro-head p{

  font-size:15px;

  line-height:1.9;

}

.service-intro-image{

  margin:40px auto;

}

.service-intro-image img{

  border-radius:18px;

}

.service-intro-nav{

  margin-top:45px;

}

.service-intro-nav h3{

  font-size:22px;

}

.intro-nav-text{

  font-size:14px;

  margin-bottom:28px;

}

.intro-nav-grid{

  grid-template-columns:1fr;

  gap:0;

}

.intro-nav-grid a{

  font-size:15px;

  padding:14px 0 14px 20px;

}

.intro-nav-grid a::before{

  top:22px;

}

}
/*=====================================
小カテゴリ共通、01
======================================*/



.survey-heading{

  text-align:center;

  margin-bottom:50px;

}

.survey-heading span{

  display:inline-flex;
  justify-content:center;
  align-items:center;

  width:60px;
  height:60px;

  border-radius:50%;

  background:#000;

  color:#fff;

  font-size:22px;
  font-weight:700;

  margin-bottom:20px;

}

.survey-heading h4{

  font-size:38px;
  color:#222;

  line-height:1.5;

  margin-bottom:0;

}
.survey-lead strong{

  color:#8b1e3f;

  font-weight:700;

  border-bottom:3px solid rgba(139,30,63,.2);

  padding-bottom:2px;

}

.survey-lead{

  font-size:34px;
  font-weight:700;
  line-height:1.6;
  text-align: center;
  color:#222;

  margin-bottom:25px;

}

.survey-lead strong{

  color:#8b1e3f;
  font-weight:700;

}

.survey-text{

  font-size:17px;
  line-height:2;

  color:#555;

  margin-bottom:50px;
  text-align: center;
}


/*=====================================
３つの特徴カード
======================================*/

.survey-feature-grid{

  display:grid;

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

  gap:30px;

}

.survey-feature{

  background:#fafafa;

  border:1px solid #e8e8e8;

  border-radius:22px;

  padding:35px;

  transition:.3s;

}

.survey-feature:hover{

  transform:translateY(-8px);

  box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.survey-feature h5{

  font-size:28px;

  color:#8b1e3f;

  margin-bottom:20px;

  line-height:1.4;

}

.survey-feature p{

  font-size:16px;

  line-height:2;

  color:#555;

}


/*=====================================
SP
======================================*/

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

.survey-section{

  margin:70px 0;

}

.survey-heading{

  margin-bottom:35px;

}

.survey-heading span{

  width:48px;
  height:48px;

  font-size:18px;

  margin-bottom:15px;

}

.survey-heading h4{

  font-size:28px;

  line-height:1.5;

}

.survey-lead{

  font-size:24px;

  line-height:1.7;

  margin-bottom:20px;

}

.survey-text{

  font-size:15px;

  line-height:2;

  margin-bottom:35px;

}

.survey-feature-grid{

  grid-template-columns:1fr;

  gap:20px;

}

.survey-feature{

  padding:25px;

}

.survey-feature h5{

  font-size:22px;

  margin-bottom:15px;

}

.survey-feature p{

  font-size:15px;

  line-height:1.9;

}

}
/*=====================================
小カテゴリ02
======================================*/


.sub-title{

  text-align:center;

  margin-bottom:50px;

}

.sub-title span{

  display:inline-flex;
  justify-content:center;
  align-items:center;

  width:60px;
  height:60px;

  border-radius:50%;

  background:#000;

  color:#fff;

  font-size:22px;
  font-weight:700;

  margin-bottom:20px;

}

.sub-title h3{

  font-size:38px;
  color:#222;

  margin-bottom:12px;

}

.sub-title p{

  font-size:22px;
  color:#666;

  font-weight:500;

}



/*----------------------------
タイトル
----------------------------*/

.sub-title{

  text-align:center;

  margin-bottom:50px;

}




.sub-copy{

  font-size:22px;

  color:#666;

  font-weight:500;

}

/*----------------------------
リード
----------------------------*/

.era-lead{

  max-width:900px;

  margin:0 auto 70px;

  text-align:center;

}

.era-lead p{

  font-size:18px;

  line-height:2;

  color:#555;

}

/*----------------------------
縦並び
----------------------------*/

.era-flow{

  display:flex;

  flex-direction:column;

  gap:35px;

  max-width:900px;

  margin:0 auto;

}

.era-arrow{

  text-align:center;

  font-size:36px;

  color:#8b1e3f;

}

/*----------------------------
カード
----------------------------*/

.era-card{

  background:#fff;

  border:1px solid #e8e8e8;

  border-radius:24px;

  padding:40px;

  box-shadow:0 8px 25px rgba(0,0,0,.05);

}

/*----------------------------
カードタイトル
----------------------------*/

.era-head{

  margin-bottom:20px;

}

.era-head span{

  display:inline-block;

  padding:8px 18px;

  background:#8b1e3f;

  color:#fff;

  border-radius:30px;

  font-size:15px;

  font-weight:700;

  letter-spacing:.05em;

}

/*----------------------------
小見出し
----------------------------*/

.era-point{

  display:inline-flex;

  align-items:center;

  gap:10px;

  margin:0 0 20px;

  padding:10px 18px;

  background:#faf7f8;

  border-radius:999px;

  color:#8b1e3f;

  font-size:17px;

  font-weight:700;

}

.era-point::before{

  content:"";

  width:10px;

  height:10px;

  border-radius:50%;

  background:#8b1e3f;

}

.era-point.danger{

  background:#fbf5f5;

  color:#b54141;

}

.era-point.danger::before{

  background:#b54141;

}

/*----------------------------
説明
----------------------------*/

.era-desc{

  font-size:16px;

  line-height:2;

  color:#555;

  margin-bottom:30px;

}

/*----------------------------
キーワード
----------------------------*/

.era-items{

  display:grid;

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

  gap:15px;

}

.era-items div{

  background:#fafafa;

  border:1px solid #ececec;

  border-radius:12px;

  padding:15px;

  text-align:center;

  font-size:15px;

  font-weight:600;

  color:#444;

}

/*----------------------------
結果
----------------------------*/

.era-result{

  margin-top:30px;

  padding:22px;

  background:#fafafa;

  border-radius:16px;

  text-align:center;

  font-size:18px;

  font-weight:700;

  color:#222;

  box-shadow:0 6px 18px rgba(0,0,0,.04);

}

.era-result.danger{

  background:#fcf6f6;

  color:#b54141;

}

.era-result.success{

  background:#f8f5f6;

  color:#8b1e3f;

}

/*----------------------------
最後
----------------------------*/

.era-summary{

  max-width:900px;

  margin:70px auto 0;

  padding:45px;

  background:#fff;

  border:1px solid #e8e8e8;

  border-radius:24px;

  box-shadow:0 10px 30px rgba(0,0,0,.05);

  text-align:center;

}

.era-summary p{

  font-size:18px;

  line-height:2;

  color:#444;

  margin:0;

}

.era-summary p + p{

  margin-top:20px;

  font-weight:600;

  color:#222;

}

/*=====================================
SP
======================================*/

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

.survey-subsection{

  margin:80px 0;

}

.sub-title span{

  width:50px;
  height:50px;

  font-size:18px;

}

.sub-title h3{

  font-size:28px;

}

.sub-copy{

  font-size:18px;

}

.era-lead{

  margin-bottom:45px;

}

.era-lead p{

  font-size:15px;

}

.era-card{

  padding:25px;

}

.era-head span{

  font-size:13px;

}

.era-point{

  font-size:15px;

}

.era-desc{

  font-size:15px;

}

.era-items{

  grid-template-columns:1fr;

}

.era-items div{

  font-size:14px;

}

.era-result{

  font-size:16px;

}

.era-summary{

  padding:30px 22px;

}

.era-summary p{

  font-size:15px;

}

}
/*=====================================
  小カテゴリ03
======================================*/

.value-list{

  max-width:900px;

  margin:70px auto 0;

  position:relative;

}

/* 縦ライン */

.value-list::before{

  content:"";

  position:absolute;

  left:40px;

  top:25px;

  bottom:25px;

  width:2px;

  background:#e2e2e2;

}

/*----------------------------
1項目
----------------------------*/

.value-item{

  position:relative;

  display:flex;

  gap:35px;

  align-items:flex-start;

  margin-bottom:60px;

}

.value-item:last-child{

  margin-bottom:0;

}

/*----------------------------
アイコン
----------------------------*/

.value-icon{

  flex-shrink:0;

  width:80px;

  height:80px;

  border-radius:50%;

  background:#fff;

  border:2px solid #8b1e3f;

  color:#8b1e3f;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:34px;

  position:relative;

  z-index:2;

}

/*----------------------------
内容
----------------------------*/

.value-content{

  flex:1;

  padding-top:5px;

}

.value-content h4{

  font-size:28px;

  color:#222;

  margin-bottom:12px;

  font-weight:700;

}

.value-catch{

  display:inline-block;

  margin-bottom:18px;

  padding:8px 16px;

  background:#faf7f8;

  border-radius:999px;

  color:#8b1e3f;

  font-weight:700;

  font-size:15px;

}

.value-content p:last-child{

  font-size:17px;

  line-height:2;

  color:#555;

}

/*=====================================
SP
======================================*/

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

.value-list{

  margin-top:50px;

}

.value-list::before{

  left:25px;

}

.value-item{

  gap:20px;

  margin-bottom:45px;

}

.value-icon{

  width:50px;

  height:50px;

  font-size:22px;

}

.value-content h4{

  font-size:22px;

  margin-bottom:10px;

}

.value-catch{

  font-size:13px;

  padding:6px 12px;

  margin-bottom:12px;

}

.value-content p:last-child{

  font-size:15px;

  line-height:1.9;

}

}
/*=====================================
  小カテゴリ04
======================================*/

.survey-overview{

  max-width:900px;

  margin:0 auto 60px;

  text-align:center;

  font-size:18px;

  line-height:2;

  color:#555;

}

/*==========================
グループ
==========================*/

.survey-group{

  border-radius:24px;

  padding:45px;

  margin-bottom:50px;

}

.main-group{

  background:#faf7f7;

}

.detail-group{

  background:#f8f8f8;

}

/*==========================
タイトル
==========================*/

.group-title{

  text-align:center;

  margin-bottom:40px;

}

.group-title h4{

  font-size:32px;

  color:#222;

  margin-bottom:10px;

}

.group-title p{

  color:#666;

  font-size:18px;

}

/*==========================
小見出し
==========================*/

.mini-title{

  display:inline-block;

  padding:10px 22px;

  background:#8b1e3f;

  color:#fff;

  border-radius:999px;

  font-size:16px;

  font-weight:700;

  margin-bottom:25px;

}

/*==========================
グリッド
==========================*/

.scale-grid{

  display:grid;

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

  gap:22px;

  margin-bottom:45px;

}

.scale-grid.two{

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

  max-width:520px;

}

/*==========================
項目
==========================*/

.scale-item{

  background:#fff;

  border-radius:18px;

  padding:28px 18px;

  text-align:center;

  transition:.3s;

  box-shadow:0 8px 18px rgba(0,0,0,.05);

}

.scale-item:hover{

  transform:translateY(-6px);

  box-shadow:0 15px 28px rgba(0,0,0,.08);

}

.scale-icon{

  width:70px;

  height:70px;

  margin:0 auto 18px;

  border-radius:50%;

  background:#faf3f5;

  color:#8b1e3f;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:32px;

}

.scale-item h5{

  font-size:18px;

  color:#222;

  margin-bottom:12px;

  line-height:1.4;

}

.scale-item p{

  font-size:14px;

  color:#666;

  line-height:1.8;

}
/*==========================
基準値
==========================*/

.scale-score{

  margin-top:18px;
  padding-top:14px;

  border-top:1px solid #ececec;

  font-size:13px;

  color:#777;

  letter-spacing:.03em;

}

.scale-score strong{

  color:#8b1e3f;

  font-size:15px;

  font-weight:700;

}

/*==========================
矢印
==========================*/

.survey-arrow{

  text-align:center;

  color:#8b1e3f;

  font-size:18px;

  font-weight:700;

  line-height:2;

  margin:25px 0 55px;

}

/*==========================
まとめ
==========================*/

.survey-summary{

  max-width:900px;

  margin:0 auto;

  padding:35px 40px;

  background:#fff;

  border-radius:18px;

  text-align:center;

  box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.survey-summary p{

  font-size:17px;

  line-height:2;

  color:#444;

}
.scale-item{

  position:relative;

}

.scale-number{

  position:absolute;

  top:14px;
  left:14px;

  width:32px;
  height:32px;

  border-radius:50%;

  background:#8b1e3f;

  color:#fff;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:12px;
  font-weight:700;

  letter-spacing:.05em;

}



/*=====================================
SP
======================================*/

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

.survey-overview{

  font-size:15px;

  margin-bottom:45px;

}

.survey-group{

  padding:30px 20px;

  border-radius:18px;

}

.group-title{

  margin-bottom:30px;

}

.group-title h4{

  font-size:24px;

}

.group-title p{

  font-size:15px;

}

.mini-title{

  display:block;

  text-align:center;

  font-size:14px;

  margin-bottom:20px;

}

.scale-grid{

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

  gap:15px;

  margin-bottom:30px;

}

.scale-grid.two{

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

  max-width:100%;

}

.scale-item{

  padding:22px 15px;

}

.scale-icon{

  width:54px;

  height:54px;

  font-size:24px;

  margin-bottom:14px;

}

.scale-item h5{

  font-size:16px;

}

.scale-item p{

  font-size:13px;

  line-height:1.6;

}

.survey-arrow{

  font-size:16px;

  margin:15px 0 40px;

}

.survey-summary{

  padding:25px 20px;

}

.survey-summary p{

  font-size:15px;

  line-height:1.9;

}


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

  .scale-number{
  
    width:26px;
    height:26px;
  
    font-size:11px;
  
    top:10px;
    left:10px;
  
  }
  
  }
  @media screen and (max-width:768px){

    .scale-score{
    
        margin-top:14px;
        padding-top:12px;
    
        font-size:12px;
    
    }
    
    .scale-score strong{
    
        font-size:14px;
    
    }
    
    }
 /*=====================================
 小カテゴリ05
======================================*/


.axis-lead{

  max-width:900px;
  margin:0 auto 60px;
  text-align:center;

}


.axis-lead p{

  font-size:18px;
  line-height:2;
  color:#555;

}




/*=====================================
 横レイアウト
======================================*/


.axis-layout{

  display:flex;

  align-items:stretch;

  justify-content:center;

  gap:30px;

}





/*=====================================
 カード共通
======================================*/


.axis-section{

  width:360px;

  min-height:600px;

  background:#fff;

  border-radius:24px;

  padding:35px;

  box-shadow:0 10px 25px rgba(0,0,0,.05);

  display:flex;

  flex-direction:column;

}



.axis-section.minus{

  border-top:5px solid #d95b4b;

}



.axis-section.plus{

  border-top:5px solid #3aa97b;

}





/*=====================================
 タイトル
======================================*/

.axis-title{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:12px;

  margin-bottom:25px;

  text-align:center;

}


.axis-icon{

  width:65px;

  height:65px;

  border-radius:50%;

  background:#faf7f7;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:32px;

}


.axis-title h4{

  font-size:24px;

  color:#222;

  line-height:1.5;

}






/*=====================================
 枠内矢印
======================================*/


.axis-inner-arrow{

  text-align:center;

  font-size:42px;

  font-weight:900;

  line-height:1.2;

  margin-bottom:35px;

}

.axis-inner-arrow span{

  display:block;

  font-size:18px;

  font-weight:bold;

  margin-top:8px;

}


.axis-inner-arrow.bad{

  background:#fff2ef;

  border-radius:15px;

  padding:15px;

}


.axis-inner-arrow.good{

  background:#eefaf4;

  border-radius:15px;

  padding:15px;

}






/*=====================================
 説明
======================================*/


.axis-copy{

  color:#777;

  font-size:14px;

  line-height:1.8;

  margin-bottom:25px;

}







/*=====================================
 項目
======================================*/


.axis-list{

  display:flex;

  flex-direction:column;

  gap:15px;

}



.axis-item{

  display:flex;

  align-items:center;

  gap:15px;

  padding:18px;

  background:#fafafa;

  border-radius:15px;

}



.axis-num{

  width:48px;

  height:48px;

  border-radius:50%;

  background:#8b1e3f;

  color:#fff;

  display:flex;

  justify-content:center;

  align-items:center;

  font-weight:bold;

  flex-shrink:0;

}



.axis-item h5{

  font-size:18px;

  margin-bottom:5px;

  color:#222;

}



.axis-item p{

  color:#666;

  font-size:13px;

  line-height:1.7;

}






/*=====================================
 中心軸
======================================*/


.axis-center{

  width:400px;

  min-height:600px;

  background:linear-gradient(180deg,#faf8ff,#fff);

  border-radius:24px;

  padding:40px 30px;

  text-align:center;

  box-shadow:0 10px 25px rgba(0,0,0,.05);

  display:flex;

  flex-direction:column;

  justify-content:center;

}



.axis-center h4{

  font-size:34px;

  color:#6d55c8;

  margin-bottom:10px;

}



.axis-center>p{

  color:#666;

  margin-bottom:30px;

}







/*=====================================
 中心軸 内部
======================================*/


.center-box{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:12px;

}



.center-box div{

  width:260px;

  padding:20px;

  background:#fff;

  border:2px solid #d9d1ff;

  border-radius:14px;

  font-size:18px;

  font-weight:bold;

  color:#444;

}



.center-box span{

  font-size:28px;

  color:#8b1e3f;

  font-weight:bold;

}







/*=====================================
 メッセージ
======================================*/


.axis-message{

  margin-top:25px;

  padding:20px;

  background:#f7faf8;

  border-radius:14px;

  color:#555;

  line-height:1.8;

  font-size:14px;

}





/*=====================================
 まとめ
======================================*/


.axis-summary{

  max-width:900px;

  margin:50px auto 0;

  padding:30px;

  background:#fafafa;

  border-radius:18px;

  text-align:center;

}



.axis-summary p{

  color:#555;

  line-height:2;

}



/*=====================================
 小カテゴリ05 SP
======================================*/

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


  /*=====================================
   全体レイアウト
  ======================================*/
  
  .axis-layout{
  
    flex-direction:column;
  
    gap:90px;
  
  }
  
  
  
  /*=====================================
   左右カード
  ======================================*/
  
  .axis-section{
  
    width:100%;
  
    min-height:auto;
  
    padding:25px 20px;
  
    position:relative;
  
  }
  
  
  /*=====================================
 SP 矢印調整
=====================================*/

.axis-inner-arrow{

  position:absolute;

  left:50%;

  transform:translateX(-50%);

  width:260px;

  padding:12px 10px;

  margin:0;

  background:none !important;

  border-radius:0;

  text-align:center;

  font-size:0;

  z-index:5;

}


/* HTML内の矢印を非表示 */

.axis-inner-arrow{

  color:transparent;

}


/* 文字 */

.axis-inner-arrow span{

  display:block;

  font-size:15px;

  font-weight:bold;

}


/*=====================================
 悪化
=====================================*/


.axis-section.minus .axis-inner-arrow{

  bottom:-95px;

}


.axis-section.minus .axis-inner-arrow span{

  color:#d95b4b;

}


.axis-section.minus .axis-inner-arrow::before{

  content:"↓";

  display:block;

  font-size:32px;

  line-height:1;

  color:#d95b4b;

  margin-bottom:5px;

}



/*=====================================
 保護
=====================================*/


.axis-section.plus .axis-inner-arrow{

  top:-95px;

}


.axis-section.plus .axis-inner-arrow span{

  color:#3aa97b;

}


.axis-section.plus .axis-inner-arrow::before{

  content:"↑";

  display:block;

  font-size:32px;

  line-height:1;

  color:#3aa97b;

  margin-bottom:5px;

}
  
  
  
  /*=====================================
   タイトル
  ======================================*/
  
  .axis-title{
  
    flex-direction:column;
  
    text-align:center;
  
    gap:10px;
  
  }
  
  
  
  .axis-title h4{
  
    font-size:22px;
  
  }
  
  
  
  /*=====================================
   説明
  ======================================*/
  
  .axis-copy{
  
    font-size:14px;
  
    margin-bottom:20px;
  
  }
  
  
  
  /*=====================================
   項目
  ======================================*/
  
  .axis-list{
  
    gap:12px;
  
  }
  
  
  
  .axis-item{
  
    padding:15px;
  
    gap:12px;
  
  }
  
  
  
  .axis-num{
  
    width:42px;
  
    height:42px;
  
    font-size:14px;
  
  }
  
  
  
  .axis-item h5{
  
    font-size:17px;
  
  }
  
  
  
  .axis-item p{
  
    font-size:13px;
  
  }
  
  
  
  /*=====================================
   中心軸
  ======================================*/
  
  
  .axis-center{
  
    width:100%;
  
    min-height:auto;
  
    padding:30px 20px;
  
  }
  
  
  
  .axis-center h4{
  
    font-size:30px;
  
  }
  
  
  
  .axis-center>p{
  
    margin-bottom:25px;
  
  }
  
  
  
  /*=====================================
   中心軸内部
  ======================================*/
  
  .center-box{
  
    gap:10px;
  
  }
  
  
  
  .center-box div{
  
    width:100%;
  
    padding:18px;
  
    font-size:17px;
  
  }
  
  
  
  .center-box span{
  
    font-size:26px;
  
  }
  
  
  
  /*=====================================
   メッセージ
  ======================================*/
  
  .axis-message{
  
    margin-top:20px;
  
    padding:18px;
  
    font-size:14px;
  
  }
  
  
  
  /*=====================================
   まとめ
  ======================================*/
  
  .axis-summary{
  
    margin-top:35px;
  
    padding:25px 20px;
  
  }
  
  
  
  .axis-summary p{
  
    font-size:14px;
  
    line-height:1.8;
  
  }
  
  
  }
/*=====================================
小カテゴリ06
======================================*/


.stress-lead{

  max-width:900px;

  margin:0 auto 45px;

  text-align:center;

}


.stress-lead p{

  font-size:18px;

  line-height:2;

  color:#555;

}





/*=====================================
ステージ共通
======================================*/


.stress-stage{

  background:#fff;

  border:1px solid #ececec;

  border-radius:22px;

  padding:25px;

  margin-bottom:18px;

  box-shadow:0 8px 20px rgba(0,0,0,.05);

}



.stress-stage h4{

  font-size:24px;

  color:#222;

  margin-bottom:20px;

}






/*=====================================
色分け
======================================*/


.stage-base{

  border-top:5px solid #b9aa89;

}


.stage-human{

  border-top:5px solid #3aa27b;

}


.stage-core{

  border-top:5px solid #6a63d7;

}





/*=====================================
前半（土台・対人）コンパクト
======================================*/


.stage-base,
.stage-human{

  padding:20px;

}



.stage-base h4,
.stage-human h4{

  font-size:20px;

  margin-bottom:15px;

}



.stage-base .stress-box,
.stage-human .stress-box{

  padding:15px;

}



.stage-base .stress-num,
.stage-human .stress-num{

  width:36px;

  height:36px;

  font-size:14px;

  margin-bottom:10px;

}



.stage-base .stress-box h5,
.stage-human .stress-box h5{

  font-size:17px;

}



.stage-base .stress-box p,
.stage-human .stress-box p{

  font-size:13px;

}







/*=====================================
グリッド
======================================*/


.stress-grid{

  display:grid;

  gap:15px;

}


.stress-grid.two{

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

}


.stress-grid.three{

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

}






/*=====================================
カード
======================================*/


.stress-box{

  background:#fafafa;

  border:1px solid #ececec;

  border-radius:18px;

  padding:18px;

  text-align:center;

  transition:.3s;

}



.stress-box:hover{

  transform:translateY(-4px);

  box-shadow:0 10px 20px rgba(0,0,0,.08);

}



.stress-num{

  width:40px;

  height:40px;

  margin:0 auto 12px;

  border-radius:50%;

  background:#8b1e3f;

  color:#fff;

  display:flex;

  justify-content:center;

  align-items:center;

  font-weight:700;

  font-size:16px;

}



.stress-box h5{

  font-size:20px;

  color:#222;

  margin-bottom:8px;

}



.stress-box p{

  color:#666;

  font-size:14px;

  line-height:1.7;

}







/*=====================================
矢印
======================================*/


.stress-arrow{

  text-align:center;

  color:#8b1e3f;

  font-size:26px;

  font-weight:bold;

  margin:5px 0 18px;

}







/*=====================================
中心軸
======================================*/


.stage-core{

  padding:20px;

}



.core-flow{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:15px;

}



.core-item{

  flex:1;

  background:#f8f7ff;

  border:2px solid #d9d3ff;

  border-radius:18px;

  padding:15px;

  text-align:center;

}



.core-item h5{

  font-size:20px;

  color:#433d98;

  margin:8px 0;

}



.core-item p{

  color:#666;

  font-size:13px;

}



.core-next{

  font-size:28px;

  color:#6a63d7;

  font-weight:bold;

}







/*=====================================
3つのストレスサイン（主役）
======================================*/


.stage-sign{

  margin-top:50px;

  padding:55px 45px;

  border-top:8px solid #8b1e3f;

  box-shadow:0 18px 40px rgba(139,30,63,.15);

}



.stage-sign h4{

  text-align:center;

  font-size:36px;

  color:#8b1e3f;

  margin-bottom:40px;

}






.sign-card{

  background:#fff8f8;

  border:1px solid #efd9d9;

  border-radius:22px;

  padding:32px 25px;

  min-height:500px;

  transition:.3s;

  display:flex;

  flex-direction:column;

}


.sign-card:hover{

  transform:translateY(-5px);

  box-shadow:0 18px 30px rgba(139,30,63,.12);

}



.sign-card h5{

  font-size:34px;

  color:#8b1e3f;

  margin-bottom:15px;

  text-align:center;

}



.sign-card span{

  display:block;

  font-size:18px;

  font-weight:700;

  color:#444;

  margin-bottom:18px;

  text-align:center;

}



.sign-card p{

  font-size:15px;

  color:#666;

  line-height:2;

}


.sign-image{

  width:260px;

  height:180px;

  margin:40px auto 0;

  overflow:hidden;

  border-radius:16px;

}


.sign-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}



/*=====================================
まとめ
======================================*/


.stress-summary{

  margin-top:50px;

  background:#fff7f8;

  border-radius:22px;

  padding:45px;

  text-align:center;

  border:1px solid #f0d5da;

}



.stress-summary p{

  font-size:18px;

  color:#555;

  line-height:2;

  margin-bottom:15px;

}



.stress-summary strong{

  color:#8b1e3f;

  font-size:22px;

}








/*=====================================
レスポンシブ
======================================*/


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


.stress-lead{

  margin-bottom:35px;

}


.stress-lead p{

  font-size:15px;

}



.stress-stage{

  padding:22px 18px;

}



.stress-stage h4{

  text-align:center;

  font-size:21px;

}



.stress-grid.two,
.stress-grid.three{

  grid-template-columns:1fr;

}



.stage-sign{

  padding:30px 20px;

}



.stage-sign h4{

  font-size:26px;

  margin-bottom:25px;

}



.core-flow{

  flex-direction:column;

}



.core-item{

  width:100%;

}



.core-next{

  transform:rotate(90deg);

}



.sign-card{

  min-height:auto;

  padding:28px 20px;

}



.sign-card h5{

  font-size:26px;

}



.sign-card span{

  font-size:15px;

}



.sign-card p{

  font-size:14px;

}



.stress-summary{

  padding:28px 20px;

}



.stress-summary p{

  font-size:15px;

}


}
/*=====================================
小カテゴリ07
======================================*/

.example-lead{

  max-width:900px;
  margin:0 auto 55px;
  text-align:center;

}

.example-lead p{

  font-size:18px;
  line-height:2;
  color:#555;

}

.example-lead strong{

  color:#8b1e3f;

}

/*==========================
左右レイアウト
==========================*/

.example-tests{

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;

}

/*==========================
シート
==========================*/

.test-sheet{

  background:#fff;

  border:1px solid #e8e8e8;

  border-radius:20px;

  overflow:hidden;

  box-shadow:0 10px 25px rgba(0,0,0,.06);

}

/*==========================
タイトル
==========================*/

.sheet-head{

  background:#8b1e3f;

  color:#fff;

  text-align:center;

  padding:18px;

}

.sheet-head h4{

  font-size:28px;
  margin:0;

}

/*==========================
回答方法
==========================*/

.sheet-rule{

  background:#fafafa;

  padding:18px 25px;

  border-bottom:1px solid #e5e5e5;

}

.sheet-rule p{

  margin:6px 0;

  font-size:15px;

  color:#444;

  font-weight:600;

}

/*==========================
表
==========================*/

.test-sheet table{

  width:100%;

  border-collapse:collapse;

}

.test-sheet thead{

  background:#f3f3f3;

}

.test-sheet th{

  padding:14px;

  font-size:16px;

  color:#333;

  border-bottom:1px solid #ddd;

}

.test-sheet th.answer{

  width:90px;

  text-align:center;

}

.test-sheet td{

  padding:14px 16px;

  border-bottom:1px solid #ededed;

  font-size:15px;

  line-height:1.7;

}

.test-sheet tbody tr:nth-child(even){

  background:#fcfcfc;

}

.test-sheet tbody tr:hover{

  background:#faf5f7;

}

.test-sheet td:last-child{

  width:90px;

  background:#f8fff8;

  border-left:1px solid #e6e6e6;

}

/*==========================
レスポンシブ
==========================*/

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

.example-lead{

  margin-bottom:35px;

}

.example-lead p{

  font-size:15px;

}

.example-tests{

  grid-template-columns:1fr;

  gap:25px;

}

.sheet-head{

  padding:15px;

}

.sheet-head h4{

  font-size:24px;

}

.sheet-rule{

  padding:15px 18px;

}

.sheet-rule p{

  font-size:14px;

}

.test-sheet th{

  font-size:14px;

  padding:10px;

}

.test-sheet td{

  font-size:13px;

  padding:10px;

}

.test-sheet th.answer,

.test-sheet td:last-child{

  width:60px;

}

}
/*=====================================
小カテゴリ08
======================================*/

.support-lead{

  max-width:900px;
  margin:0 auto 45px;
  text-align:center;

}

.support-lead p{

  font-size:18px;
  line-height:2;
  color:#555;

}

/*==========================
表
==========================*/

.support-table{

  margin-bottom:70px;

}

.support-table table{

  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.support-table thead{

  background:#8b1e3f;

}

.support-table th{

  color:#fff;
  padding:18px;
  font-size:18px;
  font-weight:700;

}

.support-table tbody tr{

  background:#fff;

}

.support-table tbody tr:nth-child(even){

  background:#fafafa;

}

.support-table td{

  padding:24px 20px;
  border-bottom:1px solid #ececec;
  font-size:15px;
  line-height:1.9;
  color:#555;
  vertical-align:top;

}

.support-table td:first-child{

  width:170px;
  font-weight:700;
  color:#8b1e3f;
  text-align:center;

}
/*=====================================
診断結果を具体的な支援へ変換
======================================*/

.support-action{

  margin-top:80px;

}

.support-action h4{

  text-align:center;
  font-size:32px;
  color:#222;
  margin-bottom:15px;

}

.support-copy{

  text-align:center;
  color:#666;
  font-size:17px;
  line-height:2;
  margin-bottom:55px;

}

/*==========================
4項目
==========================*/

.support-grid{

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:45px 40px;

}

/*==========================
カード
==========================*/

.support-card{

  text-align:center;

  padding:15px 10px;

}

/* アイコン */

.support-icon{

  width:90px;
  height:90px;

  margin:0 auto 20px;

  border-radius:50%;

  background:#faf5f7;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:42px;

}

/*==========================
診断結果
==========================*/

.support-result{

  margin-bottom:18px;

}

.support-result strong{

  font-size:22px;
  color:#222;
  line-height:1.6;

}

/*==========================
矢印
==========================*/

.support-arrow{

  font-size:34px;
  color:#8b1e3f;
  font-weight:bold;

  margin:10px 0 18px;

}

/*==========================
支援内容
==========================*/

.support-solution{

  max-width:360px;
  margin:auto;

}

.support-solution h5{

  color:#8b1e3f;

  font-size:22px;

  margin-bottom:15px;

}

.support-solution p{

  color:#666;

  line-height:1.9;

  font-size:15px;

}

/*==========================
ホバー
==========================*/

.support-card:hover .support-icon{

  transform:translateY(-5px);

  transition:.3s;

  background:#8b1e3f;
  color:#fff;

}

.support-card:hover .support-arrow{

  transform:translateY(3px);

  transition:.3s;

}

/*==========================
レスポンシブ
==========================*/

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

.support-lead{

  margin-bottom:35px;

}

.support-lead p{

  font-size:15px;

}

.support-table{

  overflow-x:auto;

}

.support-table table{

  min-width:700px;

}

.support-table th{

  font-size:15px;
  padding:14px;

}

.support-table td{

  font-size:14px;
  padding:16px 14px;

}

.support-action h4{

  font-size:24px;
  margin-bottom:35px;

}

.action-item{

  padding-left:28px;

}

.action-item::before{

  left:8px;

}

.action-result{

  font-size:13px;

  padding:7px 14px;

}

.action-arrow{

  margin-left:12px;

  font-size:20px;

}

.action-support{

  margin-left:12px;

  font-size:15px;

  line-height:1.8;

}

}

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

  .support-copy{
  
    font-size:15px;
    margin-bottom:40px;
  
  }
  
  .support-grid{
  
    grid-template-columns:1fr;
  
    gap:45px;
  
  }
  
  .support-icon{
  
    width:75px;
    height:75px;
  
    font-size:34px;
  
  }
  
  .support-result strong{
  
    font-size:20px;
  
  }
  
  .support-arrow{
  
    font-size:28px;
  
    margin:8px 0 15px;
  
  }
  
  .support-solution h5{
  
    font-size:19px;
  
  }
  
  .support-solution p{
  
    font-size:14px;
  
    line-height:1.8;
  
  }
  
  }
  /*=====================================
小カテゴリ09
======================================*/

.note-lead{

  max-width:900px;
  margin:0 auto 60px;
  text-align:center;

}

.note-lead p{

  font-size:18px;
  line-height:2;
  color:#555;

}

/*==========================
一覧
==========================*/

.note-list{

  display:flex;
  flex-direction:column;
  gap:24px;

}

/*==========================
1項目
==========================*/

.note-item{

  display:grid;
  grid-template-columns:90px 260px 1fr;
  align-items:center;

  padding:28px 35px;

  background:#fff;

  border:1px solid #e8ecef;
  border-radius:18px;

  transition:.3s;

}

.note-item:hover{

  transform:translateY(-3px);

  box-shadow:0 12px 28px rgba(0,0,0,.08);

}

/*==========================
横断的に読む
==========================*/

.note-wide{

  align-items:flex-start;

}

.cross-box{

  margin-top:25px;

  border-top:1px solid #e8ecef;

  padding-top:25px;

}

.cross-ng{

  background:#faf7f5;

  border-radius:12px;

  padding:20px;

  margin-bottom:25px;

}

.cross-ng strong{

  display:block;

  color:#8b1e3f;

  font-size:18px;

  margin-bottom:15px;

}

.cross-ng ul{

  margin:0 0 15px 20px;

}

.cross-ng li{

  margin-bottom:8px;

  line-height:1.8;

}

.cross-ng p{

  color:#666;

  font-size:15px;

}

.cross-flow{

  display:flex;

  flex-direction:column;

  gap:14px;

}

.cross-step{

  display:flex;

  align-items:center;

  gap:15px;

}

.cross-step span{

  width:34px;

  height:34px;

  border-radius:50%;

  background:#0f6d5d;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:700;

  flex-shrink:0;

}

.cross-step p{

  margin:0;

  line-height:1.7;

  color:#444;

}



.cross-step:last-child{

  margin-bottom:0;

}

.cross-step span{

  width:46px;

  height:46px;

  border-radius:50%;

  background:#0f6d5d;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:700;

}

.cross-step p{

  flex:1;

  font-size:18px;

  color:#444;

}

/*==========================
アイコン
==========================*/

.note-icon{

  width:56px;
  height:56px;

  border-radius:50%;

  background:#eef8f3;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:28px;

}

/*==========================
タイトル
==========================*/

.note-title{

  font-size:28px;
  font-weight:700;

  color:#0c5b47;

}

/*==========================
説明
==========================*/

.note-text{

  font-size:18px;

  color:#555;

  line-height:1.8;

}

/*==========================
レスポンシブ
==========================*/

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

.note-lead{

  margin-bottom:35px;

}

.note-lead p{

  font-size:15px;

}

.note-item{

  grid-template-columns:1fr;

  gap:15px;

  text-align:center;

  padding:25px 20px;

}

.note-icon{

  margin:0 auto;

}

.note-title{

  font-size:22px;

}

.note-text{

  font-size:15px;

  line-height:1.8;

}

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

  .note-wide{
  
    align-items:center;
  
  }
  
  .cross-ng{
  
    text-align:left;
  
  }
  
  .cross-step{
  
    align-items:flex-start;
  
  }
  
  }
/*=====================================
小カテゴリ10
======================================*/

.flow-lead{

  max-width:900px;
  margin:0 auto 60px;
  text-align:center;

}

.flow-lead p{

  font-size:18px;
  line-height:2;
  color:#555;

}

/*==========================
タイムライン
==========================*/

.flow-timeline{

  max-width:900px;
  margin:0 auto;
  position:relative;

}
.flow-timeline::before{

  content:"";

  position:absolute;

  left:45px;

  top:20px;

  bottom:20px;

  width:2px;

  background:#dce8e5;

}

.flow-step{

  display:flex;

  align-items:flex-start;

  gap:25px;

}

/*==========================
番号
==========================*/

.flow-number{

  flex-shrink:0;

  width:90px;

  padding-top:8px;

  color:#0f6d5d;

  font-size:15px;

  font-weight:700;

  letter-spacing:2px;

  text-align:center;

  position:relative;

}


.flow-number::after{

  content:"";

  display:block;

  width:12px;

  height:12px;

  margin:12px auto 0;

  border-radius:50%;

  background:#0f6d5d;

}

/*==========================
カード
==========================*/

.flow-content{

  flex:1;

  background:#fff;

  border-radius:18px;

  padding:28px 34px;

  border:1px solid #e7ecef;

  box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.flow-content h4{

  font-size:28px;
  color:#222;

  margin-bottom:12px;

}

.flow-content p{

  font-size:17px;
  line-height:1.9;
  color:#666;

}

/*==========================
矢印
==========================*/

.flow-arrow{

  text-align:center;

  font-size:38px;

  color:#0f6d5d;

  margin:18px 0;

}

/*==========================
最後だけ色変更
==========================*/

.flow-step.final .flow-number{

  color:#8b1e3f;

}


.flow-step.final .flow-number::after{

  background:#8b1e3f;

}

.flow-step.final .flow-content{

  border-color:#efd7df;

  background:#fcf7f9;

}

/*==========================
まとめ
==========================*/

.flow-summary{

  max-width:900px;
  margin:70px auto 0;

  padding:35px;

  border-radius:18px;

  background:#f8fafb;

  border:1px solid #e6ecef;

  text-align:center;

}

.flow-summary p{

  font-size:18px;
  line-height:2;
  color:#444;
  font-weight:500;

}

/*==========================
レスポンシブ
==========================*/

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

.flow-lead{

  margin-bottom:40px;

}

.flow-lead p{

  font-size:15px;

}

.flow-step{

  align-items:flex-start;
  gap:18px;

}

.flow-number{

  width:65px;

  font-size:13px;


  font-size:18px;

}
.flow-number::after{

  width:10px;

  height:10px;

}

.flow-content{

  padding:20px;

}

.flow-content h4{

  font-size:20px;

  margin-bottom:8px;

}

.flow-content p{

  font-size:14px;

  line-height:1.8;

}

.flow-arrow{

  font-size:26px;

  margin:14px 0;

}

.flow-summary{

  padding:25px;
  margin-top:45px;

}

.flow-summary p{

  font-size:15px;

  line-height:1.8;

}

}



/*=====================================
SERVICEカード
======================================*/

.service-card{

  display:flex;

  align-items:center;

  gap:70px;

  padding:50px;

  margin-bottom:60px;

  background:#faf7f7;

  border-radius:24px;

}

.service-card.reverse{

  flex-direction:row-reverse;

}

.service-image{

  width:40%;

}

.service-image img{

  width:100%;

  display:block;

}

.service-text{

  width:60%;

}

.service-text span{

  color:#8b1e3f;

  font-size:14px;

  font-weight:700;

  letter-spacing:2px;

}

.service-text h3{

  font-size:30px;

  margin:18px 0;

  line-height:1.5;

}

.service-text p{

  font-size:16px;

  line-height:2;

  color:#555;

}

.service-text small{

  display:block;

  margin-top:15px;

  color:#777;

}


/*=====================================
SP
======================================*/

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

.survey-service{

  margin-bottom:70px;

}

.survey-service-head{

  padding:30px 25px;

}

.survey-service-head h3{

  font-size:28px;

}

.survey-service-head p{

  font-size:15px;

}

.survey-service-head p br{

  display:none;

}

.survey-title{

  flex-direction:column;

  text-align:center;

  gap:15px;

}

.survey-title span{

  width:52px;

  height:52px;

  font-size:20px;

}

.survey-title h4{

  font-size:24px;

}

.survey-body{

  padding:30px 22px;

}

.survey-body h5{

  font-size:22px;

  text-align:center;

}

.survey-body h5 br{

  display:none;

}

.survey-body p{

  font-size:15px;

}

.survey-body p br{

  display:none;

}

.support-head{

  padding:30px 25px;

}

.support-head h3{

  font-size:24px;

}

.support-head p{

  font-size:15px;

}

.support-head br{

  display:none;

}

.service-card,
.service-card.reverse{

 flex-direction: column-reverse;

  gap:30px;

  padding:35px 25px;

}

.service-image,

.service-text{

  width:100%;

}

.service-image img{

  max-width:360px;

  margin:0 auto;

}

.service-text{

  text-align:center;

}

.service-text h3{

  font-size:24px;

}

.service-text h3 br,

.service-text p br{

  display:none;

}

}

/* MERIT */

.merit-list{

  display:flex;
  gap:30px;
  
  }
  
  
  .merit-box{
  
  flex:1;
  
  background:#faf7f7;
  
  border-radius:20px;
  
  padding:40px 30px;
  
  }
  
  
  
  .merit-number{
  
  font-size:40px;
  
  font-weight:bold;
  
  color:#8b1e3f;
  
  letter-spacing:2px;
  
  }
  
  
  
  .merit-text h3{
  
  font-size:24px;
  
  margin:20px 0;
  
  }
  
  
  
  .merit-text p{
  
  font-weight:bold;
  
  line-height:1.8;
  
  margin-bottom:20px;
  
  }
  
  
  
  .merit-text span{
  
  font-size:14px;
  
  line-height:1.8;
  
  color:#555;
  
  }

  /*=====================================
  MERIT SP
======================================*/
@media screen and (max-width:768px){

  .service-merit{
      padding:80px 0;
  }
  
  .merit-list{
      display:flex;
      flex-direction:column;
      gap:25px;
  }
  
  .merit-box{
      flex-direction:column;
      text-align:center;
      padding:30px 25px;
  }
  
  .merit-number{
      margin:0 auto 20px;
  }
  
  .merit-text h3{
      font-size:24px;
  }
  
  .merit-text p,
  .merit-text span{
      font-size:15px;
      line-height:1.9;
  }
  
  }
  /* RESULT */


.service-result{margin-bottom: 120px;}
.result-list{

  display:grid;
  
  grid-template-columns:repeat(2,1fr);
  
  gap:30px;
  
  }
  
  
  
  .result-box{
  
  background:#fff;
  
  border:1px solid #eee;
  
  border-radius:20px;
  
  padding:40px;
  
  }
  
  
  
  .result-number{
  
  font-size:13px;
  
  letter-spacing:2px;
  
  color:#8b1e3f;
  
  font-weight:bold;
  
  }
  
  
  
  .result-box h3{
  
  font-size:26px;
  
  margin:20px 0 10px;
  
  }
  
  
  
  .result-company{
  
  font-size:14px;
  
  color:#777;
  
  margin-bottom:20px;
  
  }
  
  
  
  .result-box p{
  
  line-height:1.9;
  
  }

  /*=====================================
  RESULT SP
======================================*/
@media screen and (max-width:768px){

  .service-result{
      padding:80px 0;
  }
  
  .result-list{
      display:grid;
      grid-template-columns:1fr;
      gap:25px;
  }
  
  .result-box{
      padding:30px 25px;
  }
  
  .result-number{
      font-size:13px;
  }
  
  .result-box h3{
      font-size:22px;
  }
  
  .result-company{
      font-size:16px;
  }
  
  .result-box p{
      font-size:15px;
      line-height:1.9;
  }
  
  .result-box p br{
      display:none;
  }
  
  }
/*=====================================
 CONTACT
======================================*/

.service-contact{

  position:relative;

  padding:85px 20px;

  text-align:center;

  background-image:
  linear-gradient(
      rgba(40,40,40,.75),
      rgba(40,40,40,.75)
  ),
  url("assets/img/contact.png");

  background-size:cover;

  background-position:center;

  overflow:hidden;

}



.contact-inner{

  position:relative;

  z-index:1;

}



/* CONTACT */

.contact-label{

  display:block;

  color:#d0d0d0;

  font-size:12px;

  letter-spacing:.5em;

  margin-bottom:20px;

}



/* タイトル */

.service-contact h2{

  color:#fff;

  font-size:32px;

  font-weight:600;

  letter-spacing:.08em;

  margin-bottom:20px;

}



/* 説明 */

.service-contact p{

  color:#eee;

  font-size:15px;

  line-height:2;

  margin-bottom:35px;

}



/* ボタン */

.contact-btn{

  display:inline-flex;

  justify-content:center;

  align-items:center;


  width:280px;

  height:60px;


  background:#fff;

  color:#333;


  font-size:16px;

  font-weight:600;


  text-decoration:none;


  transition:.3s;

}



.contact-btn:hover{

  background:#8b1e3f;

  color:#fff;

}



/* スマホ */

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

  .service-contact{

      padding:60px 20px;

  }


  .service-contact h2{

      font-size:24px;

  }


  .contact-btn{

      width:270px;

  }

}
/*フッター*/
footer {
  background-color: #151515;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer p {
  font-size: 13px;
  color: #fff;
}

/*バーガーメニュー*/
.burgermenu {
    display: none;
    position: fixed;
    width: 100vw;
    pointer-events: none;
    top: 0;
    left: 0;
  }
  @media screen and (max-width: 768px) {
    .burgermenu {
      display: block;
    }
  }
  .burgermenu__trigger {
    position: absolute;
    z-index: 120;
    right: 20px;
    top: 15px;
    display: block;
    width: 32px;
    height: 30px;
    pointer-events: auto;
  }
  .burgermenu__trigger:hover {
    cursor: pointer;
  }
  .burgermenu__trigger span {
    display: block;
    position: absolute;
    width: 32px;
    height: 3px;
    border-radius: 1.5px;
    background: #fff;
    transition: 0.3s ease-in-out, top 0.5s ease;
  }
  .burgermenu__trigger span:nth-child(1) {
    top: 0;
  }
  .burgermenu__trigger span:nth-child(2) {
    top: 11px;
  }
  .burgermenu__trigger span:nth-child(3) {
    top: 22px;
  }
  .burgermenu__content {
    display: block;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    opacity: 0;
    transition: 0.6s;
    background-color: #000;
    z-index: 110;
    padding: 80px 0 40px;
  }
  .burgermenu__content ul {
    position: relative;
    z-index: 3;
  }
  .burgermenu__content .link-item {
    height: 66px;
  }
  .burgermenu__content .link-item a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: 0.06em;
    width: 100%;
    text-align: center;
    line-height: 66px;
    box-sizing: border-box;
    display: block;
    position: relative;
  }
  .burgermenu__content .item-sub {
    min-height: 66px;
    padding-top: 17px;
    box-sizing: border-box;
    text-align: center;
  }
  .burgermenu__content .item-sub span {
    color: #fff;
    font-size: 18px;
    display: inline-block;
    line-height: 32px;
    position: relative;
  }
  .burgermenu__content .item-sub span:after {
    content: "▼";
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
  }
  .burgermenu__content .item-sub .menu-sublist_burger {
    padding: 10px 0;
    display: none;
  }
  .burgermenu__content .item-sub .menu-sublist_burger a {
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.06em;
    width: 100%;
    display: block;
    line-height: 32px;
    text-align: center;
  }
  .burgermenu__content .item-sub .menu-sublist_burger a:after {
    display: none;
  }
  .burgermenu__content .item-sub.open span:after {
    transform: translateY(-50%) rotate(180deg);
  }
  .burgermenu.open {
    pointer-events: auto;
  }
  .burgermenu.open .burgermenu__trigger span:nth-child(1) {
    transform: rotate(45deg);
    top: 15px;
  }
  .burgermenu.open .burgermenu__trigger span:nth-child(2) {
    opacity: 0;
  }
  .burgermenu.open .burgermenu__trigger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 15px;
  }
  .burgermenu.open .burgermenu__content {
    opacity: 1;
    pointer-events: auto;
  }
  
  .fade-action {
    transition: 0.6s;
    opacity: 0;
    transform: translateY(20px);
  }
  .fade-action.show {
    opacity: 1;
    transform: translateY(0);
  }