@charset "UTF-8";

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,:after,:before{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0}main{display:block}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0}address,blockquote,dl,figure,form,iframe,ol,p,pre,table,ul{margin:0}ol,ul{padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit}[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox}[type=radio]{-webkit-appearance:radio;appearance:radio}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer;-webkit-appearance:none;appearance:none}[type="button"][disabled],[type="reset"][disabled],[type="submit"][disabled],button[disabled]{cursor:default}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}select::-ms-expand{display:none}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]{outline:0}table{border-collapse:collapse;border-spacing:0}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}[hidden],template{display:none}

html,body{
	padding:0;
	margin:0;
	font-family: "Montserrat", Arial, "Noto Sans JP", sans-serif;
	font-weight: 400;
	/*background: #fff;*/
	background: rgb(255,255,255);
	line-height: 1.8rem;
}

body {
   text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

@media print {
    body {
        zoom: 0.68;
        -webkit-print-color-adjust: exact;
    }
}

.container {
	width: 100%;
	padding: 0 20px;
}
@media print, screen and (min-width:768px) {
	.container {
	max-width: 1240px;
	margin: 0 auto;
}
}
.row {
	display: flex;
	flex-wrap: wrap;
}
.justify-content-center {
	justify-content: center
}
.justify-content-right {
	justify-content: flex-end;
}
.justify-content-left {
	justify-content: flex-start;
}
.align-items-stretch {
	align-items: stretch
}
.align-items-center {
	align-items: center
}

.pcnone {display: block!important;}
.spnone {display: none!important;}

@media print, screen and (min-width: 769px) {
	.pcnone {display: none!important;}
	.spnone {display: block!important;}
}

a.btn,
button.btn {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 400;
  border: solid 1px #000;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 10px 50px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(0,0,0,1);
}

a.btn:hover,
button.btn:hover {
  color: #000;
  background: rgba(255,255,255,1);
  transition: all 0.3s;
}


.f-area {
	height: 100px;
	align-items: center;
}
.f-area,
.f-area .f-link ul {
	display: flex;
	flex-wrap: wrap;
}
.f-area .f-link ul li {
	padding-right: 1rem;
}
.f-area .f-link {
	width: 75%;
}
.f-area .f-logo {
	width: 25%;
}
.f-area .f-logo img {
	max-width: 100%;
}

/* --- シャッター --- */
.shutter {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #1e1e1e;
  z-index: 9999;
  display: none; 
}
.shutter.is-active {
  display: block;
  animation: byeShutter 2.6s forwards;
  pointer-events: none;
}
.shutter::before, .shutter::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; }
.shutter::before { background-color: #b5a58b; width: 0; height: 1px; }
.is-active.shutter::before { animation: shutterOpen1 2.6s forwards; }
.shutter::after { width: 120%; height: 0; margin-left: -10%; background-color: #f3f3f3; }
.is-active.shutter::after { animation: shutterOpen2 2.6s forwards; }

/* --- パララックス構造 --- */
.parallax-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  clip-path: inset(0 0 0 0);
  overflow: visible;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 固定背景：fixedを維持するため、opacityがかかる要素の外に置きます */
.bg-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* 背景が表示される状態 */
.bg-fixed.is-visible {
  opacity: 1;
}

/* フェードさせる中身：ここだけにアニメーションをかける */
.js-fade-target {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
   /* padding: 40px 0px;*/
padding: 90px 0px 40px;
  opacity: 0;
  transition: opacity 1.5s ease;
  
}
#index-main .js-fade-target {
	padding: 0px 0px 40px;
}
@media print, screen and (min-width:768px) {
	#index-main .js-fade-target {
		padding: 90px 0px 40px;
	}
}
.content {
  color: #fff;
  text-align: center;
  transform: translateY(200px);
  /*transition: transform 1.2s ease;*/
  transition: transform 2.5s ease;
  padding: 0 20px;
  position: relative;
}

.content h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 16px 32px rgba(0, 0, 0, 0.4);
}
.content h2 {
  margin: 2rem 0 0;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  padding-bottom: 1.5rem;
  text-align: center;
  /*text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 16px 32px rgba(0, 0, 0, 0.4);*/
}

#index-main {
	position: relative;
}
div.index-logo {display:block;width:300px;max-width:80%;position:absolute;top: 15px; left:15px;}
/*div.index-logo {
    filter: 
        drop-shadow(1px 1px 1px rgba(173, 216, 230, 0.8))
        drop-shadow(-1px -1px 1px rgba(173, 216, 230, 0.8))
        drop-shadow(0 0 5px rgba(173, 216, 230, 0.5));
}*/
div.index-logo img {width: 60%;}
.index-logomark img {
	position: absolute;
	width:100%;
	top:10px;
	left:0px;
	mix-blend-mode:multiply;
	animation: fade-in 3s;
	animation-fill-mode: forwards;}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: .45;
  }
}
@media print, screen and (min-width:768px) {
	div.index-logo {top: 30px; left:30px;}
	div.index-logo img {width: 100%;}
	.index-logomark img {width:40%;}
}

#index-main .content h2 {
	text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 16px 32px rgba(0, 0, 0, 0.4);
}
#index-main .content h2.company-name {
	font-size: 1.2rem;
	text-shadow: unset;
	color: #333;
	font-weight: 400;
}
.content .index-subttl,
.content .index-subttl2 {
	position:absolute;
	top: -3rem;
	left:2px;
}
.content .index-subttl span {
	display: block;
	width: 170px;
	height: 48px;
	text-align:left;
	font-size: 1.5rem;
	padding: 0 0 0 10px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22169%22%20height%3D%2233%22%20viewBox%3D%220%200%20169%2033%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M154.868%2018.7697H0V0H0.538905V18.2299H154.33V0H154.868V18.7697Z%22%20fill%3D%22black%22%2F%3E%3Cpath%20d%3D%22M154.789%2018.3097L154.408%2018.691L168.619%2032.9086L169%2032.5274L154.789%2018.3097Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom left;
}

.content .index-subttl2 span {
	display: block;
	width: 170px;
	height: 48px;
	text-align:left;
	font-size: 1.5rem;
	padding: 0 0 0 10px;
	color: #fff;
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22169%22%20height%3D%2233%22%20viewBox%3D%220%200%20169%2033%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M154.868%2018.7697H0V0H0.538905V18.2299H154.33V0H154.868V18.7697Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M154.789%2018.3097L154.408%2018.691L168.619%2032.9086L169%2032.5274L154.789%2018.3097Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom left;
}

/* 表示クラス */
.is-visible { opacity: 1 !important; }
.is-visible .content { transform: translateY(0) !important; }

/* アニメーション */
@keyframes byeShutter { 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes shutterOpen1 { 0% { width: 0; height: 1px; } 50% { width: 100%; height: 1px; } 90% { width: 100%; height: 100%; } 100% { width: 100%; height: 100%; } }
@keyframes shutterOpen2 { 60% { width: 120%; height: 0; transform: rotate(5deg); } 90% { width: 120%; height: 100%; transform: rotate(-5deg); } 100% { width: 120%; height: 100%; transform: rotate(-5deg); } }
@keyframes contentScale { 0% { opacity: 0; } 70% { transform: perspective(800px) scale(0.9) rotateX(15deg); opacity: 0; } 100% { transform: perspective(800px) scale(1) rotateX(0); opacity: 1; } }
.has-shutter-anim { animation: contentScale 2.6s forwards; }

/* レスポンシブ */
@media (max-width: 768px) {
  .content h1 {
    font-size: 1.7rem;
  }
}


/* toggle button */
#drawer {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
}
.open {
	z-index: 2;
	top: 8px;
	right: 8px;
	width: 48px;
	height: 48px;
	border-radius: 48px;
	/*background: #86c0de;*/
	background: #333;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open:hover {
	background: #4381b0;
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-8px);
}
.open::after {
	transform: translateY(8px);
}
.close {
	z-index: 1;
	inset: 0;
	pointer-events: none;
	transition: background .6s;
}
#drawer:checked + .open {
	/*background: #dc6688;*/
	background: #7699b9;
	transform: translateX(-280px);
}
#drawer:checked + .open span {
	transform: scaleX(0);
}
#drawer:checked + .open::before {
	transform: rotate(135deg) scaleX(1.2);
}
#drawer:checked + .open::after {
	transform: rotate(-135deg) scaleX(1.2);
}
#drawer:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}
/* drawer menu */
.menu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	right: 0;
	width: 280px;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0,0,0,.6);
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu h2 {
	color: white;
	font-family: "Ubuntu Condensed", sans-serif;
	font-weight: 400;
	letter-spacing: .1em;
	text-align: center;
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	line-height: 1.4;
}
.menu li:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
	display: block;
	padding: 1em 2em;
	color: white;
	text-decoration: inherit;
	transition: background .6s;
}
.menu a:hover {
	background: black;
}
#drawer:checked ~ .menu {
	transform: none;
}
#index-philosophy .content {
	background:rgba(255,255,255,.75);
	padding: 30px;
	width: 100%;
	margin: 0 auto;
	color: #000;
	text-align: left;
}
#index-business .content {
	background:rgba(255,255,255,.75);
	padding: 30px;
	width: 100%;
	margin: 0 auto;
	color: #000;
	text-align: left;
}
#index-business .content h3 {
	color: #c40018;
	}
#index-business .content ul.list-icon {
	list-style: none;
	width: 100%;
	margin: 10px 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	justify-content: center;
}
#index-business h3 {
	width: 100%;
	text-align:center;
}
#index-business .content ul {

	margin: 20px auto;
	text-align: left;
	display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0;
  margin: 0; 
}
#index-business .content ul li {
	width: 100%;
	padding-bottom: 0.5rem;

}
#index-business .content ul.list-icon li {
	background: rgba(255,255,255,.75);
	margin-bottom: 10px;
	border-radius: 7px;
	text-align: center;
	padding: 0;
	border: 1px solid #ccc;
	font-weight: 700;
}
#index-business .content ul.list-icon li img {
	height: 40px;
}


@media print, screen and (min-width:821px) {
	#index-philosophy .content {
		width: 50%;
		margin: 0 0 0 auto;
	}
	#index-business .content {
		/*width: 100%;*/
		width: 70%;
		margin: 0 auto 0 0;
	}
	
	#index-business .content ul.list-icon {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
}
#index-philosophy .index-philosophy-area p {
	padding-bottom: 1rem;
}
.index-philosophy-area ul {
	display: flex;
	flex-wrap: wrap;
	list-style: disc;
	margin-left: 1rem;
	margin-bottom: 1rem;
}
.index-philosophy-area ul li {
	margin: 0 1rem;
	padding-right: 1rem;
}
#index-business .index-philosophy-area ul li {
	margin: 0 .5rem;
	padding-right: 0;
}
#index-business .index-philosophy-area .row {
	display: block;
	/*align-items: stretch;*/
	align-items: stretch;
	width: 100%;
	height: auto;
}
@media print, screen and (min-width:768px) {
	#index-business .index-philosophy-area .row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3%; 
		
	}
}
#index-business .index-philosophy-area .row .column3-1 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 20px 10px 0 10px;
	border: 1px solid #000;
	font-size: .85rem;
	line-height: 1rem;
	justify-content: center;
	background-color: #fff;
	margin-bottom: 10px;
	line-height: 1.5rem;
}
#index-business .index-philosophy-area .row .column3-1 p {
	line-height: 1.5rem;
}
#index-business .index-philosophy-area .row .column3-1 div {
	width: 40px;
	text-align: center;
	margin: 10px auto 20px;
}
#index-business .index-philosophy-area .row .column3-1 div.inner-item {
	width: 100%;
	margin: 10px auto;
}
.index-philosophy-area .row .column3-1 h3 {
	font-size: 1rem;
	font-weight: 800;
	padding: .5rem 0;
}

.index-philosophy-area .row .column3-1 p {
	font-size: .85rem;
	line-height: 1.6rem;
	margin-top: .5rem;
	display:block;
	width: 100%;
	text-align:center;
}

#index-aboutus .index-aboutus-area {
	/*background:rgba(0,5,27,.5);*/
	background:rgba(255,255,255,.75);
	padding: 30px;
	width: 100%;
	margin: 0 auto;
	color: #000;
	position: relative;
}
#index-aboutus dl {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	align-items: stretch;
	
}
#index-aboutus dl dt
 {
	text-align:left;
	width: 5rem;
	text-align: justify;
	text-align-last: justify;
}

#index-aboutus dl dd
 {
	text-align:left;
	width: 100%;
}
#index-aboutus dl dd {
	margin-bottom: .5rem;
}
@media print, screen and (min-width:821px) {
	#index-aboutus .index-aboutus-area {
		width: 50%;
		margin: 0 0 0 auto;
	}
	#index-aboutus dl dt {
		width: 5rem;
		padding-bottom: .5rem;
	}
	#index-aboutus dl dd {
		width: calc(100% - 7rem);
		margin-left: 2rem;
	}
}


#header {height: 80px; width: 100%;}
#header div.h-logo {display:block;width:220px;max-width:80%;margin-top: 15px; margin-left:15px;}
/*#header div.h-logo{
    filter: 
        drop-shadow(1px 1px 1px rgba(173, 216, 230, 0.8))
        drop-shadow(-1px -1px 1px rgba(173, 216, 230, 0.8))
        drop-shadow(0 0 5px rgba(173, 216, 230, 0.5));
}*/
#header div.h-logo img {width: 100%;}

@media print, screen and (min-width:768px) {
	#header div.h-logo {margin-top: 15px; margin-left:30px;}
}

.head-title {
	background: #000;
	height: 200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #fff;
}

.head-title.head-title-business {
	background: url('../img/index/top03.webp') no-repeat center bottom;
	background-size: cover;
	height: 200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #000;
}
.head-title.head-title-business h2 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .1rem;
  text-shadow    : 
       1px  1px 1px rgba(255,255,255,.5),
      -1px  1px 1px rgba(255,255,255,.5),
       1px -1px 1px rgba(255,255,255,.5),
      -1px -1px 1px rgba(255,255,255,.5),
       1px  0px 1px rgba(255,255,255,.5),
       0px  1px 1px rgba(255,255,255,.5),
      -1px  0px 1px rgba(255,255,255,.5),
       0px -1px 1px rgba(255,255,255,.5);  
}
.head-title.head-title-business h2 span {
  font-size: .75rem;
  letter-spacing: .05rem;
  display: inline-block;
}
@media print, screen and (min-width:768px) {
	.head-title.head-title-business {
		background: url('../img/index/top03.webp') no-repeat center bottom -350px;
	}
}
#business .row {
	padding: 60px 0 0 0;
}

#business .row .column3-1 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 20px 10px 0 10px;
	border: 1px solid #333;
	font-size: .85rem;
	line-height: 1rem;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin-bottom: 50px;
	padding: 20px 0 30px;
}
#business .row .column3-1 div {
	text-align: center;
	margin: 10px auto 20px;
}
#business .row .column3-1 h3 {
	font-size: 1rem;
	font-weight: 800;
	padding: .5rem 0;
}

#business .row .column3-1 p {
	font-size: .85rem;
	line-height: 1.6rem;
	margin-top: .5rem;
	display:block;
	width: 100%;
	text-align:center;
}

#business .row ul.list-icon {
	list-style: none;
	width: 100%;
	margin: 10px 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px auto;
	padding: 0 20px;
}
#business .row ul.list-icon li {
	background: rgba(255,255,255,.75);
	border-radius: 7px;
	text-align: center;
	padding: 0;
	border: 1px solid #ccc;
	width: 47%;
	margin: 0 1.5% 10px;
	font-weight: 700;
}
#business .row ul.list-icon li img {
	height: 40px;
}


@media print, screen and (min-width:821px) {
	#business .row {
		margin: 0 auto 0 0;
	}
	
	#business .row ul.list-icon li {
	width: 17%;
	margin: 10px 1% ;
	}
}


.head-title.head-title-contact {
	background: url('../img/bg-title-contact.webp') no-repeat center bottom;
	background-size: cover;
	height: 200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #000;
}
.head-title.head-title-contact h2 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .1rem;
  text-shadow    : 
       1px  1px 1px rgba(255,255,255,.5),
      -1px  1px 1px rgba(255,255,255,.5),
       1px -1px 1px rgba(255,255,255,.5),
      -1px -1px 1px rgba(255,255,255,.5),
       1px  0px 1px rgba(255,255,255,.5),
       0px  1px 1px rgba(255,255,255,.5),
      -1px  0px 1px rgba(255,255,255,.5),
       0px -1px 1px rgba(255,255,255,.5);  
}
.head-title.head-title-contact h2 span {
  font-size: .75rem;
  letter-spacing: .05rem;
  display: inline-block;
}
@media print, screen and (min-width:768px) {
	.head-title.head-title-contact {
		background: url('../img/bg-title-contact.webp') no-repeat center bottom -380px;
	}
}



/*==================================================
	Inquiry
==================================================*/

.dl-form {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.dl-form dt,
.dl-form dd {
	width: 100%;
	padding: .5rem 1rem;
	margin-top: 1.25rem
}

@media print, screen and (min-width:768px) {
	.dl-form dt {
		width: 15rem;
	}
	.dl-form dd {
		width: calc(100% - 15rem);
	}
}
/*メールフォーム*/

.cp_form {
position: relative;
}
.cp_form .cp_radio, .cp_group {
position: relative;
/*margin-top: 2.25rem;
margin-bottom: 2.25rem;*/
}
.cp_form .cp_group input[type=button],
.cp_form .cp_group input[type=submit],
.cp_form .cp_group input[type=checkbox],
.cp_form .cp_group input[type=radio],
.cp_form .cp_group input[type=text],
.cp_form .cp_group input[type=tel],
.cp_form .cp_group input[type=password],
.cp_form .cp_group input[type=email],
.cp_form .cp_group input[type=url],
.cp_form .cp_group input[type=date],
.cp_form .cp_group input[type=number],
.cp_form .cp_group textarea,
.cp_form .cp_group .cp_file .file_text,
.cp_form .cp_group select {
font-family: inherit;
}
.cp_form .cp_group input {
height: 1.9rem;
}
.cp_form .cp_group textarea {
resize: vertical;
}
.cp_form .cp_group select::-ms-expand {
display: none;
}
.cp_form .cp_ipselect {
position: relative;
width: 100%;
margin: 2em auto;
}
.cp_form .cp_sl {
position: relative;
font-size: 1rem;
font-family: inherit;
background-color: transparent;
width: 100%;
padding: 10px 10px 10px 0;
border-radius: 0;
border: none;
}
.cp_form .cp_sl:focus {
outline: none;
border-bottom: 1px solid rgba(0,0,0, 0);
}
.cp_form .cp_ipselect .cp_sl {
-webkit-appearance: none;
appearance: none;
}
.cp_form .cp_ipselect:after {
position: absolute;
top: 18px;
right: 10px;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.cp_form .cp_sl_selectlabel {
color: #b3b3b3;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}
.cp_form .cp_sl:focus ~ .cp_sl_selectlabel,
.cp_form .cp_sl:valid ~ .cp_sl_selectlabel {
font-size: 0.8rem;
color: #da3c41;
top: -20px;
transition: 0.2s ease all;
}
.cp_form .cp_sl_selectbar {
position: relative;
display: block;
width: 100%;
}
.cp_form .cp_sl_selectbar:before,
.cp_form .cp_sl_selectbar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #da3c41;
transition: 0.2s ease all;
}
.cp_form .cp_sl_selectbar:before {
left: 50%;
}
.cp_form .cp_sl_selectbar:after {
right: 50%;
}
.cp_form .cp_sl:focus ~ .cp_sl_selectbar:before,
.cp_form .cp_sl:focus ~ .cp_sl_selectbar:after {
width: 50%;
}
.cp_form .cp_sl_highlight {
position: absolute;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
.cp_form .cp_group .cp_label {
position: absolute;
top: 0.25rem;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 1rem;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
}
.cp_form .cp_group .bar {
position: relative;
border-bottom: 0.0625rem solid #999999;
display: block;
}
.cp_form .cp_group .bar::before {
content: '';
height: 0.125rem;
width: 0;
left: 50%;
bottom: -0.0625rem;
position: absolute;
background: #da3c41;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
.cp_form .cp_group input[type=button],
.cp_form .cp_group input[type=submit],
.cp_form .cp_group input[type=checkbox],
.cp_form .cp_group input[type=radio],
.cp_form .cp_group input[type=text],
.cp_form .cp_group input[type=tel],
.cp_form .cp_group input[type=password],
.cp_form .cp_group input[type=email],
.cp_form .cp_group input[type=url],
.cp_form .cp_group input[type=date],
.cp_form .cp_group input[type=number],
.cp_form .cp_group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
-webkit-box-shadow: none;
box-shadow: none;
}
.cp_form .cp_group select,
.cp_form .cp_group input:focus,
.cp_form .cp_group input:valid,
.cp_form .cp_group textarea:focus,
.cp_form .cp_group textarea:valid {
color: #333333;
}
.cp_form .cp_group select ~ .cp_label,
.cp_form .cp_group input:focus ~ .cp_label,
.cp_form .cp_group input:valid ~ .cp_label,
.cp_form .cp_group textarea:focus ~ .cp_label,
.cp_form .cp_group textarea:valid ~ .cp_label {
font-size: 0.8rem;
/*color: #da3c41;*/
color: #b3b3b3;
top: -1rem;
left: 0;
}
.cp_form .cp_group select:hover,
.cp_form .cp_group input:focus,
.cp_form .cp_group textarea:focus {
outline: none;
}
.cp_form .cp_group select:hover ~ .cp_label,
.cp_form .cp_group input:focus ~ .cp_label,
.cp_form .cp_group textarea:focus ~ .cp_label {
color: #da3c41;
}
.cp_form .cp_group select:hover ~ .bar::before,
.cp_form .cp_group input:focus ~ .bar::before,
.cp_form .cp_group textarea:focus ~ .bar::before {
width: 100%;
left: 0;
}
.cp_form .checkbox label,
.cp_form .cp_radio label {
position: relative;
cursor: pointer;
padding-left: 2rem;
text-align: left;
color: #333333;
display: block;
}
.cp_form .checkbox input,
.cp_form .cp_radio input {
width: auto;
.00000001;
position: absolute;
left: 0;
}
.cp_form .radio {
margin-bottom: 1rem;
}
.cp_form .radio .ch_bar {
position: absolute;
top: -0.25rem;
left: -0.25rem;
cursor: pointer;
display: block;
font-size: 1rem;
-webkit-user-select: none;
user-select: none;
color: #999999;
}
.cp_form .radio .ch_bar::before,
.cp_form .radio .ch_bar::after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 0.25rem;
width: 1rem;
height: 1rem;
-webkit-transition: -webkit-transform 0.28s ease;
transition:         transform 0.28s ease;
border-radius: 50%;
border: 0.125rem solid currentColor;
}
.cp_form .radio .ch_bar::after {
-webkit-transform: scale(0);
transform: scale(0);
background-color: #da3c41;
border-color: #da3c41;
}
.cp_form .radio label:hover .ch_bar {
color: #da3c41;
}
.cp_form .radio input:checked ~ .ch_bar::after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.cp_form .radio input:checked ~ .ch_bar::before {
color: #da3c41;
}
.cp_form .checkbox {
margin-top: 3rem;
margin-bottom: 1rem;
}
.cp_form .checkbox .ch_bar {
color: #999999;
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
z-index: 0;
border: 0.125rem solid currentColor;
border-radius: 0.0625rem;
-webkit-transition: border-color 0.28s ease;
transition: border-color 0.28s ease;
}
.cp_form .checkbox .ch_bar::before,
.cp_form .checkbox .ch_bar::after {
position: absolute;
height: 0;
width: 0.2rem;
background-color: #da3c41;
display: block;
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 0.25rem;
content: '';
-webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
transition: opacity 0.28s ease, height 0s linear 0.28s;
opacity: 0;
}
.cp_form .checkbox .ch_bar::before {
top: 0.65rem;
left: 0.38rem;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-box-shadow: 0 0 0 0.0625rem #ffffff;
box-shadow: 0 0 0 0.0625rem #ffffff;
}
.cp_form .checkbox .ch_bar::after {
top: 0.3rem;
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cp_form .checkbox label:hover .ch_bar {
color: #da3c41;
}
.cp_form .checkbox input:checked ~ .ch_bar {
color: #da3c41;
}
.cp_form .checkbox input:checked ~ .ch_bar::after,
.cp_form .checkbox input:checked ~ .ch_bar::before {
opacity: 1;
-webkit-transition: height 0.28s ease;
transition: height 0.28s ease;
}
.cp_form .checkbox input:checked ~ .ch_bar::after {
height: 0.5rem;
}
.cp_form .checkbox input:checked ~ .ch_bar::before {
height: 1.2rem;
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.cp_form .radio + .radio,
.cp_form .checkbox + .checkbox {
margin-top: 1rem;
}
/* File input */
.cp_form .cp_group .cp_file {
position: relative;
}
.cp_form .cp_group .cp_file .title {
position: static;
}
.cp_form .cp_group .cp_file .button {
font-size: 1em;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
padding: .5rem 1.2em 0 1.2em;
cursor: pointer;
-webkit-transition: background-color 0.25s;
transition: background-color 0.25s;
color: #ffffff;
border-radius: 0;
background-color: #999999;
}
.cp_form .cp_group .cp_file .file_input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
padding: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-webkit-appearance: none;
appearance: none;
}
.cp_form .cp_group .cp_file .file_text {
position: relative;
box-sizing: border-box;
padding: 6px 10px;
-webkit-transition: border-color 0.6s;
transition: border-color 0.6s;
border-bottom: 0.0625rem solid #999999;
outline: none;
}
.cp_form .cp_group .cp_file .file_text::before {
content: '';
height: 2px;
width: 0;
left: 50%;
bottom: -1px;
position: absolute;
background: #da3c41;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
.cp_form .cp_group .cp_file .file_input:hover ~ .file_text::before {
width: 100%;
left: 0;
}
.cp_form .cp_group .cp_file label:hover .button {
background-color: #da3c3c;
}
.cp_form .cp_group .cp_file label:active .button {
background-color: #b02f2f;
}
.cp_form .btn_cont {
text-align: center;
}
.cp_form .btn-submit {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #da3c41;
margin: 3rem 0;
padding: 0.75rem 3rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease, color 0.28s ease, -webkit-box-shadow 0.28s ease;
transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.cp_form .btn-submit span {
color: #ffffff;
position: relative;
z-index: 1;
}
.cp_form .btn-submit::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.cp_form .btn-submit:hover {
color: #3f51b5;
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
.cp_form .btn-submit:focus {
outline: none;
}
.cp_form .cp-notice {
	font-size: .75rem;
}
.icon-required {
	background: #c00;
	color: #fff;
	font-size: .7rem;
	line-height: .7rem;
	padding: 0 .3rem;
	border-radius: 3px;
	margin: 0 .5rem;
}