html {
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: scrollbar;
}

html , html a , body { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
:target { scroll-margin-top: 100px; }

html { -webkit-tap-highlight-color: transparent; }

body {
	font-size: 0.95rem;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	color: #333333;
	line-height: 1.6;
	background: #F2F8F9;
}


.fontg1 { font-family: 'Noto Sans JP', sans-serif!important; }
.fontg2 { font-family: 'Noto Serif JP', serif!important; }
.fontg3 { font-family: 'Shippori Mincho', serif!important; }
.fontg4 { font-family: "Outfit", sans-serif!important; }
.fontg5 { font-family: "Oooh Baby", cursive!important; }
.font-m { font-family: 'Zen Old Mincho', serif!important; }
.font-zm { font-family: 'Zen Maru Gothic', sans-serif!important; }
.font-zk { font-family: 'Zen Kaku Gothic New', sans-serif!important; }

.imgc { display: block; margin: auto; }
.imgl { margin-right: 10px; float: left; }
.imgr { margin-left: 10px; float: right; }


/* Typography */

h1 {
	margin:0;
	padding:0;
	font-size:10px;
	text-align:left;
}

h2, h3, h4, h5, h6 {
	font-weight: 400;
	font-family: Montserrat, sans-serif;
	line-height: 1.2;
	color: #242424;
	margin-top: 0;
	margin-bottom: .5rem;
}

h2,
h3,
h4,
h5,
h6 { margin-bottom: 0.75rem; }

h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: #242424;
	transition-duration: 200ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

h2 a:focus,
h2 a:hover,
h3 a:focus,
h3 a:hover,
h4 a:focus,
h4 a:hover,
h5 a:focus,
h5 a:hover,
h6 a:focus,
h6 a:hover {
	color: #a79576;
	transition-duration: 200ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

em,
li {
	font-size: 0.95rem!important;
	font-weight: 500;
	color: #424242;
}

em > a,
li > a {
	color: #424242;
}

em > a:hover,
li > a:hover {
	color: #a79576;
}

small {
	color: #656565;
}

label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #242424;
	margin-bottom: .25rem;
}

i { line-height: 1; }
img { max-width: 100%; height: auto; }

/* Paragraph */

p {
	font-size: 0.95rem;
	font-weight: 500;
	color: #333;
	line-height: 2;
	margin-top: 0;
	margin-bottom: 1rem;
}
@media screen and (max-width: 1024px) {
li , p { font-size: 0.885rem; }
}

/* Links */

a {
	color: #333;
	text-decoration: none;
}

a:focus, a:hover {
	color: #584034;
	text-decoration: none;
}

a:focus { outline: none; }

/*----------------------------------
  Selection
------------------------------------*/

::selection {
	color: #fff;
	background: #a79576;
	text-shadow: none;
}

::-webkit-selection {
	color: #fff;
	background: #a79576;
	text-shadow: none;
}

:active,
:focus { outline: none; }

/*----------------------------------
  Button
------------------------------------*/

.s-btn {
	display: block;
	text-align: center;
	vertical-align: middle;
	border: none;
	white-space: nowrap;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.s-btn:focus , .s-btn:hover {
	text-decoration: none;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.s-btn.focus { text-decoration: none; }

.s-btn:active, .s-btn.active {
	background-image: none;
	outline: 0;
}

.s-btn.disabled, .s-btn:disabled,
fieldset[disabled] .s-btn {
	cursor: not-allowed;
	opacity: .65;
}

.s-btn__element--left, .s-btn__element--right {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

/* Sizes
------------------------------ */
.s-btn--xs {
	font-size: 0.75rem;
	font-weight: 400;
	padding: 0.5rem 1.25rem;
}

.s-btn--sm {
	font-size: 0.875rem;
	font-weight: 400;
	padding: 0.75rem 1.25rem;
}

.s-btn--md {
	font-size: 0.8125rem;
	font-weight: 400;
	padding: 1rem 2.5rem;
}

.s-btn-icon--md {
	font-size: 1rem;
	padding: 0.9375rem 1.5625rem 0.75rem;
}

/* Styles
------------------------------ */

.s-btn--dark-bg {
	color: #fff;
	background: #86807b;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: #86807b;
}

.s-btn--dark-bg:focus , .s-btn--dark-bg:hover {
	color: #333;
	background: #f4e126;
	border-color: #f4e126;
}
.s-btn--dark-bg2 {
	color: #fff!important;
	background: #7ec9c1;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: #7ec9c1;
}

.s-btn--dark-bg2:focus , .s-btn--dark-bg2:hover {
	color: #666!important;
	background: #f3f3f3;
	border-color: #f3f3f3;
}

.s-btn--dark-brd {
	color: #222324;
	background: transparent;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: #222324;
}

.s-btn--dark-brd:focus , .s-btn--dark-brd:hover {
	color: #fff;
	background: #222324;
	border-color: #222324;
}

.s-btn--primary-bg {
	color: #3D3D3D;
	background: #f4e126;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: #f4e126;
}

.s-btn--primary-bg:focus , .s-btn--primary-bg:hover {
	color: #fff;
	background: #86807b;
	border-color: #86807b;
}

/*----------------------------------
  Header
------------------------------------*/

header {
	position: fixed;
	width: 100%;
	z-index: 999; 
	background: rgba(242,248,249,0.90); 
}
header .row { margin: 0!important; }

@media only screen and (max-width: 1200px) {
header { height: 66px!important; }
}

/*----------------------------------
  Footer
------------------------------------*/

.logo-w { width: 90%; }
@media only screen and (max-width: 990px) {
.logo-w { width: 65%; }
}
@media only screen and (max-width: 480px) {
.logo-w { width: 80%; }
}

#footel {
	position: relative;
	padding:10px 0;
	margin:0;
	width:100%;
	font-weight:normal;
    background-color: #CBC9D5;
}

.padding-t-2-xs { padding-top: 0.125rem !important; }

@media only screen and (max-width:480px){
#footel {
	z-index: 9999;
	position: fixed;
    bottom:0;
	padding:0;
}
}


.time {
	width: 100%;
	margin: 0 auto 10px;
}
.time th {
	padding:10px 4px;
	word-break: break-all;
	font-weight: 600!important;
	text-align: center;
	white-space: nowrap;
	font-size: 15px!important;
	color:#fff;
	background: #92c6cf;
}
.time td {
	padding:10px 4px;
	word-break: break-all;
	font-weight: 600!important;
	text-align: center;
	font-size: 14px!important;
	border-bottom: 1px solid #DFE0E4;
	color: #555;
	background: #ffffff;
}

@media screen and (max-width:480px){
.time td , .time th { font-size: 14px!important; }
}

/*----------------------------------
  Back To Top
------------------------------------*/

.s-back-to-top {
	position: fixed;
	z-index: 9999;
	right: 0.5rem;
	bottom: 0.5rem;
	display: block;
	width: 3rem;
	height: 3rem;
	background: #7ec9c1;
	text-align: center;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.s-back-to-top:before {
	display: block;
	font-size: 0.75rem;
	font-style: normal;
	font-family: themify;
	color: #fff!important;
	line-height: 3rem;
	content: "\e627";
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.s-back-to-top:hover {
  background: #92c6cf;
}

.s-back-to-top:hover:before {
  color: #A28459;
}

.s-back-to-top:focus, .s-back-to-top:hover {
  text-decoration: none;
}

@media (max-width: 480px) {
.s-back-to-top {
	bottom: 70px;
	opacity: 1!important;
	}
.s-back-to-top:before {
	position: absolute;
  display: block;
  font-size: 0.75rem;
  font-style: normal;
  font-family: themify;
  color: #fff;
  line-height: 0;
  content: "\e627";
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
}

/* The button becomes visible */
.s-back-to-top.-is-visible {
  bottom: 5.125rem;
  opacity: .8;
}

.s-back-to-top.-is-visible:hover {
  opacity: 1;
}

/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
.s-back-to-top.-zoom-out {
  opacity: .6;
}

/*----------------------------------
  aisis
------------------------------------*/

hr { border-top: 1px solid #ccc;  border-bottom: 2px solid #fff; }

.marker { background: linear-gradient(transparent 80%, rgba(247,235,125,0.5) 80%); }
.marker2 { background:linear-gradient(transparent 60%, #FFA53A 60%); }

.txtbox { padding: 20px; }
@media screen and (max-width:768px) {
.txtbox { padding: 15px; }
}


.disc-cus , .disc-cus2 {
	list-style: none!important;
	padding: 0 ;
	margin: 0 auto;
}
.disc-cus li , .disc-cus2 li {
	position: relative;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 14px;
	padding: 0 0 0 20px;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0;
}
	
.disc-cus li::before , .disc-cus2 li::before {
    position:  absolute; 
	content:  "";    
    width:  7px;               
    height:  7px;
	left:2px;
    top: 10px;   
    border-radius:  50%;        
}

.disc-cus li::before { background-color: #CBC9D5; }
.disc-cus2 li::before { background-color: #92c6cf; }

@media screen and (max-width: 480px) {
ul.disc-cus li , ul.disc-cus2 li { font-size: 12px; }
}

.lidisc-in { padding: 0 0 0 22px; margin: 0;}
.lidisc-in li { 
	list-style: disc;
	margin: 0 0 3px; 
	color:#444; 
	font-weight: 500; 
	font-size: 13px;	
	font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 1200px) {
.lidisc li , .lidisc-in li , .disc li { font-size: 12px; }
.lidisc-in { padding: 0 0 0 16px;}
}

.flbox {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flend { align-self: flex-end; }
.flcenter { align-self: center; }

.tshadow { text-shadow: -3px -3px 10px rgba(255, 255, 255, 1), 3px 3px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1); }
.s_txtshadow { text-shadow: 0px 0px 15px rgba(255, 255, 255, 1); }

.hover-o:hover {
	opacity: 0.7;
	transition: 0.3s;
}

.tel-color { color: #666; }
.tel-color:hover { color: #c4c9cd; transition: 0.3s; }


/*----------------------------------
  zoom slider
------------------------------------*/

.main-visual { 
	overflow: hidden;
	width: 90%;
	min-height: 820px;
	position: relative; 
	margin: 0 auto;
	z-index: 1;
}
@media screen and (max-width:1299px){
.main-visual { min-height: 500px; }
.main-visual::before {
	width: 97%;
	height: 96%;
}
}

@media screen and (max-width:480px){
.main-visual::before {
	width: 95%;
	height: 97%;
}
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: zoomSlide 15s linear infinite;
}

.slide-1 { background-image: url("../imgs/s1.webp"); }
.slide-2 { background-image: url("../imgs/s2.webp"); animation-delay: 5s; }
.slide-3 { background-image: url("../imgs/s3.webp"); animation-delay: 10s; }

@media screen and (max-width:575px){
.slide-1 { background-image: url("../imgs/s1_sp.webp"); }
.slide-2 { background-image: url("../imgs/s2_sp.webp"); animation-delay: 5s; }
.slide-3 { background-image: url("../imgs/s3_sp.webp"); animation-delay: 10s; }
}

@keyframes zoomSlide {
0% { opacity: 0; transform: scale(1.1); }
5% { opacity: 1; }
33.33% { opacity: 1; }
38.33% { opacity: 0; transform: scale(1); }
100% { opacity: 0; }
}


.inner-content {
	width: 50%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}

@media screen and (max-width:580px){
.inner-content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(0%);
	padding: 30px 0 0 ;
}
.inner-content img { padding-bottom: 140px; }
.inner-content p { 
	text-shadow: 5px 0 10px rgba(255,255,255,1) , -5px 0 10px rgba(255,255,255,1) , 0 5px 10px rgba(255,255,255,1) , 0 -5px 10px rgba(255,255,255,1), 
			     5px 0 10px rgba(255,255,255,1) , -5px 0 10px rgba(255,255,255,1) , 0 5px 10px rgba(255,255,255,1) , 0 -5px 10px rgba(255,255,255,1)  ; }
}

.mainbg {
	background: url("../img/top/bg1.webp") repeat-y top left / 100% ;
	overflow: hidden;
}
@media screen and (max-width: 1024px) {
.mainbg {
	background: url("../img/top/bg1sp.webp") repeat-y top -60px left / 100%;
}
}

/*----------------------------------
  main
------------------------------------*/

.main { background: url("../img/top/main.webp") no-repeat top right -100px ; }

@media only screen and (max-width: 1600px) {
.main { background: url("../img/top/main.webp") no-repeat top 100px right / 55% ; }
}
@media only screen and (max-width: 991px) {
.main { background: url("../img/top/main.webp") no-repeat top 120px right / 70% ; }
}
@media only screen and (max-width: 480px) {
.main { background: url("../img/top/main.webp") no-repeat top 150px right / 100% ; }
}

/*----------------------------------
  case
------------------------------------*/

.step {
	display: block;
	font-weight: 600;
	color: #fff;
	padding: 5px 15px;
	text-align: center;
	border-radius: 5px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

table.case {
	margin:0 auto;
	width:100%;
    border-collapse:separate;
    border-spacing:5px;
	empty-cells:show;
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}
.case th {
	font-size:13px;
	letter-spacing:1px;
	padding:12px 10px;
	text-align: center;
	color:#4b4b4b;
	font-weight: 600;
}
.case td {
	font-size:13px;
	color:#4b4b4b;
	padding:12px 10px;
	font-weight: 500;
}
.case td ul li {
	font-size:12px!important;
	margin-bottom: 2px;
	color:#4b4b4b;
}
@media only screen and (max-width:1200px){
.case td , .case th { font-size: 13px; }
}
@media only screen and (max-width:580px){
.case td , .case th {
	width:100%;
	display:block;
	padding:10px;
}
}

.arrow {	position: relative; }
.arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -35px;
	margin-top: -12px;
	border: 13px solid transparent;
	border-left: 13px solid #f9c12f;
	z-index: 2;
	transform: translateY(-50%);
}

/*----------------------------------
  reserve
------------------------------------*/

.res {
	background:url("../img/top/bgres.webp") no-repeat center left / cover;
	padding: 0;
	position: relative;
}
@media only screen and (max-width: 480px) {
.res { background:url("../img/top/bgres.webp") no-repeat center left -150px / cover; }
}

.mainserv {
	padding: 30px 0;
	text-align: center;
	position: relative;
}
.mainserv-in {
	margin: 0;
	width: 100%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.mainserv::before {
	content: "";
	position: absolute;
	bottom:5px;
	right:5px ;
	border-bottom: 14px solid #fff;
	border-left: 14px solid transparent;
}
.mainserv::after {
	content: "";
	position: absolute;
	bottom:5px;
	right:5px;
	width: calc( 100% - 10px);
	height: calc( 100% - 10px);
	border: 1px solid #fff;
}
.mainserv:hover::after {
	content: "";
	position: absolute;
	bottom:0;
	right:0;
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	-webkit-transition: .3s ease-in-out;
	transition: .2s ease-in-out;
}

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

.flow {
	position: relative;
	overflow: hidden;
}
.flow::before {
	position: fixed;
	content: "";
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	background:url("../img/top/bg2.webp")no-repeat center center / cover ;
}

@media screen and (max-width: 480px) {
.flow::before {	background:url("../img/top/bg2sp.webp")no-repeat center center / cover ; }
}


.List-Item-Content {
	position: relative;
	align-items: center;
	z-index: 1;
}
@media screen and (max-width: 540px) {
.List-Item-Content { flex-wrap: wrap; }
}

.List-Item-Content .col-2 {
	position: relative;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index: 1;
}

.List-Item-Content .col-2::before {
	content: "";
	position: absolute;
	top: 50%!important;
	left: calc(50% - 22px);
	transform: translate(-50%,-50%);
	width: 2px;
	height: 100%;
	background: #92c6cf;
	z-index: -1;
}

.List-Item-Content-Number {
	position: relative;
	display: inline-block;
	padding: 10px 10px 30px;
	top: 0;
	right:calc( 50% - 22px);
	margin: auto;
	text-align: left;
	background: #92c6cf;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
}
@media screen and (max-width: 480px) {
.List-Item-Content-Number {
	right:calc( 50% - 9px);
	font-size: 20px;
}
.List-Item-Content .col-2::before {	left: calc(50% - 31px); }
}

/*----------------------------------
  price
------------------------------------*/

table.com {
	margin:0 auto;
	width:100%;
    border-collapse:separate;
    border-spacing:4px;
    empty-cells:show;
	font-weight: 500;
	letter-spacing: 0.0375em!important;
}
.com th {
	font-size: 14px;
	padding:15px 10px;
	text-align:center;
	color: #fff;
}
.com td {
	font-size: 14px;
	color: #333; 
	padding: 15px 10px;
	font-family: 'Noto Sans JP', sans-serif!important;
}
@media screen and (max-width:480px){
.com th , .com td {
	width: 100%;
	display: block;
	text-align:center;
}
}

/*----------------------------------
  reason
------------------------------------*/

.reason1,.reason2,.reason3,.reason4 {
	position: relative;
	z-index: 1!important;
}
.reason1::before,.reason2::before,.reason3::before,.reason4::before {
	position: absolute;
	content: "";
	width: 45vw;
	height: 90%;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	z-index: -1!important;
}

.reason1::before { background: url("../img/top/rea1.webp")no-repeat center center / cover ; }
.reason2::before { background: url("../img/top/rea2.webp")no-repeat center center / cover ; }
.reason3::before { background: url("../img/top/rea3.webp")no-repeat center center / cover ; }
.reason4::before { background: url("../img/top/rea4.webp")no-repeat center center / cover ; }

@media screen and (max-width: 480px) {
.reason1::before,.reason2::before,.reason3::before,.reason4::before { display: none; }
}
	
.reason-num {
	display: inline-block;
	text-align: center;
	padding: 10px 20px;
	margin: 0 20px 0 0;
	font-weight: 300;
	line-height: 1.2;
	font-size: 18px;
	color: #fff;
	font-family: "Outfit", sans-serif;
	border-radius: 5px;
	background-color: #92c6cf;
}
.reason-num span { font-size: 50px; }


@media screen and (max-width:1024px){
.reason-num {
	padding: 10px 15px;
	margin: 0 10px 0 0;
	font-size: 16px;
}
.reason-num span { font-size: 36px; }
}	

/*----------------------------------
  infinit slide
------------------------------------*/

.infiniteslide { 
	overflow: clip;
    width: 100%;
}

.infiniteslide ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
    animation: infinity-loop 80s linear infinite; 
}
.infiniteslide ul li {
    width: 300px; /* 画像の幅を変えたら下の移動距離も変える */
    flex-shrink: 0;
}

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

@keyframes infinity-loop {
0% { transform: translateX(0); }
100% { transform: translateX(-3500px); /* 画像の幅 × 枚数分 = -px */ }
}

/*----------------------------------
  doc
------------------------------------*/


/*----------------------------------
  st stf
------------------------------------*/

.st1 {
	position: relative;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	text-align: center;
	line-height: 1.5;
	z-index: 1;
}

.st1::after {
	content: attr(data-en);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 150px;
	font-weight: 500;
	color:#7ec9c1;
	opacity: 0.25;
	white-space: nowrap;              /* 改行防止 */
	font-family: "Oooh Baby", cursive!important;
	z-index: -1;  
}

@media only screen and (max-width: 1400px) {
.st1::after { font-size: 120px; }        
}

@media only screen and (max-width: 991px) {
.st1::after { font-size: 80px; }        
}


.st2 {
	position: relative;
	padding: .5em .5em .5em 0.8em;
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 1px solid #7ec9c1;
}
 
.st2::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:2.3em;
	background-color: #7ec9c1;
}


.st3 {
    position: relative;
    text-align: center;
    color: #fff;
    letter-spacing:0.1em;
	padding:15px;
}

.st3::before {
	position: absolute;
	content: "";
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: #fff solid 1px;
	top: 0;
	bottom:0;
	right: 0;
	left: 0;
	margin: auto ;
}


.st4 {
	position: relative;
	color: #fff;
	padding:0.4em 0.2em 0.4em 1.4em;
	font-weight: 500;
	background: #92c6cf;
	letter-spacing: .05em;
}
.st4::after {
	position: absolute;
	top: 50%;
	left:0;
	transform:translateY(-50%);
	content: '';
	width: 1em;
	height:2px;
	background-color:#fff;
}

/*---------- stf ----------*/

.stf , .stf-2 {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 10px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	font-weight: bold;
	margin-bottom: 1em;
}
.stf::before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1rem 0.8rem 1rem 0.8rem;
	position: absolute;
	bottom:-26px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
}
.stf-2::before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 26px 23px 26px 23px;
	position: absolute;
	bottom:-46px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
}

.stfc1{background-color: #f39800;}
.stfc1::before{border-color:  #f39800 transparent transparent transparent;}
.stfc2{background-color: #8B8170;}
.stfc2::before{border-color:  #8B8170 transparent transparent transparent;}
.stfc3{background-color: #23b6db;}
.stfc3::before{border-color:  #23b6db transparent transparent transparent;}
.stfc4{background-color: #fff;}
.stfc4::before{border-color:  #fff transparent transparent transparent;}

/*----------------------------------
  other
------------------------------------*/

.flowrec,.flowrec-2{
	background: #fff;
	padding:15px 15px 5px ;
	position: relative;
	width: 100%;
	
}
.flowrec p,.flowrec-2 p{
	font-size: 15px;	
}
.flowrec::before {
	content: "";
	position: absolute;
	top: 45%;
	right: -35px;
	margin-top: -12px;
	border: 20px solid transparent;
	border-left: 20px solid #fff;
	z-index: 2;
}
@media screen and (max-width: 1023px) {
.flowrec::before {
	top: auto;
	right: auto;
	margin-top: auto;	
	bottom: -40px;
	left: 48%;
	margin-left: -15px;
	border: 20px solid transparent;
	border-top: 20px solid #FFF;
}
}

.step{
	display: block;
	font-weight: 500;
	background-color: #7ec9c1;
	color: #fff;
	letter-spacing: .1275rem!important;
	padding: .2em .5em;
	text-align: center;
	border-radius: 50px;
}

.cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto 10px;
	color: #ffffff;
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 2;
	position: relative;
	display: block;
	padding: 10px 48px 10px 15px;
	cursor: pointer;
	margin: 0 0 1px 0;
}
.cp_actab .cp_actab-content {
margin:0!important;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #333333;
	background: #FFFFFF;
}
.cp_actab .cp_actab-content p {
	margin: 1em;
}
.cp_actab input:checked ~ .cp_actab-content {

	max-height: 90em;
}
@media screen and (max-width: 768px) {
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 250em;
}
}
.cp_actab label::after {
	line-height: 3.3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;


	width: 4em;
	height: 4em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(45deg);}