@charset "utf-8";

/*===============================================*/

/*  common.css */

/*===============================================*/

 

/*//////////////////////////////////

reset
///////////////////////////////////*/

/*color  ------------------*/

:root {
	--clr-main: #1D1916;	
	--clr-sub:#FF772F;
	--clr-black:#261F1C;
	--clr-wh: #fff;
	--clr-gry: #41332E;
  --clr-lightOrng: #FFEAE4;
}

 

/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------*/
@font-face {font-family: ftH; src: url('../fonts/Roboto-Medium.ttf');}
@font-face {font-family: ftI; src: url('../fonts/Roboto-MediumItalic.ttf');}
@font-face {font-family: din; src: url('../fonts/dincond-bold.otf');}
@font-face {font-family: bhg; src: url('../fonts/Bahagia.ttf');}



.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}


@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?6ywhrr');
  src:  url('../fonts/icomoon.eot?6ywhrr#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6ywhrr') format('truetype'),
    url('../fonts/icomoon.woff?6ywhrr') format('woff'),
    url('../fonts/icomoon.svg?6ywhrr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-x:before {content: "\e90c";}
.icon-back:before {content: "\e90a";}
.icon-hide:before {content: "\e90b";}
.icon-content-copy:before {content: "\e905";}
.icon-view:before {content: "\e900";}
.icon-link:before {content: "\e901";}
.icon-line:before {content: "\e009";}
.icon-search:before {content: "\e902";}
.icon-mail:before {content: "\e903";}
.icon-mail2:before {content: "\e904";}
.icon-tel:before {content: "\e907";}
.icon-home:before {content: "\e908";}
.icon-youtube:before {content: "\e909";}
.icon-mobile:before {content: "\e958";}
.icon-heart1:before {content: "\e9db";}
.icon-facebook:before {content: "\ea90";}
.icon-instagram:before {content: "\ea92";}
.icon-pdf:before {content: "\e906";}
.icon-printer:before {content: "\e954";}
.icon-heart:before {content: "\e9da";}


.icon-link:before {
    font-size: 1.2rem;
    position: absolute;
	top:2px;
    right:2px;
    content: "\e901"; }

.icon-mail:before {
	margin: 0;
	content: "\e903";
	font-size: 2rem;
	position: relative;
	top:3px;
	margin-right:5px;}

/**/
.icon-Circle:before {
	content:" "; 
	width: 23px;
	height: 15px;
	content:url("../images/service/circle.png"); 
 
	position: absolute;
	top:-10px;
	left:50%;
	transform: translateX(-50%);}

/**/
.icon-Circle2:before {content:url("../images/common/icon_circle2.svg"); position: absolute; top: 50%;transform: translateY(-50%);  right:16px; }


.icon-SubTtl:before {
	content:" "; 
	display: inline-block;
	width: 8px;
	height: 8px;
	padding-right: 14px;
	background: url(../images/common/icon_subttl.svg) no-repeat ;
	background-size: contain;
	
	position: relative; 
	top: 0px; }

.icon-SubTtl-wh:before {
	content:" "; 
	display: inline-block;
	width: 8px;
	height: 8px;
	padding-right: 14px;
	background: url(../images/common/icon_subttl-wh.svg) no-repeat ;
	background-size: contain;
	
	position: relative; 
	top: 0px; }

.icon-Check:before {
	content:" "; 
	display: inline-block;
	width: 24px;
	height: 24px;
	padding-right: 36px;
	background: url(../images/service/icon_check.svg) no-repeat ;
	background-size: contain;
	
	position: relative; 
	top: 3px; }





.icon-Ttl-wh:before {
	content:" "; 
	display: inline-block;
	width: 18px;
	height: 20px;
	padding-right: 10px;
	background: url(../images/common/ttl_icon-wh.png) no-repeat ;
	background-size: contain;
	
	position: relative; 
	top: 0px; }


/**/
@media screen and (max-width: 768px){
.icon-columun:before {width: 40px;height: 40px;}
.icon-mov:before {width: 40px;height: 40px;}
	
.icon-Ttl:before {width: 15px;height: 17px;padding-right: 17px;top: 3px; }
.icon-Ttl-wh:before {width: 15px;height: 17px;padding-right: 17px;top: 3px; }
}

/**/






/*site main rules
---------------------------------------------------------------------*/

/*bgcolor  ------------------*/
.bgcOrng{background-color:#FF782F;}
.bgcOrng2{background-color:#FF4400;}
.bgcBlack{background-color:#261F1C;}
.bgcGry{background-color:#41332E;}
.bgcWh{background-color:#fff;}
.bgcLightGry{background-color:#F2F2F2;}
.bgcLightOrng{background-color:#FFEAE4;}

.bgcGld{background-color:#C5B47A;}
.bgcSlv{background-color:#929292;}
.bgcDo{background-color:#AA8066;}
.bgcOther{background-color:#363636;}

/**/
.fcWh{color: var(--clr-wh);}



/*テキストのハイライトカラーを変える  ------------------*/
::selection{ /* Safari and Opera */background:#FFEAE4; color:#261F1C;}
::-moz-selection{ /* Firefox */background:#FFEAE4; color:#261F1C;}

/*link  ------------------*/
a:link {color: #261F1C;text-decoration: none;}
a:visited {color: #261F1C;text-decoration: none;}
a:hover {color: #261F1C;text-decoration: none;}
a:active {text-decoration: none;}





/* reset
---------------------------------------------------------------------*/
html{font-size: 62.5%;}
body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-size:1.6rem; /* 16px*/
	line-height: 1.8;
	color: #1b1b1b;
	background-color: #FFEAE4;
	font-weight: 500;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	-webkit-text-size-adjust: 100%; }


/*responsive FONTS ------------------*/

h2 {
    font-size: clamp(2.4rem,3.4vw,4.8rem);
	line-height: 1.8;
	font-weight:600;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

h3 {
    font-size: clamp(1.6rem,2.4vw,2.4rem);
	line-height: 1.8;
	font-weight:600;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

h4 {
    font-size: clamp(1.6rem,2vw,2rem);
	line-height: 1.8;
	font-weight:600;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

p {
    font-size: clamp(1.5rem,1.6vw,1.6rem);
	line-height: 1.8;
	font-weight:500;
	letter-spacing: 0.01em;
	font-feature-settings : "palt"; }

.tx-80 { font-size: clamp(3rem, 5vw, 8rem); line-height: 1.2; font-weight: 800; letter-spacing: 0.000001em; }

.tx-64 { font-size: clamp(3rem, 6.4vw, 6.4rem); line-height: 1.4; font-weight: 800; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-60 { font-size: clamp(3rem, 4.5vw, 6rem); line-height: 1.4; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-56 { font-size: clamp(2.4rem, 5.6vw, 5.6rem); line-height: 1.6; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-48 { font-size: clamp(2.4rem, 3.4vw, 4.8rem); line-height: 1.6; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-44 { font-size: clamp(2rem, 3vw, 4.4rem); line-height: 1.6; font-weight: 800; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-40 { font-size: clamp(2.4rem, 3vw, 4rem); line-height: 1.6; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-36 { font-size: clamp(2.4rem, 2.6vw, 3.6rem); line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-32 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-28 { font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-26 { font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-24 { font-size: clamp(1.6rem, 1.5vw, 2.4rem); line-height: 1.5; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-22 { font-size: clamp(1.6rem, 1.5vw, 2.2rem); line-height: 1.8; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-20 { font-size: clamp(1.6rem, 1.7vw, 2rem); line-height: 1.8; font-weight: 700; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-18 { font-size: clamp(1.6rem, 1.7vw, 1.8rem); line-height: 1.8; font-weight: 500; letter-spacing: 0.05em; font-feature-settings: "palt"; }

.tx-16 { font-size: clamp(1.4rem, 1.5vw, 1.6rem); line-height: 1.8; font-weight: 500; letter-spacing: 0.04em; font-feature-settings: "palt"; }

.tx-14 { font-size: 1.4rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-12 { font-size: 1.2rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.01em; font-feature-settings: "palt"; }

.tx-10 { font-size: 1rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.01em; font-feature-settings: "palt"; }

/**/
.mgn-top48{margin-top: 48px!important;}
.mgn-top40{margin-top: 40px!important;}
.mgn-top32{margin-top: 32px!important;}
.mgn-top24{margin-top: 24px!important;}
.mgn-top20{margin-top: 20px!important;}
.mgn-top16{margin-top: 16px!important;}
.mgn-top10{margin-top: 10px!important;}
.mgn-top8{margin-top: 8px!important;}
.mgn-top4{margin-top: 4px!important;}

.mgn-btm48{margin-bottom: 48px!important;}
.mgn-btm40{margin-bottom: 40px!important;}
.mgn-btm32{margin-bottom: 32px!important;}
.mgn-btm24{margin-bottom: 24px!important;}
.mgn-btm20{margin-bottom: 20px!important;}
.mgn-btm16{margin-bottom: 16px!important;}
.mgn-btm10{margin-bottom: 10px!important;}
.mgn-btm8{margin-bottom: 8px!important;}
.mgn-btm4{margin-bottom: 4px!important;}

/**/
.pdn-top48{padding-top: 64px!important;}
.pdn-top40{padding-top: 40px!important;}
.pdn-top32{padding-top: 32px!important;}
.pdn-top24{padding-top: 24px!important;}
.pdn-top20{padding-top: 20px!important;}
.pdn-top16{padding-top: 16px!important;}
.pdn-top10{padding-top: 10px!important;}
.pdn-top8{padding-top: 8px!important;}
.pdn-top4{padding-top: 4px!important;}

.pdn-btm48{padding-bottom: 48px!important;}
.pdn-btm40{padding-bottom: 40px!important;}
.pdn-btm32{padding-bottom: 32px!important;}
.pdn-btm24{padding-bottom: 24px!important;}
.pdn-btm20{padding-bottom: 20px!important;}
.pdn-btm16{padding-bottom: 16px!important;}
.pdn-btm10{padding-bottom: 10px!important;}
.pdn-btm8{padding-bottom: 8px!important;}
.pdn-btm4{padding-bottom: 4px!important;}

@media screen and (max-width: 768px) {
.mgn-top48{margin-top: 24px!important;}
.mgn-top40{margin-top: 20px!important;}
.mgn-top32{margin-top: 16px!important;}
.mgn-top24{margin-top: 12px!important;}
.mgn-top20{margin-top: 10px!important;}
.mgn-top16{margin-top: 16px!important;}
.mgn-top10{margin-top: 10px!important;}
.mgn-top8{margin-top: 8px!important;}
.mgn-top4{margin-top: 4px!important;}

.mgn-btm48{margin-bottom: 48px!important;}
.mgn-btm40{margin-bottom: 40px!important;}
.mgn-btm32{margin-bottom: 32px!important;}
.mgn-btm24{margin-bottom: 24px!important;}
.mgn-btm20{margin-bottom: 20px!important;}
.mgn-btm16{margin-bottom: 16px!important;}
.mgn-btm10{margin-bottom: 10px!important;}
.mgn-btm8{margin-bottom: 8px!important;}
.mgn-btm4{margin-bottom: 4px!important;}

/**/
.pdn-top48{padding-top: 64px!important;}
.pdn-top40{padding-top: 20px!important;}
.pdn-top32{padding-top: 16px!important;}
.pdn-top24{padding-top: 12px!important;}
.pdn-top20{padding-top: 10px!important;}
.pdn-top16{padding-top: 16px!important;}
.pdn-top10{padding-top: 10px!important;}
.pdn-top8{padding-top: 8px!important;}
.pdn-top4{padding-top: 4px!important;}

.pdn-btm48{padding-bottom: 48px!important;}
.pdn-btm40{padding-bottom: 40px!important;}
.pdn-btm32{padding-bottom: 32px!important;}
.pdn-btm24{padding-bottom: 24px!important;}
.pdn-btm20{padding-bottom: 20px!important;}
.pdn-btm16{padding-bottom: 16px!important;}
.pdn-btm10{padding-bottom: 10px!important;}
.pdn-btm8{padding-bottom: 8px!important;}
.pdn-btm4{padding-bottom: 4px!important;}
}


html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0; }

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	list-style-type: none; }


/* Layout
 * *********************************** */
article,
aside,
footer,
header,
nav,
section,
main {display: block;}
 
* {box-sizing: border-box;}
 
*:before,
*:after {box-sizing: inherit;}

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea { font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img {border:0;vertical-align: bottom;}
img {max-width: 100%; height: auto; width /***/:auto;}

/* hr 要素は不可視で使う */
hr { display: none; }

/* br 要素のレスポンシブ化 */
/* none */
@media screen and (max-width: 768px) { .pc-Only { display: none; } }
@media screen and (min-width: 768px) { .sp-Only { display: none; } }

/* テキストインデント */
.txtindent { padding-left: 1em; text-indent: -1em; }

/*float
----------------------------------*/
.left { float: left; }
.right { float: right; }
#left { float: left; }
#right { float: right; }

/*txt-align
----------------------------------*/
.txt-al { text-align: left; }
.txt-ar { text-align: right; }

@media screen and (max-width: 768px) { .txt-ar { text-align: left; } }

/*underLine*/
.underLine{background: linear-gradient(transparent 60%, #8dffff 60%); }

/* テキストインデント */
.txtindent{padding-left:1em; text-indent:-1em;}

/* order */
.order1{order: 1;}
.order2{order: 2;}




/*//////////////////////////////////

module
///////////////////////////////////*/


/*background color
---------------------------*/
.bg-Mv{
	background: url("../images/common/bg_mv.png") no-repeat center min(120px,14vw);
	}

.bg-Blk{
	background: url("../images/top/bg_blk.png") repeat left top; }

.bg-Service1{
	background: url("../images/service/bg-Service1.png") no-repeat center center; 
	background-size: cover; }

.bg-Service-Mv{
	background: url("../images/service/bg-Service_mv.png") no-repeat center center; 
	background-size: cover; }



/**/				
.bg-fkds1:after{
		content:" "; 
		display: block;
		width: 88px;
		height: 88px;
		background: url("../images/common/bg-fkds1.png") no-repeat ;
		background-size: contain;
		overflow: hidden;

		position: absolute; 
		top:0px;
		right:88px;}

.bg-fkds2:after{
		content:" "; 
		display: block;
		width: 88px;
		height: 88px;
		background: url("../images/common/bg-fkds2.png") no-repeat ;
		background-size: contain;
		overflow: hidden;

		position: absolute; 
		top:0px;
		right:88px;}

@media screen and (max-width: 959px) { 
.bg-fkds1:after{
		content:" "; 
		display: block;
		width: 32px;
		height: 32px;
		background: url("../images/common/bg-fkds1.png") no-repeat ;
		background-size: contain;
		overflow: hidden;

		position: absolute; 
		top:0px;
		right:32px;}

.bg-fkds2:after{
		content:" "; 
		display: block;
		width: 32px;
		height: 32px;
		background: url("../images/common/bg-fkds2.png") no-repeat ;
		background-size: contain;
		overflow: hidden;

		position: absolute; 
		top:0px;
		right:32px;}

 }



/*scrollanimation------------*/
.scrl {
	padding:0 0 0 0;
	width:200px;
	height:200px;
	position: absolute;
	bottom: 50px;
	right: 4rem;
	z-index: 101; }


/**/
.scrl figure{animation: spin 14s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); } }

.scrl a { }

.scrl a .anm-line {
	position: absolute;
	top:25%;
	left: 50%;
	content: '';
	width: 1px;
	height: 100px;
	margin-left: -1px;
	background-color: #fff; }

.scrl a .anm-circle {
	position: absolute;
	z-index: 10;
	top: 25%;
	left: 50%;
	content: '';
	width: 13px;
	height: 13px;
	border-radius: 50px;
	margin-left: -7px;
	background-color: #fff;
	text-shadow: 1px 1px 3px #000; 
	animation: sdb 2s infinite;
	box-sizing: border-box; }

@keyframes sdb {
	0% {transform: translate(0, 0); opacity: 1;}
	70% { opacity: 1;}
	100% {transform: translate(0, 90px) scale(0.5); opacity: 0.1;}}





/*- @media 1110px -*/
@media screen and (max-width: 959px){.scrl {display: none;} }
/**/



/*inner
---------------------------*/
.inner{
	position: relative;
	margin:0 auto ;
	padding:10rem 2rem ;

	width: min(100%, 1240px); }


.inner-top{
	position: relative;
	margin:0 auto ;
	padding:10rem 2rem 0rem;
	/*max-width: 1160px;*/

	width: min(100%, 1240px); }

.inner-rec{
	position: relative;
	margin:0 auto ;
	padding:2rem 2rem 0rem;
	/*max-width: 1160px;*/

	width: min(100%, 1240px); }

.inner-btm{
	position: relative;
	margin:0 auto ;
	padding:0rem 2rem 10rem;
	/*max-width: 1160px;*/

	width: min(100%, 1240px); }

.inner-test{
	position: relative;
	margin:7rem auto ;
	padding:0 2rem ;

	width: min(100%, 1240px); }

.inner-Service-Pdng{padding:7rem 0 0; }


.inner-404{
	position: relative;
	margin:0 auto ;
	padding:20rem 2rem 10rem;
	/*max-width: 1160px;*/

	width: min(100%, 1240px); }


@media screen and (max-width: 959px){
.inner{padding:4rem 1.6rem ; }
.inner-top{padding:4rem 1.6rem 0; }
.inner-rec{padding:2rem 1.6rem 0; }
.inner-btm{padding:0rem 1.6rem 4rem; }
.inner-bgc{padding:4rem 1.6rem ; }
.inner-test{margin:3rem auto ; padding:0rem 1.6rem ; }
}



/*flex-box
---------------------------*/
.flex-Sb{display: flex; flex-wrap: wrap; justify-content: space-between; }
.flex-Center{display: flex; flex-wrap: wrap; justify-content:space-around; }
.flex-St{display: flex; flex-wrap: wrap; justify-content:flex-start; }
.flex-End{display: flex; flex-wrap: wrap; justify-content:flex-end; }
.flex-Nomal{display: flex; flex-wrap: wrap; }

.reverce{flex-direction: row-reverse;}



/*//////////////////////////////////

 animation
///////////////////////////////////*/


/*LOADING
---------------------------------*/
/* 全体 */
.content {
  opacity: 0;
  pointer-events: none;
}


.move .animation-bg {
  background: var(--clr-sub);
  display: block;
  content: "";
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.btt .animation-bg {
  animation-name: PageAnime-btt;
}
@keyframes PageAnime-btt {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}



body.move .content {
  animation-name: PageAnime-content;
  animation-duration: 0.55s;
  animation-delay: 0.55s;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: auto;
}
.animation .content {
  opacity: 1;
  pointer-events: auto;
}
@keyframes PageAnime-content {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}




/*要素出現
---------------------------------*/

.heading-H2-anm-sub{}

.text-item {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}

.heading-H2-anm-sub .text-item {
  transform: translateX(-101%);
}
.heading-H2-anm-sub .is-active .text-item {
  transform: translateX(0);
  transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 0.5s;
}
.heading-H2-anm-sub .is-active .text-item:nth-child(1) {
  transition-delay: 0s;
}
.heading-H2-anm-sub .is-active .text-item:nth-child(1) > span {
  transition-delay: 0s;
}
.text-item > span {
  display: block;
}
.heading-H2-anm-sub .text-item > span {
  transform: translateX(101%);
}
.heading-H2-anm-sub .is-active .text-item > span {
  transform: translateX(0);
  transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 0.5s;
}

.heading-H2-anm-sub .is-active .text-item span{animation: ccc 0.6s ease 0s both; }

@keyframes ccc {
	0% {color:var(--clr-sub);}
    80% {color:var(--clr-sub);}
	100% {color:var(--clr-wh);opacity: 1;}
}

/*--*/
.heading-H2-anm-sub2 .text-item {
  transform: translateX(-101%);
}
.heading-H2-anm-sub2 .is-active .text-item {
  transform: translateX(0);
  transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 0.5s;
}
.heading-H2-anm-sub2 .is-active .text-item:nth-child(1) {
  transition-delay: 0s;
}
.heading-H2-anm-sub2 .is-active .text-item:nth-child(1) > span {
  transition-delay: 0s;
}
.text-item > span {
  display: block;
}
.heading-H2-anm-sub2 .text-item > span {
  transform: translateX(101%);
}
.heading-H2-anm-sub2 .is-active .text-item > span {
  transform: translateX(0);
  transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 0.5s;
}

.heading-H2-anm-sub2 .is-active .text-item span{animation: aaa 0.6s ease 0s both; }

@keyframes aaa {
	0% {color:var(--clr-sub);}
    80% {color:var(--clr-sub);}
	100% {color:var(--clr-main);opacity: 1;}
}




/* ------ animation style ------ */

/* fade fadeInDown */
@keyframes u-fadeInDown {
	0% {transform: translate(0, -20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInDown span {
	opacity: 0;}

.u-fadeInDown.is-active span {
	opacity: 1;
    animation: u-fadeInDown 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInDown span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInDown span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInDown span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInDown span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInDown span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInDown span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInDown span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInDown span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInDown span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInDown span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInDown span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInDown span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInDown span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}


/* fade up Opening  ---------------*/
@keyframes u-fadeInUp2 {
	0% {transform: translate(0, 20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInUp2 span {
	opacity: 0;}

.u-fadeInUp2.is-active span {
	opacity: 1;
    animation: u-fadeInUp2 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInUp2 span:nth-child(1) {animation-delay: 2.1s; display:inline-block;}
.u-fadeInUp2 span:nth-child(2) {animation-delay: 2.15s;display:inline-block;}
.u-fadeInUp2 span:nth-child(3) {animation-delay: 2.2s;display:inline-block;}
.u-fadeInUp2 span:nth-child(4) {animation-delay: 2.25s;display:inline-block;}
.u-fadeInUp2 span:nth-child(5) {animation-delay: 2.3s;display:inline-block;}
.u-fadeInUp2 span:nth-child(6) {animation-delay: 2.35s;display:inline-block;}
.u-fadeInUp2 span:nth-child(7) {animation-delay: 2.4s;display:inline-block;}
.u-fadeInUp2 span:nth-child(8) {animation-delay: 2.45s;display:inline-block;}
.u-fadeInUp2 span:nth-child(9) {animation-delay: 2.5s;display:inline-block;}
.u-fadeInUp2 span:nth-child(10) {animation-delay: 2.55s;display:inline-block;}
.u-fadeInUp2 span:nth-child(11) {animation-delay: 2.6s;display:inline-block;}
.u-fadeInUp2 span:nth-child(12) {animation-delay: 2.65s;display:inline-block;}
.u-fadeInUp2 span:nth-child(13) {animation-delay: 2.7s;display:inline-block;}


/* fade up  ---------------*/
@keyframes u-fadeInUp {
	0% {transform: translate(0, 20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInUp span {
	opacity: 0;}

.u-fadeInUp.is-active span {
	opacity: 1;
    animation: u-fadeInUp 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInUp span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInUp span:nth-child(2) {animation-delay: 0.15s;display:inline-block;}
.u-fadeInUp span:nth-child(3) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInUp span:nth-child(4) {animation-delay: 0.25s;display:inline-block;}
.u-fadeInUp span:nth-child(5) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInUp span:nth-child(6) {animation-delay: 0.35s;display:inline-block;}
.u-fadeInUp span:nth-child(7) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInUp span:nth-child(8) {animation-delay: 0.45s;display:inline-block;}
.u-fadeInUp span:nth-child(9) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInUp span:nth-child(10) {animation-delay: 0.55s;display:inline-block;}
.u-fadeInUp span:nth-child(11) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInUp span:nth-child(12) {animation-delay: 0.65s;display:inline-block;}
.u-fadeInUp span:nth-child(13) {animation-delay: 0.7s;display:inline-block;}


/* fade left  ---------------*/
@keyframes u-fadeInLeft {
	0% {transform: translate(-20px, 0) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInLeft span {
	opacity: 0;}

.u-fadeInLeft.is-active span {
	opacity: 1;
    animation: u-fadeInLeft 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInLeft span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInLeft span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInLeft span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInLeft span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInLeft span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInLeft span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInLeft span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInLeft span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInLeft span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInLeft span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInLeft span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInLeft span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInLeft span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}


/* fade right  ---------------*/
@keyframes u-fadeInRight {
	0% {transform: translate(20px, 0) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeInRight span {
	opacity: 0;}

.u-fadeInRight.is-active span {
	opacity: 1;
    animation: u-fadeInRight 0.5s cubic-bezier(.55,0,.1,1) both;}

.u-fadeInRight span:nth-child(1) {animation-delay: 0.1s; display:inline-block;}
.u-fadeInRight span:nth-child(2) {animation-delay: 0.2s;display:inline-block;}
.u-fadeInRight span:nth-child(3) {animation-delay: 0.3s;display:inline-block;}
.u-fadeInRight span:nth-child(4) {animation-delay: 0.4s;display:inline-block;}
.u-fadeInRight span:nth-child(5) {animation-delay: 0.5s;display:inline-block;}
.u-fadeInRight span:nth-child(6) {animation-delay: 0.6s;display:inline-block;}
.u-fadeInRight span:nth-child(7) {animation-delay: 0.7s;display:inline-block;}
.u-fadeInRight span:nth-child(8) {animation-delay: 0.8s;display:inline-block;}
.u-fadeInRight span:nth-child(9) {animation-delay: 0.9s;display:inline-block;}
.u-fadeInRight span:nth-child(10) {animation-delay: 1s;display:inline-block;}
.u-fadeInRight span:nth-child(11) {animation-delay: 1.1s;display:inline-block;}
.u-fadeInRight span:nth-child(12) {animation-delay: 1.2s;display:inline-block;}
.u-fadeInRight span:nth-child(13) {animation-delay: 1.3s;display:inline-block;}




/* カーテン背景色  ---------------*/
@keyframes u-bgL {
0% {transform-origin: left;transform: scaleX(0);}
50% {transform-origin: left;transform: scaleX(1);}
50.001% {transform-origin: right;}
100% {transform-origin: right;transform: scaleX(0);}
}

.u-bgL{
    position: relative;
	z-index: 2; }

.u-bgL::after{
    content: '';
    display: block;
    width: 100%;
	height: 100%;
	
    background-color: var(--clr-sub);
    position: absolute;
    top: 0;
    right: 0;
	animation: u-bgL 1s ease 1.5s both; }

/*.u-fadeInSlide2.is-active::after{ }*/




/* fade  ---------------*/
.u-fade {opacity: 0;}
.u-fade.is-active {
	opacity: 1;
    transition: all 0.5s 2s ; }


/* fadeUp ---------------*/
@keyframes u-fadeUp {
	0% {transform: translate(0, 20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeUp{opacity: 0;}

.u-fadeUp.is-active {
	opacity: 1;
    animation: u-fadeUp 0.5s cubic-bezier(.55,0,.1,1) 0.2s both; }


/* fadeDown ---------------*/
@keyframes u-fadeDown {
	0% {transform: translate(0, -20px) ; opacity: 0;}
	100% {transform: translate(0, 0) ; opacity: 1;}
}

.u-fadeDown{opacity: 0;}

.u-fadeDown.is-active {
	opacity: 1;
    animation: u-fadeDown 0.5s cubic-bezier(.55,0,.1,1) both; }



/* img slide ---------------*/
.u-fadeInSlide{
    position: relative;
	z-index: 2;
}

.u-fadeInSlide::after{
    content: '';
    display: block;
    width: 100%;
    transform: scaleX(1);
    transform-origin: 100% 0;
    height: 100%;
    background-color: var(--clr-wh);
    position: absolute;
    top: 0;
    right: 0;
}

.u-fadeInSlide.is-active::after{
    transition: all 0.5s 3s ;
    transform: scaleX(0);
}


/* single marker ---------------*/
.u-fadeInMarker {
    background: linear-gradient(to right, transparent 50%, rgba(255, 165, 0, 0.3) 50%);
    background-repeat: repeat-x;
    background-size: 200% .6em;
    background-position: 0 .6em;
    padding-bottom: .6em;
}

.u-fadeInMarker.is-active{
    transition: all 1.2s ease;
    background-position: -100% .6em;
}



/*delay-------------*/
.delay-05s.is-active {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.delay-06s.is-active {-webkit-animation-delay: 0.6s; animation-delay: 0.5s;}
.delay-07s.is-active {-webkit-animation-delay: 0.7s; animation-delay: 0.5s;}
.delay-08s.is-active {-webkit-animation-delay: 0.8s; animation-delay: 0.5s;}
.delay-09s.is-active {-webkit-animation-delay: 0.9s; animation-delay: 0.5s;}
.delay-1s.is-active {-webkit-animation-delay: 1s; animation-delay: 1s;}
.delay-11s.is-active {-webkit-animation-delay: 11s; animation-delay: 1.1s;}
.delay-12s.is-active {-webkit-animation-delay: 12s; animation-delay: 1.2s;}
.delay-13s.is-active {-webkit-animation-delay: 13s; animation-delay: 1.3s;}
.delay-14s.is-active {-webkit-animation-delay: 14s; animation-delay: 1.4s;}
.delay-15s.is-active {-webkit-animation-delay: 15s; animation-delay: 1.5s;}
.delay-16s.is-active {-webkit-animation-delay: 16s; animation-delay: 1.6s;}
.delay-17s.is-active {-webkit-animation-delay: 17s; animation-delay: 1.7s;}
.delay-18s.is-active {-webkit-animation-delay: 18s; animation-delay: 1.8s;}
.delay-19s.is-active {-webkit-animation-delay: 19s; animation-delay: 1.9s;}
.delay-2s.is-active {-webkit-animation-delay: 2s; animation-delay: 2s;}
.delay-21s.is-active {-webkit-animation-delay: 21s; animation-delay: 2.1s;}
.delay-22s.is-active {-webkit-animation-delay: 22s; animation-delay: 2.2s;}
.delay-23s.is-active {-webkit-animation-delay: 23s; animation-delay: 2.3s;}
.delay-24s.is-active {-webkit-animation-delay: 24s; animation-delay: 2.4s;}
.delay-25s.is-active {-webkit-animation-delay: 25s; animation-delay: 2.5s;}
.delay-26s.is-active {-webkit-animation-delay: 26s; animation-delay: 2.6s;}
.delay-27s.is-active {-webkit-animation-delay: 27s; animation-delay: 2.7s;}
.delay-28s.is-active {-webkit-animation-delay: 28s; animation-delay: 2.8s;}
.delay-29s.is-active {-webkit-animation-delay: 29s; animation-delay: 2.9s;}
.delay-3s.is-active {-webkit-animation-delay: 3s; animation-delay: 3s;}
.delay-31s.is-active {-webkit-animation-delay: 3.2s; animation-delay: 3.2s;}
.delay-35s.is-active {-webkit-animation-delay: 3.5s; animation-delay: 3.5s;}
.delay-4s.is-active {-webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
.delay-45s.is-active {-webkit-animation-delay: 4s; animation-delay: 4s;}
.delay-5s.is-active {-webkit-animation-delay: 5s; animation-delay: 5s;}
.delay-55s.is-active {-webkit-animation-delay: 5.5s; animation-delay: 5.5s;}
.delay-6s.is-active {-webkit-animation-delay: 6s; animation-delay: 6s;}
.delay-7s.is-active {-webkit-animation-delay: 7s; animation-delay: 7s;}
.delay-75s.is-active {-webkit-animation-delay: 7.7s; animation-delay: 7.7s;}
.delay-8s.is-active {-webkit-animation-delay: 8s; animation-delay: 8s;}
.delay-9s.is-active {-webkit-animation-delay: 9s; animation-delay: 9s;}
.delay-10s.is-active {-webkit-animation-delay: 10s; animation-delay: 10s;}




/*animation ------------*/
.ef-animation { animation: ef-animation 0s cubic-bezier(.8, 0, .2, 1) 0s forwards;}
@keyframes ef-animation{ 0%{ opacity: 0;} 100% { opacity: 1;} }

.ef-animation .maskWH {animation: maskWH 0.5s cubic-bezier(.8, 0, .2, 1) 0.5s forwards; margin-left: 0; }
.ef-animation .maskWH2 {animation: maskWH2 0.5s cubic-bezier(.8, 0, .2, 1) forwards; margin-right: 0; }
.ef-animation .maskWH3 {animation: maskWH 0.5s cubic-bezier(.8, 0, .2, 1) 0.5s forwards; margin-left: 0; }
.ef-animation .maskWH-wh { animation: maskWH 0.7s ease-out 0.8s forwards; margin-left: 0; }
@keyframes maskWH { 0% { margin-left: 0;} 100% {margin-left: 100%;} }
@keyframes maskWH2 { 0% { margin-right: 0;} 100% {margin-right: 100%;} }




/*fade motion---------------------*/
.move,
.move:hover {transition:all 0.2s ease-in-out 0.5s;}

.move2,
.move2:hover {transition:all 4s ease-in-out 10s;}

.fade_box {
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	transform: translateY(30px);
	opacity: 0; }


/*button
---------------------------------*/

.link-Wrap {
	margin: 20px auto 0;
	width: 100%;
	text-align: center;
	a{margin: 20px auto 0;}
}





/*button
---------------------------------*/


/*hover color*/
.hvr-orng{color: var(--clr-wh)!important; background: none; 
&:before {color: #fff !important; background:var(--clr-sub); }	
&:hover{color: var(--clr-sub) !important;  } }

.hvr-blk{color: var(--clr-main)!important; 
&:before {color: #fff !important; background:var(--clr-sub); }	
&:hover{color: var(--clr-sub) !important;  } }

.case__Body li a:hover hvr-blk{color: var(--clr-sub) !important;}

.hvr-blog{color: var(--clr-wh)!important; background: var(--clr-sub); border-radius: 10px;
&:hover{color: var(--clr-wh)!important; background:#ffaa7c; border-radius: 10px; } }

.hvr-red{color: var(--clr-wh)!important; background: #FF002B; border-radius: 10px;
&:hover{color: var(--clr-wh)!important; background:#b6001e; border-radius: 10px; } }



/**/
.button-Main{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	width:140px;
	height:auto;
	font-size: 1.6rem;
	text-align: left;
	overflow: hidden; 
	font-family: "Roboto", sans-serif; 
	font-weight: 500;

	span{padding-left: 48px; position: relative;}}

.button-3rd{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	width:200px;
	height:auto;
	font-size: 1.6rem;
	text-align: left;
	overflow: hidden; 
	font-weight: 500;

	span{padding-left: 48px; position: relative;}}


.button-2nd{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	padding: 2.4rem;
	max-width:480px;
	height:auto;
	font-size: 2rem;
	text-align: center;
	overflow: hidden; 
	font-weight: 700; }


.button-Sp{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: all 0.25s;
	padding: 1.2rem;
	margin: 0 auto;
	max-width:320px;
	height:auto;
	font-size: 2rem;
	text-align: center;
	overflow: hidden; 
	font-weight: 700; }


/**/

.button-circle2:before {
	position: absolute;
	z-index: 9;
	top: 0px;
	left: 0px;
	content: '';
	width: 40px;
	height: 20px;
	border-radius: 3px;
	background-color: var(--clr-wh);
	box-sizing: border-box;
	transition: all 0.25s; }

.top-Service__List a:hover .button-circle2:before {background-color: var(--clr-sub);  }


.button-circle:before {
	position: absolute;
	z-index: 9;
	top: 0px;
	left: 0px;
	content: '';
	width: 40px;
	height: 20px;
	border-radius: 3px;
	background-color: var(--clr-main);
	box-sizing: border-box;
	transition: all 0.25s; }

.case__Body li a:hover .button-Main .button-circle:before {background-color: var(--clr-sub);  }

/**/

.arrow::after{
	position: absolute;
	z-index: 10;
    content: "";
    vertical-align: middle;
	top:7px;
    left: 17px;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--clr-wh);
    border-right: 1px solid var(--clr-wh);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); transition: all 0.25s;}

	/*
.case__Body li .button-Main:hover .arrow::after {
	border-top: 1px solid var(--clr-wh);
    border-right: 1px solid var(--clr-wh);}*/

/**/

.arrow2::after{
	position: absolute;
	z-index: 10;
    content: "";
    vertical-align: middle;
	top:7px;
    left: 17px;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--clr-sub);
    border-right: 1px solid var(--clr-sub);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); transition: all 0.25s;}

.top-Service__List a:hover .arrow2::after {
	border-top: 1px solid var(--clr-wh);
    border-right: 1px solid var(--clr-wh);}



/*! #######################################################################

	HumbergerMenu

####################################################################### */

#sp-nav {display:none;}

@media screen and (max-width: 1080px){
#sp-nav {
	display:inherit;
	position: fixed;
	height: auto;
	z-index:10000;
	width:100%; }

	
/**/
.gNav-Btn{
	width:45px;
	height:45px;
	border-radius: 3%;
	text-align:center;
	
	position: fixed;
	z-index: 100001;
	top:10px;
	right:10px;
	border-radius: 3px;
	background: rgba(17, 17, 17, 1);}

.open .gNav-Btn{}


	

	
/* #nav-toggle -------*/
#nav-toggle {
	height: 45px;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0); }
	
#nav-toggle div {margin: 13px auto 0; position: relative; width:25px;}
	
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out; }

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 8px;}
#nav-toggle span:nth-child(3) {top: 16px;}
.open #nav-toggle {background: transparent;}
.open #nav-toggle span {background: #fff;}
.open #nav-toggle span:nth-child(1) {top: 9px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);zoom: 1;}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {
	top: 9px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	zoom: 1; }

/*#nav-toggle p{
	padding-top:15px;
	font-size:14px;
	text-align: center;
	color:#cf000e;
	font-family: dcb; }

.open #nav-toggle p{
	color:#fff;}*/

	

/**/	
div#humberger {
	 position: absolute;
	height: auto;
	z-index:100000;
	width:100%;
	display:block; }


	
/* ***********************************************************
* #global-nav
* *********************************************************** */
nav#h-nav {
	visibility: hidden;
	position: fixed;
	display: block;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	top:0 ;
	right:0 ;
	transition: all .3s ease-in-out;
	transform:translatex(100%);}

nav#h-nav .hWrap {
	position: absolute;
	height: 100%;
	width: 100%;
	top:0%;
	right:0 ;
	overflow-y: scroll; 
	-webkit-overflow-scrolling: touch; }

.open nav#h-nav {
	z-index: 1;
	visibility: visible;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	transform:translatex(0%);
	opacity:1;
	background-color: #EAEAEA;}


/* ***********************************************************
* nav-list
* *********************************************************** */
	
.spNav__H1{
	position: relative;
	z-index: 1000000;
	top:0px;
	padding: 2.5rem 1.5rem 2.5rem 1.5rem;
	width: 100%;
	border-bottom: 1px solid #cacaca; h1{width: 160px;}}

.spNav__Search {
	margin:24px auto 8px;
	padding: 0;
	width: 95%;
	height: auto;}
	
.spNav__main {
	margin:0px auto 5px;
	padding: 0;
	width: 100%;
	height: auto;}
	
.spNav__main li {
	width:100%;
	height: auto;
	font-size: 1.4rem;
	line-height: 20px;
	font-weight:700;
	opacity: 0; }
	
.spNav__Item .pdng{padding: 1.4rem;
	border-bottom: 1px solid #cacaca;}

.spNav__main li a {
	display: block;
	position: relative;
	text-align: left;
	color: #111;
	text-decoration: none;
	transition: all 0.2s;}
    
.spNav__main li .icon-link:before {
    font-size: 1.2rem;
    position: absolute;
	top:13px;
    right:20px;}

.spNav__main li a:hover{color: var(--clr-sub)!important; }

.spNav__main li ul {padding:0; background-color: #F8F8F8;}
.spNav__main li ul li {
	margin: 0 auto;
	width: 90%;
	padding: 1.4rem 0;
	font-weight: 400!important;
	border-bottom: 1px solid #cacaca; }

.spNav__main li ul li:last-child{border-bottom: none; }

	
/*アコーディオン
------------------------------*/
.toggle_contents {}
	
.toggle_title {
	position: relative;
	font-size: 1.4rem;
	font-weight: 700!important;
	padding: 1.4rem;
	cursor: pointer;
	border-bottom: 1px solid #cacaca;}
	
.toggle_btn {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	background: var(--clr-main);
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
}	

.toggle_btn {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	background-color: #fff;
	border: 1px solid var(--clr-main);
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: var(--clr-main);
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
	
.toggle_title.selected .toggle_btn {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	background-color: var(--clr-main);
	border: 1px solid var(--clr-main);
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
	
.toggle_title.selected .toggle_btn:before, .toggle_title.selected .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
	
.toggle_contents dd {
	display: none;
}	
	

	

.open nav#h-nav .spNav__main li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .5s ease-out .3s;
  transition: all .5s ease-out .3s;}


	
/*その他
------------------------------*/
	
/*inner
---------------------------*/
.spNav__Inner{
	position: relative;
	margin:0 auto ;
	padding:1rem 0;
	width: 90%; }
	
/* spNav__Mail---------*/
.spNav__Mail{
	margin-top: 24px;
	width : 100%; 
	position: relative;
	border-bottom: 1px solid #E6E6E6;
	
	p{
	text-align: center; }
	
	div{ margin-top: 5px; width: 100%; text-align: center;
		a{width: 240px;}
		 span{font-size: 1.8rem;}}
	}
	
/*
@media (min-width: 768px) {
.spNav__Tel a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
}*/
	
	
/* spNav__sub----------*/
.spNav__sub{
	padding: 2rem 0;
	width : 100%; 
	position: relative;
	border-bottom: 1px solid #E6E6E6;}

.spNav__sub li{
	text-align: center;
	margin-bottom: 5px;
	width: 100%;  &:last-child{margin-bottom: 0px;}}
	
.spNav__Copy{
    text-align: center;
	margin: 30px auto 0;
	color: #777777;
	font-size:1rem;
	line-height: 1.1;
	font-weight:500;
	letter-spacing: 0.05em; }
}



	
/* ***********************************************************
* #iconList
* *********************************************************** */

.iconList {
	margin: 0 auto ;
	padding: 2rem;
	max-width: 400px;
	height: auto;
	opacity: 0; }

.iconList h3 {
	margin-bottom:10px;
	font-size:2rem;
	line-height:20px;
	color:#fff;
	letter-spacing: 0.05em;
	font-feature-settings : "palt";
	font-family: ftM; }
	
.iconList i {width:0px;height:0px; margin:0 5px;}

.open nav#sp-NavMain .iconList {opacity: 1; -webkit-transition: all .5s ease-out .6s; transition: all .5s ease-out .6s;}
.open nav#sp-NavMain .iconList span {font-size:20px; transition: .3s; color:#fff;}
.open nav#sp-NavMain .iconList span:hover { color:#000;}




/*//////////////////////////////////

Header
///////////////////////////////////*/

header{
	margin:0 auto; 
	padding: 2.4rem; 
	width : 100% ; 
	height: 94px;
	background: rgba(255, 120, 47, 1);

	position: fixed;
	z-index: 1000; 
	top:0;
	transition: .5s;  }

header h1{
	width : 164px ;
	position: relative; 
    transition: .5s;
    
    img{
    transition: .5s;
    position:absolute;
    inset: 0;
    width: 164px; } }



/*　上に上がる動き　*/
header.UpMove{animation: UpAnime 0.5s forwards;}

@keyframes UpAnime{
from {opacity: 1;transform: translateY(0);}
to {opacity: 0;transform: translateY(-100px);}
}

/*　下に下がる動き　*/
header.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
from {opacity: 0;transform: translateY(-100px);}
to {opacity: 1;transform: translateY(0);}
}



/*変形header--------------*/
header.transform{
	padding: 0.8rem 2.4rem; 
	height: 60px;
	background: rgba(255, 120, 47, 0.9); }

header.transform h1{
img{ } }

header.transform nav{
	height:auto;
	position: relative;
	z-index: 9999; }

header.transform nav .gnavList{margin-top:12px;}
header.transform nav .gnavList li a {height: 38px;}
header.transform nav .gnavList li .gnavList__btn {height: 38px;}

header.transform nav .gnavList li .over:after{ display: none;}

header.transform nav .gnavList .buttonNavPc:after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
	left:45%;
	transform: translateX(-50%); 
    bottom: 12px;
    /*線の形状*/
    width: 12px;
    height: 12px;
	border-radius: 10px;
    background:var(--clr-wh);
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 0);/*X方向0、Y方向1*/
    transform-origin: center bottom;/*左上基点*/
}



/**/


@media screen and (max-width: 1000px){
header{ width : 100% ; height: 60px; padding: 1rem 1.6rem; }
header h1{width : 160px ; 
img{width: 140px; } }  

header.transform{padding: 1rem 1.6rem;}
}






/*//////////////////////////////////

G_Nav
/////////////////////////////////*/

nav{transition: .5s;
	width: 100%;
	padding: 0;
	max-width: 0 0 0 auto;
	height:auto;
	position: relative;
	z-index: 9999; }

/*
nav{transition: .5s;
	width: calc(100% - 164px);
	padding: 0;
	height:auto;
	position: relative;
	z-index: 9999; }

nav .nav__Btn{transition: .5s;
	position: relative;
	width : 170px; 

}*/


/**/
.search-form {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 25px;
	background-color: #fff;
}

.search-form input {
    width: 170px;
    height: 45px;
    padding: 5px 0px 5px 0;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
}

.search-form input::placeholder {
    color: #777777;
}

.search-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border: none;
    background-color: #fff;
    cursor: pointer;
}

.search-form span {
	padding-top:3px; 
	padding-left: 12px;
	
}

/**/

nav .gnavList{transition: .5s;
	margin-top:15px;
	padding: 0;
	width: 100%;
	/*width: calc(100% - 170px);*/
	height:auto;
	position: relative;
	z-index: 0;

	display: flex;
	flex-wrap: wrap;
	 justify-content:flex-end;}

nav .gnavList li {
	position: relative;
	width: auto;
	padding:0; }

nav .gnavList li a {
	transition: .5s;
	display: block;
	padding:0 2rem;
	width:100%;
    height: 57px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.0;
	text-align: center;
	color: var(--clr-main);}

nav .gnavList li .gnavList__btn {
	transition: .5s;
	display: block;
	padding:0 2rem;
	width:100%;
    height: 57px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.0;
	text-align: center;
    cursor: pointer;}


/*dropdown----------*/
nav .g-menu__dd-menu {
  opacity: 0;/* ポイント！！ */
  pointer-events: none;/* ポイント！！ */
  position: absolute;
  top: 105%;/* ポイント！！ */
  left: 0;
  background: #fff!important;
  width: 240px;
    height: auto!important;
}

nav .g-menu__dd-item{border-bottom: 1px solid #ccc; padding: 0 0rem!important; }
nav .g-menu__dd-item:last-child {border-width: 0;}
nav .g-menu__dd-menu-link {
    position: relative;
	display: block;
	text-align: left!important;
	padding: 1.6rem 1.6rem!important;
    color: var(--clr-main)!important;
    font-size: 1.4rem!important;
    font-weight: 600!important;
    height: auto!important;
    font-family: 'Zen Kaku Gothic New', sans-serif!important;

	.icon-link:before {
    font-size: 1.2rem;
    position: absolute;
	top:8px;
    right:8px;
    content: "\e901"; }
}

nav .g-menu__item:hover .g-menu__link {
  transition: .5s;
}

nav .g-menu__item:hover .g-menu__dd-menu {
  opacity: 1;
  pointer-events: auto;
  transition: .5s;
}

nav .g-menu__dd-menu-link:hover {
    background-color: var(--clr-lightOrng);
}



/* nav----------*/
.buttonNavPc {
	position: relative;
	z-index: 1;
	display: block;
	width:60%;
	transition: all 0.25s;}


/**/.buttonNavPc:after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
	left:45%;
	transform: translateX(-50%); 
    bottom: 12px;
    /*線の形状*/
    width: 12px;
    height: 12px;
	border-radius: 10px;
    background:var(--clr-wh);
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 0);/*X方向0、Y方向1*/
    transform-origin: center bottom;/*左上基点*/
}

.buttonNavPc:hover:after { transform: scale(1, 1);}
.buttonNavPc:hover {color: #fff;}

.over{ 
	position: relative;
	color:var(--clr-wh) !important;
	width: 100%;}

.over:after{ 
	content: "";
	position: absolute;
	z-index: 10;
	left:50%;
	transform: translateX(-50%); 
	bottom:12px;
	
	width: 12px;
    height: 12px;
	border-radius: 10px;
	background-color: var(--clr-wh);}




/*--*/
@media screen and (max-width: 1080px){
.gnavList{display: none!important;}
.nav__Contact{display: none!important;}
    
nav .nav__Btn{display: none;} 
}









/*///////////////////////////////////

//sub-View
////////////////////////////////////*/

/*パンくず
---------------------------*/

.breadcrumb {
	padding:0.4rem 1.6rem;
	background-color: #fff;
}

.breadcrumb-List {
    display: flex;
    gap: 0 20px;
    list-style: none;
    padding: 0;
}

.breadcrumb-List li {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

.breadcrumb-List li:not(:last-child)::after {
    display: inline-block;
    width: .3em;
    height: .6em;
    margin-left: 8px;
    background-color: #1D1916;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.breadcrumb-List a {
    color: #1D1916;
    text-decoration: none;
    font-size: 1.2rem;
}

 







/*//////////////////////////////////

Contents
/////////////////////////////////*/
	
main {}


/*h2ttl-Wrap
---------------------------*/
.heading-H2 {
	margin:0 auto min(100px,5vw);
	padding:0;

	.heading-H2__H2{
	
		h2{ position: relative; 

			span{
				position: relative; 
				display: inline-block;
				font-family: "Roboto", sans-serif; } }

		.heading-H2__H2-sub{}}

		p{
		margin-top: 24px;
		display: block;} }

/**/
.icon-H2ttl{display: inline-block;}
.icon-H2ttl:before{
			content:" "; 
			display: inline-block;
			width: 42px;
			height: 32px;
			margin-left: 10px;
			background: url(../images/common/icon-heading-h2.svg) no-repeat ;
			background-size: contain;
			
			position: relative; 
			top: -20px; }


.icon-H2ttl-wh{display: inline-block;}
.icon-H2ttl-wh:before{
			content:" "; 
			display: inline-block;
			width: 42px;
			height: 32px;
			margin-left: 10px;
			background: url(../images/common/icon-heading-h2-wh.svg) no-repeat ;
			background-size: contain;
			
			position: relative; 
			top: -20px; }







/**/
.heading-H2-Sub {
	margin-bottom:40px;

	h5{margin-bottom: 0px; font-family: "Roboto", sans-serif; font-weight: 700;}
	
	h2{}

	p{margin-top: 16px;}}




/**/
@media screen and (max-width: 768px){
.heading-H2 {margin:0 auto 20px;}
    
.heading-H2-Flex {margin:0 auto 20px;
.heading-H2-Flex {width: 100%;} 
p{width: 100%; display: flex;align-items: center;justify-content: left;}
}

.heading-H2-Flex__H2 {margin-bottom: 20px;
h2{}
p{margin-top: -10px;} }
    
.heading-H2__Recruit {margin-bottom:20px;
h2{ }
span{margin-top: -10px;} }
	
/**/
.heading-H2-Sub {margin:0 auto 20px;
.heading-H2-Sub__Wrap{margin-bottom: 20px;
 } }
    
    
/**/
.heading-Recruit {
 h3{margin-bottom: 10px; } p{}}

.heading-Recruit__Wrap {
margin-bottom:10px;
    
span{padding-right: 30px; font-size: 3rem;
&:after { width: 10px;right:10px; }
} 
h2{font-size: 2rem;}
h6{top:-40px;} 
p{margin-top: 10px;position: relative;z-index: 10;}
.rec-ppl1{width: 50px; z-index: 11;position: absolute;top:-10px;right:0; img{}}    
}
}





/*page-top
---------------------------*/	
#page-top{
   width:70px;
   height:70px;
   display:none;
   position:fixed;
   right:0.5%;
   bottom:00px;
   z-index:1000; }
 
#page-top p{
   margin:0;
   padding:0;
   text-align:center;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   transition:all 0.3s; }

#move-page-top{
   color:#fff;
   line-height:50px;
   text-decoration:none;
   display:block;
   cursor:pointer; }

/*- @media 768px-*/
@media screen and (max-width: 768px){#page-top p{display:none;} }





/*////////////////////////////////

footer
////////////////////////////////*/		
footer{padding: 30px 0 0;width: 100%; }


/**/
@media screen and (min-width: 959px){

footer{
	margin:0 auto ;
    padding: 0;
	width: 100%; }
}


/*fInner-----------------*/

.foot__Inner{
	margin:0 auto 0;
	padding: 3rem 2rem 1rem;
	width:100%;
	position:relative; }



.foot__left-Wrap{
	position:relative;
	width: 100%; margin-bottom: 0px;

	h1{ margin-top: 0px;
        margin-bottom: 10px; 
		color: #A9A9A9;
        
        a{display: block; margin-bottom: 5px;  width: 140px;
        img{width: 240px;} }  }
		
	.adrs{
		color: #A9A9A9!important;
		margin-top: 10px;
		display: block;
		font-size:1.3rem;
		line-height:1.5;
		font-weight:400;
		letter-spacing: 0.05em;
        font-feature-settings : "palt";  } } 

/*---------*/

.foot__right-Wrap{display: none;  }


.mdntop20{margin-top: 20px; }

/**/
.foot__fList a:hover,.foot__subLink a:hover,.foot__fList2 a:hover{opacity: 0.6;}

.copy{
	margin-top: 0px;
	line-height: 2;
	text-align: right;
	color: #A9A9A9;}



/*- @media 959px-*/
@media screen and (min-width: 959px){

footer{padding: 0px 0 0;width: 100%; }

/*fInner-----------------*/
.foot__Inner{
	margin:0 auto 0;
	padding: 7rem 2rem 7rem;
	max-width:1240px;
	position:relative; }

.foot__left-Wrap{
	position:relative;
	width: 20%;

	h1{ 
        margin-bottom: 10px; 
		color: #A9A9A9;
        
        a{display: block; margin-bottom: 5px;  width: 140px;
        img{width: 240px;} }  }
		
	.adrs{
		color: #A9A9A9!important;
		margin-top: 10px;
		display: block;
		font-size:1.3rem;
		line-height:1.5;
		font-weight:400;
		letter-spacing: 0.05em;
        font-feature-settings : "palt";  } } 



/*---------*/

.foot__right-Wrap{
	display:block;
	margin:0 0 0 auto;
	padding: 0;
	width: 75%;
	position:relative; }

.foot__fList{
	position:relative;
	width: 100%;


	li {
        position:relative;
		width: 24%;
        margin-bottom: 20px;
        
		.fList__Ttl a{
			color: #A9A9A9!important;
			margin-bottom: 10px;
			font-size:1.5rem ;
			line-height:1.8 ;
			font-weight:500;
			letter-spacing: 0.05em;
			font-feature-settings : "palt"; a{display: block; transition: 0.25s; }
            

            .icon-link:before {
                display: inline-block;
                        font-size: 0.8rem;
                        position: relative;
                        top:-1px;
                        content: "\e901"; }}

		p {
			color: #A9A9A9!important;
			position:relative; 
			margin-top: 5px;
			padding-left: 5px;
			font-size:1.2rem ;
			line-height:1.4 ;
			font-weight:400;
			letter-spacing: 0.05em;
			font-feature-settings : "palt"; 
			
			/*&:before { 
			content:""; 
			display: block;
			width: 8px;
			height: 1px;
			background-color: var(--clr-wh);

			position:relative; 
			top: 13px; 
			left:-13px;} */ 
		
            a{display: block; transition: 0.25s;color: #A9A9A9!important;} } } } 


.foot__fList2{
	margin-top: 20px;
	padding-top: 20px;
	position:relative;
	width: 100%;
	border-top: 1px solid #8f8f8f; 


	li {
        display: inline-block;
		margin-right: 10px;
        
		.fList__Ttl a{
			color: #A9A9A9!important;
			margin-bottom: 10px;
			font-size:1.2rem ;
			line-height:1.8 ;
			font-weight:500;
			letter-spacing: 0.05em;
			font-feature-settings : "palt"; display: block; transition: 0.25s; } } }





.mdntop20{margin-top: 20px; }

/**/
.foot__fList a:hover,.foot__subLink a:hover,.foot__fList2 a:hover{opacity: 0.6;}

.copy{
	margin-top: 0px;
	line-height: 2;
	text-align: right;
	color: #A9A9A9;}

}




/*foot__Recruit -----------------*/
.foot__Recruit{
	margin:0 auto 0;
	padding: 7rem 2rem 2rem;
	max-width:1240px;
	position:relative; 

	h1{ 
        margin:0 auto 10px; 
        text-align: center;
        
        a{display: block; margin-bottom: 5px; 
        img{width: 130px;} }  } 

    .copy__Recruit{margin-top: 50px; text-align: center;}

}


.foot__Recruit-List{
	margin: 0 auto;
	position:relative;
    width: 430px;

	li {
        display: inline-block; } } 


/*- @media 959px-*/
@media screen and (max-width:768px){
.foot__Recruit{padding: 3rem 2rem 2rem;
h1{ margin:0 auto 10px; 
a{display: block; margin-bottom: 5px; 
img{width: 130px;} }  } 
.copy__Recruit{margin-top: 20px; text-align: center;}}

.foot__Recruit-List{display: none;} 
}
	

/*===============================================*/

/*  style.css */

/*===============================================*/


/*color  ------------------*/
:root {
	--clr-main: #1D1916;	
	--clr-sub:#FF772F;
	--clr-black:#261F1C;
	--clr-wh: #fff;
	--clr-gry: #41332E;
  --clr-lightOrng: #FFEAE4;
}






/*///////////////////////////////////

//top
////////////////////////////////////*/


.first-View{
	width: 100%;
	position: relative;
	overflow: hidden; 
}

/**/
.top-View{
	position: relative;
	margin:0 auto ;
	padding-top: min(160px,20vw);
	padding-bottom: min(12rem,4vw);
  	width:100%;  
    overflow: hidden; }

.top-View__H3{
	margin:min(30px,2vw) auto 0;
	padding:0 2rem ;
	width: min(100%, 1300px); 
	font-weight: 700!important;
	span{color: #fff;font-weight: 700!important;} }


/**/
@media screen and (max-width: 959px){
.top-View__H3{padding:2.4rem 1.6rem ; }
}


/**/
.sub-View{
	position: relative;
	margin:0 auto ;
	padding:min(160px,18vw) min(1.6rem,4vw) min(12rem,4vw);
	width: 100%;

	h2{
		font-weight: 900!important;
		color: var(--clr-black);
		span{
			display: block;
			color: #fff;
			font-weight: 700!important;  
			font-family: "Roboto", sans-serif;} }}




/*slide-Wrap
---------------------------*/
.slide-Wrap{
	position: relative;

	.hero-Heading {
		margin-top: 0px;
		width: 30vw;
		padding-left: 2rem;
		text-align: right;

		img{width: max(250px,10vw);}
	}

	.slide_Area {
		position: relative;
		padding:32px 0 0 0;
		width:65vw;  
		overflow: hidden;} }


@media screen and (min-width: 768px){
.slide-Wrap{
	position: relative;

	.hero-Heading {
		margin-top: -20px;
		width: 24vw;
		padding-left: 2rem;
		text-align: right;

		img{width: max(250px,10vw);}
	}

	.slide_Area {
		position: relative;
		padding:40px 0 0 0;
		width:70vw;  
		overflow: hidden;} }
}










/*top-Book
---------------------------*/

.top-Book{
	position: relative;
	margin:0 auto ; }

/**/
.top-Book__Body {

	.-Img {
		order: 1;
		width: 100%;
		margin-bottom: 20px;	
		text-align: center;	
						
		img{
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 0px;
			border-bottom-left-radius: 10px;} }

	.-Tx {order: 2; width: 100%;

		dl{

			dt{

				h3{ margin-bottom: 16px; color:#fff; font-weight: 700;
				a{color:#fff; text-decoration: underline; overflow-wrap: anywhere;/*折返し指定*/}
				}
				

				div{
					figure{margin: 0 auto 16px; width: 160px; img{width: 100%;}}
					
				p{width:100%; color:#fff;
					letter-spacing: 0.05em; 
				a{color:#fff; text-decoration: underline; }}}
				}

			dd{
				margin-top: 24px;
				padding: min(2.4rem,3vw);
				background-color:#BE3300 ;
				border-radius: 10px;

				h4{ margin-bottom: 8px; color:#fff; font-weight: 700;}
				p{color:#fff;}}}} }






/**/
@media screen and (min-width: 959px){

.top-Book__Body {

	.-Img {
		order: 2;
		width: 36%;
						
		img{
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 0px;
			border-bottom-left-radius: 10px;} }

	.-Tx {
		order: 2;
		width: 60%;

		dl{

			dt{

				h3{ margin-bottom: 24px; color:#fff; font-weight: 700;
				a{color:#fff; text-decoration: underline; overflow-wrap: anywhere;/*折返し指定*/}
				}
				

				div{

				figure{width: 200px; img{width: 100%;}}
					
				p{
					width:calc(100% - 240px) ; letter-spacing: 0.05em; color:#fff;
				a{color:#fff; text-decoration: underline; }}}
				}

			dd{
				margin-top: 24px;
				padding: min(2.4rem,3vw);
				background-color:#BE3300 ;
				border-radius: 10px;

				h4{ margin-bottom: 8px; color:#fff; font-weight: 700;}
				p{color:#fff;}}}} }

} 




/*top-Flow
---------------------------*/

/**/
.top-Flow{
	position: relative;
	

	.top-Flow__List {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 24px;

		li{
  			position: relative;
			border-radius: 10px;
			background-color: #41332E;
			padding: 1.6rem 2.4rem 2.4rem;

			.-Num{color: var(--clr-wh); text-align: right;}

			figure{margin-bottom: 16px; text-align: center; img{}}
			
			h3{margin-bottom: 16px; text-align: center; color: var(--clr-wh);}

			p{font-weight: 500; color: var(--clr-wh);} } } }


.arrow_Down:after {
  content: '';
  line-height: 1;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff7300;

  position: absolute;
  top: -16px;
  left:50%;
	transform: translateX(-50%);}



/*pc*/
@media screen and (min-width: 959px){

.top-Flow{
	position: relative;

	.top-Flow__List {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;

		li{
  			position: relative;
			border-radius: 10px;
			background-color: #41332E;
			padding: 1.6rem 2.4rem 2.4rem;

			.-Num{color: var(--clr-wh); text-align: right;}

			figure{margin-bottom: 16px; text-align: center; img{}}
			
			h3{margin-bottom: 16px; text-align: center; color: var(--clr-wh);}

			p{font-weight: 500; color: var(--clr-wh); b{color: #ffb48b;}} } } }

.arrow_Down:after {
  content: '';
  line-height: 1;
  width: 10px;
  height: 10px;
  border-right: 0px solid transparent;
  border-left: 10px solid #ff7300;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  position: absolute;
  top: 50px;
  left: -20px;
	transform: none;}


}





/*top-Service
---------------------------*/
.top-Service{position: relative; }


/**/
.top-Service__List {

		
		li {
			position: relative; 
			height: auto;
			margin-bottom: 32px;

			

			
				figure{
					position: relative;
					width: 100%;
					
					img{ 		
						border-top-left-radius: 10px;
						border-top-right-radius: 10px;
						border-bottom-right-radius: 0px;
						border-bottom-left-radius: 0px;
						width: 100%;
						height: 100%;
						object-fit: cover;} }
				
				.top-Service__Tx {
					position: relative;
					padding: min(3.2rem,5vw);
					border-top-left-radius: 0px;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 20px;
					border-bottom-left-radius: 20px;
					
					&:after{
						content:" "; 
						display: block;
						width: 20px;
						height: 20px;
						background: url("../images/common/icon-fkds_blk.png") no-repeat ;
						background-size: contain;
						overflow: hidden;

						position: absolute; 
						bottom:-20px;
						right:32px;}
					
					h3{ margin-bottom: 8px; color:#fff; font-weight: 700;}

					p{ margin-bottom: 8px;color:#fff;  width: 100%; 
					b{font-weight: bold; color: #ffb48b;}
					}

					.button-Main{margin: 0 0 0 auto;}
					.button-3rd{margin: 0 0 0 auto;}
					
					} } } 

.top-Service__List a:hover{opacity: 0.8;}
.top-Service__List a:hover .button-Main,.top-Service__List a:hover .button-3rd{color: #FF772F!important;}



/**/
@media screen and (min-width: 959px){

.top-Service__List {

		li {
			position: relative; 
			height: auto;
			margin-bottom: 80px;

			

			
				figure{
					position: relative;
					width: 100%;
					
					img{ 		
						border-top-left-radius: 10px;
						border-top-right-radius: 10px;
						border-bottom-right-radius: 0px;
						border-bottom-left-radius: 0px;
						width: 100%;
						height: 100%;
						object-fit: cover;} }
				
				.top-Service__Tx {
					position: relative;
					padding: min(3.2rem,3vw);
					border-top-left-radius: 0px;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 20px;
					border-bottom-left-radius: 20px;
					
					&:after{
						content:" "; 
						display: block;
						width: 48px;
						height: 48px;
						background: url("../images/common/icon-fkds_blk.png") no-repeat ;
						background-size: contain;
						overflow: hidden;

						position: absolute; 
						bottom:-48px;
						right:48px;}
					
					h3{ margin-bottom: 16px; color:#fff; font-weight: 700;}

					p{ margin-bottom: 16px;color:#fff;  width: 70%; 
					b{font-weight: bold; color: #ffb48b;}
					}

					.button-Main{margin: 0 0 0 auto;}
					
					} } } 

}





/*top-Blog
---------------------------*/
.top-Blog{position: relative; }


/**/

.top-Blog__ctgr {

	.-Ttl{margin-bottom: 8px; font-family: "Roboto", sans-serif;}

	.-List {
	margin-bottom: 40px;

	li{
		display: inline-block;
		margin-right: 16px!important;
		color: var(--clr-black)!important;
		cursor: pointer!important;
		font-size: 1.6rem!important;
		padding-bottom: 0px;
		&:last-child{margin-right: 0px!important;}

		a{
			transition: .3s;
			&:hover{
			opacity: .7!important;
			border-bottom: 1px solid var(--clr-black); 
			}}}}
}

.top-Blog-Curent{border-bottom: 1px solid var(--clr-black);}


/**/
.top-Blog__List {

			display: grid; /* グリッドレイアウトを有効にする */
			grid-template-columns: repeat(1, 1fr);
			gap: 32px; /* カラム間のスペースを設定 */

		
		li {

			a {
				display: block; 
				position: relative; 
				transition: 0.25s; 

			
				figure{
					position: relative;
					margin-bottom: 16px;
					aspect-ratio: 16/9;

					.blog-num{
						position: absolute;
						top:2vw;
						right:2vw;
						border-radius: 50px;
						font-family: "Roboto", sans-serif;

						width: 48px;
						height: 48px;
						background-color: var(--clr-sub);
						color: #fff;
						padding: 1.5rem 1.2rem;
						text-align: center;
					}
					
					img{ 
						border-radius:10px; 
						width: 100%;
						/*height: 100%;
						object-fit: cover;*/ } }
				
				.top-Blog__List-Tx {
					
					h3{ margin-bottom: 8px; font-weight: 700;}
					p{ margin-bottom: 4px;}

					time{ display: block; font-family: "Roboto", sans-serif;}
					
					} } 
				
				.top-Blog__List-Tag{ 
					a{
						margin-top: 4px;
						display: inline-block;
						padding: 0.4rem 1.6rem;
						background-color: #1D1916;
						color: #fff;
						border-radius: 30px;
						text-align: center;}}
				
				
				} }





				
.top-Blog__List a:hover{opacity: 0.6;}


/**/
@media screen and (min-width: 959px){

.top-Blog__List {

			display: grid; /* グリッドレイアウトを有効にする */
			grid-template-columns: repeat(3, 1fr);
			gap: 40px; /* カラム間のスペースを設定 */

		
		li {

			a {
				display: block; 
				position: relative; 
				transition: 0.25s; 

			
				figure{
					position: relative;
					margin-bottom: 16px;
					aspect-ratio: 16/9;

					.blog-num{
						position: absolute;
						top:1vw;
						right:1vw;
						border-radius: 50px;
						font-family: "Roboto", sans-serif;

						width: 48px;
						height: 48px;
						background-color: var(--clr-sub);
						color: #fff;
						padding: 1.5rem 1.2rem;
						text-align: center;
					}
					
					img{ 
						border-radius:10px; 
						width: 100%;
						/*height: 100%;
						object-fit: cover;*/ } }
				
				.top-Blog__List-Tx {
					
					h3{ margin-bottom: 12px; font-weight: 700;}
					p{ margin-bottom: 16px;}

					.top-Blog__List-Tag{ 
						display: inline-block;
						padding: 0.4rem 1.6rem;
						background-color: #1D1916;
						color: #fff;
						border-radius: 30px;
						text-align: center;
						margin-bottom: 8px;}

					time{ display: block; font-family: "Roboto", sans-serif;}
					
					} } } }

}







/*top-News
---------------------------*/
.top-News{
	position: relative;
	margin:0 auto ; }
	


/**/
.top-News__List {
	margin:0 auto ;
	max-width: 960px;
	
	li{
		padding-left: 3rem;
		
		a{
			display: block;
			transition: 0.25s;
			padding: 2rem;
		    border-top: 1px solid #e4e4e4;
		    border-bottom: 1px solid #e4e4e4; 
			margin-bottom: -1px;
			
		dl {
			width: 100%;
			
			dt {
				span{
					background-color: var(--clr-black);
					color: #fff;
					padding: 0.2rem 0.8rem;
					border-radius: 20px;
					margin-left: 5px;
					display: inline-block; } }

			dd {} } } } } 

/**/
.top-News__List a:hover { background-color: #ffac93;}



@media screen and (max-width: 959px){
.top-News{}
.heading-H2-Wrap{width: 100%;margin-bottom: 30px;
a{ margin-top: 20px;} } 

.top-News__List {width: 100%;
li{padding-left: 0rem;border-left: none;
&:last-child{border-bottom: 1px solid #e4e4e4; }
		
a{padding: 1rem;
dl {
dt {}
dd {} } } } } 

}	



/*//////////////////////////////////////

company
///////////////////////////////////////*/


.company{
position: relative;
	
.-List {
		margin:0 auto ;
		max-width: 960px;
		
		dl{
			margin-bottom: 1.6rem;
			padding-bottom: 1.6rem;
			border-bottom: 1px solid #BCBCBC;
			
			dt {
				width: 100%;
				font-weight: 700; }

				dd {width: 100%;} } } } 


@media screen and (min-width: 959px){
.company{
	position: relative;
	
	.-List {
		margin:0 auto ;
		max-width: 960px;
		
		dl{
			margin-bottom: 1.6rem;
			padding-bottom: 1.6rem;
			border-bottom: 1px solid #BCBCBC;
			
			dt {
				width: 20%;
				font-weight: 700; }

				dd {width: 80%;} } } } 

}





/**/



.member{
	position: relative;
	

	.-List {
		
		li{margin-bottom: 24px;
			
			.-tx {
				width: 100%;
			
				h2{margin-bottom: 14px;}
				p{margin-top: 8px; font-weight: 500;
				
				a{color: var(--clr-sub); text-decoration: underline; transition:all 0.25s;}

				a:hover{color: #ff7745; text-decoration: none;}
				}}

			.-Img {
				width: 100%;
				margin-bottom: 16px;
				text-align: center; 

				figure{margin-bottom: 8px; img{border-radius: 10px;}}

				p{ text-align: center;}

				.-Img__Name{
					display: inline-block;
					span{display: inline-block; margin-right: 8px;}}}
			
			} } } 

.order1{order: 2;}
.order2{order: 1;}


/**/
@media screen and (min-width: 959px){

.member{
	position: relative;
	

	.-List {
		
		li{
			margin-bottom: min(80px,6vw);
			
			.-tx {
				width: 50%;
			
				h2{margin-bottom: 24px;}
				p{margin-top: 16px; font-weight: 500;
				
				a{color: var(--clr-sub); text-decoration: underline; transition:all 0.25s;}

				a:hover{color: #ff7745; text-decoration: none;}
				}}

			.-Img {
				width: 40%;
				text-align: right;

				figure{margin-bottom: 16px; img{border-radius: 10px;}}

				p{ text-align: right;}

				.-Img__Name{
					display: inline-block;
					span{display: inline-block; margin-right: 8px;}}}
			
			} } } 

			.order1{order: 1;}
			.order2{order: 2;}
}




/*//////////////////////////////////////

SERVICE
///////////////////////////////////////*/



/*--
service-Intro
-------------------*/
.service-Intro{
	position: relative;
	padding: min(10rem,8vw) min(8rem,8vw);

	h2{margin-bottom: min(40px,3vw);}
	h3{margin-bottom: min(40px,3vw);}
	p{margin-bottom: min(48px,3vw);}

	

	figure{
		width: min(70vw,380px);
		position: absolute;
		bottom:-2vw;
		right:0;
		img{ }} 
	
	.-Btn {
		max-width: 480px;

		a{display: block;}

		span{display: block; text-align: center; margin-top: 12px;} 
		} }
	

/**/
@media screen and (max-width: 959px){
.service-Intro{
figure{position: relative;margin: 24px auto;img{ }} 
.-Btn {} }
}


/*--
service-1
-------------------*/
.service-1{
	position: relative;

	h3{margin-top: min(40px,5vw); text-align: center;}
	

	.-List {
		position: relative;
		margin: 0 auto;
		max-width: 1100px;
		background-color: #fff;
		border-radius: 10px;
		padding: 4rem 2.4rem;
		
		li{ 
			padding: 0 2.4rem;
			width: 50%;
			border-right: 1px solid #A7948B; 
			&:last-child{border-right: none; }

			div {
				margin-bottom: 4px;}
			
			} 
		
		figure{
			position: absolute;
			bottom:-3vw;
			right:0vw; img{width: 5vw;}}

		} } 


/**/
@media screen and (max-width: 959px){
.service-1{
.-List {padding: 1.6rem 1.6rem;
li{ padding: 0 0rem;width: 100%;border-right: none; 
&:last-child{border-right: none; }
div {margin-bottom: 4px;}} 
figure{bottom:-3vw;right:0vw; img{width: 10vw;}}} } 	
}

.-mdlTx{margin: 4rem 0;}



/*--
service-2
-------------------*/
.service-2{
	position: relative;
	border-radius: 20px;
	padding: 4rem;

	h3{margin-bottom: min(40px,3vw); span{ margin-top: 4px; display: block; color: var(--clr-sub);}}

	h4{margin-bottom: min(40px,3vw); text-align: center;}

	figure{
		position: relative;
		margin-bottom: min(40px,3vw);
		text-align: center;

		.kensyu_figure{text-align: center;}
	
		.kensyu_ilst6{
			width: min(20vw,240px);
			position: absolute;
			bottom:-2vw;
			right:-2vw; img{}}
		} 
	

	.-Box {
		position: relative;
		border-radius: 10px;
		padding: 4rem;
		background-color: var(--clr-sub);

		h5{}
		
		.kensyu_ilst2{
			position: absolute;
			bottom:-3vw;
			right:3vw; img{width: min(100px,7vw);}} 
		} 



	.-List {
		margin-top: min(40px,3vw);
		position: relative;
		border-radius: 10px;
		border: 1px solid #E3E3E3; 

		li{
			width: 25%;
			padding: 2.4rem;
			border-right: 1px dotted #E3E3E3;
			&:last-child{border-right: none;} 
		
		.-List__Num{
			font-family: "Roboto", sans-serif;
			margin-bottom: 2rem;}

			h3{
			color: var(--clr-sub);
			margin-bottom: 2rem;}

			p{}} }

		
		}
	

/**/
@media screen and (max-width: 959px){
.service-2{
	position: relative;
	border-radius: 10px;
	padding: 1.6rem;

.-Box {padding: 1.6rem 2.4rem 1.6rem 1.6rem;
div{right:0vw; img{width: 7vw;}} }  

.-List {
li{width: 100%;padding: 1.6rem;  border-right: none; border-bottom: 1px dotted #E3E3E3;
	&:last-child{border-bottom: none;}
.-List__Num{margin-bottom: 1rem;}
h3{margin-bottom: 1rem;}
p{}} } }
}




/**/
			
.service-3{
	position: relative;
	border-radius: 20px;
	padding: 4rem;
	
	h3{margin-bottom: min(40px,3vw); span{ margin-top: 4px; display: block; color: var(--clr-sub);}}
	
	h5{margin-top: min(40px,3vw); text-align: center;}
		
	.-List{
		display: grid; /* グリッドレイアウトを有効にする */
		grid-template-columns: repeat(4, 1fr);
		gap: 20px; /* カラム間のスペースを設定 */
		place-content: center;
				
				li{
					background-color: #F3F3F3;
					border-radius: 10px;
					text-align: center;
					padding: 4rem;

					figure{}

					h4{ margin-top: 16px; text-align: center;}
				
                
                }}

	.-List10{
		margin: 20px auto 0; 
		max-width: 850px;
		display: grid; /* グリッドレイアウトを有効にする */
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px; /* カラム間のスペースを設定 */
		place-content: center;
				
				li{
					background-color: #F3F3F3;
					border-radius: 10px;
					text-align: center;
					padding: 4rem;

					figure{}

					h4{ margin-top: 16px; text-align: center;}
				
                
                }}
			
			}


/**/
@media screen and (max-width: 959px){
.service-3{border-radius: 10px;padding: 1.6rem;
	
.-List{gap: 10px;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
li{padding: 1.6rem;
figure{}
h4{ margin-top: 10px; text-align: center;} }}

.-List10{margin: 10px auto 0; gap: 10px;			
li{padding: 1.6rem;
figure{}
h4{ margin-top: 10px; text-align: center;}
}}}

}



/**/	
.service-4{
	position: relative;
	border-radius: 20px;
	padding: 4rem;
	overflow: hidden;
		
	.-List{gap: 20px;
				
		li{
			background-color: #F3F3F3;
			border-radius: 10px;
			width : calc((100% / 3) - 20px);

			display: flex;
			flex-direction: column;
			align-items: center;

			.-List__Wrap{
				padding: 2.4rem;

				figure{text-align: center;}

					h4{ margin-top: 16px; text-align: center;}
					.-List__Q{margin-top: 16px; text-align: left;}}

				.-List__A{position: relative; padding: 2.4rem; background-color: #FFD8C3; flex-grow: 1;}
				
                
                }}}


/**/
@media screen and (max-width: 959px){
.service-4{border-radius: 10px;padding: 1.6rem;
		
.-List{gap: 16px;
				
li{border-radius: 10px;width : calc((100% / 1) - 0px);

.-List__Wrap{padding: 1.6rem;
h4{ margin-top: 10px; text-align: center;}
.-List__Q{margin-top: 10px; text-align: left;}}
.-List__A{padding: 1.6rem; } }}}

}




/**/	
.service-5{
	margin-top: min(80px,3vw);
	position: relative;
	border-radius: 20px;
	padding: 4rem;
	overflow: hidden;

	h3{margin-bottom: min(40px,3vw); text-align: center;}
	h5{margin-top: min(40px,3vw); text-align: center;}


	.-ImgWrap{
		position: relative;
		text-align: center;
		margin-bottom: min(40px,3vw);
				
		figure{text-align: center;}

		.-ImgWrap-1{
			position: absolute;
			bottom:-5vw;
			left:0;
			width: 12vw;}

		.-ImgWrap-2{
			position: absolute;
			bottom:-5vw;
			right:0;
			width: 12vw;} }
		
	.-List{gap: 20px;
				
		li{
			padding: 3.2rem;
			background-color: #F3F3F3;
			border-radius: 10px;
			width : calc((100% / 2) - 20px);

			h4{ margin-bottom: 10px; color: var(--clr-sub); text-align: center;}
			p{}}}
}
			


/**/
@media screen and (max-width: 959px){
.service-5{border-radius: 10px;padding: 1.6rem;

h3{margin-bottom: min(40px,3vw); text-align: center;}
h5{margin-top: min(40px,3vw); text-align: left;}

.-ImgWrap{
.-ImgWrap-1{
			position: absolute;
			bottom:-5vw;
			left:-3vw;
			width: 8vw;}

		.-ImgWrap-2{
			position: absolute;
			bottom:-5vw;
			right:-3vw;
			width: 8vw;} }
		
.-List{gap: 10px;
li{padding: 1.6rem;width : calc((100% / 1) - 0px);
h4{ }
p{}}}
}

}





/*--
service-info
-------------------*/
.service-info{
	position: relative;
	padding: min(10rem,8vw) 1.6rem;
	text-align: center;

	p{margin-bottom: min(32px,3vw); text-align: center;}

	h2{margin-bottom: min(40px,3vw); text-align: center;}

	figure{
		margin-bottom: 12px,3vw;
		text-align: center; img{text-align: center; width: max(30vw,240px);}} 
	
	.-Btn {
		position: relative;
		margin: 0 auto;

		a{display: block;  margin: 0 auto;}

		span{display: block; text-align: center; margin-top: 12px;} 
		} 
}
	

/**/
@media screen and (max-width: 959px){

}




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

.flow__Body{
	position: relative;

	figure{
		z-index: 1;
		width: 10vw;
		position: absolute;
		top:-10vw;
		right: 0;
		img{}
	}}

/**/

.flow__Box{
    width: 100%; 
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;&:last-child{margin-bottom: 0;}

        dt{
            width: 290px;
            padding: 3rem;
            background-color: var(--clr-sub);
            position: relative;
                
                display: flex;
                align-items: center; /*上下*/
                justify-content: center;/*中央*/
            
            span{ 
                position: absolute;
                top:5px;
                left:15px;
                display: block;
                font-family: "Roboto", sans-serif;
                color: #fff; }
            
            p{ 
                font-weight: 500;
                line-height: 1.2;
                color: #fff; } }

            dd{
                width: calc(100% - 290px);
                padding: 3rem;
                background-color: #fff;
                display: flex;
                align-items: center; /*上下*/
            
                p{} } } 
		



/**/
@media screen and (max-width: 959px){
.flow__Box{border-radius: 10px;margin-bottom: 10px;&:last-child{margin-bottom: 0;}
dt{width: 100%;padding: 2rem;
span{ top:5px;left:15px; font-size: 12px;}
p{ } }

dd{width: 100%;padding: 2rem;
p{} } } 
}





/*---------------------------

/*contact

---------------------------*/
    
.contact{position: relative;}

/*---*/
.contact__Form {
	position: relative;
    margin: 0 auto;
    max-width: 786px;
    
    .contact__Ttl{
        text-align: center;
        margin-bottom: 80px;
    
		h3{margin-bottom: 24px;
			text-align: center;}

		h4{margin-bottom: 24px;
        text-align: center;}
    
        p{text-align: center;}} }

/**/
@media screen and (max-width: 768px){
.contact__Form {
.contact__Ttl{text-align: left;margin-bottom: 32px;
h3{margin-bottom: 16px;}
p{text-align: left;}} }
}



/*home-Form
---------------------------*/	
.contact__Form{

	dl{margin-bottom: 32px; 
		dt{margin: 16px 0 8px; }
		dd{ }} }


/**/
.radio-check-btn{
li{margin-top:0px; 
p{} } }

/**/
.check-box-btn{
li{margin-right:16px; 
p{} } }

/**/
.form-2clm{
li{ font-weight: 600; margin-right: 32px;
p{} } }


/**/
.icon-required{
	display: inline-block;
	margin-right: 8px;
	padding: 4px 6px;
	background-color: var(--clr-sub);
	text-align: center; 
	font-size: 12px;
	line-height: 12px;
	color:#fff; 
	border-radius: 3px;
    font-weight: 400!important;}



/**/
label {
  position: relative;
  cursor: pointer;}

/*radio----------

.radioBtn {
  font-weight: 600;
	font-size: 1.4rem;
}

.radioBtn::before,
.radioBtn::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 10px;}

.radioBtn::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 10px;
}

.radioBtn::after {
  background-color: var(--clr-sub);
  border-radius: 50%;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 16px;
}

input:checked + .radioBtn::after {
  opacity: 1;
}

input:checked + .radioBtn::before {
  border: 1px solid var(--clr-sub);
}*/


/*checkBox----------*/

.checkBox {
  font-weight: 600;
	font-size: 1.4rem;
}

.checkBox::before,
.checkBox::after {
  content: "";
  display: block; 
  position: absolute;
  transform: translateY(-50%);
  top: 50%;}

.checkBox::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  width: 20px;
  height: 20px;
  left: 5px;
}

.checkBox::after {
  background-color: var(--clr-sub);
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 11px;
}

input:checked + .checkBox::before { border: 1px solid var(--clr-sub);}

input:checked + .checkBox::after {
  opacity: 1;
    border: 1px solid var(--clr-sub);
}


.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}


@media screen and (max-width: 600px){
.step-Body__Form{margin:0px auto 18px;
.radio-check{margin-bottom: 24px;li{margin-top:8px; } }
dl{margin-bottom: 18px; 
dt{margin-bottom: 4px;  }
dd{ }} }

label {}
label::before,
label::after {top: 10px;}
	
.checkBox::before,
.checkBox::after {top: 10px;}

}




/*! #######################################################################

	input

####################################################################### */

input[type=text],
input[type=password],
textarea,
select{
  background: #fff;
  padding: 1.6rem;
  font-size:1.4rem;
  border:1px solid #DBDBDB;
  transition:border-color .1s linear;
  outline: none; 
	border-radius: 5px!important; 
	overflow: hidden;
}

input[type=password].fit-size {
    width: 100%;
    box-sizing: border-box; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
  background: #fff!important;
  border:solid 1px var(--clr-sub)!important;
  padding: 1.6rem; 
	border-radius: 5px;
    box-shadow: 0px 0px 0px 2px rgba(238, 116, 53, 1); }

/**/
input[type=text]:focus.error-msg,
input[type=password]:focus.error-msg,
textarea:focus.error-msg{
  background: #FDF2F2!important;
  border:solid 1px #EC5962!important;
  padding: 1rem; 
	border-radius: 5px; 
    box-shadow: 0px 0px 0px 0px rgba(238, 116, 53, 1); }

::placeholder {
  color: #A5A5A5;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
}



input[type=text].ss-size{width:20px;}
input[type=text].s-size{width:60px;}
input[type=text].m-size{width:240px;}
input[type=text].l-size{width:70%;}
input[type=text].ll-size{width:780px;}
input[type=text].fit-size{width:100%;box-sizing:border-box;}
label{margin-right: 10px;}
input[type=text],
input[type=password],
input[type=submit],
input[type=button],
textarea,
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  appearance:none;
  border-radius: 0; }

select{width: 100%;}
select.s-size{width: 25%;}
select.m-size{width: 240px;}
textarea{width:100%; height: 150px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}

:-moz-any(select):before {
  background-color: #fff; /* this is necessary for overcome the caret default browser */
  pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events  */
  z-index: 1; /* this is necessary for overcome the pseudo element */ }

select{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	font-family:'Noto Sans JP', sans-serif!important; }

select::-ms-expand{
  display:none; }

select:focus{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	color:#121212;}

.complete{
  background:#ededed!important;
  border:solid 1px #d1d1d1!important; }

.form-title{
  /*margin-bottom:15px;*/
  padding-left:10px;
  font-size:16px;
  color: #777 ;
  min-width: 174px;
  display: inline-block; }

.btnbox{
	margin:min(80px,4vw) auto 0; 
	width: 100%; 
	text-align: center;
	
	input[type=submit]{
		border-radius: 10px;
		margin: 0 auto;
		width: 100%;
		border: none;
		font-family: "Zen Kaku Gothic New", sans-serif;}
}




/**/

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
font-family: "Zen Kaku Gothic New", sans-serif;
}

.nav__Btn{
input[type=text]{
  background: #fff;
  border:none;
  transition:border-color .1s linear;}

input[type=text]:focus{
  background: #fff!important;
  border:none!important;
  padding: none; 
    box-shadow: none; }
}

.spNav__Search{
input[type=text]{
  background: #fff;
  border:none;
  transition:border-color .1s linear;}

input[type=text]:focus{
  background: #fff!important;
  border:none!important;
  padding: none; 
    box-shadow: none; }
}


input[type=submit]{
	outline: none; }


@media screen and (max-width: 600px){
.btnbox{width: 100%; text-align: center; button{margin:0 auto;}}
input[type=text].m-size{width:100%;}
input[type=text].l-size{width:100%;}
}


/*---------------------------

/*thanks

---------------------------*/

.header-Thanks{
	padding: 2rem 0 0 0; 
	width : 100% ; 
	/*background: rgba(255, 255, 255, 1);*/
	z-index: 101;

	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%); 

	h1{
    text-align: center;
	
		a{
			display: block; 
			max-width:140px; 
			margin:0 auto; 
			text-align: center; 
			img{text-align: center}} } }

.thanks{
	position: relative;
	margin:0 auto ;
	padding:10vw 2rem ;
	max-width: 1280px;
	text-align: center;
	
	h2{margin-bottom: 10px;text-align: center;}
	p{margin-bottom: 10px;text-align: center;}
	a{text-align: center; margin: 32px auto 0;}
}




/*//////////////////////////////////////

newsblog
///////////////////////////////////////*/

.news-Blog{
	margin:0 auto ;
	padding: 0 1.6rem;
    
    article{
	width:calc(100% - 340px);
    position: relative; }

    aside{
	width:300px;
    position: relative; } }

/**/
@media screen and (max-width: 959px){
.news-Blog{
	padding-top:0px;}
}


/*TOP / news-Sec__Item
---------------------------*/




/*ページ送りここから*/
.wp-pagenavi {
	margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

  .wp-pagenavi span,
  .wp-pagenavi a {
    text-align: center;
    font-size: 14px;
    color: #D3826A;
    border: 1px solid #D3826A;
    background-color: #fff;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 3px;
    text-decoration: none!important; 
	border-radius: 50px;}

  .wp-pagenavi a:hover {
	color: #fff;
	background: #D3826A;
	border: 1px solid #D3826A;
	text-decoration: none; }

.wp-pagenavi span.current {
	color: #fff!important;
	background: #D3826A;
	border: 1px solid #D3826A;}

/*ページ送りここまで*/


/**/
.pagination-1 {
    margin-top: min(80px,8vw);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.pagination-1 a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid #D3826A;
    border-radius: 25px;
    color: #D3826A;
    transition: 0.25s;
}

.pagination-1 a:not(:hover) {
    text-decoration: none;
}

.pagination-1 .current a {
    background-color: #D3826A;
    color: #fff;
    pointer-events: none;
    cursor: pointer;
}


.pagination-1 a:hover {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid #D3826A;
    border-radius: 25px;
    color: #fff;
    background-color: var(--clr-sub);
}

/**/
@media screen and (max-width: 959px){
.news-Top{gap:20px;
	.news-Sec__Item{width : calc((100% / 2) - 10px);} }
}

/**/
@media screen and (max-width: 768px){
.news-Top{gap:20px;
	.news-Sec__Item{width : calc((100% / 1) - 0px);} }
}



/* section -----*/
.news-Sec{}


/*h2ttl-Wrap
---------------------------*/
.h2ttl-Wrap{
    position:relative; 
    margin-bottom: 56px;
	
    h2{margin-bottom: 16px;color: var(--clr-sub); letter-spacing: 0.01em; line-height: 1.4; font-weight: 600;}
    
    .news-Sec__List{
        
        li{
            display: inline-block;
        
            time{}
            
            .-tag{
                margin-left: 2px;
                display: inline-block;
                padding: 0.6rem 1rem;
                border-radius: 50px;
                color: var(--clr-wh);
                text-align: center;
                line-height: 1;
                background-color: var(--clr-black);}
        
            a{display: block;color: var(--clr-wh);}
            
        } } } 


/*//- @media 768px-//*/
@media screen and (max-width: 768px){
.h2ttl-Wrap{margin-bottom: 24px; } 
}

/**/

.news-Sec{

    p{margin-top: 24px;}
    
    figure{
        width: 100%;
        margin-bottom: 32px;
        
        figcaption{margin-top: 0.8rem; font-weight: 500;}} }




/*news__tx-Sngl
---------------------------*/

.news__tx-Sngl{
	margin-top: 30px;
	width: 100%;
	height:auto;
	position: relative;
	
	figure {margin-bottom: 30px; img{text-align: center;}}

	.blog-Btn{margin: 0 auto 24px;}
	
	h1{
	margin-bottom: 10px;
	padding-bottom: 10px; 
	border-bottom: 1px solid var(--clr-sub); 
    color: var(--clr-sub); }
	
	h2{
	margin-bottom: 10px; color: var(--clr-sub);}
	
	h3{
	margin-bottom: 10px;color: var(--clr-sub);}
	
	h4{
	margin-bottom: 10px; color: var(--clr-sub);}
	
	.blog-Link{color: var(--clr-sub); text-decoration: underline;}

	/**/
	ul {
		margin: 24px 0;

		li {
		position: relative;
		padding-left: 10px;

		&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 12px;
		left: 0;
		width: 4px;
		height: 4px;
		background-color: var(--clr-sub);
		border-radius: 5px;}}}

	/**/
	ol {
		margin: 24px 0;

		li {
		position: relative;
		padding-left: 10px;

		&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 12px;
		left: 0;
		width: 4px;
		height: 4px;
		background-color: var(--clr-sub);
		border-radius: 5px;}}}


		.-Blog-Area{
			padding: 2.4rem;
			background-color: #fff;
			border-radius: 4px;
		}
		
	
	 }



/**/
@media screen and (max-width: 768px){
.news__ttl-Sngl{margin:0 auto 20px;
h2 {} }
	
.news__date {margin:0px auto 0px;
li{} }

.news__tx-Sngl{margin-top: 10px;width: 100%;
figure {margin-bottom: 10px; img{width:100%;}} }

}



/*kijiList
---------------------------*/
.kijiList{
	border-top: 1px solid #cecece;
	margin: 50px auto 0;
	padding: 20px 0 0;
	max-width: 960px;
	display:flex; 
	flex-wrap: wrap;
	justify-content: space-between; }

.kijiList li{
	width: 32%; font-weight:600; text-align: center;}

/*kiji btn-------*/
.button-prev,.button-next,.button-all {
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	padding: 0;
	transition: all 0.25s ; }

@media screen and (max-width: 959px){ 
.kijiList{margin: 30px auto 0;padding: 20px 0; border-top: none;}
	
.kijiList li{
	width: 100%;
	margin-bottom: -1px;
	padding: 1rem 0;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	text-align: center;}	
}

.button-prev:hover,.button-next:hover,.button-all:hover {color: var(--sub) !important;}





/*aside
---------------------------*/
.news-Side__List{
    
    .-cmn{
        margin-bottom: 40px;
        &:last-child{margin-bottom: 0;}
        
        h2{
			font-weight: 600;
            margin-bottom: 1.6rem;
            border-bottom: 1px solid #B4B4B4;
             }
        
        .-List1{
        
            li{
                margin-bottom: 16px;
                &:last-child{margin-bottom: 0;}
                
                }}

        .-List2{
        
            li{
                margin-bottom: 16px;
                &:last-child{margin-bottom: 0;}
                
                }}


		.-List3{
        
            li{
                margin-bottom: 16px;
                &:last-child{margin-bottom: 0;}

				.-Rank{

					.-RankNum{
						width: 48px;
						height: 48px;
						padding: 1.8rem 2.1rem;
						color: #fff;
						border-radius: 48px; 
						text-align: center;
						font-family: "Roboto", sans-serif;
						font-weight: 600;
						line-height: 1;}

					p{width: calc(100% - 54px); line-height: 1.3;}
				}
                
                }}


			
            
            }}



.news-Side__List .-List1 a{
                    display: inline-block; 
                    transition: 0.25s;

                    font-size: clamp(1.4rem,1.5vw,1.6rem);
                    line-height: 1.4;
                    font-weight:500;
                    letter-spacing: 0.08em;
                    font-feature-settings : "palt"; 

                    &:before { 
                    content:" "; 
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50px;
                    background-color:var(--clr-sub);
                    background-size: contain;
                    margin-right: 0.8rem;

                    position: relative; 
                    top: 50%; }
                }

.news-Side__List .-List3 a{transition: 0.25s;}

.news-Side__List .-List2 a{
                    display: inline-block; 
                    transition: 0.25s;

                    font-size: clamp(1.4rem,1.5vw,1.6rem);
                    line-height: 1.4;
                    font-weight:500;
                    letter-spacing: 0.08em;
                    font-feature-settings : "palt"; 
                }

.news-Side__List a:hover{opacity: 0.6;}


.-List2 li{
    display: grid; /* グリッドレイアウトを有効にする */
    grid-template-columns: 0.5fr 1fr ; /* カラムの比率を設定 */
    gap: 10px; /* カラム間のスペースを設定 */
    width: 100%;

    figure{
        position: relative;
        aspect-ratio: 4/3;

        .-Num{
            position: absolute;
            top:4px;
            left:4px;

            width: 16px;
            height: 16px;
            background-color: var(--clr-sub);
            color: #fff;
            padding: 0.25rem 0.5rem;
            
            border-radius: 50px;
            text-align: center;
            font-size: 1rem;
            line-height: 1;
            font-weight:500;
            letter-spacing: 0.08em;
            font-feature-settings : "palt"; 

        }

        img{ 
			border-radius:10px; 
			width: 100%;
			height: 100%;
			object-fit: cover; }}


            .-tx{
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;} }

/* 959px-----*/
@media screen and (max-width: 959px){
.news-Blog{}
.news-Blog article{width:100%;}
.news-Blog aside{margin-top:30px; width:100%;} }

/* 768px-----*/
@media screen and (max-width: 768px){
.news-Blog article section{margin-bottom:30px;flex-wrap: wrap; }
.news-Blog figure{margin:0 auto 10px;width:100%; }
.news-Blog .blogtx-Area{width:100%; }
.tag-List li {width:48%; } }



/*kanren
---------------------------*/
.kanren{
	margin-top: 80px;

	h2{margin-bottom: 24px; font-weight: 600;}}

/* 959px-----*/
@media screen and (max-width: 959px){
.kanren{
	margin-top: 40px;

	h2{margin-bottom: 16px; font-weight: 600;}}
}














/*//////////////////////////////////////

CASE 事例
///////////////////////////////////////*/


.case__Body{

	.-List{

		li{
		width: 100%;
		padding: 0 0rem 2.4rem;
		margin-bottom: 24px;
		border-right: none; 
		border-bottom: 2px solid #8b8b8b; 
		&:last-child{border-right: none; border-bottom: none; margin-bottom: 0px; }
	
			/**/
			.-Ttl{
					margin-bottom: 16px;

				.-Num{
					margin-bottom: 4px;
				
					span{
					display: inline-block;
						margin-right: 4px;
						padding: 0.2rem 0.8rem;
						background-color: var(--clr-sub);
						text-align: center;
						font-weight: 900;}

					h4{
					display: inline-block;}}


					h3{}}


			/**/
			.-Tag{
					margin-bottom: 16px;

				div{
					display: inline-block;
					margin-right: 4px;
					padding: 0.4rem 1.6rem;
					background-color: var(--clr-wh);
					text-align: center;
					border: 1px solid #ACACAC; 
					border-radius: 20px;}}


			/**/
			.-dl{

				dl{
					border-top: 1px solid #DADADA; 
					margin-top: 10px;
					padding-top: 10px;

				dt{
					margin-bottom: 0px;
					color: var(--clr-sub);}

				dd{}}}
			
			.button-Main{margin: min(24px,3vw) 0 0 0 ;}
			
			
			}}}
	


/**/
@media screen and (min-width: 959px){


.case__Body{

	.-List{

		li{
		width: 33.3333333334%;
		padding: 0 2.4rem;
		border-right: 1px solid #DADADA; 
		border-bottom: none; 
		&:last-child{border-right: none; }
	
			/**/
			.-Ttl{
					margin-bottom: 16px;

				.-Num{
					margin-bottom: 10px;
				
					span{
					display: inline-block;
						margin-right: 4px;
						padding: 0.2rem 0.8rem;
						background-color: var(--clr-sub);
						text-align: center;
						font-weight: 900;}

					h4{
					display: inline-block;}}


					h3{}}


			/**/
			.-Tag{
					margin-bottom: 16px;

				div{
					display: inline-block;
					margin-right: 4px;
					padding: 0.4rem 1.6rem;
					background-color: var(--clr-wh);
					text-align: center;
					border: 1px solid #ACACAC; 
					border-radius: 20px;}}


			/**/
			.-dl{

				dl{
					border-top: 1px solid #DADADA; 
					margin-top: 10px;
					padding-top: 10px;

				dt{
					margin-bottom: 0px;
					color: var(--clr-sub);}

				dd{}}}
			
			.button-Main{margin: min(24px,3vw) 0 0 0 ;}
			
			
			}}}
}