/* memo */
/*
t_style　font_15以下、font_2dw以下コメントアウトしています。
 */
:root{
    --uTitle: 2.3rem;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --uTitle: 2rem;
    }
}

/*■■ メインイメージ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* タブレット */
@media screen and (max-width: 768px){
    /* .main_img > div{overflow: visible;} */
    .main_img_txt{z-index: 2;}
    .main_img_txt2{z-index: 1;}
    .main_img_txt, .main_img_txt2{
        bottom: -24%;
        left: 54%;
        transform: translate(-50%, 0);
        width: 34rem;
    }
    .main_img_txt h2, .main_img_txt2 h2{font-size: 64px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .main_img_txt h2, .main_img_txt2 h2{font-size: 40px;}
    .main_img_txt, .main_img_txt2{width: 22rem;bottom: -42%;}
}


/*■■ top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.index #menu_bt.trans{}
.sub_page .main_header{}
.sub_page .main_header h1{
    max-width: 310px;
}

#contents2 figure,#contents3 figure{transition: all 0.3s;}
#contents2 figure:hover,#contents3 figure:hover{filter: contrast(1.3);}
.contents2_title,.contents3_title{
     font-size:2.8rem;
}
.contents3_title .small{
    font-size:2rem;
    display: block;
    line-height: 2.3;
}

.top_cms{
    background-color: var(--color4);
}
.top_cms_item {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--color4);
}

.top_cms_title h2{
    font-size:3rem;
    color: var(--color3);
}


/* タブレット */
@media screen and (max-width: 768px){
    .contents2_title,.contents3_title{font-size:2.4rem;}
    .contents3_title .small{font-size:1.6rem;}
    .sub_page .main_header h1{left: 4%;transform: translate(0%, 0px);}
    .blog{padding-top: 150px;}
    .top_cms_title h2{font-size:2.2rem;}
    .footer_item,.footer_img{width: 100%!important;}
    .footer_img{padding: 150px 10%;}
    .footer_item{padding: 50px 10%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .contents2_title,.contents3_title{font-size:1.7rem;}
    .sub_page .main_header{padding: 18px 0;}
    .sub_page .main_header h1{
        left: 4%;transform: translate(0%, 0px);
        max-width: calc(100vw - 110px);
        top: -7px;
    }
    .contents3_title .small{font-size:1.4rem;}
    .footer_img{padding: 50px 4% 30px;}
    .footer_item{padding: 50px 4% 30px;}
}

/*■■ 下層ページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_title{
    font-size: var(--uTitle);
    font-weight: normal;
    padding: 10px 0;
}
.cate_box{
    padding: 30px 3%!important;
    margin: 0;
}

.cms_5-c .box_title1,#cms_5-c .box_title1,.box_title1{
    /* font-weight: bold; */
    color: var(--color3);
}
#cms_3-c .box_title1{
    font-weight: bold;
}
#cms_7-a .box_title1{
    font-size: 1rem;
}


/* タブレット */
@media screen and (max-width: 768px){
    .cate_box{padding: 15px 3%!important;}
    .sub_page #menu_bt {
    right: 15px;
    left: auto;
  }
  #cms_3-c .box_title1 {
      border: none;
  }
}
/* スマホ */
@media screen and (max-width: 667px){
    .box_title1{font-size: 1.4rem;font-weight: bold;}
    .cate_title{
        letter-spacing: 0em;
    }
    #cms_3-c .box_title2{text-align: center;}
    .title_box h2{letter-spacing: 0em;}
    
    .topcms_about_type1 .cate_box .box_title1{margin: 0 auto;}
    .topcms_about_type1 .cate_box:nth-child(1) .box_title1{width: 180px;}
    .topcms_about_type1 .cate_box:nth-child(2) .box_title1{width: 160px;}
    .topcms_about_type1 .cate_box:nth-child(3) .box_title1{width: 160px;}
}
/*■■ バナー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.con_btn{
    max-width: 420px;
    margin: 0 auto 70px;
}

/* タブレット */
@media screen and (max-width: 768px){
    .con_btn{max-width: 300px;}
}
/* スマホ */
@media screen and (max-width: 667px){}
/*■■ フロー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "step 0"counter(box);
	font-size: 60px;
	color: var(--color2);
	left: 0;
	top: -83px;
	z-index: -1;
	font-weight: normal;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--color2)
}
/* タブレット */
@media screen and (max-width: 768px){
    .flow_type3 .box_title1::before{
        font-size: 50px;
        top: -65px;
    }
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}
/*■■ TOP選ばれる理由 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.topcms_about_type1 {counter-reset: box 0;padding-top: 65px;}
.topcms_about_type1 .cate_box {
	width: 31%!important;
	padding: 25px 25px 25px;
	background-color: #f7f7f7;
	border-radius: 10px;
	box-sizing: border-box;
}
.topcms_about_type1 .box_img1{
        width: 50%;
    margin: 0 auto;
}
.topcms_about_type1 .number {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90px;
}
.topcms_about_type1 .number::before {
	counter-increment: box 1;
	content: "0"counter(box);
	font-size: 67px;
	line-height: 1;
	text-align: center;
	color: var(--color3);
	display: inline-block;
	position: absolute;
	right: 0;
	left: 0;
	top: -42px;
	margin: auto;
	z-index: 0;
		opacity: 0.4;
}
/* .topcms_about_type1 .number::after {
    content: "";
    position: absolute;
    display: block;
    width: 73%;
    height: 2px;
    background: #ffbe51;
    left: 0;
    right: 0;
    margin: auto;
    top: 22px;
} */
.topcms_about_type1 .cate_box .box_title1{
    font-size: 23px;line-height: 1.6;z-index: 1;
    padding: 0 0 20px;
    color: #373737;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_about_type1 .cate_box {
	margin: 0 auto 80px;
/*     width: 80%!important; */
}
/* .topcms_about_type1 .cate_box:last-of-type {
    margin-bottom: 0;
} */
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_about_type1 .cate_box {
	width: 90%!important;
	padding: 50px 25px 25px;
	width: 80%!important;
}
.topcms_about_type1 .number::before{
	font-size: 59px;
	top: -34px;
}
.topcms_about_type1 .number::after{
	width: 72%;
}
}

/*■■ suraida- ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* ---------- loopSlider ---------- */
.loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
.loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
.loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
.loopSlider .ul .li img{
    border-radius: 0;
}
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

@media screen and (max-width: 768px){
#top_conveyor,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 280px;
}
.loopSlider .ul .li{
    width: 280px;
}
#top_conveyor {
    padding-bottom: 0;
    padding-top: 0;
}
}
@media screen and (max-width: 667px){
#top_conveyor,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
.loopSlider .ul .li{
    width: 179px;
}

}
/*■■ バナー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 60px;
	position: fixed;
	bottom: 50px;
	left: 0;
	z-index: 10;
/*     transition: 0.5s; */
}
.fix_banner .close_bt{
	position: absolute;
	bottom: 100px;
    right: 170px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
/*     transition: 0.5s; */
	background-color: #fff;
	border: solid 2px #004b9b;
	z-index: 11;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #004b9b;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close {opacity: 0;z-index: -1;
}
.fix_banner.close2{opacity: 0;z-index: -1;}

@media  screen and (max-width: 768px){
.fix_banner{
    max-width: 5.5vw;
    left: auto;
    right: 0;
    bottom: auto;
    top:50%;
    transform: translate(0px, -50%);
}
.fix_banner .close_bt{bottom: 90px;right: 170px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 8vw;}
.fix_banner .close_bt{
	width: 25px;
	height: 25px;
	bottom: 65px;
	right: 120px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}