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

body,
#wrapper {
	 display:flex;
	 flex-direction:column;
	 min-height:100vh;}





/* 共通
------------------------------------------------------------*/

img{
	max-width: 100%;
	height: auto;
    }



/* ---ナビゲーション---------------------------------------------------------*/
 

li a{
  color:#D91000;
  text-decoration:none;
  font-weight: 600;
}



.navbar ul{
	width: 100%;
	justify-content: flex-end;
	
}
.navbar li{
	width:17%;
	text-align: center;
}

.navbar{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}



.navbar img{
	max-width:300px;
	margin-right: 20px;
}

@media (max-width: 766px) {	
	.navbar img{
	display: inline-block;
	max-width: 100%;
	margin:0 auto;}	
	.navbar li{
    text-align: left;
}

}

@media (max-width: 1000px) {
		.navbar li{
	width:25%;
	
}
}





/* 通常時はホバー時の文字を非表示にする */
.jp .hover{
display: none;
}

/* ホバー時は通常時の文字を非表示にする */
.jp:hover .nomal{
display: none;
}

/* ホバー時に、ホバー時の文字を表示する */
.jp:hover .hover{
display: inline;
	color:#007bff;
}


.dropdown-item{
	color: #D91000;
	font-weight: 500;
}

.dropdown-menu a:hover{
	color:#007bff;
	opacity: 1.0;

}



/* ------------------------------------------------------------*/

.box1 {
    padding: 3em 3em;
    margin: 0 auto 150px auto;
    font-weight: 300;
    border: solid 2px #717071;
}


.box1 p {
    margin: 0; 
    padding: 0;
	letter-spacing: 0.1em;
	line-height: 1.7;
}

@media only screen and (max-width: 799px){
	.box1 {
    padding: 2em 2em;
    margin: 0 auto 150px auto;
    font-weight: 300;
    border: solid 2px #717071;
}
}

@media only screen and (max-width: 799px){
	.box1 p {
    margin: 0; 
	letter-spacing: 0.1em;
	line-height: 1.5;
	font-size: 15px;
}
}

.box700{
	padding-top: 70px;
	padding-bottom: 70px;
	width:100%;
	margin:0 auto 50px auto;
	background-color: #D91000;
	text-align: center;
	}

.box700 p{
	color:#fff;
}

.box700 h2{
	color:#fff;
	line-height: 2;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding-bottom: 20px;
}

@media only screen and (max-width: 799px){
.box700 h2{
	font-size: 24px;
	color:#fff;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding-bottom: 20px;
	margin: auto 10px;
}
}


.box700 h3{
	color:#fff;
	line-height: 1.8;
	font-weight: 200;
	letter-spacing: 0.2em;
	margin: auto 10px;
	font-size: 20px;
}

@media only screen and (max-width: 799px){
.box700 h3{
	font-size: 15px;
	color:#fff;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: 0.2em;
	padding-bottom: 20px;
}
}



.box750{
	padding-top: 70px;
	padding-bottom: 70px;
	width:100%;
	margin:0 auto 50px auto;
	text-align: center;
	max-width: 750px;
}

.box750 h2{
	color:#D91000;
	padding-bottom: 30px;
}
.box750 p{
	text-align: center;	
	padding-bottom: 30px;
}


.box800{
	max-width: 800px;
	margin: 100px auto 0 auto;
	width: 90%;
}


.store{
	max-width: 1000px;
	margin: 0 auto;
}
.store img{
	margin: 0px auto 150px auto;
	
}

.store img:hover{
	opacity: 0.7;
	transition: all .5s ease;
}





.box900{
	text-align: center;
	margin:0 auto 0 auto;
	max-width: 900px;
	width: 100%;
}




.box900 h1{
	padding-bottom: 20px;
	font-size: 50px;
	line-height: 1.8;
	color:#604c3f;
}

@media only screen and (max-width: 799px){
	.box900 h1{
		font-size: 38px;
		margin: 30px 20px auto 20px;
		line-height: 1.5;
	}
}

@media only screen and (max-width: 499px){
	.box900 h1{
		font-size: 30px;
		margin: 30px 20px auto 20px;
		line-height: 1.5;
	}
}

.box900 h2{
	text-align: left;
	margin: 30px auto;
}
.box900 h3{
	
	line-height: 2;
	font-size: 22px;
	margin: 10px auto 30px auto;
	font-weight: 500;
	color:#604c3f;
}
@media only screen and (max-width: 499px){
	.box900 h3{
		font-size: 17px;
		line-height: 1.5;
	}
}

.box900 h4{
	color:#604c3f;
}



.box900 p{
	line-height: 2;
	letter-spacing: 0.1em;
	padding-bottom: 30px;
	text-align: left;
}
@media only screen and (max-width: 499px){
	.box900 p{
		font-size: 15px;
		line-height: 1.5;
	}
}


.box900-menu{
	max-width:900px;
	width:100%;
	margin:0 auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

.box900-con{
	max-width:900px;
	width:100%;
	margin:80px auto 100px auto;
}

.box900-sora{
	background-color: #F6F3EE;
	padding: 40px 25px 40px 25px;
	text-align: center;
	margin:60px auto 150px auto;
	max-width: 900px;
}

.box1000-pop{
	max-width: 1000px;
	margin: 0 auto 80px auto;
	width: 90%;
}


	
.box1000{
	max-width: 1000px;
	margin: 0 auto;
	width: 90%;
	padding: 50px 0;
}	
	
@media only screen and (max-width: 799px){
	.box1000 {
		padding: 20px 0;
	}
}	
	
.box1000-glay{
	width: 100%;
	background-color: #F7F8F8;
	padding: 100px 0;
}

.box1000-glay p{
	line-height: 2;
}

@media only screen and (max-width: 999px){
	.box1000-glay{
		padding: 50px 0;
	}
}

.box1000 h2{
	
    margin: 20px auto 20px auto;
	line-height: 1.5;
}

.box1000 h4{
	font-weight: 300;
    margin: 10px auto 50px auto;
	line-height: 1.5;
}

.box1000 p{
	line-height: 2;
}

.box1000-menu{
	max-width:1000px;
	width:100%;
	margin:0 auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

@media only screen and (max-width: 999px){
	.box1000-menu{
		padding: 50px 0;
	}
}



/* ------------------------------------------------------------*/

.box1280{
	max-width:1280px;
	width:100%;
	margin:0 auto 0 auto;
	position: relative;
	}

.box1280 img{
	width: 100%;
	margin: 0 auto;
}

.box1280 h2{
	vertical-align: middle;
	color:#fff;
}

.jia-line-midashi{
	max-width: 1280px;
	width: 100%;
	background-image: url("../img/jia_line_img.jpg");
	margin: 0 auto 0 auto;
	text-align: center;
	color:#fff;
	padding: 50px 0;
	text-shadow:0 0 10px #000;
}
@media only screen and (max-width: 799px){
	.jia-line-midashi h2{
		font-size: 28px;
		margin: 0 15px;
		line-height: 1.5;
		font-weight: 600;
	}
}



.dtc-sora:after {
    content: url(../img/hikoukilogo.gif);
	margin-left: 10px;
  }

.dtc-jia:before{
	content: url(../img/jia_bottle.png);
	margin: 0 20px 0 10px;
	vertical-align:middle;

}





/* --- 方眼紙背景のBOX定義 ------------------------------------------- */
.graph01{
    max-width  : 1000px;
    padding: 40px 30px;                                         /* ドット（水玉）模様のCSS */
    background-color : #ffffff;
    background-image :

    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 18px,
       rgba(198, 230, 242, 0.20) 19px,  rgba(198, 230, 242, 0.20) 19px,
       transparent 20px,  transparent 37px, 
       rgba(198, 230, 242, 0.20) 38px,  rgba(198, 230, 242, 0.20) 38px,
       transparent 39px,  transparent 56px, 
       rgba(198, 230, 242, 0.20) 57px,  rgba(198, 230, 242, 0.20) 57px,
       transparent 58px,  transparent 75px, 
       rgba(198, 230, 242, 0.20) 76px,  rgba(198, 230, 242, 0.20) 76px,
       transparent 77px,  transparent 94px, 
       rgba(198, 230, 242, 0.20) 95px,  rgba(198, 230, 242, 0.20) 95px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 18px,
       rgba(198, 230, 242, 0.20) 19px,  rgba(198, 230, 242, 0.20) 19px,
       transparent 20px,  transparent 37px, 
       rgba(198, 230, 242, 0.20) 38px,  rgba(198, 230, 242, 0.20) 38px,
       transparent 39px,  transparent 56px, 
       rgba(198, 230, 242, 0.20) 57px,  rgba(198, 230, 242, 0.20) 57px,
       transparent 58px,  transparent 75px, 
       rgba(198, 230, 242, 0.20) 76px,  rgba(198, 230, 242, 0.20) 76px,
       transparent 77px,  transparent 94px, 
       rgba(198, 230, 242, 0.20) 95px,  rgba(198, 230, 242, 0.20) 95px);
}
</style>


.graph02 h2{
	text-align: left;
}

/* --- 方眼紙背景のBOX定義 ------------------------------------------- */
.graph02{
  margin     : auto;
  max-width  : 1000px;
  
  padding: 40px 30px;
                                            /* ドット（水玉）模様のCSS */
  background-color : #ffffff;
  background-image :

    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 18px,
       rgba(198, 230, 242, 0.20) 19px,  rgba(198, 230, 242, 0.20) 19px,
       transparent 20px,  transparent 37px, 
       rgba(198, 230, 242, 0.20) 38px,  rgba(198, 230, 242, 0.20) 38px,
       transparent 39px,  transparent 56px, 
       rgba(198, 230, 242, 0.20) 57px,  rgba(198, 230, 242, 0.20) 57px,
       transparent 58px,  transparent 75px, 
       rgba(198, 230, 242, 0.20) 76px,  rgba(198, 230, 242, 0.20) 76px,
       transparent 77px,  transparent 94px, 
       rgba(198, 230, 242, 0.20) 95px,  rgba(198, 230, 242, 0.20) 95px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 18px,
       rgba(198, 230, 242, 0.20) 19px,  rgba(198, 230, 242, 0.20) 19px,
       transparent 20px,  transparent 37px, 
       rgba(198, 230, 242, 0.20) 38px,  rgba(198, 230, 242, 0.20) 38px,
       transparent 39px,  transparent 56px, 
       rgba(198, 230, 242, 0.20) 57px,  rgba(198, 230, 242, 0.20) 57px,
       transparent 58px,  transparent 75px, 
       rgba(198, 230, 242, 0.20) 76px,  rgba(198, 230, 242, 0.20) 76px,
       transparent 77px,  transparent 94px, 
       rgba(198, 230, 242, 0.20) 95px,  rgba(198, 230, 242, 0.20) 95px);
}
</style>


.graph02 h2{
	text-align: left;
}

/* ------------------------------------------------------------*/


h1{
    font-size: 50px;
	font-weight: 700;
	text-align: left;
	margin-top: 50px;
}



h2{
	font-size: 36px;
	font-weight: 600;
}


h3{
	font-size: 28px;
	font-weight: 600;
}


h4{
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

p{
	font-size: 18px;
	margin:0 auto 0 auto;
}


/* ------------------------------------------------------------*/

.indexbtm{
	background-color: #fff;
	text-align:center;
	padding-bottom: 20px;
	
}

.indexbtm img{
	width: 80%;
	padding-bottom: 40px;
	padding-top: 10px;
	margin-top: -40px;
}

.indexbtm-sora img{
	width: 50%;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

.indexbtm-dtc{
	text-align: center;
	width: 100%;
	padding: 20px 30px;
	
}

.indexbtm-dtc img{
	
	text-align: center;
	margin: 50px auto 30px auto;
}

.indexbtm h1{
	width: 80%;
	
	margin: 0px auto 0 auto;
	text-align: left;
}



.indexbtm h4{
	width: 80%;
	line-height: 2;
	margin: 10px auto;
	text-align: left;
}

.box-shadow {
	box-shadow: 0px 3px 30px #eee;
}


/* ------------------------------------------------------------*/

.indexbtm_naka{
	background-color:#D91000;
	color: #fff;
	padding: 8px 0;
	width: 50%;
    margin: 30px auto;
    font-size: 13px;
	letter-spacing: 0;
   }



.indexbtm_naka_sora{
	background-color:#fff;
	color: #604c3f;
	padding: 1px 1px;
    margin: 0 auto 30px auto;
    font-size: 13px;
	letter-spacing: 0;
	text-align: center;
	width: 40%;
    }

@media only screen and (max-width: 799px){
	.indexbtm_naka_sora{
		width: 250px;
	}
}

.indexbtm_naka_sora h4{
	margin: 15px auto 15px auto;
	padding: 0 10px;
	color:#604c3f;
	font-size: 15px;
}

.indexbtm_naka_jia{
	background-color: #fff;
	color:#595757;
	padding: 10px 20px;
	margin: 20px auto 0 auto;
	font-weight: 600;
	text-align: center;
	width: 150px;
	text-decoration: none;
}

/* ------------------------------------------------------------*/

.indexbtm_naka:hover{
	opacity:0.5;
    }

a:hover{
	text-decoration: none;
}

/* dayサービス2カラム
------------------------------------------------------------*/
.dayservice{
	align-items: center;
	display: flex;
	
}

@media only screen and (max-width: 767px){
	.dayservice{
		display: block;
	}
}

@media only screen and (max-width: 799px){
.dayservice p{
	margin: auto 20px 30px 20px;
	line-height: 2;
	font-size: 15px;
}
}



/* テーブルcss
------------------------------------------------------------*/


.table_jia {
  border-collapse: collapse;
  margin: 30px auto 10px auto;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}



.table_jia tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: .35em;
}
.table_jia th,
.table_jia td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}
.table_jia th {
  font-size: .95em;
}
.table_jia thead tr{
  background-color: #eee;
}
.txt{
   text-align: center;
   font-size: .85em;
}
.remarks{
   text-align: left;
}
.t-120w{
	width: 150px;
}
@media screen and (max-width: 600px) {
  .table_jia {
    border: 0;
    width:100%
  }
  .table_jia th{
    background-color: #eee;
    display: block;
    border-right: none;
  }
  .table_jia thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .table_jia tr {
    display: block;
    margin-bottom: .625em;
  }
  
  .table_jia td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: .8em;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }
  
  .table_jia td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
  }
  
  .table_jia td:last-child {
    border-bottom: 0;
  }
}




/* ------------------------------------------------------------*/



.tbl-r02{
	width: 90%;
	max-width: 900px;
	margin: 100px auto;
	
	
	
}
.tbl-r02 th {
	width: 25%;
	background: #ebebec;
	border: solid 3px #fff;
	
	padding: 10px;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
}
.tbl-r02 td {
	background: #f7f8f8;
	border: solid 3px #fff;
	padding: 20px;
	
 
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
	text-align: center;
  }
}


#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: -50px;
  background: #D91000;
  opacity: 0.6;
  border-radius: 50%;
	margin-right: 10px;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -13px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/* フッター
------------------------------------------------------------*/
.footer{
	margin-top:auto;
	background-color:#D91000;
	text-align:center;
	padding: 30px
    }

.footer p{
	color:#fff;
	}

.footer img{
	width: 240px;
	margin:30px auto 10px auto;
    }