@charset "UTF-8";

/*||| 共通 |||*/
html{scroll-behavior:smooth;}
sup{vertical-align: 0.5em;font-size: 0.6em;}

#header,
#header-inner{display: none!important;}
#footer p.pagetop a:hover{background-position: 0;}

.youtube {position: relative;width: 100%;padding-top: 56.25%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}

.fs_b{font-size: 1.5em;}
.fs_n{font-size: 1.3em;font-weight: 300;}
.fs_s{font-size: 1em;font-weight: 300;}
.fs_ss{font-size: 0.75em;}
a:hover{opacity: 0.5;transition: 0.3s all;}
.pc_none{display: none!important;}
#contents{line-height: 1.7;font-family: 'M PLUS 1p', sans-serif;font-size: 16px;font-weight: 400; margin-bottom: -15em;}
#container{padding-top: 56px;}
.contents_wrap{max-width: 1024px;padding: 0 30px;margin: 0 auto;}
.contents_wrap_pn{max-width: 1024px;margin: 0 auto;}
.inner_wrap{max-width: 902px;margin: 0 auto;position: relative;}

.contents_tit{background: #0085cd;height: 60px;}
.contents_tit > *{display: flex;align-items: center;height: 100%;}
.contents_tit span{font-size: 24px;font-weight: 600;line-height: 1;display: inline-block;padding-left: 10px;color: #fff;}
.contents_tit .circle{position: absolute;right: 30px;top: -40px;display: flex;}
.contents_tit .circle i{width: 120px;height: 120px;border: 3px solid #0085cd;border-radius: 50%;display: flex;justify-content: center;align-items: center;text-align: center;flex-direction: column; margin-left: 20px;background: #fff;font-size: 26px;color: #0085cd;font-weight: 300;line-height: 1.4;font-style: normal;padding-top: 5px;z-index: 1;}
.contents_tit .circle i small{font-size: 0.9em;}

.contents_tit02{background: linear-gradient(to right,#0085cd 50%,#fff 50%);height: 60px;}
.contents_tit02 > *{background: #fff;height: 100%;}
.contents_tit02 > * span{display: inline-flex;align-items: center;height: 100%;line-height: 1;background: #0085cd;padding: 0 160px 0 10px;font-size: 26px;color: #fff;font-weight: 600;position: relative;}
.contents_tit02 > * span::after{content: "";position: absolute;left: 100%;top: 0;width: 0;height: 0;border-style: solid;border-width: 60px 35px 0 0;border-color: #0085cd transparent transparent transparent;display: block;}

.item_tit{color: #323232;font-size: 26px;font-weight: 700;margin-top: 30px;}
.item_tit + p{line-height: 2;margin-top: 10px;}

.layer #tascal_footer{margin-top: 80px;}


@media only screen and (max-width: 1024px) {
.sp_br { display:none; }
#contents{ margin-bottom: 0;}

}
@media only screen and (max-width: 768px) {
.sp_br2 { display:none; }

.pc_none{display: block!important;}
.sp_none{display: none!important;}
#contents{line-height: 1.6;font-size: 14px;}
#container{padding-top: 42px;}
.contents_wrap{padding: 0 15px;}

.contents_tit{height: 40px;}
.contents_tit span{font-size: 18px;padding-left: 15px;}
.contents_tit .circle{right: 15px;top: -30px;}
.contents_tit .circle i{width: 90px;height: 90px;border: 2px solid #0085cd;margin-left: 5px;font-size: 20px;padding-top: 3px;}

.contents_tit02{height: 40px;}
.contents_tit02 span{font-size: 19px;padding: 0 30px 0 15px;}
.contents_tit02 > * span::after{border-width: 40px 25px 0 0;}

.item_tit{font-size: 17px;margin-top: 20px;}
.item_tit + p{line-height: 1.6;margin-top: 7px;}

.layer #tascal_footer{margin-top: 50px;}

}

@media only screen and (max-width: 500px) {
.contents_tit span{font-size: 18px;}
.contents_tit .circle{right: 10px;top: -15px;}
.contents_tit .circle i{width: 67px;height: 67px;border: 2px solid #0085cd;margin-left: 5px;font-size: 15px;padding-top: 3px;}

.contents_tit02 span{font-size: 18px;}
}

/*||| ヘッダー |||*/
header{position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;background: #f9fbfc;}
.header_wrap{max-width: 1024px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 56px;box-sizing: border-box;}
.header_wrap h1 {width: 206px;}
.header_wrap nav{display: flex;justify-content: space-between;width: 77%;}
.header_wrap nav .t_menu{display: flex;justify-content: space-between;}
.header_wrap nav .t_menu a{color: #000;font-size: 16px;font-weight: 600;padding: 8px 25px;border-right: 1px solid #000;letter-spacing: 0.05em;}
.header_wrap nav .t_menu a span{display: inline-block;padding: 2px 5px;}
.header_wrap nav .support_btn{width: 140px;line-height: 1;font-size: 16px;color: #fff;font-weight: 600;background: #000;text-align: center;padding: 9px 0 11px;border-radius: 20px;}
header .hb_menu{display: none;}

/* セレクトページ */
#top_page .t_menu a[href$="./"] span,
#products .t_menu a[href$="./products.html"] span,
#faq .t_menu a[href$="./faq.html"] span
{background: linear-gradient(to bottom,transparent 45%,#f0e531 45%);}

@media only screen and (min-width: 769px){
.scroll_down header{box-shadow: 0 0 5px rgba(0,0,0,0.5);}
}

@media only screen and (min-width: 769px) and (max-width: 1064px) {
.header_wrap{padding: 0 20px;}
.header_wrap h1 {width: 180px;}
.header_wrap nav{width: 75%;}
.header_wrap nav .t_menu{width: calc(100% - 130px);}
.header_wrap nav .t_menu a{font-size: 14px;padding: 8px 1%;letter-spacing: 0em;text-align: center;flex-grow: 1;}
.header_wrap nav .support_btn{width: 120px;font-size: 14px;}
}

@media only screen and (max-width: 768px) {
.header_wrap{height: 42px;}
.header_wrap h1 {padding-left: 10px;box-sizing: border-box;width: 100%;height: 100%;background: #fff;position: relative;z-index: 1;display: flex;align-items: center;}
.header_wrap h1 img{width: 154px;}
.header_wrap nav{flex-wrap: wrap;align-content: flex-start;width: 100%;height: calc(100% - 42px); opacity: 0;position: fixed;left: 0;top: 42px;pointer-events: none;transform: translateY(-10px);box-sizing: border-box;padding: 0;transition: 0.5s all;background: linear-gradient(to bottom,#c1c5c7 0%,#fff 0.5%);}
.header_wrap nav .t_menu{flex-wrap: wrap;width: 100%;}
.header_wrap nav .t_menu a{font-size: 15px;padding: 15px 30px;border-right: none;border-bottom: 1px solid #000;width: 100%;}
.header_wrap nav .support_btn{width: 140px;font-size: 15px;padding: 15px 0; margin: 25px auto 0;border-radius: 25px;}

.h_active .header_wrap nav{opacity: 1;pointer-events: painted;transform: translateY(0);}

/*ハンバーガーメニュー*/
header .hb_menu{position: absolute;top:0;bottom: 0;margin: auto 0; width: 30px;height: 32px;right: 10px;z-index: 990;transition: all 0.3s;cursor: pointer;display: block;}
header .hb_menu span{display: block;height: 3px;width: 30px;position: absolute;top:0;bottom: 0;left: 0;margin: auto 0;}
header .hb_menu span i{display: block;height: 3px;width: 100%;transition: all 0.3s;background: #0085cd;border-radius: 3px;}
header .hb_menu span::before,
header .hb_menu span::after{content:"";position: absolute;left: 0; display: block;height: 3px;width: 100%;background: #0085cd;transition: all 0.3s;border-radius: 3px;}
header .hb_menu span::before{top:-9px;}
header .hb_menu span::after{bottom:-9px;width: 100%;}

header.h_active .hb_menu span::before{transform:rotate(-135deg);top:0;right:0;}
header.h_active .hb_menu span::after{transform:rotate(135deg);bottom:0;right:0;width: 100%;}
header.h_active .hb_menu span i{display: none;}
}


/*||| フッターボタン |||*/
#tascal_footer{border-bottom: 1px solid #fff;width: 100%;height: 323px;}
.tascal_footer_tit{background: #bfc0c0;padding: 8px 0;height: 74px;box-sizing: border-box;}
.tascal_footer_tit > div{text-align: right;}
.tascal_footer_tit img{width: 80px;}
#tascal_footer > .tascal_footer_fixed{width: 100%;background: rgba(0,0,0,0.7);height: 100px;padding: 25px 0 20px 0;box-sizing: border-box;z-index: 100;}
.footer_item{display: flex;justify-content: space-around;}
.footer_item > li{width: 32.5%;color: #fff;display: flex;flex-direction: column;justify-content: center;}
.footer_item > li > .footer_item_tit{text-align: center;}
.footer_item > li > .footer_item_tit span{font-size: 21px;display: inline-block;padding: 0 5px;border-bottom: 1px solid #fff;padding-bottom: 12px;font-weight: 400;}
.footer_item > li > p{margin: 25px 0 35px;line-height: 1.7;text-align: center;padding-left: 0.5em;font-size: 16px;}
.footer_item > li a{display: block;color: #fff;text-align: center;width: 245px;border-radius: 5px;background: #d90012;line-height: 1;padding: 18px 0;margin: auto auto 0;position: relative;font-size: 16px;}
.footer_item > li a::after{content: "";display: block;width: 6px;height: 6px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(45deg);position: absolute;right: 12px;top: 0;bottom: 0;margin: auto;z-index: 1;}

@media only screen and (max-width: 860px) {
.footer_item > li a{width: 90%;}
}

@media only screen and (max-width: 768px) {
	#tascal_footer{height: auto;}
	.tascal_footer_tit{padding: 5px 0;height: auto;}
	.tascal_footer_tit img{width: 55px;}
	#tascal_footer > .tascal_footer_fixed{padding-top: 20px;padding-bottom: 20px;height: auto;}
	.footer_item{flex-wrap: wrap;}
	.footer_item > li{width: 100%;}
	.footer_item > li:nth-of-type(n+2){margin-top: 25px;}
	.footer_item > li > .footer_item_tit span{font-size: 16px;padding: 0 3px;padding-bottom: 5px;}
	.footer_item > li > p{margin: 12px 0;font-size: 14px;}
	.footer_item > li a{max-width: 245px;width: 70%;padding: 15px 0;font-size: 14px;}
}


/*||| トップページ「メイン」 |||*/
#top_page main{background: #494a4b;text-align: center;}
#top_page main .main_wrap img{
    height: 366px;
    width: auto;
}
#top_page main .main_wrap{max-width: 1280px;margin: 0 auto;position: relative;}

#top_page main .main_wrap p.main_ttl{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 1.8rem;
    padding: 50px 20px;
    background: rgb(0 0 0 / 40%);
}
#top_page main .main_wrap p.main_ttl span{
	display: block;
	font-size: 34px;
}
#top_page main .main_wrap p.main_ttl big{
    font-weight: bold;
	font-size: 55px;
}



#top_page main .main_wrap_logo{    
	background: #fff;
    display: flex;
    align-items: center;
    padding: 3em;
    gap: 20px;
    justify-content: center;
	height: 25px;
    font-size: 25px;
}
#top_page main .main_wrap_logo img{
    height: 40px;
    width: auto;
}
@media only screen and (max-width: 768px) {
	#top_page main .main_wrap img{width: 100%;height: auto;}

	#top_page main .main_wrap_logo {
		padding: 1.5em 1em;
		gap: 10px;
		font-size: 20px;
	}
	#top_page main .main_wrap_logo img{
		height: 25px;
		width: auto;
	}
	#top_page main .main_wrap p.main_ttl span{
		font-size: 17px;
	}
	#top_page main .main_wrap p.main_ttl big{
		font-size: 26px;
	}
	#top_page main .main_wrap p.main_ttl{
		padding: 2em 10px;
        width: 80%;
	}
	
}



/*||| トップページ「メイン下」 |||*/
#top_page #main_bottom{
	padding: 85px 0 0;
}
#top_page #main_bottom .flex-wrap{
	display: flex;
    justify-content: space-around;
}
#top_page #main_bottom .flex-wrap p{
	text-align: center;
}
#top_page #main_bottom .flex-wrap .wrap{
    box-shadow: 9px 12px 15px 1px #7b7b7b;
	padding: 2em;
    box-sizing: border-box;
    width: 48%;
}
#top_page #main_bottom .flex-wrap .wrap div p{
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    margin: 1em auto .5em;
}
#top_page #main_bottom .flex-wrap .wrap div p span{
    color: #fff;
    padding: 10px 2em;
}
#top_page #main_bottom .flex-wrap .wrap.product_tascal div p span{
    background: #f15a24;
}
#top_page #main_bottom .flex-wrap .wrap.product_tascal_plus div p span{
    background: #0085cd;
}
#top_page #main_bottom .flex-wrap .wrap p big {
    font-size: 45px;
    font-weight: bold;
}
#top_page #main_bottom .flex-wrap .wrap.product_tascal p big{
    color: #f15a24;
}
#top_page #main_bottom .flex-wrap .wrap.product_tascal_plus p big{
    color: #0085cd;
}
#top_page #main_bottom .flex-wrap .wrap .detail_btn{
	margin: 2em auto;
    text-align: center;
}
#top_page #main_bottom .flex-wrap .wrap .detail_btn a {
    line-height: 1;
    font-size: 18px;
    color: #fff;
    background: #4d4d4d;
    text-align: center;
    padding: 10px 40px;
    border-radius: 100vh;
}

@media only screen and (max-width: 768px) {
	#top_page #main_bottom{
		padding: 40px 0;
	}
	#top_page #main_bottom .flex-wrap{
		display: block;
	}
	#top_page #main_bottom .flex-wrap .wrap{
		width: 100%;
    margin-bottom: 2em;
	}
	#top_page #main_bottom h2 img:nth-of-type(2){width: 26%; margin-top: -20px;}
	#top_page #main_bottom .request_copy{font-size: 16px;}
	#top_page #main_bottom .request_copy span{display: inline-block;}
	#top_page #main_bottom .request_copy big{
		font-size: 30px;
	}
}

@media only screen and (max-width: 600px) {
	#top_page .three_point li .copy{font-size: 13px;}
	#top_page .three_point li big{font-size: 1.6em;}
}

@media only screen and (max-width: 500px) {
	#top_page .three_point li .copy{font-size: 2.4vw;margin-bottom: 2px;}
	#top_page .three_point li figure{width: 70px;}
	
}


/*||| 軽快なtascal、パワフルなtascal plus
現場に合わせた最適アシストをお選びください |||*/
#top_page #select_table{margin-top: 105px;}
#top_page #select_table .request_copy{
	font-size: 28px;
	text-align: center;
	color: #000;
	font-weight: 400;
	margin-bottom: 20px;
}
#top_page #select_table .request_copy big{
	line-height: 1.3;
	display: block;
}
#top_page #select_table .compare-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
	margin-bottom: 80px;
}
#top_page #select_table .compare-table th,
#top_page #select_table .compare-table td {
  border: 5px solid #fff;
  padding: 25px 10px 25px 20px;
  vertical-align: top;
  text-align: center;
  line-height: 1.6;
}
#top_page #select_table .compare-table th {
	background: #f1f2f4;
	vertical-align: middle;
}
#top_page #select_table .compare-table tr th:first-child {
  text-align: center;
    font-weight: normal;
}
#top_page #select_table .compare-table .tascal {
  background: #fee7d3;
}
#top_page #select_table .compare-table .plus {
  background: #d7e6f6;
}
#top_page #select_table .compare-table tr:first-child th {
  font-size: 24px;
  padding: 35px 20px;
  color: #333;
}
#top_page #select_table .compare-table .tascal div,
#top_page #select_table .compare-table .plus div{
	text-align: left;
}
#top_page #select_table figure{
	margin: 2em auto 0;
	text-align: center;
}
#top_page #select_table figure img{
	width: 560px;
}
#top_page #select_table .contact_btn_wrap{
	display: flex;
    justify-content: center;
    gap: 50px;
	margin-top: 50px;
}
#top_page #select_table .contact_btn_wrap .contact_box{
	
}
#top_page #select_table .contact_btn_wrap .contact_box a{
    padding: 1em 3em;
    color: #fff;
    border-radius: 50px;
    display: block;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
#top_page #select_table .contact_btn_wrap .contact_box:first-child a{
    background: #ea5532;	
}
#top_page #select_table .contact_btn_wrap .contact_box:nth-child(2) a{
    background: #0085cd;	
}

@media only screen and (max-width: 768px) {
	#top_page #select_table{
		margin-top: 20px;
	}
	#top_page #select_table .request_copy big{
		font-size: 30px;
	}
	#top_page #select_table .inner_wrap{
			padding: 0 15px;
	}
	#top_page #select_table .contact_btn_wrap{
		flex-wrap: wrap;
		margin-top: 4em;
        margin-bottom: 5em;
		gap: 20px;
	}
	
	#top_page #select_table .contact_btn_wrap .contact_box a{
    width: 170px;
	}
	#top_page #select_table .compare-table th, #top_page #select_table .compare-table td{
		padding: 10px;
	}
	#top_page #select_table .compare-table table{
    margin-bottom: 20px;
	}
}