body{background-color:#FBF9F4;}
.intro-message {
  background-color: #FBF9F4;
  padding: 1vw 0;
  width: 80%;
  margin: 0 auto;}
.intro-inner {
  width: 100%;
  margin: 0 auto;}
.intro-heading {
  font-size: 1.8vw;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
  text-align:center;
  margin: 3vw auto;}
.intro-heading  img{
  display: inline-block;
  margin: 3vw auto 0;
  width:7vw;}
.intro-text {
  font-size: 1.2vw;
  line-height: 2.5;
  text-align: center;
  width: 75%;
  margin: 0 auto 5vw;}
.intro-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;}
.intro-points li {
  background-image: url("../assets/images/feature_bg.png");
  background-size: cover;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2vw;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  text-align: center;
  color: #6A5D3D;
  padding: 1vw;
  box-sizing: border-box;}
.intro-points li:nth-child(odd){
  width: 12vw;
  height:12vw;}
.intro-photo {
  width: 95%;
  height: 30vw;
  margin: auto;
  border-radius: 3vw;
  overflow: hidden;}
.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 -2vw;
  transform: scale(1.2);}
.about-content {
  padding: 5vw 0;}
.herb-inner .dotted-underline{
  width: 35vw;}
.features-inner .dotted-underline{
  width: 22vw;}
.herb-inner {
  width: 80%;
  margin: 0 auto;}
.herb-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  align-items: flex-start;
  justify-content: space-between;
  margin: 4vw auto 6vw;}
.herb-text {
  width: 55%;
  font-size: 1.2vw;
  line-height: 1.8;}
.herb-image {
  width: 40%;}
.herb-image img {
  width: 100%;
  border-radius: 3vw;
  object-fit: cover;}
.features-inner_text {
  width: 65%;
  margin: 0 auto 3vw;
  font-size: 1.3vw;
  line-height: 1.8;
  text-align: center;}

/*スタッフ*/
.staff-section {
  background-color: #fdfaf3;
  padding: 3vw 0;}
.staff-inner {
  width: 85%;
  margin: 0 auto;}
.staff-heading {
  font-size: 2vw;
  text-align: center;
  margin: 2vw auto;}
.staff-lead {
  text-align: center;
  margin-bottom: 3vw;
  font-size: 1.2vw;}
.staff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3vw;}
/* 左カラム（大カード） */
.staff-left {
  display: flex;
  flex-direction: column;
  width: 48%;
  gap: 3vw;}
.staff-card {
  width: 100%;
  background-color: #fff;
  border: 2px solid #E1DBCC;
  border-radius: 1.5vw;
  padding: 2vw;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);}
.staff-overview{
  display: flex;
  gap: 2vw;}
.staff-overview img{
  width: 10vw;
  height: 10vw;
  object-fit: contain;}
.staff-detail{
  padding-top:2vw;
  text-align: left;}
.staff-detail h3 {
  font-size: 1.8vw;
  margin: 0 0 1vw;}
.staff-detail h3 span {
  display: block;
  font-size: 1vw;
  color: #38BE9C;}
.staff-card .comment {
  font-size: 1vw;
  margin-top: 1vw;}
.staff-card .staff-images{
  display: flex;
  gap: 1vw;
  justify-content: center;
  padding: 1.5vw;}
.staff-card .staff-images img{
  height: 15vw;
  object-fit: cover;}
.staff-card .staff-images img:first-child{
  width: 30vw;
  object-position: 0 -5vw;}
.staff-right {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  width: 48%;}
.staff-role-tag {
  display: inline-block;
  font-size: 1.2vw;
  color: #fff;
  padding: .5vw;
  margin-bottom: .5vw;}
.staff-role-tag.green {background-color: #38BE9C;}
.staff-role-tag.blue {background-color: #9FC6E6;}
.staff-role-tag.yellow {background-color: #d5b85c;}
.staff-role-tag.gray {background-color: #B8AA86;}

/*SNS情報*/
.sns-info{
  display:flex;
  align-items:center;
  gap:2vw;
  width: 95%;
  margin: 5vw auto 3vw;
  padding:2vw 0;}
.sns-info-illust{
  flex:0 0 15vw;}
.sns-info-illust img{
  width:100%;
  height:auto;}
.sns-info-box{
  position:relative;
  flex:1 1 0;
  border:3px solid #62c4a3;
  border-radius:2vw;
  padding:2vw 3vw;
  background:#fff;}
.sns-info-box::before,
.sns-info-box::after{
  content:"";
  position:absolute;
  left:-3vw;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:3vw;
  height:3vw;}
.sns-info-box::before{
  left: -1.7vw;
  background:#62c4a3;}
.sns-info-box::after{
  left:-1.3vw;
  background:#fff;}
.sns-info-box > p:first-child{
  text-align:center;
  font-size:1.3vw;
  margin:0 0 2vw;
  line-height:1.8;}
.sns-info-links{
  display:flex;
  gap:.3vw .4vw;
  gap: 3vw;
  text-align:center;}
.sns-info-links > div{
  width: 48%;
  display: flex;
  gap: 1vw;
  text-align: left;
  align-items: center;}
.sns-info-box__detail{
  margin:0 0 1vw;
  font-size: 1.1vw;
  line-height:1.7;}
.sns-info-box__detail img{
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
  margin-right: .5vw;
  margin-bottom: .5vw;}
.sns-info-box__detail span{
  font-size: 1.8vw;}
.sns-info-box .qr-image{
  width: 7vw;
  height:7vw;
  object-fit: contain;}

@media screen and (max-width: 700px){
.intro-message {
  width: 95%;}
.intro-heading {
  width: 80%;
  font-size: 5vw;
  margin: 3vw auto;}
.intro-heading  img{
  width:14vw;}
.intro-text {
  font-size: 3.5vw;
  line-height: 2;
  text-align: left;
  width: 95%;
  margin: 0 auto 5vw;}
.intro-points {
  gap: 5vw;}
.intro-points li {
  width: 40vw;
  height: 40vw;
  font-size: 4vw;
  line-height: 1.4;
  padding: 1vw;}
.intro-points li:nth-child(odd){
  width: 40vw;
  height:40vw;}
.intro-photo {
  height: 45vw;
  border-radius: 5vw;}
.herb-inner .dotted-underline,
.features-inner .dotted-underline{
  width: 100%;}
.herb-inner {
  width: 90%;
  margin: 5vw auto;}
.herb-flex {
  flex-direction: column;
  gap: 5vw;
  margin: 5vw auto 10vw;}
.herb-text {
  width: 100%;
  font-size: 3.5vw;
  line-height: 2;}
.herb-image {
  width: 100%;}
.features-inner_text {
  width: 100%;
  margin: 0 auto 10vw;
  font-size: 3.5vw;
  line-height: 2;
  text-align: left;}

/*スタッフ*/
.staff-inner {
  width: 95%;
  margin: 20vw auto 10vw;}
.staff-heading {
  font-size: 5vw;
  margin: 5vw auto;}
.staff-lead {
  margin-bottom: 5vw;
  font-size: 3.5vw;}
.staff-grid {
  gap: 5vw;
  flex-direction: column;}
.staff-left {
  width: 100%;
  gap: 5vw;}
.staff-card {
  border: 2px solid #E1DBCC;
  border-radius: 3vw;
  padding: 5vw;}
.staff-overview{
  gap: 5vw;}
.staff-overview img{
  width: 30vw;
  height: 30vw;}
.staff-detail{
  padding-top:5vw;}
.staff-detail h3 {
  font-size: 5vw;
  margin: 0 0 3vw;}
.staff-detail h3 span {
  font-size: 3.5vw}
.staff-card .comment {
  font-size: 3vw;
  margin-top: 3vw;}
.staff-card .staff-images{
  gap: 5vw;
  padding: 3vw;}
.staff-card .staff-images img{
  height: 30vw;}
.staff-card .staff-images img:first-child{
  width: 50vw;
  object-position: 0 -15vw;}
.staff-right {
  gap: 5vw;
  width: 100%;}
.staff-role-tag {
  font-size: 3vw;
  padding: 1vw;
  margin-bottom: 1vw;}

/*SNS情報*/
.sns-info{
  margin: 5vw auto 3vw;
  padding:5vw 0;}
.sns-info-illust{
  flex:0 0 30vw;}
.sns-info-box{
  border:1px solid #62c4a3;
  border-radius:3vw;
  padding:3vw;}
.sns-info-box > p:first-child{
  font-size:3vw;
  margin:0 0 10vw;
  line-height:1.8;
  text-align: left;}
.sns-info-links{
  flex-direction: column;
  gap:10vw;}
.sns-info-links > div{
  width: 100%;
  gap: 1vw;
  flex-direction: column;}
.sns-info-box__detail{
  margin:0 0 3vw;
  font-size: 3vw;
  line-height:1.8;}
.sns-info-box__detail img{
  width: 8vw;
  height: 8vw;
  margin-right: 2vw;
  margin-bottom: 3vw;}
.sns-info-box__detail span{
  font-size: 4vw;}
.sns-info-box .qr-image{
  width: 3vw;
  height:3vw;}
.qr-btn{
  display: block;
  padding: 2vw;
  text-align:center;
  text-decoration: none;
  color: #fff;
  width: 80%;
  border-radius: 10vw;}
.qr-btn.line{
  background-color:	#00B900;}
.qr-btn.insta{
  background-color: #D300C5;}
}