@charset "utf-8";

/*body--------------------------------------------------------------*/

html
{
	font-size 		: 62.5%; 
}

body
{
	margin			: 0 auto;
	padding			: 0;
	font			: 1.8rem/1.8 "Jost",'Noto Sans JP', Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	color			: #111;
	background		: #FFF url(../images/common/base/bg_01.gif) repeat-x;
	text-align		: center;
	-webkit-text-size-adjust		: 100%;
}
body *
{
  font-kerning: normal;
  font-feature-settings: "palt";
  letter-spacing: .03em;
}

/*Opera用*/
html:first-child body
{
	font			: 1.8rem/1.8 "Jost",'Noto Sans JP', Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}

div,form,map
{
	margin			: 0;
	padding			: 0;
}

p
{
	margin-top      : 0;
	padding         : 0;
}

img
{
	border			: 0;
	vertical-align  : top;
	max-width 		: 100%;
	height 			: auto;
 image-rendering: -webkit-optimize-contrast;

}
/*システムが絡む場合、GoogleMapを使用する場合は消す*/
table
{
	margin-left		: auto;
	margin-right	: auto;
}

#side p,#side h1,#side #side h2,#side h3,
#header p,#header h1,#header h2,#header h3,
#footer p,#footer h1,#footer h2,#footer h3
{
	margin			: 0;
	font			: 1.8rem/1.9 "Jost",'Noto Sans JP', Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	text-align		: left;
}

*
{
	box-sizing: border-box;
}


#footer-bnr
{
	display: none;
}





#side-bnr
{
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	z-index 		: 100;	 
}

.pd_bana_area .pd_bana
{
	display: none;
	box-shadow 		: 0px 0px 24px -5px rgba(0, 0, 0, 0.33);
	padding 		: 2rem;
	position: fixed;
	bottom 			: 20px;
	right 			: 20px;
	background 		: #FFF;
	max-width 		: 380px;
	text-align 		: left;
	z-index 		: 200;
}
.pd_bana_area .pd_bana.none
{
	display: none!important;
}

.pd_bana .close_btn
{
	position 		: absolute;
	right 			: 15px;
	top 			: 15px;
	cursor 			: pointer;
}
.pd_bana .hosoku_list
{
	font-size 		: 1.4rem;
	width: fit-content;
	margin 			: 1.5rem auto; 
}



/*link--------------------------------------------------------------*/

a:link,
a:visited
{
	color           : #4D82C4; 
	text-decoration : underline;
}

a:hover,
a:active
{
	color           : #4D82C4; 
	text-decoration : none;
}







/*layout------------------------------------------------------------*/

#wrapper
{
	width			: 100%;
	margin			: 0;
	padding			: 0;
}





/*▼header------------------------------------------------------------*/

#site_header
{
	background: url("../images/cw_main_bg02.jpg") bottom left -100px no-repeat;
	overflow: hidden;
	position 			: relative;
}
#site_header .header_inner
{
	padding 			: 0 6vw; 
}
#site_header .header_inner .h_logo
{
	text-align 			: left;
	padding 			: 40px 0px; 
}
#site_header .main_catch
{
	padding 			: 80px 50vw 50px 0px; 
	text-align 			: left;
}
#site_header .sup_area
{
	width: fit-content;
}


#site_header .main_catch .feature_list,
#site_header .main_catch .feature_list li
{
	margin 				: 0px;
	padding 			: 0px;
	list-style 			: none;
}
#site_header .main_catch .feature_list
{
	display 			: flex;
	position 			: absolute;
	right 				: 6vw;
	bottom 				: 30px;
	gap 				: 1rem;
	max-width 			: 30%; 
}
#site_header .sup_area
{
	position 			: relative;
	padding-bottom 		: 80px; 
}
#site_header .sup_area .dev_icon
{
	position 			: absolute;
	right 				: 0px;
	top 				: 0px;
	max-width 			: 400px;
	width 				: 70%; 
	transform 			: translate(90%,-25%);
}
#site_header .main_catch .catch_text
{
	max-width 			: 546px; 
}
#site_header .sup_area .sup
{
	background 			: #FFF url("../images/o_back.png") left top /auto 100% no-repeat;
	padding 			: 50px 30px 50px 160px;
	line-height 		: 1.5;
	max-width 			: 546px; 
	font-size 			: 1.6rem; 
	text-align 			: left;
}



/*▼side------------------------------------------------------------*/

#side
{
	width			: 230px;
	float			: left;
	text-align		: left;
	display: inherit;
}



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

#main
{
	padding-bottom 		: 8rem; 
}


.section_inner
{
	max-width 		: 1000px;
	margin 			: 0 auto;
	width 			: 90%;
	text-align 		: left;
}






/*▼footer------------------------------------------------------------*/

#footer
{
	clear			: both;
	width			: 100%;
	background		: #fff;
}
#footer_inner
{
	max-width 		: 1000px;
	margin 			: 0 auto;
	width 			: 90%;
	text-align 		: left;
}
#footer_inner .site_nav,
#footer_inner .site_nav li
{
	margin 			: 0px;
	padding 		: 0px;
	list-style 		: none;
}
#footer_inner .site_nav
{
	margin 			: 0px;
	padding 		: 5rem 3rem;
	display 		: flex;
	gap 			: 5rem;
	justify-content : center;
	border-top 	 	: #EEE solid 1px;
	border-bottom 	: #EEE solid 1px;
	margin-bottom 	: 10rem; 
	flex-flow: row wrap;
}
#footer_inner .site_nav li:before
{
	content 		: "";
	background: url("../images/arrow.png") 0 0/cover no-repeat;
	width 			: 16px;
	height 			: 16px;
	display 		: inline-block;

}
#footer_inner .site_nav li a
{
	color 			: #666; 
}





#footer small
{
	clear 			: both;
	display			: block;
	max-width 		: 1000px;
	margin 			: 0 auto; 
	width 			: 90%;
	padding-bottom 	: 50px; 
}





/*1400以下の指定（タブレット）*/

@media screen and (max-width: 1400px) {


#site_header .main_catch
{
    padding: 62px 37vw 50px 0px;
}

#site_header .sup_area .sup
{
    padding: 30px 30px 30px 140px;
}
#site_header .sup_area .dev_icon
{
    width: 23vw;
    transform: translate(90%, -29%);
}



}




/*1024以下の指定（タブレット）*/

@media screen and (max-width: 1024px) {

body
{
	min-width 		: 100%;
}

/*▼header------------------------------------------------------------*/

#site_header
{
	background: none;
	opacity: 0;
}
#site_header .main_catch_area
{
	background: url("../images/cw_main_bg02.jpg") left 60% bottom 25% no-repeat;
	
}

#site_header .header_inner .h_logo
{
	padding 		: 40px 6vw; 
}

#site_header .header_inner
{
	padding: 0;
}

#site_header .main_catch
{
	padding 			: 0 6vw; 
}
#site_header .main_catch .feature_list
{
	position 			: static;
}
#site_header
{
	background-position: left 60% bottom 0;
}
#site_header .main_catch .catch_text
{
	margin-bottom 		: 377px;
	max-width 			: 100%;
}
#site_header .main_catch .feature_list
{
	max-width 				: 80%;
	justify-content 		: center;
	margin 					: 0 auto;
	padding-bottom 			: 20px; 
}
#site_header .sup_area
{
	width 					: 100%; 
	padding 				: 40px 6vw 0px;
	background 				: #FFF; 
}
#site_header .sup_area .sup
{
	max-width 				: 100%;
	background-color 		: #f7f7f7; 
}
#site_header .sup_area .dev_icon
{
        width: 29%;
        transform: translate(0%, 1%);
}




/*▼ハンバーガーメニュー--------------------------------------------------------*/

.hmenu
{
	background		: rgba(0,0,0,0.9);
	padding			: 4%;
	margin			: 0;
	overflow		: auto;
 	-webkit-overflow-scrolling : touch;
	width			: 100%;
	height			: 100%;
	box-sizing		: border-box;
}
.menu
{
    position			: fixed;
    top					: 70px;
    left				: 0;
    width				: 100%;
    height				: 100%;
	-webkit-transition	: all 0.5s ease;
    -moz-transition		: all 0.5s ease;
    -o-transition		: all 0.5s ease;
	transition			: all 0.5s ease;
    visibility			: hidden;
    opacity				: 0;
	text-align 			: left
}
.md_open .menu
{
    visibility			: visible;
    opacity				: 1;
	z-index				: 2000;
}


.menu-btn
{
	position	: absolute;
	right		: 13px;
	top			: 13px;
	padding		: 11px 10px;
    width		: 45px;
    height		: 45px;
	background	: #000;
    cursor		: pointer;
	box-sizing	: border-box;
    z-index		: 2000;
}
.menu-btn img
{
	position	: absolute;
	bottom		: 6px;
	left		: 8px;
	width		: 30px;
	height		: auto;
}

.menu-trigger,
.menu-trigger span
{
	display					: -moz-inline-box;
	display					: inline-block;
	/display				: inline;
	/zoom					: 1;
	vertical-align 			: top;
	-webkit-transition		: all 0.5s ease;
    -moz-transition			: all 0.5s ease;
    -o-transition			: all 0.5s ease;
	transition				: all 0.5s ease;
	box-sizing				: border-box;
}
.menu-trigger
{
	position		: relative;
	display 		: block;
	height			: 22px;
}
.menu-trigger span
{
	position		: absolute;
	left			: 0;
	width			: 100%;
	height			: 3px;
	background 		: #fff;
}
.menu-trigger span:nth-of-type(1)
{
	top			: 0;
}
.menu-trigger span:nth-of-type(2)
{
	top			: 47%;
}
.menu-trigger span:nth-of-type(3)
{
	bottom		: 0;
}


/*ボタン開いた時*/

.md_open .menu-trigger span:nth-of-type(1)
{
	-webkit-transform	: translateY(8px) rotate(-45deg);
	-moz-transform		: translateY(8px) rotate(-45deg);
	-o-transform		: translateY(8px) rotate(-45deg);
	transform			: translateY(8px) rotate(-45deg);
}
.md_open .menu-trigger span:nth-of-type(2)
{
	opacity				: 0;
}
.md_open .menu-trigger span:nth-of-type(3)
{
	-webkit-transform	: translateY(-18px) rotate(45deg);
	-moz-transform		: translateY(-18px) rotate(45deg);
	-o-transform		: translateY(-18px) rotate(45deg);
	transform			: translateY(-18px) rotate(45deg);
}
.md_open .menu-trigger
{
	height			: 30px;
}
.sacbox
{
	display 		:none;
}
body.md_open
{
	overflow 		: hidden;
	height 			: 100%;
}
.hmenu .hm_title
{
	padding			: 12px 0;
	color			: #fff;
	font-size		: 22px;
	font-weight		: bold;
}
.hmenu ul,
.hmenu ul li
{
	margin			: 0;
	padding			: 0;
	list-style-type	: none;
}
.hmenu ul li
{
	border-bottom	: 1px solid #333;
}
.hmenu ul li:first-child
{
	border-top		: 1px solid #333;
}
.hmenu ul li a
{
	background		: url(../images/common/icon/btn_icon.png) 10px center no-repeat;
	background-size	: 20px auto;
	padding			: 10px 10px 10px 40px;
	display			: block;
	color 			: #fff;
}

#sp_header .hm_contact
{
	text-align 		: center;
	margin-top 		: 20px;
}
#sp_header .hm_contact .hm_tel,
#sp_header .hm_contact .hm_item
{
	width 			: 45%;
	padding 		: 10px 0; 
	display					: -moz-inline-box;
	display					: inline-block;
	/display				: inline;
	/zoom					: 1;
	vertical-align 			: top;
	box-sizing 		: border-box;
}
#sp_header .hm_contact .hm_tel
{
	margin-right 	: 2%;
	padding-right 	: 3%;
	border-right 	: 1px solid #666;
}
#sp_header .hm_contact .hm_tel img,
#sp_header .hm_contact .hm_item img
{
	max-width 		: 100%;
	height 			: auto;
}

#sp_header .hm_contact .hm_tel img/*色違い画像の用意がなかったので階調の反転しています*/
{
	-webkit-filter 	: invert(100%);
	-moz-filter 	: invert(100%);
	-o-filter 		: invert(100%);
	-ms-filter 		: invert(100%);
	filter 			: invert(100%);
}


#main
{
	width			: 100%;
	float			: none;
}



/*▼side------------------------------------------------------------*/


#side
{
	width 		: 300px;
	position 	: fixed;
	top 		: 70px;
	left 		: -300px;
	height 		: 100%;
	background 	: rgba(0,0,0,0.8);
	z-index 	: 2000;
	overflow	: auto;
	-webkit-overflow-scrolling : touch;
}

#side ul,
#side li
{
	margin 		: 0px;
	padding 	: 0px;
	list-style 	: none;
}



/*▼footer------------------------------------------------------------*/

#footer_inner
{
	width			: 90%;
	padding 		: 30px 0 40px;
}
}


/*767以下の指定（スマホ横)*/
@media screen and (max-width: 767px) {

.pd_bana_area .pd_bana
{
    right: 0px;
    bottom: 80px;
}
#footer-bnr
{
	position:fixed;
	bottom 		: 0px;
	left 		: 0px;
	background 	: #FFF;
	padding 	: 10px;
	width 		: 100%;
	z-index 	: 500; 
}
#site_header .header_inner .h_logo
{
	padding 		: 30px 6vw; 
}
#site_header .main_catch .catch_text
{
	margin-bottom 			: 200px; 
}
#site_header
{
	background: none;
}
#site_header .header_inner
{
	padding 				: 0px; 
}

#site_header .main_catch_area
{
	background-position: bottom 0 left 70%;
	background-size: auto 100%;
}
#site_header .main_catch .feature_list
{
	max-width 			: 90%; 
}
#site_header .sup_area
{
	padding 			: 30px 6vw 0; 
}
#site_header .sup_area .sup
{
        padding: 15px 15px 15px 97px;
        font-size: 1.4rem;
}
#site_header .sup_area .dev_icon
{
	display: none;
}
#main
{
	padding-bottom 	: 5rem; 
}

#footer_inner .site_nav
{
	justify-content: flex-start;
	flex-flow: column wrap;
	gap:1rem;
	padding 		: 3rem;
	margin-bottom: 3rem;
}



}


/*320以下の指定（スマホ縦)*/
@media screen and (max-width: 320px) {
}




/*---------------------------------------------------------*/
/*    copyright(C) CloudWorks. All rights reserved. Ver1.0   */
/*---------------------------------------------------------*/