@charset "utf-8";
/* ---------------------------------------------------
 Layout-Midium
--------------------------------------------------- */
@media only screen and (min-width:480px) and (max-width:1023px){





/*--------------------------------------------------------
  header
--------------------------------------------------------*/
#header {
	margin: auto;    /* 左右中央（IE以外のブラウザ） */
	height: 100px;/* 高さ */
	z-index: 9999;
	margin: 0 auto;
	width: 100%;
	background: #fff;/* バック色 */
	position: fixed;
	z-index: 100;
}


.headerBlock {
	width: 100%;

	height: 100px;/* 高さ */
	margin:0 auto;
	padding: 0;
	position: relative;
	z-index: 100;
}

/* ヘッダーロゴ */
.headerlogo {
	position: absolute;
	top: 5px;
	left: 20px;
	width: 170px;
	height: 50px;
}
.headerBlock > .headerlogo a {
	color: var(--color-white);
}
.headerBlock > .headerlogo a:hover {
	color: var(--color-gray);
}

/* 大阪メトロ徒歩 */
#nav-openhour{
	font-size: 12px;
	margin: 0 auto;
	padding: 0px 290px 0px 25px;    /* パディング */
	right:20px;
	height: 50px;
	width: 66%;
	line-height: 1.5em;
	}


/* インスタアイコン */

#nav-insta{
	padding: 10px 200px 5px 20px;    /* パディング */
	margin: 0;
	position: absolute;/* 子要素 */
	top:5px;
	right:60px;
	width: 250px;
	}


/* 電話番号 */
#nav-tel{
	font-size: 18px;
	padding: 18px 20px 15px 20px;    /* パディング */
	margin: 0;
	position: absolute;/* 子要素 */
	right:0;
	background-color: #000;
}

#nav-tel a{
	color: #fff;
}


/* ナビ項目 */
#nav {
	height: 23px;    /* 左右中央（IE以外のブラウザ） */
	padding: 0;    /* パディング */
	margin: 0;
	position: absolute;/* 子要素 */
	top:70px;/* 上の空き */
	right:20px;/* 右の空き */
	overflow:hidden;
}


#nav ul {
	padding: 0px;
	margin: 0 0 0 123px;
	list-style-type: none; /* リストマークの削除 */  
}


#nav ul li {
	height: 25px; /* リンク領域を広げる */
	margin: 0px 0 0 20px;/* 左右の空き 40px */
	padding: 0px;
	overflow: hidden;
	float: left;
}



/*--------------------------------------------------------
  メインビジュアル
--------------------------------------------------------*/

.main-mid{
	display: block;
}

.main-pc{
	display: none;
}

.main-sp{
	display: none;
}

.swiper-slide{
	position: relative;
}


/* 画像1 */
.s-fade-text {
	font-family: 'Cinzel', serif;

	position: absolute;
	top: 130px;/*---- 上の空き ----*/
	left: 50px;
	width: 100%;

	font-size: 68px;
	letter-spacing: 0.1em;
	line-height: 100px;
	color: #fff;/*---- 白 ----*/
}

.s-fade-text-sub {
	position: absolute;
	top: 350px;
	left: 50px;
	width: 100%;

	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing:0.2em;
	color: #fff;/*---- 白 ----*/
	line-height: 2em;
}

/* 画像2 */
.s-fade-text2 {
	font-family: 'Cinzel', serif;

	position: absolute;
	top: 130px;/*---- 上の空き ----*/
	right: 50px;
	width: 100%;
	text-align: right;

	font-size: 68px;
	letter-spacing: 0.1em;
	line-height: 100px;
	color: #fff;/*---- 色 ----*/
}

.s-fade-text-sub2 {
	position: absolute;
	top: 350px;
	right: 50px;
	width: 100%;

	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing:0.2em;
	color: #fff;/*---- 色 ----*/
	text-align: right;
	line-height: 2em;
}

/* 画像3 */
.s-fade-text3 {
	font-family: 'Cinzel', serif;

	position: absolute;
	top: 130px;/*---- 上の空き ----*/
	left: 50px;
	width: 100%;

	font-size: 68px;
	letter-spacing: 0.1em;
	line-height: 100px;
	color: #fff;/*---- 白 ----*/
}

.s-fade-text-sub3 {
	position: absolute;
	top: 250px;
	left: 50px;
	width: 100%;

	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing:0.2em;
	color: #fff;/*---- 白 ----*/
	line-height: 2em;
}


/*--------------------------------------------------------
  インフォメーション
--------------------------------------------------------*/
.info-block{
	margin: 0 auto;
	text-align: center;
	margin-top: 50px;
}



/*--------------------------------------------------------
  サービス内容4点
--------------------------------------------------------*/
/* 子要素 */
.service-item {
    width: 20%;/* 幅指定 */
    margin: 5px;              /* 外側の余白 */
    margin-bottom: 50px;              /* 下の空き */
	background: #fff;
	padding: 20px 10px 30px 10px ;
}


/*-- サブ --*/

.service-item-title-s{
	display: none;
}



/*--------------------------------------------------------
  宅配
--------------------------------------------------------*/

.service-delivery-block{
	width: 600px;
	height: 250px;
	margin: 50px auto;
	background: url(../images/delivery-image2.jpg) no-repeat;/*画像*/
	background-size: 100%;
}



/*-- タイトル --*/
.service-delivery-item2-title2{
	color: #fff;/*-- 色 --*/
	font-family: 'Cinzel', serif;
	font-size: 34px;
	letter-spacing: 0.2em;
	padding-top: 10px;
	text-align: center;
}
/*-- コピー --*/
.service-delivery-item2-title2 p{
	color: #fff;/*-- 色 --*/
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	letter-spacing: 0.2em;
	padding-top: 10px;
	padding-bottom: 25px;
}

/* more */
.service-delivery-item2-more{
    width: 50%;
	font-family: 'Cinzel', serif;
    font-size: 16px;
    letter-spacing: 0.1em;

    margin: 0 auto;

    padding-top: 10px;
    padding-bottom: 10px;
}


/*--------------------------------------------------------
  repair box1
--------------------------------------------------------*/

/* 1 親要素 */
.box1 {
    position: relative;
    width: 100%;/* 幅 */
    height: 1350px;
    margin: 50px auto;/* 空き */
    background-color: #fff;     /* 背景 */
}

/* 子要素 画像 */
.box1-item {
    position: absolute;
    width: 80%;/* 幅指定 */
    z-index: 20;/* 重なり */
}

.box1-item img{
    width: 100%;/* 幅指定 */
    height: 400px;
    object-fit: cover;
}

/* テキスト ブロック全体 */
.box1-tx1 {
    position: absolute;
    width: 90%;/* 幅指定 */
    top: 180px;
    right: 0;
    background: #f7f5f2;
    z-index: 10;/* 重なり */
}

/* サブタイトル */
.box1-tx1-title-sub{
  margin-top: 280px;
  margin-left: 10%;
  font-weight: normal;
  font-size: 16px;
  color: #555;
}

/* タイトル */
.box1-tx1-title{
  border-bottom: solid 2px #ddd;/* 色 */
  display:inline-block;
  padding-bottom: 5px;

  margin-top: 20px;
  margin-left: 10%;

	font-family: 'Cinzel', serif;
  font-size: 45px;
  color: #191970;/* 色 */
  letter-spacing: 0.2em;
}


/* テキスト 本文 */
.box1-tx2 p{
      width: 90%;

    font-size: 16px;
    font-weight: normal;

     padding-top: 50px;
    padding-left: 10%;

    color: #555;
    text-align: justify;
    line-height: 2em;
}

/* 画像 ブーツ */
.box1-boots{
      width: 80%;
     padding-top: 50px;
    padding-left: 20%;
}



/* more */
.more-box1{
    width: 60%;

    margin-left: 20%;
    margin-right: 30%;
    margin-top: 60px;
    margin-bottom: 60px;


    padding-top: 20px;
    padding-bottom: 20px;

    text-align: center;
	color: #263B61;/* 色 */
	background-color: #fff;

  border: 2px solid #333;
  border-radius: 0;
  -webkit-box-shadow: 4px 4px 0 #333;
  box-shadow: 4px 4px 0 #333;
}



/*--------------------------------------------------------
  メニュー box2
--------------------------------------------------------*/

/* 1 親要素 */
.box2 {
    position: relative;
    width: 100%;/* 幅 */
    height: 600px;
    margin: 0 auto;/* 空き */
    background-color: #fff;     /* 背景 */
}

/* 子要素 画像 */
.box2-item {
    position: absolute;
    width: 40%;/* 幅指定 */
    right: 5%;
    top: 70px;
    z-index: 20;/* 重なり */
}

.box2-item img{
    width: 100%;/* 幅指定 */
    height: 500px;
    object-fit: cover;
}


/* テキスト ブロック全体 */

.box2-tx1 {
    position: absolute;
    width: 100%;/* 幅指定 */
	padding-bottom: 70px;

    background: #f7f5f2;
    z-index: 10;/* 重なり */

}

/* サブタイトル */
.box2-tx1-title-sub{
  margin-top: 80px;
  margin-left: 10%;
  font-weight: normal;
  font-size: 16px;
  color: #555;
}

/* タイトル */
.box2-tx1-title{
  border-bottom: solid 2px #ddd;/* 色 */
  display:inline-block;
  padding-bottom: 5px;

  margin-top: 20px;
  margin-left: 10%;

	font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 40px;
	color: #191970;/* 色 */
  letter-spacing: 0.2em;
}



/* テキスト 本文 */
.box2-tx2 p{
      width: 50%;

    font-size: 16px;
    font-weight: normal;

     padding-top: 50px;
    padding-left: 10%;

    color: #555;
    text-align: justify;
    line-height: 2em;
}



/* メニューブロック下 コンテナ 親要素 */
.container-menu {
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto;
}

/* 子要素 */
.menu-item {
    width: 25%;/* 幅指定 */
    margin: 20px;              /* 外側の余白 */
    margin-bottom: 50px;              /* 下の空き */
    margin-top: 50px;
}

/* hover透過 */
.menu-item img:hover {
	opacity: 0.5 ;
}

/*-- タイトル --*/
.menu-item-title{
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	text-align:center;
	padding-top: 20px;
	color: #555;/*-- 色 --*/
	}



/* more */
.more-box2{
    width: 60%;
	font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: normal;


    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 100px;

    padding-top: 20px;
    padding-bottom: 20px;

}


/*--------------------------------------------------------
  コンセプト
--------------------------------------------------------*/

.concept-block {
	margin: 0 auto;
	text-align: center;
  margin-top: 80px;
}

/* サブタイトル */
.concept-title-sub{
  font-size: 16px;
  color: #555;
}

/* タイトル */
.concept-title{
  border-bottom: solid 2px #ddd;/* 色 */
  display:inline-block;
  padding-bottom: 5px;

  margin-top: 20px;
  margin-bottom: 60px;

	font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 40px;
	color: #191970;/* 色 */
  letter-spacing: 0.2em;
}

	/*-- 本文 --*/
.message{
	font-size: 16px;
	width: 70%;
	max-width: 700px;
	line-height: 3em;
	margin: 0 auto;
	padding-bottom: 80px;
	color: #555;
	font-family: 'Noto Sans JP', sans-serif;
}


/*--------------------------------------------------------
  online box3
--------------------------------------------------------*/

/* 1 親要素 */
.box3 {
    position: relative;
    width: 100%;/* 幅 */
    height: 450px;
    margin: 20px auto;/* 空き */
    background-color: #fff;     /* 背景 */
}

/* 子要素 画像 */
.box3-item {
    position: absolute;
    width: 75%;/* 幅指定 */
    left: 0;/* 左空き */
    z-index: 30;/* 重なり */
}

.box3-item img{
    width: 100%;/* 幅指定 */
    height: 300px;
    object-fit: cover;
}

/* テキスト ブロック全体 */
.box3-tx1 {
    position: absolute;
    width: 50%;/* 幅指定 */
    top: 100px;
    right: 0px;
    background: #f7f5f2;
    z-index: 30;/* 重なり */

}

/* サブタイトル */
.box3-tx1-title-sub{
  margin-top: 40px;
  margin-left: 15%;/* 左空き */

  font-weight: normal;
  font-size: 16px;
  color: #555;
}

/* タイトル */
.box3-tx1-title{
  border-bottom: solid 2px #ddd;/* 色 */
  display:inline-block;
  padding-bottom: 5px;

  margin-top: 20px;
  margin-left: 15%;/* 左空き */

	font-family: 'Cinzel', serif;
  font-size: 26px;/* 文字サイズ */
  color: #191970;/* 色 */
  letter-spacing: 0.2em;
}

/* テキスト 本文 */
.box3-tx2 p{
	width: 100%;
	font-size: 16px;
	font-weight: normal;

	padding-top: 30px;
	padding-left: 15%;/* 左空き */

	color: #555;
}

/* more */
.more-box3{
    width: 60%;
	font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;

    margin-left: 15%;/* 左空き */
    margin-top: 50px;
    margin-bottom: 50px;

    padding-top: 10px;
    padding-bottom: 10px;

    text-align: center;
	color: #263B61;/* 色 */
	background-color: #fff;

}


/*--------------------------------------------------------
  FAQ  box4
--------------------------------------------------------*/

/* 1 親要素 */
.box4 {
    position: relative;
    width: 100%;/* 幅 */
    height: 450px;
    margin: 20px auto;/* 空き */
    background-color: #fff;     /* 背景 */
}

/* 子要素 画像 */
.box4-item {
    position: absolute;
    width: 75%;/* 幅指定 */
    right: 0px;
    z-index: 20;/* 重なり */
}

.box4-item img{
    width: 100%;/* 幅指定 */
    height: 300px;
    object-fit: cover;
}


/* テキスト ブロック全体 */
.box4-tx1 {
    position: absolute;
    width: 50%;/* 幅指定 */
    top: 100px;
    left: 0px;
    background: #f7f5f2;
    z-index: 30;/* 重なり */

}

/* サブタイトル */
.box4-tx1-title-sub{
  margin-top: 40px;
  margin-left: 15%;/* 左空き */

  font-weight: normal;
  font-size: 16px;
  color: #555;
}

/* タイトル */
.box4-tx1-title{
  border-bottom: solid 2px #ddd;/* 色 */
  display:inline-block;
  padding-bottom: 5px;

  margin-top: 20px;
  margin-left: 15%;/* 左空き */

	font-family: 'Cinzel', serif;
  font-size: 32px;/* 文字サイズ */
  color: #263B61;/* 色 */
  letter-spacing: 0.2em;
}


/* テキスト 本文 */
.box4-tx2 p{
      width: 100%;

    font-size: 16px;
    font-weight: normal;
	line-height: 2em;

     padding-top: 30px;
    padding-left: 15%;/* 左空き */

    color: #555;

		padding-right: 25px
}


/* more */
.more-box4{
    width: 60%;
	font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;

    margin-left: 15%;/* 左空き */
    margin-top: 50px;
    margin-bottom: 50px;

    padding-top: 10px;
    padding-bottom: 10px;

    text-align: center;
	color: #263B61;/* 色 */
	background-color: #fff;

}

/*--------------------------------------------------------
  アクセス
--------------------------------------------------------*/
/*画像 faq*/
.access-image-block{
	height: 300px;/*高さ*/
}
/*---- 住所 ----*/
.access-1{
	width: 90%;
}
/*---- 営業時間 ----*/
.access-2{
	width: 90%;
}
/*--------------------------------------------------------
  ABOUT + RECRUIT
--------------------------------------------------------*/

/*--- 全体 --*/
.article_about{
	padding-top: 50px;
	padding-bottom: 20px;
	height: 350px;/*高さ*/
}

/*--- 2カラム --*/
.container-about{
	height: 300px;/*高さ*/

}

/*画像 ABOUT*/
.about-block{
	display:  inline-block;
	width: 50%;/*幅*/
	height: auto;

	padding: 0px;
	color: #fff;

	background: url(../images/about-image1.jpg) no-repeat;/*画像*/
	background-size: 100%;
}


/*画像 RECRUIT*/
.recruit-block{
	display:  inline-block;
	width: 50%; /*幅*/
	height: auto;

	background-color: #999;/*背景*/
	padding: 0px;
	color: #fff;

	background: url(../images/recruit-image2.jpg) no-repeat;/*画像*/
	background-size: 100%;
}


/*画像のせテキスト*/
.about_tx1{
	font-family: 'Cinzel', serif;
	font-size: 35px;
	color: #fff;
	letter-spacing: 0.3em;
	text-align: center;
	padding-top: 50px;/*上の空き*/
}

.about_tx2{
	text-align: center;
	padding-top: 20px;
	width: 70%;
	margin: 0 auto;
	line-height: 2em;
	margin-bottom: 20px;
}




/* more */
.more-about{
	font-family: 'Cinzel', serif;
    font-size: 16px;

    width: 60%;
	margin: 0 auto;
	margin-top: 30px;


    letter-spacing: 0.1em;

    padding-top: 20px;
    padding-bottom: 20px;


}







/*--------------------------------------------------------
  フッター
--------------------------------------------------------*/

	/*-- ナビ カラム --*/
.col_6 {
  display: flex;
  padding: 10px;
  margin: 50px auto;
  background-color: #263B61;/*背景色*/
	justify-content: center; /* センター揃え */
	font-family: 'Cinzel', serif;
	font-size: 16px;
}


/*--- フッター メニュー全体 ---*/
.col_6 ul {
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*--- フッター メニュー個別 ---*/
.col_6 ul li {
  margin-left: 20px;
  margin-right: 20px;

}
.col_6 ul li a {
	color: var(--color-white);/* 文字色 白 */
	font-weight: bold;/* フォント太さ */

}
.col_6 ul li a:hover {
	color: var(--color-gray);
}



/*--- フッター ロゴ ---*/


/*--- 2カラム --*/
.container-footer{
	display:flex;/*フレックスボックス*/
	margin: 0 auto;/*センター揃え*/
	width: 90%;/*幅*/
}

.footer-logo{
	width: 200px;
	padding-top: 10px;
	padding-bottom: 20px;
}


/*画像 ABOUT*/
.footer2{
	display:  inline-block;
}


.footer-open{
	padding-left: 30px;
	padding-top: 10px;
	line-height: 2em;
	font-size: 15px;
	margin: 0 auto;
}

.footer-tel{
	font-size: 30px;
	padding-top: 10px;
	padding-left: 30px;

}
.footer-tel a:link { color:#000; }
.footer-tel a:visited{ color:#000; }
.footer-tel a:hover{ color:#555; }
.footer-tel a:active{ color:#000; }



/*--- フッター 個人情報保護方針 ---*/
.footer-pv{
	padding-top: 20px;
	padding-bottom: 40px;
	text-align: center;
	font-size: 12px;
	color: #000;
}
footer > .footer-pv a {
	color: var(--color-BLACK);
}
footer > .footer-pv a:hover {
	color: var(--color-gray);
}


/*--- フッター コピーライト ---*/
.footer-cp{
	font-size: 12px;
	padding-bottom: 30px;
	color: #000;
	text-align: center;
}


　　PC共通
***********************************/
.pcLayer, 
img.pcImg {
	display: block !important;
}
.spLayer, 
img.spImg {
	display: none !important;
}

.c-both {
	clear: both;
}


}




/***********************************
共通memo

	font-family: 'Cinzel', serif;

	font-family: 'Oswald', sans-serif;

	font-family: 'Roboto', sans-serif;

font-family: 'Noto Sans JP', sans-serif;




navy
#263B61

ベージュ
#f7f5f2

タイトル グレー
#ddd


***********************************/