@charset "UTF-8";

.ft_sizmo {
	font-family: "sizmo", sans-serif;
	font-weight: 600;
	font-style: normal;
}
.com_title2 h2 {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*---------------------------------------------------------
 color
---------------------------------------------------------*/
#skill_up .com_title2 h2 {	background-image: radial-gradient(circle at 10% bottom, #71db80 0%, #00467b 15%);}
#support .com_title2 h2 {	background-image: radial-gradient(circle at 10% bottom, #f6ae94 0%, #674578 15%);}
#work_style .com_title2 h2 {	background-image: linear-gradient(45deg, rgba(235,230,136,1) 10%, #FFF 20%);}

#work_style {
	--workstyle-bg: #905E68;
}
#guidelines {
	--guidelines-bg: #F8E3D7;
}
.com_form {
	--btn-color: #CA9F87;
}
#entry {
	--entry-bg: #57544C;
}


/* ========================================================
  
  header

======================================================== */
header .h_nav .h_entry{
	border-bottom-left-radius: 30px;
	box-shadow: none;
}
.frontpage header .h_left::before{ 
	position: absolute;
	content: "";
	background: url("../images/dh/h_logo_abs@2x.png") no-repeat center center;
	background-size: 100% auto;
	width: 538px;
	height: 538px;
	left: -110px;
	top:50%;
	transform: translateY(-50%);
	z-index: -1;
	pointer-events: none;
}
#scl_header .scl_flex .scl_contact .scl_web::before{
	position: absolute;
	content: "";
	background-color: #b0400d;
	width: 11px;
	height: 11px;
	right: 0;
	bottom: 0;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.frontpage header .h_left::before{
	width: 169%;
	height:169%; 
	left: -34.5%;
}
}

/* ========================================================
  
  FV

======================================================== */
.m_point {
	margin-left: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.m_point {
	right: 2%;
	translate: 0 105%;
}
}

/*m_img
---------------------------------------------------------*/
.end .m_img_area,
.kakunin .m_img_area{
	height: 300px;
}
.end .m_img_area::before,
.kakunin .m_img_area::before{
	position: static;
	background: none;
	
}
.m_img_area .max_1700{
	position: relative;
	height: 100%;
}
.m_img_area .m_copy_area{
	width: 94%;
	max-width: 1415px;
	max-height:690px;
	height: 45.67vw;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top:52.5%;
	transform: translateY(-50%);
}
.m_img_area .m_copy{
	max-width: 684px;
	width: 45.6vw;
	text-align: center;
	margin: 0 auto;
}

.m_img_area .m_mask > li{
	background-color: rgba(208,208,208,0.3);
	position: absolute;
	display: block;
	max-width: 694px;
	width: 46.267%;
}
.m_img_area .m_mask > li.mask1{
	left: 3%;
	top:0;
	transform: translateY(-33%);
	z-index: -1;
}
.m_img_area .m_mask > li.mask2{
	left:7.3%;
	top:27.5%;
	transform: translateY(-50%);
	z-index: -2;
}
.m_img_area .m_mask > li.mask3{
	right: -5%;
	top:55%;
	transform: translateY(-50%);
	z-index: -1;
}
.m_img_area .m_mask > li.mask4{
	left: 0;
	bottom:12%; 
	z-index: -1;
}
.m_img_area .m_mask > li .m_anime{
	position: absolute;
	width: 180px;
	width: 25.94%;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
.m_img_area .m_mask > li.mask1 .m_anime{
	left: -10%;
	top: -10%;
	animation-name: mix1;
}
.m_img_area .m_mask > li.mask2 .m_anime{
	left: 90%;
	top: -10%;
	animation-name: mix2;
}
.m_img_area .m_mask > li.mask3 .m_anime{
	left: -10%;
	top: -10%;
	animation-name: mix1;
}
.m_img_area .m_mask > li.mask4 .m_anime{
	left: -10%;
	top: -10%;
	animation-name: mix1;
}

.m_img_area .m_slider{
	position: absolute;
}

.m_img_area .m_slider {
	opacity: 0;
	transition: all .4s ease-in;
}
.m_img_area.anime_on .m_slider {
	opacity: 1;
}
/*slider1*/
.m_img_area .m_slider.slider1{
	max-width: 680px;
	width: 45.34%;
	right: 0;
	top:38.5%;
	transform: translateY(-50%);
	z-index: -2;
	transition: all 0.5 .5s ease-in;
}

/*slider2*/
.m_img_area .m_slider.slider2{
	max-width: 550px;
	width: 36.67%;
	left: 4%;
	top:50.8%;
	transform: translateY(-50%);
	z-index: -1;
	transition: all 1s .5s ease-in;
}

/*slider3*/
.m_img_area .m_slider.slider3{
	max-width: 532px;
	width: 35.47%;
	right: 21.5%;
	bottom: 8.2%;
	z-index: -2;
	transition: all 1.5s .5s ease-in;
}

/*slider4*/
.m_img_area .m_slider.slider4{
	max-width: 440px;
	width: 35.47%;
	left: 10%;
	bottom: 1.6%;
	z-index: -1;
	transition: all 2s .5s ease-in;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.frontpage .m_img_area {
	height: 100vw;
	max-height: 1610px;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.m_img_area .m_copy_area{
	width:100%;
}
.m_img_area .m_copy{
	width: 67.2%;
}
.m_img_area .m_mask > li{
	width: 48%;
}
.m_img_area .m_mask > li.mask1{
	left: 14%;
	transform: translateY(-2%);
}
.m_img_area .m_mask > li.mask2{
	left:2%;
	top:36%;
}
.m_img_area .m_mask > li.mask3{
	right: -5%;
	top:63%;
}
.m_img_area .m_mask > li.mask4{
	left: -10%;
	bottom:17%; 
}
/*slider1*/
.m_img_area .m_slider.slider1{
	width: 55%;
	top:30%;
}

/*slider2*/
.m_img_area .m_slider.slider2{
	max-width: 550px;
	width: 38.2%;
	left: 0;
	top:53.5%;
}

/*slider3*/
.m_img_area .m_slider.slider3{
	width: 44.65%;
	right: 6%;
	bottom: 9%;
}

/*slider4*/
.m_img_area .m_slider.slider4{
	width: 36.9%;
	left:3%;
	bottom: 8vw;
}
}

@keyframes mix1 {
  25% {
    left:90%;
    top:10%;
  }
  50% {
    left:-10%;
    top:30%;
  }
  75% {
    left: 90%;
    top:50%;
  }
  100% {
   left:-10%;
   top: 70%;
  }
}
@keyframes mix2 {
  25% {
    left:-10%;
    top:10%;
  }
  50% {
    left: 90%;
    top:30%;
  }
  75% {
    left:-10%;
    top:50%;
  }
  100% {
   left: 90%;
   top: 70%;
  }
}




/*ローカルではマスクが効かないので作業時はコメントアウトしてください。*/
.mask1 {
	-webkit-mask-image: url("../images/dh/m_mask1.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100% 100%;
	mask-image: url("../images/dh/m_mask1.svg");
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100% 100%;
}
.mask2 {
	-webkit-mask-image: url("../images/dh/m_mask2.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100% 100%;
	mask-image: url("../images/dh/m_mask2.svg");
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100% 100%;
}
.mask3 {
	-webkit-mask-image: url("../images/dh/m_mask3.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100% 100%;
	mask-image: url("../images/dh/m_mask3.svg");
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100% 100%;
}
.mask4 {
	-webkit-mask-image: url("../images/dh/m_mask4.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100% 100%;
	mask-image: url("../images/dh/m_mask4.svg");
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100% 100%;
}


/* ========================================================
  
  contents

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

/*ABOUT US
---------------------------------------------------------*/
#about_us{
	padding: 80px 0 0;
	position: relative;
}
#about_us::before{
	position: absolute;
	content: "";
	width: 100%;
	height: calc(100% + 194px);
	background: #F8E3D7;
	transition: all 2.0s ease-out;
	left: 0;
	top:-473px;
	z-index: -4;
}
#about_us::after{
	position: absolute;
	content: "";
	background: url("../images/dh/m_img_bg@2x.png") no-repeat center bottom;
	background-size: 100% 100%;
	width: 100%;
	height: 474px;
	left: 0;
	right: 0;
	margin: auto;
	top:-473px;
	z-index: -3;
}
#about_us.anime::before{
	transform-origin: left top;
	height: 0;
}
#about_us.anime_on::before {
	height: calc(100% + 194px);
}
#about_us .about_us_inbox{
	max-width: 1065px;
	width: 90%;
	margin: 0 0 120px auto;
	position: relative;
}

#about_us .com_h__en {
	color: #F3CCB7;
}

#about_us .about_us_txt{
	width: 79%;
}
#about_us .about_us_txt h2{
	margin-bottom: 40px;
}

#about_us .about_us_img{
	max-width: 1210px;
	width: 81%;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#about_us .com_h__en{
	position: absolute;
	right:0;
	top: -1em;
	display: block;
	writing-mode: vertical-rl;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1499px) {
#about_us::before{
	height: calc(100% + 12.934vw);
	top:-31.534vw;
}
#about_us.anime_on::before {
	height: calc(100% + 12.934vw);
}
#about_us::after{
	height:31.6vw;
	top:-31.534vw;
}
#about_us .about_us_inbox{
	margin: 0 auto 10%;
}
#about_us .about_us_txt{
	width:82%;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#about_us{
	padding:7% 0 0;
}
#about_us .about_us_txt h2{
	margin-bottom: 3%;
	width: 62vw;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#about_us{
	padding:10% 0 0;
}
#about_us::before{
	height: calc(100% + 31.534vw);
	top:-31.534vw;
}
#about_us.anime_on::before {
	height: calc(100% + 31.534vw);
}
#about_us::after{
	height:31.6vw;
	top:-31.534vw;
}
#about_us .about_us_inbox{
	max-width: 1065px;
	width: 100%;
	margin: 0 auto 12%;
}

#about_us .com_h__en{
	font-size: 16vw;
	margin-bottom: .4em;
}

#about_us .about_us_txt{
	width: 100%;
}
#about_us .about_us_txt h2{
	margin-bottom: 5%;
}

#about_us .about_us_img{
	width: 100%;
}
}


/*---------------------------------------------------------
 support
---------------------------------------------------------*/
#support .sup_bg_img.bg__top {
	translate: 0 -54%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#support .sup_bg_img.bg__top {
	translate: 0 -20%;
}
#support .sup_bg_img.bg__btm {
	width: 85vw;
}
}



/*---------------------------------------------------------
 voice
---------------------------------------------------------*/
#voice .rel_bg {
	position: relative;
}
#voice .rel_bg::before{
	position: absolute;
	content: "";
	background: #905E68;
	width: 100%;
	height: 110px;
	left: 0;
	top:0;
	z-index: -1;
}
#voice .voice_bg{
	max-width: 1360px;
	margin: 0 auto 0 0;
	background: #F7F7F7 url("../images/dh/voice_bg@2x.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left bottom;
	padding: 130px 5% 550px;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 120px;
	z-index: 1;
}
#voice .voice_bg::before{
	position: absolute;
	content: "";
	display: block;
	background: url("../images/dh/voice_corner.svg") no-repeat left top;
	background-size: 100% 100%;
	left: 0;
	top:0;
	width: 679px;
	height: 679px;
	z-index: -1;
}

#voice .voice_bg .voice_style{
	max-width: 775px;
	margin: 0 auto;
}
#voice .voice_bg .voice_style dt{
	margin-bottom: 50px;
}
#voice .voice_bg .voice_style dd{
	letter-spacing: 0.15em;
	line-height: 2.2em;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#voice .com_title1{
	right: -1.4em;
	top:70px;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1449px) {
#voice .rel_bg::before{
	height: 7.5vw;
}
#voice .voice_bg{
	width: 94vw;
}
#voice .voice_bg::before{
	width: 45.267vw;
	height: 45.267vw;
}
#voice .com_title1{
	right: -1.6vw;
	width: 18vw;
	max-width: 172px;
}
#voice .voice_bg .voice_style{
	width: 64vw;
}
#voice .voice_bg .voice_style dt{
	width: 60vw;
	max-width: 620px;
	margin-bottom: 5vw;
}
#voice .voice_bg{
	padding: 130px 5% 36.67vw;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#voice .voice_bg{
	padding: 12% 5% 36.67vw;
	margin-bottom: 11%;
}
#voice .com_title1{
	top:6%;
}
#voice .voice_bg .voice_style dd{
	letter-spacing: 0.1em;
	line-height: 2em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#voice .rel_bg{
	padding-top: 0.95em;
}
#voice .rel_bg::before{
	height: 12vw;
}
#voice .voice_bg{
	padding: 28vw 8% 36.67vw;
	margin-bottom: 15%;
	width: 94vw;
}
#voice .voice_bg::before{
	width: 90vw;
	height: 90vw;
}
#voice .com_title1{
	position: absolute;
	left: 8%;
	top: -1.5em;
}

#voice .voice_bg .voice_style dt{
	margin-bottom: 6%;
}
#voice .voice_bg .voice_style dd{
	letter-spacing: 0.05em;
	line-height: 1.8em;
}

}




/*---------------------------------------------------------
 entry
---------------------------------------------------------*/
#entry .kengaku::before{
	background-image: url("../images/dh/kengaku_bg1@2x.jpg");
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#entry .entry_bg {
	padding: 28% 0 17%;
}
}