/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 28 2026 | 06:25:56 */
/*==============================================================

    スタイルガイドの内容をを上書きしたいcssをここに記入
 
===============================================================*/

/*-----------------------------------------------
    GlobalNavi
-----------------------------------------------*/

.GlobalNaviListPosition{
  position: relative;
  height: 64px;
  background-color: #fff;
}

.GlobalNaviListBox{
  position: absolute;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 6px 8px -6px #ccc;
}
/* GNavi固定用 */
.GlobalNaviListBox--Fixed{
  position: fixed;
  top: 0;
  left: 16px;
  right: 16px;
  width: calc(100% - 32px);
  z-index: 10;
}

.GlobalNaviList{
  width: 100%;
  max-width: 1060px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* GNavi 各リンク部分 */
.GlobalNaviList__Item{
  display: block;
  float: left;
  width: 33.3%;
  max-width: 353px;
  padding: 0;
  margin: 8px 0;
  font-size: 1.5rem;
  text-align: center;
  border-left: #ccc 1px solid;
}
.GlobalNaviList__Item:last-child{
  border-right: #ccc 1px solid;
}

.GlobalNaviList__Item--Column4 {
	width: 25%;
}

.GlobalNaviList__Link{
  display: block;
  padding: 8px 0;
  text-decoration: none;
}
.GlobalNaviList__Link:link,
.GlobalNaviList__Link:visited{
  color: #333;
}
.GlobalNaviList__Link:hover,
.GrobalNaviList__Link:active{
  color: #ccc;
}

/* アイコン */
.Icon--GlobalNavi{
  display: block;
}


/*-----------------------------------------------
    Alert
-----------------------------------------------*/
  
 /* サービスのご注意事項 ********************/
.Alert--Service{
  margin: 0;
  text-align: left;
}
.Alert--WhiteBackground{
  background-color:#fff;
}


/*-----------------------------------------------
    お問い合わせフォームはこちら
-----------------------------------------------*/

.ToOrder{
  position: relative;
  width: 545px;
  margin: 0 auto;
  padding: 32px 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

/* リンクボタン *****/
.Button--ToOrder{
  width: 100%;
  max-width: 550px;
  margin: 16px auto 0;
  padding: 4px 0;
  font-size: 1.9rem;
  background-color: hsla(0, 0%, 100%, 0.7);
}
.Button--Border{
  display: block;
  width: calc(100% - 8px);
  height: 70px;
  margin: 12px auto 0;
  padding: 4px;
  background-color: hsla(0, 0%, 100%, .5);
  box-shadow: none;
}
.ToOrder__ButtonColor{
  padding: 12px 24px;
  font-size: 1.9rem;
  background-color: #d0101b;
  border-radius: 4px;
}
.ToOrder__ButtonColor--Cardboard {
    background-color: #f26b0d;
}
.ToOrder__ButtonColor:hover,
.ToOrder__ButtonColor:active{
  opacity: 0.6;
}

/* 「1分で入力完了」 */
.ToOrder__Minute{
  float: left;
  padding: 8px;
  margin: 4px 16px 0 0;
  color: #333;
  font-size: 1.5rem;
  line-height: 1;
  background-color: #fff;
  border-radius: 4px;
}

/* バナー横画像(作業員) */
.ToOrder__Image{
  position: absolute;
  bottom: 0;
  left: -152px;
  width: 136px;
  height: auto;
}
.ToOrder__Image--Last{
  left: -124px;
  width: 98px;
}


/*==============================================================

  サービス開発用CSS-PC
  
===============================================================*/

/*-----------------------------------------------
  テキストカラー指定
-----------------------------------------------*/

.ServiceRed{
  color:#d51b28;
}

.DankakouOrange{
  color: #f26b0d;
}
.KenkirentalBlue{
  color: #00469B;
}
.LixilreformBlue{
  color: #297da8;
}
.ProofreadingGreen{
  color: #006700;
}

/*-----------------------------------------------
  表示・非表示 
-----------------------------------------------*/
  
.SpOnly{
  display: none;
}
  
/*-----------------------------------------------
  パンくず部分調整 
-----------------------------------------------*/
  
.BreadCrumb--Adjustment{
  padding: 0 0 8px 8px;
}
  
  
/*-----------------------------------------------
  フローティングバナー
-----------------------------------------------*/
  
.FloatingBanner{
  position: fixed;
  bottom: 24px;
  right: 40px;
  width: 232px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border: #fff 8px solid;
  border-radius: 8px;
  line-height: 1;
  z-index: 10;
}
  
.FloatingBanner__List{
  display: inline-block;
}

  
/*-----------------------------------------------
  HeadArea(タイトル+MV) 
-----------------------------------------------*/
  
.HeadArea{
  width: auto;
  height: 252px;
  padding: 0;
  text-align: center;
  background-image: url(https://www.monotaro.com/note/app/uploads/2024/12/dankakou-service-mv-headarea.png);
  border-top: #f26b0d 4px solid;
  border-bottom: #f26b0d 4px solid;
}
.HeadArea--Dankakou {
  height: 330px;
  background-image: url(/note/app/uploads/2024/12/dankakou-service-mv-headarea.png);
  border-top: #f26b0d 4px solid;
  border-bottom: #f26b0d 4px solid;
}
.HeadArea--Kenkirental{
  height: 330px;
  background-image: url(https://www.monotaro.com/note/app/uploads/2024/12/kenki-rental-mv-headarea.png);
  border-top: #00469B 4px solid;
  border-bottom: #00469B 4px solid;
}
.HeadArea--Lixilreform{
  height: 328px;
  background-image: url(https://www.monotaro.com/note/app/uploads/2025/06/lixil-reform-mv-headarea.png);
  border-top: #3596d2 4px solid;
  border-bottom: #3596d2 4px solid;
}
.HeadArea--CalibrationForm{
  height: 328px;
  background-image: url(https://www.monotaro.com/note/app/uploads/2025/07/proofreading_service-mv-headarea.png);
  border-top: #078130 4px solid;
  border-bottom: #078130 4px solid;
}
.HeadArea--Cardboard {
    padding: 4px 0;
    background-image: url(https://www.monotaro.com/note/app/uploads/2025/12/cardboard-mv-headarea.png);
    border-top: unset;
    border-bottom: unset;
}
.HeadArea--Takachicustom {
	height: 328px;
    background-image: url(https://jp.images-monotaro.com/note/takachicustom/img/takachi-mv-headarea.png);
    background-color:#003B65;
    border-top: #003B65 4px solid;
    border-bottom: #003B65 4px solid;
}

 /* 白背景 */
.HeadArea__BackGround{
  display: inline-block;
  width: 1060px;
  height: 100%;
}


 /* タイトル *****/
.PageTitle{
  margin: 0 0 16px;
  font-size: 4.2rem;
  line-height: 1;
}
  
 /* 画像 */
.PageTitle__Image{
  width: 100%;
  max-width: 1060px;
  height: auto;
  line-height:0;
}


/*-----------------------------------------------
  HeadArea(MV+CTAの場合) 
-----------------------------------------------*/

.HeadArea__BackGround--Cta{
  position: relative;
}

 /* CTAボタン *****/

.HeadAreaCta {
  min-width: 500px;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: 16px;
  left: 24px;
}

.HeadAreaCta--SpaceLeft {
  left: 4.5rem;
}
.HeadAreaCta--Dankakou {
  left: 19.5rem;
  bottom: 24px;
}

.Button--HeadAreaCta {
  display: block;
  width: calc(100% - 8px);
  height: 48px;
  padding: 8px;
}

.HeadAreaCta__Button {
  font-size: 1.9rem;
  background-color: #d0101b;
  border-radius: 4px;
}

 /* 白背景部分 */
.HeadAreaCta__Head {
  float: left;
  padding: 8px;
  margin: 0 16px 0 0;
  color: #333;
  font-size: 1.5rem;
  line-height: 1;
  background-color: #fff;
  border-radius: 4px;
}

 /* 強調クリーム色部分 */
.HeadAreaCta__Emphasis{
  color: #fbf2a4;
}
  
  
/*-----------------------------------------------
  GlobalNavi以降のBox
-----------------------------------------------*/
  
.Main{
  margin: 0;
  font-size: 1.3rem;
}
  
  
/*-----------------------------------------------
  項目別くくり
-----------------------------------------------*/
  
 /* ContentsBox ********************/
  
.ContentsBox{
  padding: 64px 16px;
  text-align: center;
}
  
 /* ContentsBoxに背景色を入れる */
.ContentsBox--BackColor{
  background-color: #f6f6f6;
}
  
 /* お問い合わせフォームはこちら(背景色が青色・コンテナ) */
.ContentsBox--ToOrder{
  padding: 0;
  background: url(https://www.monotaro.com/note/app/uploads/2024/12/dankakou-service-transparent.png) #094da6 center -200px / 1352px auto no-repeat;
}

.ContentsBox--ToOrderBottom{
  background: url(https://www.monotaro.com/note/app/uploads/2024/12/dankakou-service-transparent-bottom.png) #094da6 center 0 / 1352px auto no-repeat;
}

.ContentsBox--Kenkirental{
  background: url(https://www.monotaro.com/note/app/uploads/2025/01/kenki-rental-transparent.png) #094da6 center 0 / 1352px auto no-repeat;}

.ContentsBox--KenkirentalBottom{
  background: url(https://www.monotaro.com/note/app/uploads/2025/01/kenki-rental-transparent-bottom.png) #094da6 center 0 / 1352px auto no-repeat;
}

.ContentsBox--Lixilreform{
  background: url(https://www.monotaro.com/note/app/uploads/2025/07/lixil-reform-service-transparent.png) #297da8 center 0 / 1800px auto no-repeat;}

.ContentsBox--LixilreformBottom{
  background: url(https://www.monotaro.com/note/app/uploads/2025/07/lixil-reform-service-transparent-bottom.png) #297da8 center 0 / 1800px auto no-repeat;
}

.ContentsBox--Proofreadingform{
  background: url(https://www.monotaro.com/note/app/uploads/2025/07/proofreading_service-service-transparent.png) #006700 center 0 / 1800px auto no-repeat;}

.ContentsBox--ProofreadingformBottom{
  background: url(https://www.monotaro.com/note/app/uploads/2025/08/proofreading_service-service-transparent_bottom.png) #006700 center 0 / 1800px auto no-repeat;
}

.ContentsBox--CardboardBottom{
  background: url(https://www.monotaro.com/note/app/uploads/2025/12/cardboard-transparent.png) #094da6 center 0 / 1800px auto no-repeat;
}
.ContentsBox--Takachicustom {
    background:url(https://jp.images-monotaro.com/note/takachicustom/img/takachicustom-service-transparent.png) #003b65 center -200px / 1352px auto no-repeat;
}

 /* Contents ********************/
  
.Contents{
  display: block;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}
  
 /* こんなお悩みありませんか？(背景グレー吹き出し) */
.Contents--Introduction{
  position: relative;
  padding: 40px 0;
  margin: 0 auto 64px;
  background-color: #e6e6e6;
  border-radius: 16px;
}
.Contents--Introduction::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  right: 50%;
  margin-left: -10px;
  border: 20px solid transparent;
  border-top: 20px solid #e6e6e6;
  z-index: 1;
}
  
 /* 項目タイトル *****/
.Contents__Title{
  position: relative;
  display: inline-block;
  margin: 0 auto 48px;
  font-size: 3.3rem;
  line-height: 1.3;
}
 /* イントロダクション「こんなお悩みありませんか？」の場合 */
.Contents__Title--Introduction{
  margin: 0 auto 32px;
  color: #00669f;
}
.Contents__Title--PaleBlue{
  color: #094da6;
}
.Contents__Title--DeepGreen{
  color: #006700;
}
.Contents__Title--DarkBlue{
  color: #003B65;
}
  
 /* 項目タイトルの上のテキスト *****/
.Contents__AboveTitle{
  display: block;
  margin: 0 0 24px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}
 /* イントロダクション「こんなお悩みありませんか？」の場合 */
.Contents__AboveTitle--Introduction{
  margin: 0 0 16px;
  color: #333;
  font-size: 1.9rem;
  font-weight: normal;
}
  
  
/*-----------------------------------------------
  こんなお悩みありませんか？
-----------------------------------------------*/
  
.WorriesList{
  display: inline-block;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  list-style: none;
}
  
 /* お悩み1つずつくくり */
.WorriesList__Item{
  float: left;
  width: calc(33.3% - 40px);
  max-width: 295px;
  margin: 0 20px;
  font-size: 1.5rem;
  font-weight: bold;
}
  
 /* 画像 */
.WorriesList__ImageBox{
  width: 100%;
  padding: 16px 8px;
  margin: 16px 0 0;
  background-color: #fff;
  border-radius: 16px;
}
.WorriesList__Image{
  width: 100%;
  max-width: 194px;
  height: auto;
}
  
  
/*-----------------------------------------------
  （サービス名）ですべて解決！
-----------------------------------------------*/
  
.SolutionList{
  display: inline-block;
  width: 100%;
  max-width: 1108px;
  padding: 0;
  margin: 0 -24px;
  list-style: none;
}
  
 /* 解決内容1つずつくくり */
.SolutionList__Item{
  float: left;
  width: calc(33.3% - 48px);
  max-width: 321px;
  margin: 0 24px;
  font-size: 2.1rem;
  font-weight: bold;
  line-height: 1.3;
}
  
 /* 画像 */
.SolutionList__Image{
  display: block;
  width: 100%;
  max-width: 223px;
  height: auto;
  margin: 0 auto 24px;
}
  
 /* 説明文 */
.SolutionList__Explanation{
  display: inline-block;
  margin: 16px 0 0;
  font-size: 1.3rem;
  font-weight: normal;
  text-align: left;
}
  
  
/*-----------------------------------------------
  （サービス名）とは
-----------------------------------------------*/
  
 /* タイトル下イントロダクション *****/
.AboutSupplier{
  display: inline-block;
  width: 100%;
  padding: 0 0 48px;
  margin: 0 0 48px;
  border-bottom: #ccc 1px solid;
}
  
 /* タイトル下リード文 */
.AboutSupplier__Lead{
  float: left;
  margin: 0 24px 0 0;
  width: calc(50% - 24px);
  max-width: 510px;
  font-size: 1.5rem;
  text-align: left;
  line-height: 1.5;
}

.AboutSupplier__Text {
    margin: 0 0 16px;
}

 /* 画像 */
.AboutSupplier__ImageBox{
  float: left;
  width: calc(50% - 24px);
  max-width: 510px;
  padding: 24px;
  margin: 0 0 0 24px;
  background-color: #fff;
}
.AboutSupplier__ImageBox--NonPadding{
  padding: unset;
  background-color: unset;
}
.AboutSupplier__Image{
  width: 100%;
  height: auto;
}

  
 /* 各種サービス内容 ********************/
.ServiceType{
  display: inline-block;
  width: calc(100% + 40px);
  margin: 0 -20px 48px;
}
  
 /* タイトル */
.ServiceType__Title{
  padding: 0 0 16px;
  margin: 0 auto 32px;
  font-size: 2.2rem;
  background: url(https://www.monotaro.com/topic/sankonaire-service/img/sanko-subtitle-boreder.png) center bottom no-repeat;
}
.ServiceType__Title--NoBottomSpace{
   margin-bottom: 0;
}
.ServiceType__Title--Orange{
  background: url(https://www.monotaro.com/note/app/uploads/2024/12/dankakou-service-subtitle-boreder.png) center bottom no-repeat;
}
.ServiceType__Title--Blue{
  background: url(https://www.monotaro.com/note/app/uploads/2024/12/kenki-rental_subtitle-boreder.png) center bottom no-repeat;
}
.ServiceType__Title--BlueLixil{
  background: url(https://www.monotaro.com/note/app/uploads/2025/06/lixil-reform_subtitle-boreder.png) center bottom no-repeat;
}
.ServiceType__Title--Green{
  background: url(https://www.monotaro.com/note/app/uploads/2025/07/proofreading_service-subtitle-boreder.png) center bottom no-repeat;
}
.ServiceType__TitleRepletion{
  margin-bottom:32px;
}
.ServiceType__Title--Cardboard {
    background: url(https://www.monotaro.com/note/app/uploads/2025/12/cardboard-subtitle-boreder.png) center bottom no-repeat;
}

 /* カラム分け *****/
  
.ServiceType__Item{
  float: left;
  margin: 0 20px;
}

 /* margin-bottom追加 */
.ServiceType__Item--BottomPlus{
  margin: 0 20px 32px;
}
 /* 2カラムの場合 */
.ServiceType__Item--Column2{
  width: calc(50% - 40px);
  max-width: 510px;
}
 /* 3カラムの場合 */
.ServiceType__Item--Column3{
  width: calc(33.3% - 40px);
  max-width: 326px;
}
 /* 4カラムの場合 */
.ServiceType__Item--Column4{
  float: left;
  width: calc(25% - 40px);
  max-width: 235px;
}
/* .ServiceType__Item--Column4:nth-child(4n+2){
	clear: left;
} */
  
 /* サブタイトル *****/
.ServiceType__SubTitle{
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: left;
}
  
 /* 白背景 *****/
.ServiceType__Sample{
  display: inline-block;
  width: 100%;
  padding: 16px;
  margin: 8px 0 0;
  border: #ccc 1px solid;
  background-color: #fff;
}
  
  
 /* サービス内容 ********************/
  
 /* 画像 */
.ServiceType__Image{
  width: 100%;
  height: auto;
  vertical-align: middle;
}
 /* リンク */
.ServiceType__Link:hover,
.ServiceType__Link:active{
  opacity: 0.6;
}
 /* 説明文 */
.ServiceType__Explanation{
  margin: 8px 0 0;
  text-align: left;
  line-height: 1.3;
}
.ServiceType__Detail {
  text-align: left;
  padding-inline-start: 0;
  list-style: none;
}
.ServiceType__DetailChild {
  padding: 8px;
  border-bottom: #999 1px dashed;
}
.ServiceType__DetailChild:last-child {
  border-bottom: none;
}

.ServiceType__Item--ResetClear {
  clear: none !important;
}
.ServiceType__DetailTotal {
  font-weight: bold;
  background: url(https://www.monotaro.com/note/app/uploads/2025/10/icon_price.png) left center no-repeat;
  background-size: auto 16px;
  padding-left: 20px;
}
.ServiceType__DetailPdf {
  background: url(https://www.monotaro.com/note/app/uploads/2025/10/icon_pdf.png) left 8px center no-repeat;
  background-size: auto 16px;
  padding-left: 28px;
}
  
/*-----------------------------------------------
  ご利用の流れ
-----------------------------------------------*/
  
.OrderStepBox{
  display: inline-block;
  width: calc(100% + 24px);
}
  
 /* ご注文まで・ご注文後 各くくり *******************/
.OrderStep{
  float: left;
  width: calc( ( ( 100% + 24px ) / 5 ) * 3 );
  max-width: 648px;
  text-align: left;
}
 /* ご注文後 */
.OrderStep--After{
  width: calc( ( ( 100% + 24px ) / 5 ) * 2 );
  max-width: 432px;
}
  
 /* ご注文まで・ご注文後 タイトル *****/
.OrderStep__Title{
  position: relative;
  width: calc(100% - 32px);
  height: 28px;
  padding: 6px;
  margin: 0 0 24px;
  font-size: 1.5rem;
  font-weight: bold;
  border-top: #094da6 2px solid;
  border-bottom: #094da6 2px solid;
  border-left: #094da6 8px solid;
  line-height: 1;
}
.OrderStep__Title--LightBlue{
  border-top: #3596d2 2px solid;
  border-bottom: #3596d2 2px solid;
  border-left: #3596d2 8px solid;
}
.OrderStep__Title--Green{
  border-top: #006700 2px solid;
  border-bottom: #006700 2px solid;
  border-left: #006700 8px solid;
}
/* ご注文後 */
.OrderStep__Title--After{
  border-top: #d0101b 2px solid;
  border-bottom: #d0101b 2px solid;
  border-left: #d0101b 8px solid;
}
.OrderStep__Title--AfterOrange{
  border-top: #f26b0d 2px solid;
  border-bottom: #f26b0d 2px solid;
  border-left: #f26b0d 8px solid;
}
.OrderStep__Title--AfterLixil{
  border-top: #ea5d01 2px solid;
  border-bottom: #ea5d01 2px solid;
  border-left: #ea5d01 8px solid;
}


 /* ご注文まで・ご注文後 タイトル右側三角部分 *****/
.OrderStep__Title::before{
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: #fff 12px solid;
  z-index: 2;
}
.OrderStep__Title::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: #094da6 14px solid;
  z-index: 1;
}
.OrderStep__Title--AfterOrange::after{
  border-left: #f26b0d 14px solid;
}
  
 /* ご注文後 */
.OrderStep__Title--After::after{
  border-left: #d0101b 14px solid;
}
  
  
 /* ご注文流れくくり(ご注文まで・ご注文後 各) ********************/
.OrderStep__List{
  padding: 0;
  margin: 0 -12px;
  list-style: none;
}
  
 /* ご注文流れステップごとのくくり */
.OrderStep__Item{
  float: left;
  width: calc( 100%/ 3 );
  max-width: 216px;
  padding: 0 12px;
  font-size: 1.9rem;
  font-weight: bold;
  text-align: center;
}
.OrderStep__Item--After{
  width: calc( 100%/ 2 );
}
  
 /* 各ステップ */
.OrderStep__Step{
  text-align: left;
}
.OrderStep__Step--LongText {
	height: 32px;
}
  
 /* 画像 */
.OrderStep__Image{
  width: 100%;
  max-width: 148px;
  height: auto;
  margin: 8px auto 16px;
}
  
 /* 説明文 */
.OrderStep__Explanation{
  margin: 0;
  font-size: 1.3rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.3;
}
 /* 注意(※) */
.OrderStep__Explanation--Note{
  margin: 8px 0 0 1em;
  text-indent: -1em;
}
  
  
/*-----------------------------------------------
  よくあるご質問
-----------------------------------------------*/
  
.QuestionList{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
  
 /* Q&A１つずつのくくり */
.QuestionList__Item{
  width: 100%;
  padding: 16px;
  margin: 0 0 16px;
  line-height: 1.3;
  background-color: #fff;
  border: #ccc 1px solid;
  font-size: 1.3rem;
}
.QuestionList__Item:last-child{
  margin: 0;
}
  
 /* Q */
.QuestionList__Question{
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 16px;
}
  
  
/*-----------------------------------------------
  公開日
-----------------------------------------------*/
  
.ReleaseDate{
  margin: 24px 0 0;
  text-align: right;
}