@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 165px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 48%;
}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}
section p:not(:last-child){
  margin-bottom: 1.5em;
}
.column3{
 flex-flow: row wrap;
 gap:40px 30px;
}
.column4{
 flex-flow: row wrap;
 gap:40px 20px;
}
.column3 > li{
 width: calc((100% - 30px*2)/3);
}
.column4 > li{
 width: calc((100% - 20px*3)/4);
}

/*タイトル
========================================== */
.h2Tit {
 font-size: 2.4rem;
}
.h3Tit {
 font-size: min(5.0vw,2.8rem);
	margin-bottom: 40px;
}
.h4Tit {
	font-size: 2.4rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2.0rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 1.8rem;
	margin-bottom: 10px;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: min(1.6vw, 2.2rem);
}
.note,
.note li{
  font-size: 1.2rem;
}
.pcCenter{
	text-align: center;
}

/*
　ボタン,リンク
========================================== */

.btnWrap{
 margin-top: 40px;
}


/* =======================================
  ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}
/*-- pager --*/
.pager{
	margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
  width: 200px;
}

/* =======================================
	header
========================================== */
header {
 height: 161px;
}
header > div{
 position: relative;
 padding: 0;
}
header #logo img{
	width: 186px;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
	padding-top: 60px;
}
#gnaviList{
 flex: 1;
 justify-content: center;
 align-items: center;
 gap: 0 min(4.6vw,65px);
}
#gnaviList > li{
 font-size: min(1.5vw,1.6rem);
}
#gnaviList > li > a{
 display:flex;
 align-items: center;
 white-space: nowrap;
}
#gnaviList li a:hover{
 opacity: .7;
}
.gnavi .hasSub{
 position: relative;
 white-space: nowrap;
}
#gnaviList .hasSub{
 display: flex;
 align-items: center;
 gap:0 10px;
 cursor: pointer;
}
#gnaviList .hasSub::after{
 content: "";
	display: block;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 12 6" fill="none"><path d="M0.5 0.5L6 4.5L11.5 0.5" stroke="%23333333" stroke-linecap="round"/></svg>') no-repeat left top/100% auto;
 width: 13px;
 height:6px;
}

.gnavi .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
.gnavi .sub{
	display: none;
	visibility: hidden;
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
 padding-top: 4px;
	min-width:100px;
}
.gnavi .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
.gnavi .sub li{
	font-size: min(1.2vw,1.4rem);
}
.gnavi .sub li + li{
 border-top: 1px #fff solid;
}
.gnavi .sub li a{
	display: block;
 background: rgba(255,255,255,.8);
	padding: 8px 20px 10px;
 color: var(--base);
 text-align: center;
	white-space: nowrap;
}
.gnavi .sub li a:hover{
 opacity: .7;
}


#headLinks{
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-end;
	position: absolute;
	right: 0px;
	top: 0;
	gap:8px 15px;
 max-width: 355px;
}

#headLinks a:hover{
 opacity: .7;
}

#headTel{
 position: absolute;
 left: 0;
 top: 0;
}

/* =======================================
	main
========================================== */
body main{
 margin-top: 165px;
}


/* =======================================
	footContact
========================================== */
#footContact{
 justify-content: space-between;
 align-items: center;
}
#footContact .txts{
 width: calc(100% - 50px - 31%);
}
#footContact ul{
 width: min(31%,323px);
}
/* =======================================
	footer
========================================== */
footer a:hover{
	opacity: .7;
}
#footBottom{
 padding-bottom: 72px;
}

.footerLeft{
 width: 45.6%;
}
#footerRight{
 width: 50%;
 display: flex;
 flex-flow: column;
}
#footerRight .footNavis{
 flex-flow: row wrap;
 justify-content: space-between;
 align-items:flex-start;
 align-content: flex-start;
 gap: 25px min(4.8vw,76px);
}
.footNavis li{
 font-size: min(1.4vw,16px);
 letter-spacing: 0.06em;
}
.footNavis >ul > li + li{
	margin-top:1.125em;
}
.footNavis li a{
	display: block;
}
.footNavis .sub{
 margin-top: 2px;
}
.footNavis .sub li a::before{
 content: "-";
}

#footerRight .pcFlex.flexRowReverse{
 justify-content: space-between;
 align-items: center;
 margin-top: auto;
}
#footerLogo{
 width: 190px;
}


#pageTop{
	right: min(7.14vw,4vw);
	bottom: 53px;
}
#pageTop a:hover{
 opacity: .7;
}

/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/
.mainTitle{
}

/*-- table --*/
.basicTable > dt,
.basicTable >div>dt{
	border-right: 1px dotted var(--blue);
	padding: 15px 2.5%;
	width: 23%;
}
.basicTable > dd,
.basicTable >div>dd{
	padding: 15px 2.5%;
	width: 77%;
}
.basicTable > dt:last-of-type{
	border-bottom: none;
}
 .basicTable > dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: min(1.3vw,1.6rem);
}
table.basicTable th,
table.basicTable td{
	padding: 10px 2px; 
}

.basicTable.data tbody th,
.basicTable.data tbody td{
	font-size: min(1.3vw,1.4rem);
}

/*		anchorLink
-----------------------------*/
.anchorLink,
.anchorLink ul{
	padding: 35px 0 ;
	gap:15px 20px;
}
.pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	width: calc((100% - 20px * 3) / 4);
	height: 60px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 30px 8px 10px;
}
.pageLinks li a span{
	font-size: 1.4rem;
}

.pageLinkArea{
	margin-bottom: 50px;
}



/* =======================================
	top
========================================== */

/*		#mv
-----------------------------*/
#mv figure{
 width: 63.6%;
 max-width: 763px;
}
#mv .mvTxts{
 width: 36.4%;
}

/*		#topWorks
-----------------------------*/
#topWorks{
 padding-top: 169px;
 padding-bottom: 90px;
 justify-content: space-between;
}
#topWorks .txts{
 width: 49%;
 max-width: 587px;
}
#topWorks .txts h2{
 margin-left: 20px;
}
#topWorks .txts p:not(.bttnWrap){
 font-size:min(1.45vw,16px) ;
}
#topWorks p:not(:last-child){
 margin-bottom: 10px;
}
#topWorks .btnWrap{
 padding-right: 27px;
}
#topWorks figure{
 padding-top: 10px;
 width: 47.5%;
 max-width: 569px;
}
@media screen and (max-width: 1130px) {
 #topWorks .txts .pc{
  display: none;
 }
}/*- only-*/

/*		#topBrand
-----------------------------*/
#topBrand {
 padding-top: 90px;
}
#topBrand .pcFlex{
 position: relative;
 justify-content: space-between;
 align-items: center;
}
#topBrand .pcFlex .txts{
 width:30.8% ;
 min-width: 308px;
}
#topBrand .pcFlex figure{
 width: 56%;
}
#topBrand .btnWrap{
 position: absolute;
 right: 11px;
 bottom:-32px;
 width: 195px;
}
#topBrand .flexRowReverse .txts{
 padding-right: 16px;
}
#topBrand .flexRowReverse .btnWrap{
 right: auto;
 left:35.5%;
}


/*		##topProducts PC
-----------------------------*/
#topProducts {
 padding-top: 70px;
}
#topProducts .inner1200{
 position: relative;
}
#topProducts .slick-dotted.slick-slider{
 padding-right: 65px;
}
#topProducts .btnWrap{
 position: absolute;
 top: 3px;
 right: 0;
 width: 195px;
 margin: 0;
}

/*		##topCorporateCustomers PC
-----------------------------*/
#topCorporateCustomers div.pcFlex{
 justify-content: space-between;
 align-items: flex-end;
}
#topCorporateCustomers div.pcFlex p:not(.btnWrap){
 margin-bottom: 0;
}
#topCorporateCustomers .pcFlex .btnWrap{
 margin-top: 0;
 width: 195px;
}
#topCorporateCustomers ul{
 align-items: flex-end;
 justify-content: center;
 gap:0 109px;
}

/* =======================================
   works PC
========================================== */
#chapter1.pcFlex,
#chapter2 .pcFlex,
#chapter3 .pcFlex{
 justify-content: space-between;
}
#chapter1 .h3Tit::after{
	width: 120px;
	height: 72px;
	right: 0;
}
#chapter2 .h3Tit::after{
	width: 125px;
	height: 40px;
	top: 5px;
}
#chapter3 .h3Tit::after{
	width: 84px;
	height: 80px;
	top: -10px;
}
#chapter1.pcFlex .txts,
#chapter2 .pcFlex .txts,
#chapter3 .pcFlex .txts{
 width: 49%;
 max-width: 587px;
}
#chapter1.pcFlex figure,
#chapter2 .pcFlex > figure,
#chapter3 .pcFlex figure{
 width: 47.5%;
 max-width: 569px;
}
#chapter3 .box p{
	line-height: 2;
}
#chapter3 .box figure{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px 30px;
}
#chapter3 .box figure img{
	width: calc((100% - 30px) / 2);
}

/* =======================================
  cache PC
========================================== */
.brandSlider{
 padding: 40px 50px;
}
#cacheAbout .pcFlex,
#cacheFeature .pcFlex{
 justify-content: space-between;
}
#cacheAbout .pcFlex p{
 width: 62%;
}
#cacheAbout .pcFlex figure{
 width: 33%;
}
#cacheAbout .brandSlider .slick-prev{
	left: 10px;
}
#cacheAbout .brandSlider .slick-next{
	right: 10px;
}
#cacheAbout .brandSlider .slick-prev,
#cacheAbout .brandSlider .slick-next,
#cacheAbout .brandSlider .slick-prev::before,
#cacheAbout .brandSlider .slick-next::before{
	width: 40px;
	height: 40px;
}
#cacheFeature{
	padding: 50px 0;
}
#cacheFeature figure{
 width: 47.5%;
  max-width: 569px;
}
#cacheFeature .pcFlex > p{
 width: 49%;
  max-width: 587px;
}
#cacheFeature .profileBox figure{
 width: 24%;
 max-width: 214px;
}
#cacheFeature .profileBox .txts{
 width: calc(100% - min(24%,214px) - 50px);
}
#cacheFeature .profileBox .btnWrap{
	text-align: right;
}
.enjoyList figure{
 width: calc((100% - 20px*4)/5);
}

/* =======================================
  caqueco PC
========================================== */
#caquecoAbout .pcFlex,
#caquecoFeature .pcFlex{
 justify-content: space-between;
}
#caquecoAbout .pcFlex p{
 width: 62%;
}
#caquecoAbout .pcFlex figure{
 width: 33%;
}
#caquecoAbout .brandSlider .slick-prev{
	left: 10px;
}
#caquecoAbout .brandSlider .slick-next{
	right: 10px;
}
#caquecoAbout .brandSlider .slick-prev,
#caquecoAbout .brandSlider .slick-next,
#caquecoAbout .brandSlider .slick-prev::before,
#caquecoAbout .brandSlider .slick-next::before{
	width: 40px;
	height: 40px;
}
#caquecoFeature{
	padding: 50px 0;
}
#caquecoFeature figure{
 width: 47.5%;
  max-width: 569px;
}
#caquecoFeature .pcFlex > p{
 width: 49%;
  max-width: 587px;
}
#caquecoFeature .born ol li{
 align-items: center;
}
#caquecoFeature .born ol li::after{
	right: 5%;
}
#caquecoFeature .born ol li:nth-child(1)::after{
	width: 140px;
	height: 75px;
	top: 40px;
}
#caquecoFeature .born ol li:nth-child(2)::after{
	width: 150px;
	height: 45px;
	top: 50px;
}
#caquecoFeature .born ol li:nth-child(3)::after{
	width: 130px;
	height: 65px;
	top: 40px;
}
#caquecoFeature .born ol li:nth-child(4)::after{
	width: 110px;
	height: 108px;
	top: 50px;
}
#caquecoFeature .born ol li figure{
 width: 24%;
}
#caquecoFeature .born p{
 font-size: 18px;
}
#caquecoFeature .born ol li> div{
 width: calc(100% - min(24%,240px) - 50px);
}

/* =======================================
 products PC
========================================== */
.productsNav{
 justify-content: center;
 flex-flow: row wrap;
 gap:30px 40px;
}
.productsNav li{
 width: 40%;
}
.productsNav li:nth-child(1) h3::before{
	width: 35px;
	height: 60px;
	top: 12px;
	left: min(6%,50px);
}
.productsNav li:nth-child(2) h3::before{
	width: 50px;
	height: 50px;
	top: 16px;
	left: min(20%,110px);
}
.productsNav li:last-child{
 width: 100%;
 font-size: 20px;
}
.productsNav li:last-child a{
 /* max-width: 300px; */
 margin: auto;
 width: calc((40% * 2) + 40px);
}
.productsNav li h3{
 font-size: 24px;
}
.productsNav li p{
	font-size: 1.4rem;
	line-height: 1.6;
}
/**single**/
#productsMain{}
.productsDetail{
 justify-content: space-between;
 align-items: flex-start;
}
.productsDetail .imgs{
 width: 51%;
}
.productsDetail .txts{
 width: 46%;
}
.howto .pcFlex{
 justify-content: space-between;
}
.howto .pcFlex li{
 width: 30%;
}


/* =======================================
 corporate-customers PC
========================================== */
#customersCan div.pcFlex {
 justify-content: space-between;
 align-items: center;
}
#customersCan div.pcFlex figure{
 width: 47.5%;
  max-width: 569px;
}
#customersCan div.pcFlex p{
 width: 49%;
  max-width: 587px;
}
#customersCan ul h4{
 font-size: min(2vw,23px);
 letter-spacing: 0.04em;
}
.caseBox dd{
 justify-content: space-between;
 align-items: center;
}
.caseBox dd .txts{
 width: 70%;
}
.caseBox dd figure{
 width: 26%;
}
#customersFlow ol li{
 display: flex;
 justify-content: space-between;
 flex-flow: row-reverse;
 align-items: flex-start;
}
#customersFlow ol li .txts{
 width: 70%;
}
#customersFlow li .free{
	top: -10px;
	right: 100%;
	margin: 0 20px 0 0;
}
#customersFlow ol li figure{
 width: 25%;
}
#customersFlow li + li::before{
	width:25px;
	height:25px;
}
#customersFlow li + li::after{
	width: 20px;
	height: 10px;
}
#customersCan,
#customersCase{
	padding-bottom: 50px;
}

/* =======================================
 company PC
========================================== */
#companyGreeting .pcFlex{
 justify-content: space-between;
}
#companyGreeting .pcFlex .txts{
 width: 55%;
}
#companyGreeting .pcFlex figure{
 width: 40%;
}

#companyShop .pcFlex{
 justify-content: space-between;
 align-items: center;
}
#companyShop .pcFlex .txts{
 width: 55%;
}
#companyShop .pcFlex figure{
 width: 40%;
}
#companyShop .box .pcFlex{
	flex-wrap: wrap;
	margin-bottom: 20px;
}
#companyShop .box .pcFlex p{
	margin: 0;
}
#companyShop .box dl{
 margin-bottom: 20px;
}

/* =======================================
 esg PC
========================================== */
#esgSocial .pcFlex{
 justify-content: space-between;
}
#esgSocial .pcFlex .txts{
 width: 60%;
}
#esgSocial .pcFlex> figure{
 width: 35%;
}
/* #esgSocial .columnBox{
 align-items: center;
} */
#esgSocial .columnBox .h5Tit{
	margin-bottom: 30px;
	text-align: center;
}
#esgSocial .columnBox .h5Tit span{
	padding-right: 100px;
}
#esgSocial .columnBox .h5Tit span::before{
	width: 90px;
	height: 27px;
	bottom: 10px;
}
#esgSocial .columnBox .pcFlex{
	align-items: center;
}
#esgSocial .columnBox .txts{
	margin-bottom: 0;
 width: 50%;
}
#esgSocial .columnBox figure{
	display: flex;
 width: 48%;
 gap: 0 10px;
 justify-content: flex-end;
}
#esgSocial .columnBox figure img{
	width: calc((100% - 10px) / 2);
}

/* =======================================
 recruit PC
========================================== */
#recruitEducation .pcFlex{
 justify-content: space-between;
}
#recruitEducation .pcFlex figure{
 width: 28%;
}
#recruitEducation .pcFlex .txts{
 width: 67%;
}
 
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
#news .pageLinks{
	padding: 35px 0 ;
}

.newsBox.pcFlex{
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: flex-start;
}
.newsBox .newsInfo{
 width: 100%;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

.newsBox .btn{
 height: 60px;
 margin-left: auto;
}
/*		single
-----------------------------*/
article{
 padding: 100px 0;
}
.newsBox .newsInfo{
 width: 100%;
}
article .pcFlex{
 justify-content: space-between;
 margin-bottom: 1.6em;
}
article .pcFlex figure{
 width: 30%;
}
article .pcFlex .txts{
 width: 66%;
}

/* =======================================
	contact. PC
========================================== */
/*#contactLead .icTel{
	font-size: 5rem;
}*/
#contactLead{
	 padding: 100px 0;
}
#contactTelfax .telfaxBox > p{
  width: 100%;
}
#contact #footBottom{
 padding-top: 0;
}
/* =======================================
	form PC
========================================== */
.formArea .basicTable input[type=text],
.formArea .basicTable input[type=email],
.formArea .basicTable input[type=tel],
.formArea .basicTable select{
	padding: 8px;
	width:100%;
}
.formArea .basicTable textarea{
	padding: 8px;
	width: 100% !important;
}
.formArea .basicTable dt{
	width: 25%;
}
.formArea .basicTable dd{
	width: 75%;
}
.formArea #fRecruit[style^="display: block;"]{
 display: flex !important;
}
.formArea #fRecruit dt{
 flex-flow: column;
 align-items: flex-start;
}
.confirm {
		margin-top: 40px;
}
.formFoot{
 margin:40px 0 0;
}
.contactPrivacy #errormsg_当社規定の「個人情報保護方針」に同意する{
 max-width: 39em;
 margin: 0 auto;
}