@charset "utf-8";
/* CSS Document */

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

#header.on #subHeader {
	position: fixed;
	top: 0;
}

#subHeader {
	padding: 0;
	height: 68px;
	display: block;
	width: 100%;
	/* position: fixed; */
	top: 0;
	z-index: 999;}
#subHeader nav ul li{display: inline-flex;}
#subHeader nav ul li.havC{display: inline-table  ;line-height: 1rem;}
#subHeader nav ul li.havC a:after{font-family: "Font Awesome 5 Free";content: '\f0d7';font-weight: 600;margin-left: 0.3rem;}

#subHeader.on {border-bottom:1px solid #eee;
	position: fixed;
}
#subHeader.off {position: relative;}

#subHeader .bg{width: 100%;height: 68px;display: block;position: absolute;z-index: -1;}
#subHeader .inner{z-index: 1;}
#subHeader.on .bg{background:#fff;border-bottom:1px solid #eee;
	/* transition: all 0.5s; */
}
#subHeader.off .bg{background: none;
	/* transition: all 0.5s; */
}


#subHeader .inner {max-width: 1080px;min-width: 1024px;margin: 0 auto;text-align: center;padding: 22px 10px;display: flex;z-index: 1000;}
/* #subHeader .inner {max-width: 1280px;} */
#subHeader .inner .boxL{width:auto;}
#subHeader .inner .boxL .ch-logo {width: 90px;}
#subHeader .inner .boxR{width: auto; text-align: right;min-width: 18.5rem;margin-top:-0.3rem;}


#subHeader .inner .headSvgBox {position: relative;width: 100%;}
#subHeader .inner .headSvgBox .svgContent {position: absolute;top: 0;left: 0;}
#subHeader .inner .boxC {width: 100%;}
#subHeader .inner .boxC nav {margin-right: 1.5rem;margin-left: 0.5rem;margin-top: 0.3rem;text-align: right;}
#subHeader .inner .boxC nav a {font-size: 1.4rem;text-decoration: none;color: #333;padding: 0 1rem;margin:0 0.5rem;}
#subHeader .inner .boxC nav a:hover {opacity: 1;color: #eb0a1e}
#subHeader .inner .boxC nav ul li.havC li a{margin: 0;padding: 1.0rem;border-top: none;}

#subHeader nav ul li.havC{display: inline-table  ;line-height: 1rem;}
#subHeader nav ul li.havC a:after{font-family: "Font Awesome 5 Free";content: '\f0d7';font-weight: 600;margin-left: 0.3rem;}

#subHeader a.btn {margin-top: 0.2rem;padding: 5px 1rem;text-decoration: none;width: 100%;text-align: center;border-radius: 4px;display: block;}
#subHeader a.btnRed{background-color: #fe423f;color: #fff;border: 1px solid #fe423f;font-size: 1.2rem;}
#subHeader a.btnRed:hover{background-color: #fff;color: #fe423f;}

#subHeader .hamburger-menu{display: none;}

/*子階層以降共通*/
#subHeader nav ul li ul {padding-top: 1.0rem;position: absolute;}
#subHeader nav ul li li {text-align: left;height: 0;overflow: hidden;display: block;text-align: center;}

#subHeader .inner .boxC nav ul li.havC li a{border-top: none;display: block;width: 100%;padding: 0.5rem 1.5rem;background: #fff;border-radius: 20px;border: 1px solid #ddd;margin-bottom: 1rem;font-size: 1.2rem;}
#subHeader nav ul li.havC li a:after{display: none;} 
#subHeader nav ul li:hover > ul > li {height: 2.8rem;overflow: visible;}

/*ハイライト*/
#subHeader .inner .boxC{width: 100%;}
#beegle #subHeader .inner .boxC nav .beegle a,
#papatto #subHeader .inner .boxC nav .service a,
#bplus #subHeader .inner .boxC nav .service a,
#case #subHeader .inner .boxC nav .case a,
#price #subHeader .inner .boxC nav .price a,
#column #subHeader .inner .boxC nav .column a{color: #eb0a1e}
#papatto #subHeader .inner .boxC nav ul li.havC li a,
#bplus #subHeader .inner .boxC nav .service li a{color: #333;}
#papatto #subHeader .inner .boxC nav ul li.havC li a:hover,
#bplus #subHeader .inner .boxC nav .service li a:hover{color: #eb0a1e;	}



#wrapMainvisual {    margin-top: 70px;}
#wrapMainvisual {    margin-top: 0;}
#mainvisual h1 img {margin: 0 auto;display: block;max-width: 1080px;width: 100%;min-width: 1024px;}

/* video */
.video{width: 100%;height: 550px;background: url(../../images/kv-alternative.jpg) no-repeat center/cover;position: absolute;top: -100px;left: 0;overflow: hidden;z-index: -1;}
.video{top: 30px;}
.video::after{content: '';width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.8);display: block;position: absolute;left: 0;top: 0;}


#logoBox {
    padding-top: 36px;
    padding-bottom: 20px;
}
#logoBox .inner{max-width: 1080px; margin: 0 auto; width:100%;}

/* ロゴスライダー */
.logoSlider{display: -ms-grid;-ms-grid-columns: min-content;overflow: hidden;background-color: #fff;margin: 10px 0;}
.autoplay-slider {display: flex;min-width: 100%;width: min-content;animation: 60s linear infinite sliderAnimation;}
.logoSlide {height: auto;width: max-content;margin: 20px;position: relative;}
.logoSlide img{max-height: 44px;}

@keyframes sliderAnimation {
100% {transform: translateX(-50%);}
}

.topicpath{padding: 15px 0;text-align: left;max-width: 1024px; margin: 0 auto; width:100%;}
.topicpath ul li{display: inline-block;font-size: 1.2rem;}
.topicpath ul li a{display: inline-block;}
.topicpath ul li a:after{content: '＞';padding: 10px;font-size: 1.0rem;color:#333;}
.topicpath ul li a:hover{text-decoration:none;}

.pTitleBG{background-image: url('../../images/bgTitleBG.png');}
.pTitle{background-image: url('../../images/bgTitle.png');color: #fff;}

.beegle .pTitle,
.case .pTitle,
.price .pTitle,
.column .pTitle,
.beegle .pTitle,
.papatto .pTitle,
.bplus .pTitle,
.contact .pTitle{padding:40px 0 45px 0;margin-bottom: 70px;}

.pTitle.sub{margin-bottom: 0;}

.papatto .pTitle{padding: 30px;margin-bottom: 0;}
.bplus .pTitle{padding: 30px 0 23px;margin-bottom: 0;}
.clicksearch .pTitle{padding: 30px;margin-bottom: 0;}

.papatto .pTitleBG .inner li{border-left: 6px solid #48d441;}
.bplus .pTitleBG .inner li{border-left: 6px solid #0a6cda;}
.clicksearch .pTitleBG .inner li{border-left:6px solid #367d4e;}

.pTitleBG,
.pTitle{text-align: center;background-position: center top;background-repeat: no-repeat;background-size: cover;}

.papatto .pTitleBG,
.bplus .pTitleBG{height: calc(288 +193);}

.pTitleBG .inner{padding: 70px 0;}


.pTitleBG .inner li{border-radius: 3px;font-size: 1.2em;border: 1px solid #d2d2d2;padding: 0.5em 0;line-height: 1.4;margin-bottom: 15px;margin-right: 15px;position: relative;background:#fff;}
.pTitleBG .inner li::last-child{margin-right: 0;}
.pTitleBG .inner li.one{padding-top: 1.0em;}


@media screen and (max-width: 767px) and (min-width: 0px){
/* .w780 {width: 100%;} */

.header .header-outline,
.header .header-gnav{
	display: none;
}
	#wrap{}

	body{max-width: 767px;width: 100vw;margin: 0;}

#subHeader .bg{
	height: 50px;
}
#subHeader.on .bg,
#subHeader.off .bg{transition: all 0.5s;}

#subHeader {height: 50px;}
	#subHeader .inner {
		min-width: 0;
		width: 100vw;
		margin: 0;
		padding: 0;
		}
	#subHeader .inner .boxL {
	    /* margin-bottom: 3%;
	    width: 100%;
	    height: 3.6rem; */
	}
	#subHeader .inner .boxL .ch-logo {
	    width: 95vw;
	    margin: 0 auto;
	    margin-top:12px;
	    margin-left:12px;
	}
	#subHeader .inner .boxL .ch-logo .svgContent {
	    height: 24px;
	}
	#subHeader .inner .boxC {
	    display: none;
	}
	#subHeader .hamburger-menu{display: block;}

	/* ハンバーガーメニュー */
	.menu-btn {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    height: 30px;
	    width: 30px;
	    justify-content: center;
	    align-itrems: center;
	    z-index: 90;
	    background: #fe423f;border-radius:4px;
	}
	
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
	    content: '';
	    display: block;
	    height: 2px;
	    width: 16px;
	    border-radius: 0;
	    background-color: #ffffff;
	    position: absolute;
	}
	.menu-btn span{
		top: 14px;
	    right: 7px;
	}
	.menu-btn span:before {
	    bottom: 6px;
	}
	.menu-btn span:after {
	    top: 6px;
	}
	
	/* 三本線 */
	#menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/}
	#menu-btn-check:checked ~ .menu-btn span::before {bottom: 0;transform: rotate(45deg);}
	#menu-btn-check:checked ~ .menu-btn span::after {top: 0;transform: rotate(-45deg);}
	
	#menu-btn-check {display: none;}/* チェックボックス隠す */
	
	#kv{
		width: 100vw;
	}
	#kv #wrapMainvisual,
	#kv #wrapMainvisual #mainvisual,
	#kv #wrapMainvisual #mainvisual .video{
		width: 100vw;
		top: 0;
	}
	#mainvisual h1 img {
		max-width: 95vw;
		min-width: auto;
	}
	.topicpath ul li {font-size: 3.4vw;}
	.pTitleBG .inner {
	    padding: 10px 0;
	}
	.contentsArea .inner, #contentsArea .inner {
	    width: 100%;
	    padding-top: 20px;
	    padding-left: 6vw;
	    padding-right: 6vw;
	}
	.w64 .colL, .w64 .colR {
		width: 100% !important;
	}
	.wrapFlex ul{display: block;}
	
	#Top-bsuite .inner {
	    width: 100%;
		    padding-left: 10px;
		    padding-right: 10px;
	}
	#Top-bsuite .colL, #Top-bsuite .colR{
		width: 100%;
		padding: 20px;
	}
	#Top-bsuite .colL {margin-bottom: 20px;}	
	
	
	
	.menu-content ul {
	    padding: 10px 10px 0;
	}
	.menu-content ul li {
	    border-bottom: solid 1px #ffffff;
	    list-style: none;
	}
	.menu-content ul li a {
	    display: block;
	    width: 100%;
		font-size: 4.6vw;
	    box-sizing: border-box;
	    color:#222;
	    text-decoration: none;
	    padding: 9px 15px 10px 0;
	    position: relative;
	}
	.menu-content ul li a::before {
	    content: "";
	    width: 7px;
	    height: 7px;
	    border-top: solid 2px #ffffff;
	    border-right: solid 2px #ffffff;
	    transform: rotate(45deg);
	    position: absolute;
	    right: 11px;
	    top: 16px;
	}
	
	
	.menu-content {
	    width: 80%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: -100%;/*leftの値を変更してメニューを画面外へ*/
	    z-index: 80;
	    background-color: #f6f6f6;
	    transition: all 0.5s;/*アニメーション設定*/
	}
	
	#menu-btn-check:checked ~ .menu-content {left: 0;/*メニューを画面内へ*/}
	
	/* /ハンバーガーメニュー */
	
	
	#logoBox{padding-top:36px;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;}
	

	.beegle .pTitle, .case .pTitle, .price .pTitle, .column .pTitle, .beegle .pTitle, .papatto .pTitle, .bplus .pTitle, .contact .pTitle {
	    margin-bottom: 10px;
	}
	
	.papatto .pTitleBG .inner li,
	.bplus .pTitleBG .inner li,
	.clicksearch .pTitleBG .inner li{width: 100%;}
	.pTitleBG .inner li{font-size: 4.4vw;}
	
}