@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 160px;
}
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;
}


/*タイトル
========================================== */
.h2Tit {
	font-size: min(6.4vw,3.6rem);
}
.h3Tit {
  font-size: min(5.5vw,3rem);
	margin-bottom: 40px;
}
.h4Tit {
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 1.8em;
	margin-bottom: 20px;
}

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

/*
　ボタン,リンク
========================================== */
.btn::after{
	right: 49px;
}
.btnWrap{
 margin-top: 40px;
}
.btn.btnL{
	padding: 15px min(2.7vw, 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 {
	padding-bottom: 10px;
}
header > div{
 position: relative;
 height: 90px;
 padding: 0;
}
header #logo{
	width: min(20.5vw,205px);
	height: 100%;
}
header #logo a{
	padding-top: 19px;
}

#headContact{
	gap: 0 14px;
	display: flex;
 align-items: center;
 justify-content: flex-end;
 margin-top: 16px;
	position: absolute;
 top: 0;
 right: 0;
}
.headTel{
 display: flex;
 align-items: center;
 gap: 0 10px;
 line-height: 1;
 width: min(35.8vw,323px);
}
.headTel .icTel{
 color: var(--Lblue);
 font-size: min(5vw,2rem);
 font-weight: 700;
 letter-spacing: 0.04em;
 position: relative;
}
.headTel .icTel::before{
	content: "";
	background: url("../images/ic_tel.svg") no-repeat left top / 100% auto;
	display: inline-block;
	width: 11px;
	height: 19px;
	position: absolute;
	left: -16px;
	top: calc(50% - 7px);
}
.headTel .time{
 font-size: min(4vw,1.4rem);
 line-height: 1.2;
}
.headTel .time span{
 font-size: min(3vw,1.2rem);
 font-weight: 400;
}

.btnReservation{
	width: min(100%,220px);
	height: 43px;
}

/* =======================================
	gnavi
========================================== */
.gnavi{
	padding-top: 69px;
	align-items: center;
	right: 0;
}
#gnaviList{
 flex: 1;
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(3.46vw,45px);
}
#gnaviList > li > a{
 display:flex;
 align-items: center;
 white-space: nowrap;
}
#gnaviList li a:hover{
 opacity: .7;
}

/* =======================================
	main
========================================== */
main{
	margin-top: 100px;
}
.leadWrap .h3Tit + p{
	text-align: center;
}

/* =======================================
	footer
========================================== */
footer a:hover{
	opacity: .7;
}
#footBottom{
	padding: 74px 0 20px;
}
#footerLogo{
	width: min(46.67%,175px);
	margin-bottom: 15px;
}

 .footerLeft{
	width: min(45%,375px);
}
.footerLeft .address{
 margin-bottom: 12px;
}
.footerLeft .tel{
  display: flex;
  align-items: flex-start;
  gap: 0 25px;
  line-height: 1;
	margin-bottom: 25px;
	padding-left: 19px;
}
.footerLeft .icTel{
 color: var(--Lblue);
 font-size: min(5vw,2rem);
 font-weight: 700;
 letter-spacing: 0.04em;
 position: relative;
}
.footerLeft .icTel::before{
	content: "";
	background: url("../images/ic_tel.svg") no-repeat left top / 100% auto;
	display: inline-block;
	width: 11px;
	height: 19px;
	position: absolute;
	left: -16px;
	top: calc(50% - 7px);
}
.footerLeft .time{
 font-size: min(4vw,1.6rem);
 line-height: 1.2;
}
.footerLeft .time span{
 font-size: min(3vw,1.4rem);
 font-weight: 400;
}
footer .links{
	align-items: flex-end;
}
footer .links a:nth-child(2){
	margin-right: 27px;
}
footer .links .bnr{
	width: 208px;
}
footer .links .bnr .subTxt{
	font-size: 1.6rem;
	padding: 0 10px;
}
footer .links .bnr .subTxt::before,
footer .links .bnr .subTxt::after{
	height: 24px;
	top: 2px;
}

#footerRight{
 align-items:flex-start;
 gap: 0 min(24.1%,82px);
 width: min(40%,340px);
}
.footerNavi > li{
	font-size: 1.6rem;
	font-weight: 700;
}
.footerNavi > li + li{
	margin-top: 2.4rem;
}
.footerNavi li a{
	display: block;
	line-height: 1;
}

footer .copy{
	font-size: min(1.175vw,1.2rem);
	margin-top: 60px;
}
#footBottom{
	background-size: 100% auto;
	background-position: center 89px;
}

footer .calendar iframe{
	width: 470px;
	height: 300px
}



/*
#pageTop{
	right: 4vw;
	bottom: 73px;
}*/

/* =======================================
	footContact
========================================== */
#footContact{
 overflow: hidden;
 padding: 50px 0 0;
}
#footContact #bnrArea{
	gap: 0 min(2.8vw,48px);
	margin-bottom: 70px;
}
#footContact #bnrArea p{
	margin: 0;
	max-width: 230px;
	height: 60px;
}
#footContact #bnrArea p:nth-child(3){
	max-width: 168px;
}
#footContact .accessBox{
	gap: 0 61px;
	margin-bottom: 91px;
}
#footContact .accessBox .h2Tit{
	margin-bottom: 20px;
}
#footContact .accessBox > div{
	width: 46.95%;
}
#footContact .accessBox > div::after{
	width: 723px;
	height: 723px;
	left: -126px;
	top: -154px;
}
#footContact .accessBox .map,
#footContact .accessBox .calendar{
	width: min(100%,470px);
	height: 310px;
}
#footContact .accessBox > div:nth-child(2)::before{
	height: 310px;
	left: -30px;
}

#footContact .contactBox .h2Tit{
	font-size: 2.4rem;
	margin-bottom: 24px;
}
#footContact .contactBox .tel,
#footContact .contactBox .mail a{
	width: min(47vw,476px);
}
#footContact .contactBox .mail a{
	padding: 0 !important;
}
#footContact .mail .time,
#footContact .time span{
 font-size: min(1.4vw,1.4rem);
}

/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/
.mainTitle{
	height: 200px;
}

/*-- table --*/
.basicTable > dt{
	border-right: 1px dotted var(--blue);
	padding: 15px 2.5%;
	width: 23%;
}
.basicTable > 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;
}

/*----*/

.bnrLink{
	padding: 20px;
}
.bnrLink .txts p.bold{
	margin-bottom: 20px;
}
.bnrLink .txts p .icArrow{
	padding-right: 30px;
}
.bnrLink .txts p .icArrow::after{
	top: calc(50% - 10px);
}


/* =======================================
	top
========================================== */
#top main{
	margin: 0;
}

/*		#mv
-----------------------------*/
#mv{
	padding: 105px 0 0;
}
#mv .pcFlex{
	justify-content: center;
	align-items: center;
	gap: 0 min(5%,50px);
}
#mv .mvTxts p{
	font-size: min(4vw,4.5rem);
}

/*		#topLead
-----------------------------*/
#topLead p{
	padding: 182px 0;
}

/*		#topNews
-----------------------------*/
#topNews{
	padding: 0 0 140px;
}

/*		#topPoint
-----------------------------*/
#topPoint{
	padding: 0 0 65px;
}
#topPoint .h2Tit{
	margin-bottom: 55px;
}
#topPoint ul{
	gap: 50px 3.6%;
}
#topPoint ul li{
	width: calc(92.8% / 3);
}

 
/*		#topService
-----------------------------*/
#topService{
	padding: 60px 0 90px;
}
#topService .h2Tit{
	margin-bottom: 50px;	
}
#topService div.pcFlex{
	justify-content: space-between;
 align-items: flex-start;
}
#topService .txts{
	width: min(39.1vw,391px);
}
#topService .txts ul{
	margin-top: 50px;
}
#topService .txts ul li a{
	font-size: 1.8rem;
	padding: 19px min(16.57%,57px) 19px min(14.8%,51px);
}
 #topService .slide{
  width: 54.5%;
 }
#topService .slide::after{
	width: 128.8%;
	height: 128.8%;
}

/*		#topAbout
-----------------------------*/
#topAbout > div.pcFlex{
	justify-content: space-between;
	padding-left: min(4.5vw,42px);
	padding-right: min(4.5vw,42px);
}
#topAbout .txts{
	width: min(41vw,525px);
}
#topAbout .txts .leadTxt{
	font-size: min(1.7vw,2rem);
}
#topAbout .txts ul li{
	font-size: min(1.2vw,1.6rem);
	width: min(56.5%,279px);
}
#topAbout .txts ul li:nth-child(odd){
	width: min(39.8%,197px);
}
#topAbout .txts .btnWrap{
	margin-top: 37px;
}
#topAbout figure{
	width: min(44vw,559px);
}


/* =======================================
  sell / lease / maintenance common
========================================== */
#titleArea{
	padding: 30px 0 50px;
}
#titleArea .txts{
	border-radius: 50vw 0 20px 0;
	padding: 30px 30px 30px 60px;
}
#titleArea .leadTxt{
	font-size: 1.8rem;
}

#sellPoint ul,
#leaseMerit .meritList,
#maintenancePack .packFeatures{
	justify-content: center;
	gap: 0 5%;
}
#sellPoint h4,
#leaseMerit .meritList h4,
#maintenancePack .packFeatures h4{
	font-size: min(1.8vw,2rem);
	margin: 15px 0;
}

#sellService ul figure img,
#leaseMerit .suitablePerson figure img{
	height: 255px;
}


/* =======================================
	sell PC
========================================== */
#sellFind div.pcFlex:nth-of-type(2){
	margin-top: 50px;
}
#sellPoint ul li{
	width: 30%;
}
#sellPoint ul figure img{
	width: min(100%,360px);
}

#sellService ul li{
	padding: 20px 2.5% 30px;
}

/* =======================================
	lease PC
========================================== */
#leaseMerit .meritList li{
	width: calc(85% / 4);
}
#leaseMerit .meritList figure img{
	width: min(100%,255px);
}
#leaseMerit .txtMoreover{
	margin: 50px auto 0;
	padding: 10px 20px;
}
#leaseMerit .choicesAvailable h4{
	margin: 10px auto 15px;
}
#leaseMerit .choicesAvailable p{
	margin-bottom: 40px;
	text-align: center;
}
#leaseMerit .choicesAvailable ol{
	gap: 20px 5%;
	flex-wrap: wrap;
	margin: 0 5%;
}
#leaseMerit .choicesAvailable ol li{
	width: calc(95% / 2);
}
#leaseMerit .choicesAvailable .num{
	width: 40px;
	height: 40px;
	margin-top: -7px;
}
#leaseMerit .choicesAvailable .note{
	font-size: 1.4rem;
	margin-left: 4.5em;
	text-indent: -1em;
}
#leaseMerit .suitablePerson{
	margin-top: 50px;
}
#leaseMerit .suitablePerson > li{
	padding: 20px 2.5% 30px;
}

#leasePlan01 div.pcFlex{
	padding: 20px 2.5% 30px;
	justify-content: space-between;
	align-items: center;
}
#leasePlan01 div.pcFlex figure{
	display: grid;
	align-items: center;
	justify-content: center;
	width: 40%;
}
#leasePlan01 div.pcFlex p{
	width: 55%;
}
#leasePlan01 .accordionBox ul{
	gap: 10px 1%;
}
#leasePlan01 .accordionBox ul li{
	width: calc((97% - 4.5em) / 4);
}

.accordionBox dt{
	padding: 20px 55px 20px 20px;
}
.accordionBox dt::before{
	width: 3px;
	height: 20px;
	right: calc(45px - 1.5px);
	top: calc(50% - 10px);
}
.accordionBox dt::after{
	width: 20px;
	height: 3px;
	right: 35px;
}

/* =======================================
	maintenance PC
========================================== */
#maintenanceNeed{
	margin-top: 50px;
	padding: 20px 2.5% 30px;
}
#maintenanceNeed ul{
	gap: 0 10%;
}

#maintenanceFlow,
#maintenancePrice{
	margin-top: 100px;
}
#maintenanceFlow .maintenanceFlow{
	gap: 0 10%;
}
#maintenanceFlow .maintenanceFlow li{
	padding: 30px 20px;
}
#maintenanceFlow .maintenanceFlow li:not(:last-child)::after{
	width: 15px;
	height: 17px;
	right: -58.5px;
}
#maintenanceNote{
	margin-top: 30px;
}

.h3Tit .balloonTxt{
	padding-right: 45px;
}
.h3Tit .balloonTxt img{
	width: 407px;
	height: auto;
}
#maintenanceAbout .h3Tit .balloonTxt + span{
	margin-top: -35px;
}
#maintenancePack .h3Tit .balloonTxt + span,
#coating .h3Tit .balloonTxt + span{
	margin-top: -20px;
}
#coating .h3Tit .balloonTxt{
	padding-right: 5px;
}

#maintenancePack .packFeatures{
	margin-top: 50px;
}
#maintenancePack .packFeatures li{
	width: 30%;
}
#maintenancePack .packFeatures figure,
#maintenancePack .packFeatures figure img{
	width: min(100%,360px);
}

.courseFlow{
	align-items: flex-end;
}
.courseFlow figure{
	width: min(75%,750px);
}
.courseFlow .example{
	margin-left: min(3%,30px);
	width: min(22%,220px);
}

#coating .courseList{
	padding: 30px;
}
#coating .courseList div.pcFlex{
	flex-wrap: wrap;
	gap: 40px;
}
#coating .courseList figure{
	width: calc((100% - 40px) / 2);
}
#coating .accordionBox .h4Tit{
	font-size: 2rem;
	margin-bottom: 5px;
}
#coating .accordionBox .h4Tit span{
	font-size: 80%;
}
#coating .accordionBox .price > span{
	display: block;
	font-size: 1.4rem;
	text-align: center;
}
#coating .accordionBox .price span + span.red{
	font-size: 120%;
	font-weight: 700;
	margin-top: 13px;
	position: relative;
}
#coating .accordionBox .price span + span.red::after{
	content: "";
	background: var(--base);
	display: inline-block;
	width: 8px;
	height: 6px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	top: -9px;
	left: calc(50% - 4px);
}

.courseFlow .example{
	padding: 10px 1%;
}
.courseFlow .example li{
	font-size: 1.3rem;
}
.courseFlow .example li + li{
	margin-top: 10px;
}
.courseFlow .example li img{
	width: 30px;
	height: 30px;
}

#aboutRecallRepair > div{
	justify-content: space-between;
	padding: 30px 2%;
}
#aboutRecallRepair h4{
	font-size: 2.8rem;
	margin-bottom: 20px;
}
#aboutRecallRepair .txts{
	width: 50%;
}
#aboutRecallRepair figure{
	width: 48%;
}
#aboutRecallRepair p{
	text-align: center;
}



/* =======================================
	PC shop
========================================== */ 
#shopInfo .h4Tit{
	padding: 10px 20px;
}
.mainStore,
#shopInfo .imgs,
.accessRoute{
	padding: 20px 2.5%;
}
.mainStore{
 justify-content: space-between;
 align-items: flex-start;
 align-items: center;
 }
 .mainStore figure{
  width: 55%;
 }
 .mainStore .txts{
  width: 40%;
 }
 .mainStore .txts dl dt{
 	margin-top: 1em;
 }
 .mainStore .txts dl dd{
 	margin-top: 1em;
 }
 #shopInfo .imgs{
 	gap: 0 3%;
  justify-content: center;
	margin-top: 30px;
 }
 #shopInfo .imgs li{
  width: 31.3%;
 }
 #shopInfo h5{
  font-size: 2.2rem;
}
.accessRoute{
	margin: 60px 0;
}
.accessRoute ol {
  justify-content: space-between;
 }
.accessRoute ol li{
  width: calc((100% - 70px*2)/3);
 }
.accessRoute ol li + li::before{
  content: "";
  background-color: var(--blue);
  width: 15px;
  height: 17px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  position: absolute;
  right: calc(100% + 7.5px);
  top: 93.5px;
  margin: auto 20px auto auto;
 }
 
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
.newsBox .pcFlex{
 justify-content: space-between;
 align-items: flex-start;
}
.newsBox .imgs{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

/*		single
-----------------------------*/
article{
 padding: 100px 0;
}


/* =======================================
	contact PC
========================================== */
/*#contactLead .icTel{
	font-size: 5rem;
}*/
#contactLead{
	 padding: 100px 0;
}
#contactTelfax .telfaxBox > p{
  width: 100%;
}

/* =======================================
	form PC
========================================== */
.tb_cont th{
	border-bottom: 1px solid var(--wh);
	padding: 15px 2.5%;
	width: 25%;
}
.tb_cont td{
	border-bottom: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 75%;
}
.tb_cont td input:not([type=checkbox]):not([type=radio]){
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80% !important;
	height: 100px !important;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.confirm {
  margin-top: 40px;
}
.tb_cont td input.radiobtn{
    width: auto;
}