:root {
  --color-bg: #f8f5f0;
  --color-bg-alt: #f1e6d6;
  --color-brown: #6a4a3c;
  --color-wood: #dcc7a1;
  --color-green: #3d5544;
  --color-text: #333333;
  --color-muted: #777777;
  --max-width: 1080px;
}



#intoro{
	background: var(--color-main);
	position: relative
}


.intoro_wrap{
	margin: 0 auto;
	padding: 10% 5% 6%;
	max-width: 1100px;
	color: #fff
}



.intoro_wrap > div{
	text-align: center;
}



#intoro h1{
	text-align: center;
	color: #222;
	text-shadow: 1px 1px 0px #fff;
	font-size: 1.4rem
}

#intoro h1 img{
	margin: 1.5em auto 1.2em;
	display: block;
}


.form_link {
 	max-width: 300px;
	margin: 0 auto;
	font-size: 1.2em;
	letter-spacing: .1em;
	display: block;
  padding: 1rem 3rem;
  background-color: #ffffff;
  color: #333;
  border-radius: 100px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ホバー：少し沈む */
.form_link:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.1); 
  color: var(--color-main-shade);
}

/* クリック時：完全に沈む */
.form_link:active {
  transform: translateY(6px);
  box-shadow: none;
}

.media_view{
	margin: .6em 1em
}


/* デフォルト（PC）では普通の場所に表示 */
.sp-fixed-btn {
    display: inline-block;
    /* PC用のデザインをここに記述 */
}


@media screen and (max-width: 667px) {
	#intoro{
		height: 100vh
	}
	#intoro h1{font-size: 1rem}
	
	#intoro h1 img{
		max-height: 100px;
	}
	
	.form_link.is-hidden {
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none; /* クリックできないようにする */
	}
	
	.form_link_wrap{
		display: none
	}
	
	.sp-fixed-btn {
        position: fixed;
		bottom: 20px;
		z-index: 100;
		left: 0;
		right: 0;
		color: #222;
    }
    
    /* クラスがついた時に表示させる */
    .sp-fixed-btn.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    

}	




@media print, screen and (min-width: 768px) {
	.intoro_wrap{
	padding: 6% 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}
	
	.intoro_wrap > div{
	width: 48%;
	}

}	

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



/* ------------------------------
 #about
------------------------------ */

#about{
	background: rgba(var(--color-point1-rgb), 0.3);
	position: relative;
}

#about h2{
	background: var(--color-point1);
	border-radius: 10px;
	max-width: 600px;
	width: 90%;
	position: relative;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	padding: 1em;
}


#about h2:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: var(--color-point1);
	border-width: 10px;
	margin-left: -10px;
}

.about_read{	
	max-width: 780px;
	margin: 0 auto 1em
}

.about_read h3{
	font-size: 1.5em;
	text-align: center;
	margin: 0 auto .5em;
}
.about_read p{
	line-height: 1.8em;
}
.about_read p em{
	background: linear-gradient(transparent 35%, var(--color-point1) 0%);
	font-size: 1.2em;
	font-style: normal
}

.problem_list{position: relative}

.problem_list ul{}

.problem_list ul li{
	background: #fff;
	padding: .8em 1.2em;
	border-radius: 10px;
	position: relative;
	font-variation-settings: "wght" 600;
}

.problem_list ul li:not(:last-child){
	margin:0 0 6px;
}

.problem_list ul li::before{
	font-family: icomoon;
	content: "\ea52";
	padding: 0 10px 0 0
}

@media screen and (max-width: 667px) {
	.problem_list picture{
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	.problem_list picture img{
		width: auto;
		text-align: center;
	}
	.problem_list ul{
		padding: 20px 0 20px;
	}
}	

@media print, screen and (min-width: 668px) {
	.problem_list{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 3em
	}
	.problem_list picture{
		width: 260px;
	}
	.problem_list ul{
	}
	.about_read{margin: 0 auto 3em}
	.about_read h3 br{display: none}
}	

@media print, screen and (min-width: 1024px) {
	.problem_list ul li{
		font-size: 1.3em
	}
}	

/* ------------------------------
 INDEX
------------------------------ */

#solve{
	padding: 6% 0;
}

#solve h2{
	text-align: center;
	margin: 0 auto 2em;
	color: var(--color-main-shade)
}

#solve h2:before,
#solve h2:after {
  position: relative;
  display: inline-block;
  content: "";
  background: var(--color-point1);
  width: 2px;
  height: 2em;
  margin: 0 1em;
  margin-top: -.2em;
  vertical-align: middle;
}
 
#solve h2:before {
  transform: rotate(-35deg);
}
 
#solve h2:after {
  transform: rotate(35deg);
}



.solve_wrap{
	
}

.solve_case{
	border: solid 2px var(--color-main);
	border-radius: 10px;
	position: relative;
	max-width: 900px;
	margin: 1.5em auto 0;
	padding: 2em;
	background: #fff
}



.solve_case h3{
	text-align: center;
	border-bottom: solid 1px #a6a6a6;
	padding: 0 0 .8em;
	margin: 0 0 .8em;
}

.solve_case p + p{
	margin: .8em 0 0;
}

.solve_case p span{
	display: block;
	margin: .4em 0 0 0;
	padding: .5em 1.5em;
	line-height: 1em;
	width:-moz-fit-content;
	width:fit-content;
	font-size: 1.1em;
	background: var(--color-point1);
	border-radius: 50px;
	position: relative;
	
}

.solve_case p span::before{
	font-family: icomoon;
	content: "\e9e4";
	padding: 0 10px 0 0
}


@media screen and (max-width: 767px) {
	.solve_case figure{margin-bottom: 1em;
		text-align: center;
	}
	.solve_case figure img{
	max-height: 150px;
	width: 0 auto;
	}
}	

@media print, screen and (min-width: 768px) {
	#solve h2{
		margin-bottom: 2em;
		font-size: 2rem
	}
	.solve_case{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 2em
	}
	.solve_case > figure{
		width: 30%
	}
	.solve_case > div{
		width: 60%
	}
	.solve_wrap div:nth-child(odd){
		flex-direction: row-reverse
	}
	.solve_case h3 br{
		display: none
	}
}	

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




/* ------------------------------
 #feature
------------------------------ */

#feature{
	position: relative
}

#feature::before{
	content: "";
	width: 100%;
	height: 300px;
	background: var(--color-point1);
	position: absolute;
	top:0;
	z-index: -1
	
}

#feature h2{
	text-align: center;
	padding: 5%;
}

.feature_box{
	background: #fff;
	border-radius: 20px;
	position: relative;
	box-shadow: 0px 0px 6px rgba(90, 90, 83, 0.6);
	padding: 1.2em;
	max-width: 1100px;
	margin: 0 auto
}

dl.tool dt{
	background: var(--color-main);
	border-radius: 5px;
	position: relative;
	color: #fff;
	padding: .6em 1em;
	text-align: center;
	margin-bottom: 20px;
	font-size: 1.2em
}

dl.tool dd{
	border-bottom: dashed 2px var(--color-point1);
	text-align: center;
	padding: .6em 1em;
}

dl.tool dd::before{
	font-family: icomoon;
	content: "\e96a";
	color: #fa4400;
	padding: 0 5px 0 0;
}


.tool_box{
	position: relative
}

#feature .renkei{
	height: 120px;
	text-align: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#feature .renkei::before{
	position:absolute;
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	background: url(../img/renkei.png) no-repeat center center;
	-moz-background-size:contain;background-size:contain;
	z-index: -1
}


@media screen and (max-width: 767px) {
	#feature{padding: 6% 0}
	.tool_box img{
	width: 80px;
	height: auto;
	position: absolute;
	z-index: 10
	}
	.customer .tool_box img{
		right: 10px
	}
	.builder .tool_box img{
		left: 10px
	}
	
	
	.tool_box dl{padding: 20px 0 0;margin-bottom: 20px}
	
	

}	

@media print, screen and (min-width: 768px) {
	#feature .renkei{
		height: 180px;
		font-size: 1.8em
	}
	
	#feature .renkei::before{
	width: 160px;
	height: 160px;
	}

	.tool_box img{
		max-height: 200px;
	}
}	

@media print, screen and (min-width: 1024px) {
	#feature{padding: 0 0 6%}
	.feature_box{
		display: flex;
		align-items: center;
		padding: 2em
	}
	.tool_box{width: 40%}
	.tool_img{width: 60%}
	
	.feature_box.customer{
		flex-direction: row-reverse
	}
	
	.feature_box figure{
		text-align:center
	}
}	


/* ------------------------------
 #flow
------------------------------ */

#flow{}

#flow > div{padding: 5%}

#flow > div h2{
	text-align: center;
	position: relative;
	margin: 1em 0 1.5em;
}

#flow > div h2 span{
	display: block;
	color: rgba(var(--color-main-rgb), 0.3);
	font-size: 2em;
	top:-23px;
	left: 0;
	right: 0;
	position: absolute;
	z-index: -1
}

#flow > div h3{
	color: var(--color-main-shade)
}

.massage,
.option{
	background: rgba(var(--color-main-rgb), 0.15);
}


.renkei{
}

.massage h3{
	text-align: center;
	margin: 0 auto 1em;
	background: #fff;
	padding: .8em 1em;
	border-radius: 5px;
	position: relative;
	width:-moz-fit-content;
	width:fit-content;
}
ul.massage_flow li{
	position: relative;
	transform-style: preserve-3d;
	padding: 20px;
}


ul.massage_flow li figcaption{
	line-height: 1.5em
}


ul.massage_flow li:not(:last-child)::before {
	  content: "";
	  position: absolute;
	  width: 20px;
	  height: 20px;
	  border-top: 3px solid #666;
	  border-right: 3px solid #666;
	  z-index: 1; /* 丸より手前に */
	}
	
	
ul.massage_flow li::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%) translateZ(-1px);
	  width: 80%;
	  aspect-ratio: 1 / 1;
	  background: var(--color-point1);
	  border-radius: 50%;    
	}

ul.massage_flow li figure{
		text-align: center;
	}	

ul.massage_flow li figure img{
		height: 200px;
		width: auto
	}

ul.massage_flow li figcaption{
		padding: 1em;
		text-align: left;
		font-size: .9em
	}



@media screen and (max-width: 767px) {
	#flow > div{padding: 15% 5%}
	ul.massage_flow{
		width: 90%;
		margin: 0 auto
	}
	
	ul.massage_flow li{}
	
	ul.massage_flow li::after {
    width: 80%; /* スマホでは丸を少し控えめに */
	  }
	
	  /* スマホ：下向き矢印 */
	ul.massage_flow li:not(:last-child)::before {
	    bottom: 0px; /* 下側に配置 */
	    left: 50%;
	    transform: translateX(-50%) rotate(135deg); /* 135度回して下向きに */
	  }
	  
}	

@media print, screen and (min-width: 768px) {
	.massage h3{padding: .8em 3em;}
	ul.massage_flow{
	display: flex;
	  justify-content: space-between;
	  max-width: 1200px;
	  width: 90%;
	  margin: 0 auto
	}
	
	ul.massage_flow li{
		position: relative;
	  list-style: none;
	  flex: 1;
	  text-align: center;
	  transform-style: preserve-3d;
	}
	
	
	ul.massage_flow li figure img{
		height: 280px;
		width: auto
	}
	
	
	
	ul.massage_flow li figcaption{
	}

	ul.massage_flow li:not(:last-child)::before {
    top: 50%;
    right: -10px;
    transform: translateY(-50%) rotate(45deg);
  }
	

}	


.point_wrap{
	margin: 0 auto;
	width: 90%;
}

.point_wrap h3{
	margin-bottom: 1em
}

.point_wrap figcaption{
	font-size: .9em;
	margin: .5em 0 0;
}

.staff_flow dl{
	margin: .8em 0 0;
}

.staff_flow dt{
	background: rgba(var(--color-main-rgb), 0.12);
	border-radius: 5px;
	position: relative;
	padding: .4em 1em;
	margin-bottom: .5em
}


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

@media print, screen and (min-width: 768px) {
	.point_wrap{
	display: flex;
	max-width: 900px;
	justify-content: space-between;
	align-items: center
	}
	
	.point_wrap figure{
		width: 45%;
	}
	
	.point_wrap > div{
		width: 50%
	}

}	

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




/* ------------------------------
 #featurelist
------------------------------ */

#featurelist{
	padding: 4% 5%;
	background: var(--color-main);
}

#featurelist h2{
	text-align: center;
	color: #fff
}

.features div{
	background: #fff;
	padding: 1.5em;
	border-radius: 5px;
	position: relative;
	margin: 0 0 2em
}
.features div h3{
	text-align: center;
	margin-bottom: .8em
}

.features div h3::before{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	background-repeat:no-repeat;
	-moz-background-size:cover;background-size:cover;
	margin: 0 auto 1em
}

.features01 h3::before{
	background: url(../img/system01.svg) center center
}

.features02 h3::before{
	background: url(../img/system02.svg) center center
}

.features03 h3::before{
	background: url(../img/system03.svg) center center
}


.mainfunction{
	background: #fff;
	padding: 1.5em;
	border-radius: 5px;
	position: relative;
	margin: 0 0 2em
}

.mainfunction dl:not(:last-child){
	border-bottom: solid 1px #ccc;
}

.mainfunction dl{
	display: flex;
	padding: 1em;
}

.mainfunction dl dt{
	width: 200px;
}

.mainfunction dl dd{
	width: calc(100% - 200px);
	padding: 0 0 0 1em
}

/* 見出し全体のスタイル */
.accordion-trigger {
    position: relative;
    cursor: pointer;
    padding: 1rem 60px 1rem 0; /* 右側にアイコン用のスペースを確保 */
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

/* アイコンを囲む円 */
.icon-circle {
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

/* 横棒 */
.icon-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

/* 縦棒 */
.icon-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

/* 開いた時（is-open）の動き */
.accordion-trigger.is-open .icon-circle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0; /* 縦棒を消してマイナスにする */
}

/* ホバー時に円の背景を塗るなどしてもお洒落です */
.accordion-trigger:hover .icon-circle {
    background-color: rgba(0, 0, 0, 0.05); /* ほんのり色づけ */
}




/* コンテンツの初期状態（隠す） */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s;
    opacity: 0;
}

/* 開いている時のコンテンツ */
.accordion-content.is-open {
    max-height: 2000px; /* 十分な高さを指定 */
    opacity: 1;
    margin-top: 20px;
}



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

@media print, screen and (min-width: 768px) {
	.features{
	display: grid;
	  grid-template-columns: repeat(3,1fr);
	  gap: 20px;
	}

}	

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



/* ------------------------------
 #voice
------------------------------ */

#voice{
	margin: 5%;
}

.voice_wrap{
	padding: 5%;
	background: rgba(var(--color-point1-rgb), 0.12);
	border-radius: 30px;
	margin: 0 auto;
	max-width: 1100px;
	border: solid 2px var(--color-point1);
	position: relative;
}

.voice_wrap h2{
	background: var(--color-point1);
	text-align: center;
	border-radius: 50px;
	}


.voice_wrap_problem{
	margin-bottom: 2em
}

.voice_wrap_problem img{
	border-radius: 10px;
	position: relative;
	
}

dl.user{
	margin-bottom: 1em;
	border-bottom: solid 1px #444;
	padding-bottom: 1em;
}

.user_kadai h3{margin-bottom: .4em;}

.user_kadai h3::before{
	font-family: icomoon;
	content: "\e9ad";
	padding: 0 5px 0 0;
}


.voice_wrap_comment{
	
}

.voice_wrap_comment h3{
	font-size: 1.1rem;
	margin-bottom: .6em;
}

.voice_wrap_comment h3 span{
	display: block;
	color: red
}

.voice_wrap_comment figcaption{
	line-height: 1.4em;
	
}

.voice_wrap_comment figure img{
	border-radius: 50%;
	position: relative;
	width: 100px;
	height: 100px;
}

.voice_wrap_comment{
	background: #fff;
	padding: 1em;
	border-radius: 10px;
	position: relative;
	
}

@media screen and (max-width: 767px) {
	
	.voice_wrap h2{
		padding: .6em;
		margin-bottom: 1em
	}
	.voice_wrap_problem figure{
		margin-bottom: 1em
	}
	.user_kadai h3{
		text-align: center;
		padding: .6em;
		background: #fff;
	}
	.voice_wrap_comment figure{
		display: flex;
		align-items: center;
	}
	.voice_wrap_comment figcaption{
		padding: 0 0 0 1.5em
	}
}	

@media print, screen and (min-width: 768px) {
	.voice_wrap h2{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	right: -20px;
	top:-20px;
	}


	.voice_wrap_problem,
	.voice_wrap_comment{
	display: flex;
	justify-content: space-between
	}
	.voice_wrap_comment{
		align-items: center;
		padding: 1.5em
	}
	
	.voice_wrap_problem figure{
		width: 40%
		}
		
	.voice_wrap_problem > div{
		width: 56%;
		}
	
	.voice_wrap_comment figcaption{
		text-align: center;
		font-size: .8em;
	}
	
	.voice_wrap_comment figure img{
		width: 120px;
		height: 120px;
	}
	.voice_wrap_comment > div{
		width: calc(100% - 150px);
	}
}	

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

/* ------------------------------
 massage
------------------------------ */

#massage{
	background: rgba(var(--color-main-rgb), 0.12);
	padding: 5%
}

.massage_wrap{
	background: #fff;
	border-radius: 30px;
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.5em
}

.massage_wrap h2{
	color: var(--color-main-shade);
	text-align: center;
	margin-bottom: 1em
}

.massage_wrap > h3{
	text-align: center;
	margin-bottom: 1em
}


.result{
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: solid 1px var(--color-main);
}



.massage_daihyo h3{margin-bottom: 1em}

.banner_box {
    background-color: #63b38d;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.1) 10px,
      rgba(255, 255, 255, 0.1) 20px
    );
    
    color: white;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    padding: 1em;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 1em
  }

.banner_box p{
	font-size: .9em;
	line-height: 1.3em
}

.banner_box h4 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  }

.banner_box h4 span{
	font-size: 1.5em;
	color: #ffd900;
	padding: 0 3px
}


.massage_daihyo figure img{
	border-radius: 10px;
	position: relative;
	
}

.notebook-line {
    line-height: 2.4;
    background-image: linear-gradient(
      transparent 95%, 
      #ccc 95%
    );
    /* 行の高さに合わせて背景サイズを固定 */
    background-size: 100% 2.4em;
    padding-top: 0.1em;
    
  }

@media screen and (max-width: 767px) {
	.massage_wrap h2 br,.massage_daihyo h3 br{display: none}
	.massage_daihyo > div{margin-bottom: 1em}
	
	.massage_daihyo figure{
		display: flex;
		align-items: center
	}
	.massage_daihyo figure img{
		width: 40%;
	}
	.massage_daihyo figure figcaption{
		padding: 0 0 0 1em
	}
}	

@media print, screen and (min-width: 768px) {
	.massage_wrap{
		padding: 2em
	}
	.massage_wrap > h3 br{
		display: none
	}
	
	.result{
		margin-bottom: 2em;
		padding-bottom: 2em;
	}
	.banner_box{padding: 2em 1em;}
	.banner_box h4{font-size: 1.3em;margin-bottom: 10px;}
}	

@media print, screen and (min-width: 1024px) {
	.massage_wrap{
		padding: 3em
	}
	.massage_daihyo{
		display: flex;
		justify-content: space-between;
		padding: 1em
	}
	.massage_daihyo > div{
		width: 70%
	}
	.massage_daihyo > figure{
		width: 25%
	}
	.massage_daihyo figure figcaption{
		padding: 1em 0 0;
	}
	
	.result {
		display: grid;
	  grid-template-columns: repeat(2,1fr);
	  gap: 30px;
	}
	
}	



/* ------------------------------
 #contact_form
------------------------------ */

#contact_form{
	padding: 8% 5%;
}

#contact_form h2{
	text-align: center;
	margin-bottom: 1em
}


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

@media print, screen and (min-width: 768px) {
	#contact_form{padding: 5%}
}	

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