@charset "utf-8";

/* ---------------------------------------------------
   File: direct-delivery.css
   Version: 2.0.0
   Update: 2025-02-28
   Author: https://flowlab.co.jp

   (c)2007-2025 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



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

   WIDE DESKTOP LAYOUT

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

/* ====================================================
		common
==================================================== */

/* -------------------------------
		Main
------------------------------- */
#main {
	background-color: #f6f6f6;
}

/* -------------------------------
		Main Visual
------------------------------- */
#main #mainVisual .photo {
  background: url("../direct-delivery/images/bg_header.jpg") no-repeat center center;
	background-size: cover;
}

/* -------------------------------
		Page Path
------------------------------- */
#pagePath {
	margin-bottom: -1px;
}




/* ====================================================
		About
==================================================== */

#main #about {
}

/* -------------------------------
		Title
------------------------------- */
#main #about .headLine05 {
}

/* -------------------------------
		Photo
------------------------------- */
#main #about .photo {
  margin-left: auto;
	width: calc(50% + 550px);
	height: 700px;
	background: url("../direct-delivery/images/ph_about.jpg") no-repeat center center;
	background-size: cover;
  margin-bottom: 100px;
}

/* -------------------------------
		Text
------------------------------- */
#main #about .showBox .textBox {
	margin-top: -220px;
	padding: 80px 90px 70px 10px;
}
#main #about .showBox {
	margin-bottom: 80px;
}

/* -------------------------------
		Case
------------------------------- */
#main #about .imgUl {
	display: flex;
	justify-content: center;
}
#main #about .imgUl li {
	margin: 0 50px;
	width: 120px;
	font-size: 2rem;
	text-align: center;
	font-family: "Zen Old Mincho",sans-serif;
}
#main #about .imgUl li .txt {
	margin: 17px -30px 0;
	line-height: 1.45;
}
@media all and (max-width: 374px) {
	#main #about .imgUl li {
		font-size: 1.4rem;
	}
}





/* ====================================================
		Area
==================================================== */
#main #area {
	background-color: #fff;
}

/* -------------------------------
		Title
------------------------------- */
#main #area .headLine05 {
  margin-bottom: 80px;
}
#main #area .ttl {
	margin-bottom: 80px;
	text-align: center;
	line-height: 1.2;
}
#main #area .ttl span {
	margin-bottom: 26px;
	font-size: 3.6rem;
	font-family: "Zen Old Mincho",sans-serif;
	display: block;
}

/* -------------------------------
		Google Map
------------------------------- */
#main #area .map {
	margin-bottom: 45px;
	background-color: #ecebe7;
	font-size: 0;
	line-height: 1;
}
#main #area .map iframe {
	width: 100%;
	height: 500px;
}

/* -------------------------------
		Table
------------------------------- */
#main #area table td {
	background-color: #f6f6f6;
}

/* -------------------------------
		Button
------------------------------- */
#main #area .comBtn {
	margin-top: 60px;
}






/* ====================================================
		Price
==================================================== */
#main #price {
}

/* -------------------------------
		Table - Price List
------------------------------- */
#main #price .comTable02 th,
#main #price .comTable02 td {
	padding: 23px 20px 17px;
	text-align: center;
}
#main #price .comTable02 th {
	width: 26.7%;
}
#main #price .comTable02 .black {
	font-size: 1.8rem;
}
#main #price .notesTxt {
  margin-top: 5px;
  font-size: 1.2rem;
  display: block;
  padding-left: 3px;
}

/* -------------------------------
		Caution Statement
------------------------------- */
#main #price .notesUl {
	margin-top: 22px;
	font-size: 1.2rem;
}
#main #price .notesUl li {
	margin-bottom: 10px;
}
#main #price .notesUl li:last-child {
	margin-bottom: 0;
}





/* ====================================================
		How to Order
==================================================== */
#main #how-to-order {
	background-color: #fff;
}

/* -------------------------------
		Title
------------------------------- */
#main #how-to-order .headLine04 {
	margin-bottom: 21px;
	font-size: 3rem;
	text-align: center;
	font-style: normal;
}
#main #how-to-order .headLine05 {
  margin-bottom: 80px;
}

/* -------------------------------
		Tel
------------------------------- */
#main #how-to-order .comTel {
	margin-bottom: 80px;
}
#main #how-to-order .comTel small {
	margin-top: 17px;
	font-size: 1.8rem;
	display: block;
}
#main #how-to-order .comTel a {
	font-size: 8rem;
}
#main #how-to-order .comTel02 span::before {
	width: 40px;
	height: 52px;
	top: 19px;
	left: -16px;
}

/* -------------------------------
		Table
------------------------------- */
#main #how-to-order .comTable02 td {
	background-color: #f6f6f6;
}

/* -------------------------------
		Caution Statement
------------------------------- */
#main #how-to-order .comTable02 .notesTxt {
	display: block;
  font-size: 1.2rem;
  padding-top: 5px;
}


@media all and (max-width: 374px) {
	#main #how-to-order .comTel a {
		font-size: 4.3rem;
	}
	#main #how-to-order .comTel02 span::before {
		width: 25px;
		height: 28px;
		top: 9px;
		left: -6px;
	}
}





/* ====================================================
		Payment
==================================================== */
#main #payment {
}

/* -------------------------------
		Title
------------------------------- */
#main #payment .headLine05 {
}
#main #payment p.txt {
	margin-bottom: 88px;
}

/* -------------------------------
		Table
------------------------------- */
#main #payment .comTableBox {
	margin-top: 32px;
}
#main #payment .comTable02 th {
	background-color: #262827;
}

/* -------------------------------
		Caution Statement
------------------------------- */
#main #payment .notesTxt {
	margin-top: 10px;
  font-size: 1.2rem;
  display: block;
}










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

   TABLET - LARGE

============================================================================================================================================= */
@media all and (min-width: 897px) and (max-width: 1299px) {
  
  
  /* ====================================================
      About
  ==================================================== */

  /* -------------------------------
      Photo
  ------------------------------- */
  #main #about .photo {
    width: calc(50% + 450px);
    height: 700px;
  }
}





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

   MOBILE

============================================================================================================================================= */
@media all and (max-width: 896px) {
  
  
  
  /* ====================================================
      About
  ==================================================== */
	#main #about {
	}
  #main #about .showBox {
    margin-bottom: 60px;
  }
  
  /* -------------------------------
      Photo
  ------------------------------- */
  #main #about .photo {
    padding-bottom: 54%;
    height: auto;
    width: auto;
    margin-bottom: 0;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
	#main #about .showBox .textBox {
		margin-top: 0;
		padding: 20px;
	}
  
  /* -------------------------------
      Case
  ------------------------------- */
	#main #about .imgUl {
		margin: -20px 5px 0;
		flex-wrap: wrap;
	}
	#main #about .imgUl li {
		width: 33%;
    margin: 20px 0 0 0;
		font-size: 1.5rem;
	}
	#main #about .imgUl li .txt {
		margin: 9px -4px 0;
		line-height: 1.3;
	}
	#main #about .imgUl img {
		width: 86%;
		max-width: 100px;
	}
  
  
  /* ====================================================
      Area
  ==================================================== */
  
  /* -------------------------------
      Title
  ------------------------------- */
  #main #area .headLine05 {
    margin-bottom: 40px;
  }
	#main #area .ttl {
		margin-bottom: 50px;
	}
	#main #area .ttl span {
		margin-bottom: 14px;
		font-size: 2.2rem;
	}
  
  /* -------------------------------
      Google Map
  ------------------------------- */
	#main #area .map iframe {
		height: 300px;
	}
  
  /* -------------------------------
      Button
  ------------------------------- */
  #main #area .comBtn {
    margin-top: 40px;
  }
  
  
  
  /* ====================================================
      Price
  ==================================================== */
	#main #price {
	}
  
  /* -------------------------------
      Table - Price List
  ------------------------------- */
	#main #price .comTable02 th,
	#main #price .comTable02 td {
		padding: 23px 3px 17px;
		float: none;
		font-feature-settings: "palt";
		-moz-font-feature-settings: "palt";
	}
	#main #price .comTable02 tr td:first-child {
		width: 38%;
	}
	#main #price .comTable02 tr td:nth-child(2) {
		width: 32%;
	}
	#main #price .comTable02 .black {
		font-size: 1.2rem;
	}
  
  
  
  /* ====================================================
      How to Order
  ==================================================== */
	#main #how-to-order {
	}
  
  /* -------------------------------
      Title
  ------------------------------- */
  #main #how-to-order .headLine04 {
		margin-bottom: 10px;
		font-size: 2.5rem;
	}
  #main #how-to-order .headLine05 {
  margin-bottom: 40px;
}
  
  /* -------------------------------
      Tel
  ------------------------------- */
	#main #how-to-order .comTel {
		margin-bottom: 50px;
	}
	#main #how-to-order .comTel a {
		font-size: 5rem;
	}
	#main #how-to-order .comTel small {
		margin-top: 5px;
		font-size: 1.4rem;
	}
	#main #how-to-order .comTel02 span::before {
		width: 28px;
		height: 31px;
		top: 10px;
		left: -10px;
	}
	
  /* -------------------------------
      Caution Statement
  ------------------------------- */
	#main #how-to-order .comTable02 .notesTxt {
		margin-top: 5px;
	}
  
  
  
  
  
  /* ====================================================
      Payment
  ==================================================== */
	#main #payment {
	}
  
  /* -------------------------------
      Title
  ------------------------------- */
	#main #payment p.txt {
		margin-bottom: 40px;
	}
  
}