@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
body {
    font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color: #231815;
}
header #header #header_menu li a span{font-weight: 500;}
.cms_title{margin-bottom: 90px;}
.info_box .cms_title{margin-bottom: 46px;}
.cms_title span{font-family: 'Hammersmith One', sans-serif;color: #e23785;font-size: 22px;}
.cms_title h2 {
    font-size: 32px;
    line-height: 1;
	letter-spacing: 3px;
}


/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #000000;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #000000} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #f78e1e} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
body,.bg_white{background-color: #fffffd} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #000000} /* メインカラー */
.bg_color2{background-color: #e6e6e6} /* サブカラー */
.bg_color3{background-color: #e23785} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #000000}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #e23785}
.border_color4{border-color: #c9baa9}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #000000} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #e23785} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #000000} /* メインカラー */
.hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #e23785} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #000000}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #e23785}
.hvr_border_color4:hover{border-color: #c9baa9}

footer .bg-mask{background: #fefffb;}



/* loader ---------------------------------------------------------------------------------------------*/
#fakeloader{background-color: #ffffff;}
#fakeloader .fl{
	position: absolute;
	top: 49%!important;
	left: 50%!important;
	transform: translate(-50%,-50%);
	width: 50%;
	max-width: 195px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}
@keyframes loader {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



/* design ---------------------------------------------------------------------------------------------*/
.width_1280-max{max-width: 1480px;}
.more {
    width: 231px;
    margin: 83px auto 0;
}
.more a{
	border-radius: 45px;
    padding: 12px 20px 16px;
    width: 100%;
	font-weight: 500;
	transition: transform .3s;
	box-sizing: border-box;
}
.more a:hover {
    border-color: #e23785;
    background-color: transparent;
    color: #000000;
	transform: scale(1.05);
}

header {padding-bottom: 23px;background: rgba(255,255,255,0);}
header #header #header_menu li:last-child a span{border-radius: 45px;}
#logo{padding-top: 20px;}
#logo .logo {
    text-align: left;
    width: 170px;
}
#main_img .svg_box,#page_title .svg_box,.svg_box2 {display: none;}

#main_img::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 9;
}
#main_img .main_txt {
    left: 120px;
    top: 43%;
    z-index: 10;
	text-shadow: 1px 1px 53px rgba(0,0,0,0.15);
    -webkit-transition: transform 1.2s cubic-bezier(.645,.045,.355,1) ,opacity 1.5s cubic-bezier(.645,.045,.355,1);
    transition: transform 1.2s cubic-bezier(.645,.045,.355,1) ,opacity 1.5s cubic-bezier(.645,.045,.355,1);
}
#main_img .main_txt .txt1 {
    font-size: 6vw;
    font-weight: 900;
    line-height: 1.5em;
    letter-spacing: 0.25em;
    color: #fffffd;
}
#main_img .main_txt .txt2 span{
	background-color: #fffffd;
    padding: 10px 22px;
    display: inline-block;
    box-sizing: border-box;
}
#main_img .main_txt .txt1::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: #e23785;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
    box-sizing: border-box;
}
@media screen and (min-width: 1632px){
	#main_img .main_txt{left: 221px;}
	#main_img .main_txt .txt1{font-size: 92px;line-height: 1.4em;}
}
@media screen and (max-width: 1790px){
	#main_img::before{top: -2px;}
}

#intro #intro_txt{overflow: hidden}
#intro #intro_txt::before {
    display: inline-block;
    content: "";
    width: 68%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    transform: skewX(-39deg);
}
#intro_txt h2 span {
    font-size: 40px;
    font-weight: 900;
    line-height: 90px;
    letter-spacing: 0.25em;
}
#intro_txt p{margin-top: 25px;}


#contents .box_wrap{
	padding-top: 100px;
}
#contents h3 {
    position: relative;
    font-weight: 600;
    color: #333;
    z-index: 1;
    margin-bottom: 40px;
    font-size: 26px;
    padding-left: 10px;
}
#contents h3:before {
    display: inline-block;
    content: "01";
    position: absolute;
    top: -108px;
    left: -41px;
    font-size: 125px;
    font-weight: 700;
    color: #ffebb3;
    z-index: -1;
}
#contents .box:nth-of-type(2) h3:before{content: "02";}
#contents .box:nth-of-type(3) h3:before{content: "03";}
#contents figure{transform: rotate(-3deg);}
#contents .box:nth-of-type(2) figure{transform: rotate(3deg);}
#contents img{
	box-shadow: 4px 4px 6px rgba(0,0,0,0.25);
	/*border: 10px solid #fff;*/
	box-sizing: border-box;
	border-radius: 10px;
}
#page_title span{
	border-radius: 45px;
	background-color: #F78E1E;
}
#contact_tel a{
	border-color: #e23785;
	color: #e23785;
	transition: opacity .3s;
	border-radius: 10px;
}
#contact_tel a:hover{opacity: 0.6}


/* ---------- cms ---------- */
.cate_list li a {
    background-color: transparent;
    text-align: left;
    border-bottom: solid 2px #e23785;
    color: #333;
    font-weight: bold;
    position: relative;
}
.cate_list li a:after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    margin-left: -17px;
    border: 9px solid transparent;
    border-top: 8px solid #e23785;
    z-index: 1;
}
.cms_2-a img, .service_wrap .cate_box{border-radius: 10px}

#top_cms .top_cms_box {
    margin-bottom: 148px;
}
#top_cms .top_cms_box:nth-of-type(4){
	width: 100%;
    background: url( "../dup/img/bg.jpg" ) center / cover no-repeat;
    padding: 100px 0;
}
.service_wrap{
	width: 95%;
    margin: auto;
	justify-content: space-around;
}
.service_wrap .cate_box{
	width: 32.33333%!important;
}
.service_wrap .cate_box .box_img{
	transition: transform .6s;
}
.service_wrap .cate_box:hover .box_img {
    transform: scale(1.05);
}
.service_wrap .cate_box .box_img::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: #525252;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    transition: all .5s;
    opacity: 0.3;
}
.service_wrap .cate_box .box_img::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 100%;
    background: #4c4c4c;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    transition: all .5s;
    opacity: 0;
}
.service_wrap .cate_box:hover .box_img::before {
    background: #f78e1e;
    opacity: 0;
}
.service_wrap .cate_box:hover .box_img::after {
    background: #f78e1e;
    opacity: 0.8;
	width: 100%;
}
.service_wrap .cate_box .box_img::before{
	
}
.service_wrap a {
    top: 0;
    left: 0;
}
.service_wrap .top_title {
    z-index: 2;
    width: 90%;
}


/* ---------- animation ---------- */
.anim .anim_item{
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1000ms;
}
.anim.start .anim_item{
	opacity: 1;
	transform: translate(0, 0);
}
.anim .anim_item:nth-of-type(1){transition: all 1000ms .3s;}
.service_wrap .anim_item:nth-of-type(1){transition: all 1000ms;}
.service_wrap .anim_item:nth-of-type(2){transition: all 1000ms .15s;}
.service_wrap .anim_item:nth-of-type(3){transition: all 1000ms .3s;}

#main_img .main_txt .txt1 span {
    opacity: 0;
    transition: all .5s .3s ease;
    z-index: 0;
}
#main_img.animStart .main_txt .txt1 span{
	opacity: 1;
}
#main_img .main_txt .txt1::before{
	left: 0;
	width: 0;
}
#main_img.animStart .main_txt .txt1::before {
	animation-name: leftBox;
	animation-duration: .8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes leftBox{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}




/* ---------- cms ---------- */
#cms_6-a .cate_box:last-of-type{border: none;}





/* IE */
@media all and (-ms-high-contrast: none){
	header #header #header_menu li:last-child a span{padding-top: 7px!important;padding-bottom: 8px!important}
	#page_title h2 span{padding-top: 16px!important}
	#cms_2-a .cate .cate_title, #cms_2-b .cate .cate_title, #cms_6-a .cate .cate_title{padding-top: 9px!important}
	.d_flex.tel_wrap {justify-content: flex-start!important;}
	#page9 .box_wrap .box p a{padding: 3px 10px 5px!important}
	.pager li a span{top: 46%!important;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	header {background: rgba(255,255,255,0.7);padding-bottom: 10px;}
	header #header #header_menu li {width: auto;}
	#video{margin-top: 164px;}
	
	#logo .logo{width: 114px;}
	#logo{margin-bottom: 20px;}
	
	#main_img::before{top: -5px;}
	#main_img .main_txt{left: 46px;top: 56%;}
	#main_img .main_txt .txt1{font-size: 46px;}
	
	#intro_txt h2 span{font-size: 30px;line-height: 65px;}
	#intro_txt p{margin-top: 16px;padding-left: 30px;}
	#contents h3:before {font-size: 106px;top: -108px;left: -14px;}
	
	.service_wrap{width: 97%;}
	.service_wrap .cate_box{width: 31.33333%!important;margin: 0 0;}
	.service_wrap .cate_box h3{font-size: 18px;}
	
	#page_title #filter_white{padding-top: 225px!important;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
	header{padding-bottom: 0px;}
	#filter_white{padding: 0px;}
	#main_img{margin-top: 65px;}
	#main_img::before{top: -4px;}
	#video{margin-top: 0;}
	
	#logo {padding-top: 9px;margin-bottom: 9px;}
	#logo .logo {width: 77px;margin-left: 19px;}
	
	.drawer-hamburger{transform: translateY(3px);}
	.drawer-hamburger-icon::after, .drawer-hamburger-icon::before{background-color: #000!important;}
	.drawer-open .drawer-hamburger-icon{background-color: transparent!important;}
	
	#main_img .main_txt{left: 23px;top: auto;bottom: 30px;}
	#main_img .main_txt .txt1{font-size: 27px;}
	
	#intro #intro_txt{padding-top: 37px;padding-bottom: 67px;}
	#intro_txt h2{width: 100%!important;}
	#intro_txt h2 span{font-size: 22px;letter-spacing: 3px;line-height: 52px;}
	#intro_txt p{width: 100%!important;padding-left: 0;}
	
	#contents .box_wrap{padding-top: 53px;}
	#contents h3{padding-left: 0;font-size: 18px;margin-bottom: 27px;}
	#contents h3:before{top: -90px;font-size: 100px;left: -10px;}
	#contents .box:nth-of-type(2) h3:before{right: 0;text-align: right}
	#contents .box:nth-of-type(3) {padding-bottom: 0px;}
	
	#top_cms .top_cms_box{padding: 0 20px;margin-bottom: 105px;}
	.cms_title{margin-bottom: 52px;}
	.cms_title h2{font-size: 27px;}
	.info_box .cms_title{margin-bottom: 24px;}
	
	.more{width: 80%;margin: 55px auto 0;}
	.service_wrap .cate_box{width: 91.33333%!important;margin: 7px 0;}
	.service_wrap .cate_box:last-of-type{margin: 0 0;}
	
	#page_title #filter_white{padding-top: 130px!important;}
	.cate_list li a:after{display: none}
	#copyright{padding-left: 10px;text-align: left}

}