/* shinjukunishi-junior
---------------------------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Alata&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--color-black: #3B3E42;
	--color-orange: #F87D00;
	--color-blue: #00BAE2;
	--color-yellow: #F4DB38;
	--color-pink: #F12040;
	--color-green: #047188;
	--color-gray: #d9d9d9;
	--color-cream: #FFF6ED;
	--color-yellow_u: #F8E77A;
	--color-line: #1adf1a;
	
	--bg-image: url(https://www.daidojuku.net/wp-content/uploads/2025/09/bg-scaled.jpg);
	--ff-en: "Urbanist","Noto Sans JP", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body#snj * {
	font-family: "Noto Sans JP", sans-serif;
	box-sizing: border-box;
}
body#snj {
	background-color: #fff;
	color: var(--color-black);
}
body#snj section {
	margin-bottom: 0;
}
body#snj a {
	text-decoration: none;
}
body#snj img {
	width: 100%;
}
#snj .snj-inner {
	width: 90vw;
	margin: 0 auto;
	padding: 2.5rem 0;
	position: relative;
}
#snj h2 {
	color: var(--color-black);
    margin: 0 0 2rem !important;
    padding: 0 !important;
    border: 0;
    line-height: 1 !important;
    height: auto;
	letter-spacing: 0.1rem;
	font-size: 2rem !important;
	text-align: center;
}
#snj h2 span {
	font-family: var(--ff-en);	
}

#snj a.btn-form,
#snj a.btn-line {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-yellow);
	width: 100%;
	max-width: 400px;
	padding: 1rem;
	gap: 0 0.5rem;
	margin: 0 auto;
	color: var(--color-black);
	font-weight: 600;
	border: 2px solid var(--color-yellow);
	font-size: 1.125rem;
	transition: all .3s ease;
}
#snj a.btn-form:hover {
	background: var(--color-orange);
	border-color: var(--color-orange);
}
#snj a.btn-form:hover img {
	opacity: 1;
}

#snj a.btn-line {
	background: var(--color-line);
	border: 2px solid var(--color-line);
	color: #fff !important;
}
#snj a.btn-insta {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,0.8);
	width: 100%;
	max-width: 400px;
	padding: 1rem;
	gap: 0 0.5rem;
	margin: 0 auto;
	color: var(--color-blank);
	font-weight: 600;
	border: 2px solid var(--color-pink);
	font-size: 1.125rem;
}
#snj a.btn-insta span {
	line-height: 1;
}
#snj a.btn-insta strong {
	color: var(--color-pink);
	font-size: 0.75em;
	display: block;
	text-align: center;
	margin-bottom: 0.5rem;
}
#snj a.btn-form img,
#snj a.btn-insta img,
#snj a.btn-line img {
	max-width: 40px;
}
#snj .pc {
	display: none;
}
@media screen and (min-width: 768px) {
	#snj .sp {
		display: none;
	}
	#snj .pc {
		display: block;
	}
}
@media screen and (min-width: 1024px) {
	#snj .snj-inner {
		padding: 5rem 0;
	}
	#snj h2 {
		font-size: 2.75rem !important;
		margin-bottom: 4rem !important;
	}
}
/* header */

#snj-top {
	background: var(--bg-image) no-repeat center top / cover;
	width: 100%;
}
#snj header {
	width: 100%;	
}
#snj .header-inner {
	width: 90vw;
	margin: 0 auto 1rem;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#snj .header-inner .header-logo {
	width: 55%;
}
#snj .header-inner .header-logo h1 {
	text-align: left;
}
#snj .header-inner .header-logo h1 a span {
	color: var(--color-blue);
	font-weight: 500;
	font-size: 0.8rem;
	display: block;
	margin-bottom: 0.125rem;
}
#snj .header-inner .header-logo h1 img{
	text-align: left;
	max-width: 300px;
}
#snj .header-inner .header-sns {
	width: 35%;
	display: flex;
	justify-content: flex-end;	
	gap: 0 0.5rem;
}
#snj .header-inner .header-sns img {
	max-width: 40px;
}
@media screen and (min-width: 768px) {
	#snj-top {
	}
	#snj .header-inner {
		padding-top: 1rem;
	}
	#snj .header-inner .header-sns {
		gap: 0 1rem;
	}
}

/* fv */
#snj-fv .snj-inner {
	padding: 0;
}
#snj-fv .fv-content {
	margin-bottom: 2rem;
}
#snj-fv .fv-pic {
	text-align: center;
	margin-bottom: 1rem;
}
#snj-fv .fv-pic img {
	width: 70vw;
}
#snj-fv .fv-main {
	text-align: center;
}
#snj-fv .fv-main-catch {
	margin-bottom: 2rem;	
}
#snj-fv .fv-main-catch p {
	color: var(--color-orange);
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}
#snj-fv .fv-main-catch h2 span {
	font-size: 1.5em;
}
#snj-fv .fv-main-btn p {
	margin-bottom: 0.75rem;
}
#snj-fv .fv-bottom {
	display: flex;
	align-items: flex-end;
    justify-content: center;
    gap: 0 1rem;
}
#snj-fv .fv-bottom-pic {
	flex-basis: 40%;
	position: relative;
	margin-bottom: -1.5rem;
	text-align: right;
}
#snj-fv .fv-bottom-pic img {
	width: 90%;
	max-width: 150px;
}
#snj-fv .fv-bottom-point {
	flex-basis: 60%;
	padding-bottom: 2rem;
}
#snj-fv .fv-bottom-point a {
	font-weight: 600;
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 8px;
	line-height: 1.8;
}
#snj-fv .fv-menu {
	background: var(--color-blue);
	padding: 2rem 0;
}
#snj-fv .fv-menu ul {
	width: 90vw;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 0.5rem;
}
#snj-fv .fv-menu ul li {
	list-style: none;
}
#snj-fv .fv-menu ul li a {
	display: block;
	background: #fff;
	border-radius: 0.5rem;
	padding: 0.5rem;
	color: var(--color-green);
	font-weight: 600;
	font-size: 0.9rem;
}
#snj-fv .fv-menu ul li:last-child a {
	color: var(--color-orange);
}

@media screen and (min-width: 768px) {
	#snj-fv .snj-inner {
		padding-top: 2rem;
	}
	#snj-fv .fv-content {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin-bottom: 0;
	}
	#snj-fv .fv-content .fv-main {
		flex-basis: 50%;
		padding-top: 3rem;
	}
	#snj-fv .fv-content .fv-pic {
		flex-basis: 45%;
		text-align: left;
	}
	#snj-fv .fv-pic img {
		width: auto;
		max-width: 320px;
	}
	#snj-fv .fv-bottom-pic {
		flex-basis: auto;
	}
	#snj-fv .fv-bottom-point {
		flex-basis: auto;
	}
}
@media screen and (min-width: 1024px) {
	#snj-fv .fv-pic img {
		max-width: 420px;
	}
	#snj-fv .fv-main-catch h2 {
		letter-spacing: 0.1rem;
	}
	#snj-fv .fv-main-catch h2 span {
		font-size: 1.7em;
	}
	#snj-fv .fv-main-catch p {
		font-size: 1.5rem;
		margin-bottom: 1.75rem;
	}
	#snj-fv .fv-bottom {
		position: relative;
		margin-top: -5rem;
	}
}
@media screen and (min-width: 1200px) {
	#snj .fv-content {
		width: 80vw;
		margin: 0 auto;	
	}
	#snj .fv-main-catch {
    	margin-bottom: 3rem;
	}
	#snj .fv-menu ul {
		width: 60vw;
	}
	#snj .fv-menu ul li a {
		padding: 0.75rem 1rem;
		font-size: 1rem;
	}
}

/* about */
#snj-about {
	background: var(--bg-image) no-repeat center center / cover;
}
#snj-about h2 {
	line-height: 1.7 !important;
}
#snj-about h2 span {
	color: var(--color-blue);
	font-size: 1.5em;
}
#snj-about h2 span rt {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}
#snj-about ul {
	list-style: none;
	padding-bottom: 3rem;
}
#snj-about ul li {
	position: relative;
	font-weight: 600;
	line-height: 2;
    font-size: 1.125rem !important;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}
#snj-about ul li:before {
	content: "〇";
	display: block;
	margin-right: 0.5rem;
	position: absolute;
	left: 0;
	font-weight: 500;
}
#snj-about ul li strong {
	color: var(--color-orange);
	text-decoration: underline;
	text-underline-offset: 8px;
}
#snj-about .about-pic {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 3rem;
}
#snj-about .about-pic picture {
	flex-basis: 50%;
	padding: 0 0 0.5rem 0.25rem;
}
#snj-about .about-pic picture:nth-of-type(odd) {
	margin-top: -3rem;
	padding: 0 0.25rem 0.5rem 0;
}
#snj-about .about-pic picture img {
	border-radius: 0.25rem 0 0 0.25rem;
}
#snj-about .about-pic picture:nth-of-type(odd) img{
	border-radius: 0 0.25rem 0.25rem 0;
}
@media screen and (min-width: 768px) {
	#snj-about ul {
		width: fit-content;
		margin: 0 auto;
		overflow: hidden;
	}
	#snj-about ul li {
		font-size: 1.25rem !important;
	}
	#snj-about .about-pic {
		flex-wrap: nowrap;
		gap: 1%;
		padding-bottom: 7rem;
	}
	#snj-about .about-pic picture {
		flex-basis: 20%;
		padding: 0!important;
	}
	#snj-about .about-pic picture img {
		border-radius: 0.5rem !important;
	}
	#snj-about .about-pic picture:first-child img{
		border-radius: 0 0.5rem 0.5rem 0 !important;
	}
	#snj-about .about-pic picture:last-child img{
		border-radius: 0.5rem 0 0 0.5rem !important;
	}
}

/* reason */
#snj-reason {
	background: var(--color-yellow);
}
#snj-reason .krnk-pic {
	position: relative;
    margin-top: -5rem;
	margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}
#snj-reason .krnk-pic img {
	width: 40vw;
	max-width: 200px;
}
#snj-reason h2 {
}
#snj-reason h2 >span {
	display: block;
	text-align: center;
	font-size: 0.55em;
	margin-bottom: 0.25rem;
	line-height: 1;
}
#snj-reason h2 strong {
	color: var(--color-orange);
}
#snj-reason h2 strong > span {
	font-size: 1.5em;
}
#snj-reason ul {
	list-style: none;
}
#snj-reason ul li {
	background: #fff;
	border-radius: 1rem;
	padding: 1rem 1rem 1rem 5rem;
	margin-bottom: 1rem;
	position: relative;
    counter-increment: number 1;
}
#snj-reason ul li:before {
    content: "0" counter(number);
    color: var(--color-orange);
	font-size: 3rem;
    position: absolute;
	width: 5rem;
	text-align: center;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
    line-height: 1;
	font-family: var(--ff-en);	
}
#snj-reason ul li:last-child:before {
	content: "10";
}
#snj-reason ul li h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
#snj-reason ul li p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0;
}
#snj-reason ul li p strong{
	color: var(--color-orange);
}
@media screen and (min-width: 768px) {
	#snj-reason .krnk-pic {
    	position: absolute;
    	margin-top: -8rem;
		justify-content: flex-end;
	}
}
@media screen and (min-width: 1024px) {
	#snj-reason .snj-inner {
		width: 80vw;
	}
}
@media screen and (min-width: 1200px) {
	#snj-reason .snj-inner {
		width: 65vw;
	}
	#snj-reason ul li {
		padding: 2rem 4rem 2rem 8rem;
	}
	#snj-reason ul li:before {
		width: 8rem;
		font-size: 3.5rem;
	}
	#snj-reason ul li h3 {
		font-size: 1.75rem;
	}
}

/* middle cta */
#snj-mid-cta .snj-inner {
	background: var(--bg-image) no-repeat center center / cover;
	border-radius: 1.5rem;
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
	padding: 2.5rem 0.75rem !important;
}
#snj #snj-mid-cta h2 {
	line-height: 1.3 !important;
	margin-bottom: 2rem !important;
}
#snj-mid-cta h2 span {
	display: block;
	color: var(--color-blue);
	font-size: 0.5em;
	text-align: center;
	margin-top: 1rem;
}
#snj-mid-cta a.btn-form,
#snj-mid-cta a.btn-insta {
	gap: 0 0.5rem;
}
@media screen and (min-width: 1024px) {
	#snj-mid-cta .cta-content {
		display: flex;
		justify-content: center;
		gap: 0 3rem;
		
	}
	#snj-mid-cta .cta-content p {
		margin-bottom: 0;
		flex-basis: 40%;
		max-width: 400px;
	}

}
@media screen and (min-width: 1200px) {
	#snj-mid-cta .snj-inner {
		width: 70vw;
	}
}

/* teacher */
#snj-teacher h2 span {
	color: var(--color-blue);
}
#snj-teacher .teacher-pic {
	width: 70vw;
	height: 70vw;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	margin: 0 auto 1.5rem;
}
#snj-teacher h3 {
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}
#snj-teacher .teacher-item {
	margin-bottom: 3rem;
}
#snj-teacher .teacher-item p {
	font-size: 0.9rem;
	line-height: 1.7;
}
#snj-teacher .all-pic {
	margin-top: 3rem;
}
#snj-teacher .all-pic img {
	border-radius: 2rem;
}
#snj-teacher .all-pic p {
	text-align: center;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	display: flex;
    justify-content: center;
	align-items: center;
	gap: 0 1rem;
}
#snj-teacher .all-pic p::before,
#snj-teacher .all-pic p::after {
  content: "";
  width: 25px;
  height: 2px;
  background-color: var(--color-black);
	display: block;
}
 #snj-teacher .all-pic p::before {
  transform: rotate(45deg);
}
 #snj-teacher .all-pic p::after {
  transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
	#snj-teacher .teacher-content {
		display: flex;
		gap: 0 8%;
	}
	#snj-teacher .teacher-item {
		flex-basis: 46%;
	}
	#snj-teacher .teacher-pic {
		width: 30vw;
		height: 30vw;
	}
	#snj-teacher .all-pic {
		width: 70vw;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1024px) {
	#snj-teacher .snj-inner {
		width: 80vw;
	}
	#snj-teacher h2 {
		text-align: left;
		margin-bottom: 6rem !important;
	}
	#snj-teacher h3 {
		font-size: 2rem;
	}
	#snj-teacher .teacher-content {
		gap: 0 10%;
	}
	#snj-teacher .teacher-item {
		flex-basis: 45%;
	}
	#snj-teacher .teacher-item:last-child {
		margin-top: -6rem;
	}
	#snj-teacher .teacher-pic {
		width: 300px;
		height: 300px;
	}
	#snj-teacher .all-pic {
		width: 50vw;
	}
}

/* voice */
#snj-voice {
	background: var(--color-blue);
}
#snj-voice h2 {
	color: #fff;
	text-align: center;
}
#snj-voice h2 span {
	display: block;
    text-align: center;
    font-size: 0.55em;
    margin-bottom: 1rem;
    line-height: 1;
	color: var(--color-black);
}
#snj-voice .voice-content {
	width: 100%;
	margin: 0 auto;
	border-radius: 1rem;
	padding: 1.5rem;
	background: #fff;
}
#snj-voice .voice-pic {
	text-align: center;
	margin-bottom: 1.5rem;
}
#snj-voice .voice-pic img {
	width: 70%;
}
#snj-voice dt {
	font-weight: 700;
	margin-bottom: 0.25rem;
}
#snj-voice dt:before {
	content: "■";
	color: var(--color-orange);
	margin-right: 0.5rem;
}
#snj-voice dd {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}
#snj-voice dd:last-child {
	margin-bottom: 0;
}
@media screen and (min-width: 768px) {
	#snj-voice .voice-content {
		padding: 3rem 2rem;
	}
	#snj-voice .voice-item {
		display: flex;
		justify-content: space-between;
	}
	#snj-voice .voice-pic {
		flex-basis: 30%;
	}
	#snj-voice .voice-pic img {
		width: 100%;
	}
	#snj-voice .voice-comment {
		flex-basis: 65%;
	}
}
@media screen and (min-width: 1024px) {
	#snj-voice .voice-content {
		width: 70vw;
	}
}

/* schedule */
#snj-schedule h2 {
	text-align: center;
	line-height: 1.3 !important;
}
#snj-schedule h2 span {
	color: var(--color-blue);
}
#snj-schedule .krnk-pic {
	position: relative;
    margin-top: -4rem;
	margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}
#snj-schedule .krnk-pic img {
	width: 28vw;
	max-width: 140px;
}
#snj-schedule .schedule-content {
	margin-bottom: 4rem;
}
#snj-schedule .schedule-content h3 {
	font-size: 1.25rem;
	background: var(--color-yellow);
	padding: 1rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
#snj-schedule p {
	font-size: 0.9rem;
	line-height: 1.7;
}
#snj-schedule .access-content h3 {
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
#snj-schedule .access-content h3:before,
#snj-schedule .access-content h3:after {
	content: "-";
	margin: 0 1rem;
}
#snj-schedule .access-content h4 {
	font-size: 1.125rem;
	text-align: center;	
	margin-bottom: 1.5rem;
}
#snj-schedule .access-content h4 span {
	display: block;
	text-align: center;	
	font-weight: 500;
}
#snj-schedule .access-map {
	margin-bottom: 1rem;
}
#snj-schedule .access-map iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}
#snj-schedule .access-howto {
	border-bottom: 1px solid #dedede;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}
#snj-schedule h4.ochiai + p {
	text-align: center;
}
#snj-schedule .access-pic img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
@media screen and (min-width: 768px) {
	#snj-schedule .krnk-pic {
    	position: absolute;
    	margin-top: -8rem;
		justify-content: flex-end;
	}
	#snj-schedule .schedule-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
	}
	#snj-schedule .schedule-item h3 {
		flex-basis: 30%;
		margin-bottom: 0;
		padding: 1.5rem;
		font-size: 1.5rem;
	}
	#snj-schedule .schedule-item p {
		flex-basis: 65%;
		margin-bottom: 0;
	}
	#snj-schedule .access-content h3 {
		font-size: 2rem;
	}
	#snj-schedule .access-content h4 {
		font-size: 1.5rem;
	}
	#snj-schedule .access-map iframe {
		aspect-ratio: 3 / 1;
	}
	#snj-schedule .access-howto {
		padding-bottom: 3rem;
	}
	#snj-schedule .access-pic img {
		aspect-ratio: auto;
	}
}
@media screen and (min-width: 1024px) {
	#snj-schedule .snj-inner {
		width: 70vw;
	}
}
@media screen and (min-width: 1200px) {
	#snj-schedule .snj-inner {
		width: 60vw;
	}
}

/* fee */
#snj-fee .fee-content {
	border: 5px solid var(--color-blue);
	border-radius: 2rem;
	padding: 2rem 0.5rem;
}
#snj-fee h2 {
	text-align: center;
}
#snj-fee h2 span{
	color: var(--color-blue);
}
#snj-fee table{
	width: 100%;
	margin-bottom: 2rem;
}
#snj-fee tr {
	border-bottom: 1px solid;
}
#snj-fee th,
#snj-fee td{
	vertical-align: middle;
	border: 0;
	font-weight: bold;
}
#snj-fee th{
	text-align: center;	
	width: 60%;
}
#snj-fee td {
	font-size: 1.2rem;	
	width: 40%;
}
#snj-fee th strong {
	display: block;
	text-align: center;
	color: var(--color-orange);
}
#snj-fee .fee-camp {
	font-weight: bold;
	padding: 0.75rem 0;
	background: var(--color-yellow_u);
	text-align: center;
	display: flex;
  	justify-content: center;
	align-items: flex-end;
}
#snj-fee .fee-camp p {
	font-size: 1rem;
	margin-bottom: 0;
	line-height: 1.6;
}
#snj-fee .fee-camp strong {
	color: var(--color-orange);
	display: block;
}
#snj-fee .fee-camp::before,
#snj-fee .fee-camp::after {
  content: "";
  width: 25px;
  height: 2px;
  background-color: var(--color-black);
  margin: 0px 0 0.5rem;
	display: block;
}
 
#snj-fee .fee-camp::before {
  transform: rotate(50deg);
}
 
#snj-fee .fee-camp::after {
  transform: rotate(-50deg);
}
@media screen and (min-width: 768px) {
	#snj-fee table{
		width: 80%;
		margin-left :auto;
		margin-right :auto;
	}
	#snj-fee th {
		font-size: 1.2rem;
	}
	#snj-fee .fee-camp {
		width: 80%;
		margin: 0 auto;
		padding: 1rem 0;
		align-items: center;
	}
	#snj-fee .fee-camp strong {
		display: inline;
	}
	#snj-fee .fee-camp::before,
	#snj-fee .fee-camp::after {
	  margin: 0px 1.75rem 0;
	}
}
@media screen and (min-width: 1024px) {
	#snj-fee .snj-inner {
		width: 60vw;
	}
	#snj-fee .fee-content {
		padding: 4rem 2rem;
	}
	#snj-fee .fee-camp {
		width: fit-content;
	}
	#snj-fee .fee-camp p {
		font-size: 1.5rem;
		letter-spacing: 0.1rem;
	}
}

/* flow */
#snj-flow {
	background: var(--color-orange);
}
#snj-flow h2 {
	text-align: center;
	line-height: 1.3 !important;
}
#snj-flow h2 span {
	color: #fff;
	display: block;
	text-align: center;
}
#snj-flow .krnk-pic {
	position: relative;
    margin: -4rem auto 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}
#snj-flow .krnk-pic img {
	width: 35vw;
	max-width: 180px;
}
#snj-flow .flow-inner {
	width: 100%;
	background: #fff;
	border-radius: 2rem;
	padding: 3rem 1rem 2rem;
	margin: 0 auto;
}
#snj-flow h3 {
	text-align: center;
	margin-bottom: 1.5rem;
	font-size: 1.125rem;
}
#snj-flow h3 strong {
	color: var(--color-orange);
}
#snj-flow p.flow-txt {
	font-size: 0.9rem;
	margin-bottom: 2rem;
	line-height: 1.7;
}
#snj-flow p.flow-txt strong {
	color: var(--color-blue);
}
#snj-flow .flow-item {
	padding: 1.5rem 1rem;
	background: var(--color-cream);
	border-radius: 1.5rem;
	margin-bottom: 2rem;
}
#snj-flow .flow-item h4 {
	text-align: center;
	margin-bottom: 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#snj-flow .flow-item h4:after {
	content: "";
	width: 30vw;
	height: 3px;
	background: var(--color-orange);
	margin-top: 0.5rem;
}
#snj-flow a.btn-form {
	gap: 0 0.5rem;
	padding: 1rem 0;
	font-size: 1rem;
}
#snj-flow .flow-item p {
	text-align: center;
	margin-bottom: 0;
}
#snj-flow .flow-item p a {
	color: var(--color-black);
	font-weight: bold;
}
#snj-flow .flow-tel a {
	font-size: 1.8rem !important;
	font-family: var(--ff-en);
}
#snj-flow .flow-mail a {
	font-size: 0.9rem !important;
}
#snj-flow .flow-pic {
	position: relative;
	margin-top: -5rem;
	text-align: center;
	padding-bottom: 2rem;
}
#snj-flow .flow-pic img {
	width: 90%;
	max-width: 800px;
}
@media screen and (min-width: 768px) {
	#snj-flow .krnk-pic {
    	position: absolute;
    	margin-top: -8rem;
		justify-content: flex-start;
		left: 50%;
		transform: translateX(-50%);
	}
	#snj-flow .flow-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}	
	#snj-flow .flow-item {
		flex-basis: 48%;
		padding: 1.5rem 2rem;
	}
	#snj-flow .flow-inner {
		width: 100%;
		padding: 3rem 3rem 2rem;
	}
	#snj-flow h3 {
		font-size: 1.75rem;
	}	
	#snj-flow .flow-item h4:after {
		width: 200px;
	}
	#snj-flow p.flow-txt {
		text-align: center;
	}
	#snj-flow .flow-line img {
		width: 120px;
	}
}
@media screen and (min-width: 1200px) {
	#snj-flow .flow-inner,
	#snj-flow .krnk-pic {
		width: 60vw;
	}
	#snj-flow .flow-pic {
		margin-top: -7rem;
	}
}

/* faq */
#snj-faq h2 {
	text-align: center;
}
#snj-faq h2 span {
	color: var(--color-blue);
}
#snj-faq .faq-item {
    counter-increment: number 1;
	border-bottom: 1px solid var(--color-black);
}
#snj-faq .faq-header {
    padding: 1.5rem 3rem 1.5rem 0;
    cursor: pointer;
    position: relative;
}
#snj-faq .faq-header::before, .faq-header::after {
    position: absolute;
    content: '';
    top: 1px;
    right: 1.5rem;
    bottom: 0;
    width: 12px;
    height: 2px;
    margin: auto;
    background: var(--color-black);
}
#snj-faq .faq-header::after {
    transform: rotate(-90deg);
    transition: transform 0.3s;
}
#snj-faq .faq-header.active::after{
	transform:rotate(0deg);
}
#snj-faq .faq-header span {
	display: flex;
	align-items: center;
}
#snj-faq .faq-header span::before {
    content: "Q" counter(number);
    color: var(--color-black);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
	margin-right: 1rem;
	font-family: var(--ff-en);
}
#snj-faq .faq-content {
    padding: 0 1rem 1.5rem;
	display: none;
}
#snj-faq .faq-content span {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
}
#snj-faq .faq-content span::before {
    content: "A";
    color: var(--color-black);
    font-weight: 700;
    font-size: 2rem;
	margin-right: 1rem;
	font-family: var(--ff-en);
}
@media screen and (min-width: 1024px) {
	#snj-faq .snj-inner {
		width: 60vw;
	}
	#snj-faq .faq-header span::before,
	#snj-faq .faq-content span::before {
		font-size: 2.75rem;
	}
}

/* form */
#snj-form {
	background: var(--bg-image) no-repeat center center / cover;
}
#snj-form .snj-inner{
	width: 100%;
}
#snj-form h2 {
	text-align: center;
	line-height: 1.3 !important;
}
#snj-form h2 span {
	display: block;
	text-align: center;
	color: var(--color-orange);
}

#snj-form h2 strong {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
	color: #fff;
	letter-spacing: 0;
  font-size: 1rem;
  background: var(--color-blue);
	border-radius: 0.5rem;
}

#snj-form h2 strong:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid var(--color-blue);
}
#snj-form .form-content {
	margin: 0 auto;
	border-radius: 2rem;
	background: #fff;
	padding: 2rem 1.5rem 1rem;
}
#snj-form .form-alert{
	text-align: right;
	font-size: 0.8rem;
}
#snj-form label {
	font-size: 0.9rem;
}
#snj-form select {
	border: 1px solid;
}
#snj-form .wpcf7-submit {
	border-radius: 0;
	background-color: var(--color-yellow);
	color: var(--color-black) !important;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	#snj-form .form-content {
		width: 80vw;
		padding: 3rem;
	}
}
@media screen and (min-width: 1024px) {
	#snj-form .form-content {
		width: 60vw;
		padding: 3rem 6rem;
	}
}

/* footer */
#snj .footer-inner {
	padding: 3rem 0 0;
	text-align: center;
}
#snj .footer-logo {
	width: 220px;
	margin: 0 auto 1rem;
}
#snj .footer-comment {
	font-weight: bold;
	color: var(--color-green);
	margin-bottom: 1.5rem;
}
#snj .footer-tel {
	margin-bottom: 0rem;
}
#snj .footer-tel a {
	font-weight: 600;
	font-size: 2.5rem;
	color: var(--color-black) !important;
	font-family: var(--ff-en);
}
#snj .footer-mail {
}
#snj .footer-mail a {
	color: var(--color-black) !important;	
	font-size: 0.9rem;
}
#snj .footer-sns {
	width: fit-content;
	display: flex;
	justify-content: center;	
	gap: 0 0.5rem;
	margin: 0 auto 3rem;
}
#snj .footer-sns img {
	max-width: 40px;
}
#snj .footer-pic {
	display: flex;
	justify-content: center;
	gap: 0 1rem;
}
#snj .footer-pic {
	position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
	margin: 0 auto;
}
#snj .footer-pic img {
	width: 35vw;
	max-width: 180px;
}

#snj .footer-copy {
	text-align: center;
	background: var(--color-green);
	padding: 1rem 0 7rem;
	color: #fff;
	font-size: 0.7rem;
}
@media screen and (min-width: 768px) {
	#snj .footer-inner {
		padding: 1rem 0 0;
	}
	#snj .footer-pic {
		position: absolute;
		bottom: 20px;
		gap: 0 400px;
	}
	#snj .footer-copy {
		padding: 1rem 0;
	}
}
/* cta */
#snj-cta {
	position: fixed;
	bottom: -100px;
	left: 0;
	width: 100%;
    background: rgba(255, 255, 255, 0.8);
	z-index: 5000;
	padding: 0 0 0.25rem;
	transition: all .3s ease;
}
#snj-cta.show {
	bottom: 0;	
}
#snj-cta p {
	font-size: 0.8rem;
	text-align: center;
	margin-bottom: 0;
	color: var(--color-green);
	letter-spacing: 0.2rem;
}
#snj-cta .cta-content {
	display: flex;
	justify-content: space-between;
	width: 98%;
	margin: 0 auto;
}
#snj-cta .cta-content a {
	flex-basis: 32.5%;
	padding: 0.3rem 0 0.25rem;
	text-align: center;
	font-size: 0.75rem;
	color: var(--color-black) !important;
	border-radius: 0.5rem;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#snj-cta .cta-content a img {
	width: 22%;
	margin: 0 0 0.125rem;
}
#snj-cta .cta-content a.cta-form {
	background: var(--color-yellow);
}
#snj-cta .cta-content a.cta-line {
	background: var(--color-line);
}
#snj-cta .cta-content a.cta-tel {
	background: var(--color-blue);
}

#snj-thanks {
	width: 90vw;
	margin: 0 auto;
	padding: 3rem 1rem;
	text-align: center;
	background: #fff;
	border-radius: 2rem;
}
#snj-thanks h3 {
	color: var(--color-orange);
	margin-bottom: 2rem;
	font-size: 1.2rem;
}
#snj-thanks p {
	font-size: 0.9rem;
}