@charset "utf-8";
/* --------------------------------------------------------------------------------
	Reset
-------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
		font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ ProN","ヒラギノ角ゴ Pro","Yu Gothic","YuGothic","Meiryo",sans-serif;
	letter-spacing: 0.1em;
}
html {
	scroll-behavior: smooth;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


h1,h2,h3,h4,h5,h6{
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","MS PMincho",serif;
}

input, textarea {
	font-weight: normal;
	font-size: 100%;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

a {
	overflow: hidden;
	outline: none;
	text-decoration: none;
	color: #333;
}
a:hover, a:active {
	text-decoration: none;
	/*opacity: 0.8;*/
}
input[type="text"]:focus {
	outline: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: none;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
a img {
	border: none;
	transition: opacity 0.3s ease;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70); /* ie7 */
	-ms-filter: "alpha(opacity=70)"; /* ie8 */
}
/* --------------------------------------------------------------------------------
	タグ
-------------------------------------------------------------------------------- */
html, body {
	height: 100%;
	margin: 0 !important;
	font-feature-settings: "palt";
	text-align: justify;
	color: #000;
}
body {
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	
}



/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.device-pc {
	display: none!important;
}
.device-sp {
	display: block!important;
}
.inner {
	padding: 0 20px;
}

.btn a{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

.btn a:hover{
 
  color: #fff !important;

  transform: translateY(-4px);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.35);
}

.btn a:hover::before{
  border-top: solid 1px #fff !important;
  border-right: solid 1px #fff !important;
}


.btn {
	margin: 30px auto 0;
}

.btn .btn-round{
	width: 80vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 18px;
	border-radius: 9999px;
	background: linear-gradient(to bottom, #6fd0ee 0%, #2fa4d7 100%);
	
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	
}

.btn .btn-round .arrow{
  width: 20px;     
  height: auto;
  display: block;
}


/* ===============================
  Reveal（ゆっくりふわっと）
================================ */
.js-reveal{
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 1.5s cubic-bezier(.22, 1, .36, 1),
    transform 1.5s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

/* 表示状態 */
.js-reveal.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 任意：遅延（data-reveal-delay="120" など） */
.js-reveal{
  transition-delay: var(--reveal-delay, 0ms);
}

/* 任意：モーション減設定 */
@media (prefers-reduced-motion: reduce){
  .js-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =================================
   メイン画像：上下移動なし
================================= */
.js-reveal--fade{
  transform: none;
}

.js-reveal--fade.is-visible{
  transform: none;
}


/* =================================
   メイン画像専用アニメーション（単独）
================================= */

.js-reveal--mv{
  opacity: 0;
  overflow: hidden;
}

.js-reveal--mv img{
  display: block;
  width: 100%;
  transform: scale(1.01);
  filter: blur(3px);
  transition:
    transform 1.8s cubic-bezier(.22,1,.36,1),
    filter 1.6s ease,
    opacity 1.4s ease;
}

/* 表示後 */
.js-reveal--mv.is-visible{
  opacity: 1;
  transition: opacity 1.6s ease;
}

.js-reveal--mv.is-visible img{
  transform: scale(1);
  filter: blur(0);
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container {
	
	
}

/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */


#header {
	width: 100%;
	padding: 0 0 15px;
}


#header .header-inner{
	margin: 0 auto;
	padding: 0 10px;
	display: flex;
	align-items: center;
}


#header .header-inner h1{
	width: 120px;
}

#header .header-inner .h-info{
	
	display: flex;
	align-items: center;
}

#header .header-inner .tel{
	display: none;
}

#header .header-inner .h-info ul{
	display: flex;
}

#header .header-inner .h-info ul li{
	
}



#header .header-inner .h-info ul .new-order{
	margin: 0 0 0 10px;
}

#header .header-inner .h-info ul .new-order a{
	background: #D33E3D;
	display: block;
	padding: 5px 10px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	border-radius: 0 0 10px 10px;
}


#header .header-inner .h-info ul .change-order{
	margin: 0 0 0 10px;
}


#header .header-inner .h-info ul .change-order a{
	background: #096BB9;
	display: block;
	padding: 5px 10px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	border-radius: 0 0 10px 10px;
}





/* --- ハンバーガーボタン --- */
.humburger-btn {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
	transition: background 0.3s;
	z-index: 1100;
	
}
.humburger-btn span {
	display: block;
	width: 30px;
	height: 2px;
	background: #000;
	margin: 3px 0;
	transition: all 0.3s ease;
}
/* 開いた時の × 変形 */
.humburger-btn.active span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.humburger-btn.active span:nth-child(2) {
	opacity: 0;
}
.humburger-btn.active span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}
/* --- メニュー --- */
.humburger-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	/*background: rgba(66,160,138,0.8);*/
	background: #EDFFFF;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 1000;
	overflow-y: auto; /* ← 中身をスクロール */
	-webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
	overscroll-behavior: contain; /* 画面外へのバウンス防止 */
	
}
.humburger-menu.open {
	height: 100vh;
}
.humburger-menu.open {
	transform: translateY(0);
}
.humburger-inner {
	padding: 100px 20px 40px;
}
/* --- 背景をスクロールさせない制御 --- */
body.menu-open {
	overflow: hidden;
}



#header .header-nav {
	margin: 0 0 40px;
}
#header .header-nav ul {
	display: flex;
	flex-direction: column;
}
#header .header-nav ul li {
	padding: 16px 8px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid #A3A3A3;
}
#header .header-nav ul li a {
	display: block;
	color: #003962;
	font-size: 16px;
	font-weight: 600;
	 font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","MS PMincho",serif;
}


#header .header-nav ul li a span{
	display: block;
	color: #656565;
	font-size: 13px;
		font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","MS PMincho",serif;
}


#header .tel-no {
	background: #fff;
	text-align: center;
	padding: 15px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
	margin: 0 0 40px;
}


/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer {
	padding: 60px 20px 20px;
	background-color: #F0F0F0;
	margin: 0 auto;
	background: url(https://www.oasis-water.jp/images/common/f-bg.jpg) no-repeat center bottom;
	
}



#footer .footer-inner {
	margin: 0 auto;
}



#footer .footer-inner h2{
	background: linear-gradient(to bottom, #5cc8f2 0%, #3aa7e6 100%);
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	padding: 10px 0;
	margin: 0 0 30px;

}

#footer .footer-inner h3{
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 30px;
	color: #1C9CC9;

}
#footer .f-guide .f-guide-inner {
	margin: 0 auto 40px;
}

#footer .f-guide .f-guide-inner p{
	font-size: 14px;
}

#footer .f-guide .f-guide-inner p.time{
	text-align: center;
}



#footer .f-guide .f-guide-inner ul{
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 40px 0 0;
}


#footer .f-guide .f-guide-inner ul li{
	text-align: center;
	padding: 15px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.12);
	margin: 0 0 40px;
}




#footer .btn {
	margin: 40px auto 0;
}

#footer .btn .btn-round{
	width: 80vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 25px;
	border-radius: 9999px;
	background: linear-gradient(to bottom, #6fd0ee 0%, #2fa4d7 100%);
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	
}

#footer .btn .btn-round .arrow{
  width: 32px;     
  height: auto;
  display: block;
}


#footer .f-info{
  padding: 120px 0 0;
}


#footer .f-info h2{
	background: none;
	color: #fff;
	font-size: 20px;
	text-align: center;
	margin: 0 0 30px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.25);
 
}
#footer .f-info p.address{
	
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin: 0 0 40px;
 
}


#footer .f-info .f-nav{
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin: 0 0 20px;
 
}
#footer .f-info .f-nav a{
	color: #fff;
	
 
}

#footer .f-info h1{
	color: #fff;
	font-size: 12px;
	text-align: center;

}



#footer .f-info .copy{
	color: #fff;
	font-size: 12px;
	text-align: center;

}




#fix-bnr {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 10;
	width: 60px;
}
#fix-bnr.show {
	opacity: 1;
	visibility: visible;
}









/* --------------------------------------------------------------------------------
	wrapper
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
  パンくずリスト
-------------------------------------------------------------------------------- */
#pankuzu {
	background-color: #fff;
}
#pankuzu .breadcrumbs {
	padding-top: 20px;
	padding-bottom: 50px;
	margin: 0 auto;
	max-width: 1100px;
	width: 100%;
	display: flex;
	align-items: center;
}
#pankuzu .breadcrumbs > span {
	color: #333333;
	font-size: 12px;
	padding: 5px;
}
/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
	トップページ
-------------------------------------------------------------------------------- */

#index h2 {
	font-size: 30px;
	text-align: center;
	margin: 0 0 40px;
	color: #003962;
	

}
#index h2 span{
	display: block;
	font-size: 16px;
	text-align: center;
	color:#656565;
	font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","MS PMincho",serif;

}



/*mv*/
#index #mv {
	position: relative;
	margin: 0 0 50px;
}

#index #mv {
	width: 100%;
	line-height: 0;
}
#index #mv img {
	width: 100%;
	/*height: 650px;*/
	object-fit: cover;
}


@keyframes fadeInSoft {
	0% {
		opacity: 0;
		transform: scale(0.99);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
/* フェードイン＆スケール */
@keyframes fadeInSoft {
	0% {
		opacity: 0;
		transform: scale(0.99);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
/* 上下ふわふわ */
@keyframes floatY {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}



/*news*/

#index #campaign-bnr {
	margin: 0 0 60px;
}





/*news*/

#index #news {
	
}


#index #news dl{
	
	height: 250px;
	overflow-y: scroll;
}


#index #news dl dt{
	font-size: 14px;
	color: #003962;
	padding: 15px 10px 10px;
}



#index #news dl dd{
	
	border-bottom: 1px solid #525252;
	font-size: 16px;
	padding: 5px 10px 10px;
}

#index #news dl dt:first-of-type,
#index #news dl dt:first-of-type + dd{
	padding-top: 0;
}


/*特徴*/

#index #features {
	background:url("../images/index/bg1.jpg") no-repeat;
	background-size: 100%;
	padding: 80px 0 0;
	margin: 0 0 100px;
}


#index #features .img{
	margin: 0 0 20px;
}

#index #features h3{
	font-size: 20px;
	text-align: center;
	color: #1C9CC9;
	margin: 0 0 15px;
}



#index #features p{
	font-size: 15px;
	text-align: left;
	margin: 0 0 35px;
}



/*オアシスウォーターのサーバー*/

#index #waterserver {
	margin: 0 0 100px;
}

#index #waterserver .heading{
	text-align: center;

}


#index #waterserver .item-img{
	background:url("../images/index/bg3.jpg") no-repeat center;
	background-size: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 0 40px;
	
	
}


#index #waterserver h3{
	font-size: 20px;
	text-align: center;
	color: #1C9CC9;
	margin: 0 0 35px;
}



#index #waterserver p{
	font-size: 15px;
	text-align: center;
	margin: 0 0 35px;
}

#index #waterserver .item-detail{
	text-align: center;
	margin: 0 0 35px;
}


#index #waterserver .btn .btn-round {
        
	
}

/*ポイント*/

#index #point {
	
}



#index #point ul li{

	margin: 0 0 20px;
	
}



#index #point ul li .inner{
	
	position: relative;
}





#index #point ul li .icon{
	position: absolute;
	top:150px;
	left: 20px;
	right: inherit;
	z-index: 3;
	width: 38px;
}

#index #point ul li:nth-child(odd) .icon{
	position: absolute;
	top:150px;
	right: 20px;
	left: inherit;
	z-index: 3;
	width: 38px;
}





#index #point ul li .txt{
	width: 100%;
	background: #F2F7FF;
	padding:35px 15px 15px;
	margin: -20px 0 0;
	position: relative;
	z-index: 1;
	
}

#index #point ul li:nth-child(odd) .txt{
	width: 100%;
	background: #EDFFFF;
}





#index #point ul li .txt h3{
	color: #096BB9;
	font-size: 20px;
	margin: 0 0 20px;
	
}

#index #point ul li .txt p{
	
	font-size: 15px;
	
	
}


#index #point ul li .img{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	
}

#index #point ul li .img img{
	width: 70vw;
	
}

#index #point ul li:nth-child(odd) .img{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 2;
}





#index #item-price{
	padding: 50px 0;
	background:url("../images/index/bg4.jpg") no-repeat center;
	background-size: cover;
	
	
}



#index #item-price h2{
	font-size: 20px;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	

}


#index #item-price .img{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	
	
}



/* --------------------------------------------------------------------------------
	天然水について
-------------------------------------------------------------------------------- */

#page-features{
	
}


#page-features #mv{
	position: relative;
	display: flex;
	justify-content: center;
	
}


#page-features #mv img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	
}

#page-features #mv h2{
	position: absolute;
	z-index: 2;
	color: #fff;
	font-size: 30px;
	top: 40%;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
}



/*ポイント*/

#page-features #point {
	/*margin: 30px 0 0 ;*/
}

#page-features #point h2{
	font-size: 30px;
        text-align: center;
        margin: 0 0 50px;
        color: #003962;
}

#page-features #point h2 span {
        display: block;
        font-size: 16px;
        text-align: center;
        color: #656565;
        font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    }


#page-features #point ul li{
	margin: 0 0 40px;
	position: relative;

}

#page-features #point ul li .icon{
	position: absolute;
	bottom:-45px;
	right: 20px;
	
	z-index: 3;
	width: 80px;
}

/*#page-features #point ul li:nth-child(odd) .icon{
	position: absolute;
	top:150px;
	right: 20px;
	left: inherit;
	z-index: 3;
	width: 38px;
}
*/




#page-features #point ul li .txt{
	width: 100%;
	background: #F2F7FF;
	padding:35px 15px 15px;
	margin: -20px 0 0;
	position: relative;
	z-index: 1;
	
}

#page-features #point ul li:nth-child(odd) .txt{
	width: 100%;
	background: #EDFFFF;
}





#page-features #point ul li .txt h3{
	color: #096BB9;
	font-size: 20px;
	margin: 0 0 20px;
	
}

#page-features #point ul li .txt p{
	
	font-size: 15px;
	
	
}


#page-features #point ul li .img{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
	
}

#page-features #point ul li .img img{
	width: 70vw;
	
}

/*#page-features #point ul li:nth-child(odd) .img{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 2;
}*/


#page-features #point ul li .txt p span{
	font-weight: 600;
	
}






#page-features #item-price{
	padding: 50px 0;
	background:url("../images/index/bg4.jpg") no-repeat center;
	background-size: cover;
	
	
}



#page-features #item-price h2{
	font-size: 20px;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	

}


#page-features #item-price .img{
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	
	
	
}


#page-features #oneway{
	background: #F2F7FF;
	padding: 40px 0;

}


#page-features #oneway h2{
	font-size: 20px;
	text-align: center;
	color: #003962;
	margin: 0 0 30px;

}

#page-features #oneway p{
	font-size: 15px;
	text-align: center;
	margin: 0 0 30px;

}



#page-features #oneway .img{
	display: flex;
	justify-content: center;
	align-items: center;
	
	
	
}



/* --------------------------------------------------------------------------------
	ウォーターサーバーについて
-------------------------------------------------------------------------------- */

#page-water-server{
	
}


#page-water-server #mv{
	position: relative;
	
	
	
}


#page-water-server #mv img{
	width: 100%;
	object-fit: cover;
	
}


#page-water-server #smart-plus h2 {
    font-size: 20px;
	text-align: center;
	color: #003962;
	margin: 0 0 30px;
    }

#page-water-server #smart-plus h2 span {
        display: block;
        font-size: 15px;
        text-align: center;
        color: #656565;
        font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    }


#page-water-server #smart-plus .item-img {
        background: url(../images/index/bg3.jpg) no-repeat center;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: 0 0 40px;
    }


#page-water-server #smart-plus .sec01{
  
	margin: 0 auto 90px;
    }



#page-water-server #smart-plus .sec01 h3 {
       font-size: 20px;
	text-align: center;
	color: #1C9CC9;
	margin: 0 0 30px;
    }

#page-water-server #smart-plus .sec01 p {
      font-size: 15px;
	text-align: center;
	
	margin: 0 0 30px;
    }


#page-water-server #smart-plus .sec01 p.att {
      font-size: 13px;
	text-align: center;
	color: #D33E3D;
	margin: 0 0 30px;
    }



#page-water-server #smart-plus .spec-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid #e6e6e6;
    font-size: 14px;
  }

  #page-water-server #smart-plus .spec-table th,
  #page-water-server #smart-plus .spec-table td{
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 12px 14px;
    text-align: center;
    vertical-align: middle;
    color: #555;
    background: #fff;
  }

  #page-water-server #smart-plus .spec-table thead th{
    background: #0b6fb6; /* 青 */
    color: #fff;
    font-weight: 700;
  }

  #page-water-server #smart-plus .spec-table__head--blank{
    width: 32%;
  }
  #page-water-server #smart-plus .spec-table__head{
    width: 68%;
  }

  #page-water-server #smart-plus .spec-table tbody th{
    font-weight: 700;
    background: #fafafa; /* 左列の薄いグレー */
  }






#page-water-server .sec02 ul li{
	margin: 0 0 40px;
	position: relative;

}

#page-water-server .sec02 ul li .icon{
	position: absolute;
	bottom:-45px;
	right: 20px;
	
	z-index: 3;
	width: 80px;
}





#page-water-server .sec02  ul li .txt{
	width: 100%;
	background: #F2F7FF;
	padding:35px 15px 15px;
	margin: -20px 0 0;
	position: relative;
	z-index: 1;
	
}

#page-water-server .sec02  ul li:nth-child(odd) .txt{
	width: 100%;
	background: #EDFFFF;
}





#page-water-server .sec02 ul li .txt h3{
	color: #096BB9;
	font-size: 20px;
	margin: 0 0 20px;
	text-align: center;
	
}

#page-water-server .sec02  ul li .txt p{
	
	font-size: 15px;
	
	
}


#page-water-server .sec02  ul li .img{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
	
}

#page-water-server .sec02 ul li .img img{
	width: 70vw;
	
}



#page-water-server .sec02 .txt p span{
	font-weight: 600;
	
}







#page-water-server .sec02 .content-box{
	width: 90%;
	margin: 0 auto 40px;
	background: #F2F7FF;
	padding: 15px;
	
	
}

#page-water-server .sec02 .content-box h3{
	color: #096BB9;
	font-size: 20px;
	margin: 0 0 20px;
	text-align: center;

}


#page-water-server .sec02 .content-box p{
	font-size: 15px;
	margin: 0 0 20px;
	
}


#page-water-server .sec02 .content-box p span{
	font-weight: 600;
	
}

#page-water-server .sec02 .content-box-inner{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	
}

#page-water-server .sec02 .content-box-inner.second{
	flex-direction: column;
	
}


#page-water-server .sec02 .content-box-inner .img{
	width:100%;
	flex-shrink: 0;
	margin: 0 0 20px;
	
}

#page-water-server .sec02 .content-box-inner.second .img{
	margin: 0 0 20px;
	
}



#page-water-server .sec02 .content-box-inner .txt p img{
	margin: 20px 0 10px;
	display: block;
	
}

#page-water-server .sec02 .content-box dl{
	margin: 30px 0 0;
	font-size: 16px;
}


#page-water-server .sec02 .content-box dl dd{
	margin: 0 0 10px;;
	position: relative;

}

#page-water-server .sec02 .content-box dl dd::before{
	content: '';
	display: inline-block;
	background: url("../images/water-server/i-dot.svg");
	height: 12px;
	width: 12px;
	background-size: contain;
	margin: 0 10px 0 0;

}


#page-water-server .sec02 .content-box dl{
	margin: 30px 0 0;
	font-size: 15px;
}



/* --------------------------------------------------------------------------------
	料金・配送について
-------------------------------------------------------------------------------- */

#page-price{
	
}


#page-price #mv{
	position: relative;
	display: flex;
	justify-content: center;
	
}


#page-price #mv img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	
}

#page-price #mv h2{
	position: absolute;
	z-index: 2;
	color: #fff;
	font-size: 30px;
	top: 40%;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
}




#page-price .sec01{
	background: #FBF8F4;
	padding: 30px 0;

	
}


#page-price h2 {
	font-size: 24px;
	text-align: center;
	margin: 0 0 50px;
	color: #003962;
	

}
#page-price h2 span{
	display: block;
	font-size: 15px;
	text-align: center;
	color:#656565;
	font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","MS PMincho",serif;

}


#page-price .price-img .img{
	margin: 0 0 30px;

}



#page-price .price-img .notice-box{
  display: flex;
	flex-direction: column;
  background: #f5e7e7;
  font-size: 16px;
	margin: 0 0 20px;
	padding: 20px;
}

#page-price .price-img .notice-title{
  
  padding: 10px;
  font-weight: bold;
  color: #c33;
  border-bottom: 1px solid #D33E3D;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-price .price-img .notice-content{
  padding: 10px;
  color: #c33;
  line-height: 1.8;
}

#page-price .price-img .notice-content p{
  margin: 0 0 8px;
	text-align: left;
}

#page-price .price-img .notice-content p:last-child{
  margin-bottom: 0;
}


#page-price .price-img p{
	font-size: 15px;
	text-align: center;

}

#page-price .price-img p span{
	font-weight: 600;

}


#page-price .sec02{
	background: #F2F7FF;
	padding: 30px 0;

}

#page-price .sec02 .inner{
	position: relative;

}



#page-price .sec02 h2{
	font-size: 28px;
	color: #096BB9;
	margin: 0 0 20px;

}


#page-price .sec02 h2 span{
	font-size: 50px;
	color: #096BB9;
	padding: 0 10px;
	display: inline-block;

}


#page-price .sec02 p{
	
	font-size: 15px;
	padding: 0 0 0 100px;

}


#page-price .sec02 p.att{
	
	font-size: 13px;
	color: #D33E3D;
	margin: 25px 0;
	padding: 0;

}


#page-price .sec02 .img{
	text-align: center;
	
	margin: 0 auto 60px;

}

#page-price .sec02 .icon{
	position: absolute;
	width: 130px;
	left: -35px;
	top: 140px;
	

}


#page-price .sec03{
	padding: 40px 0;

}

#page-price .sec03 .img{
	text-align: center;
	margin: 0 auto 20px;

}

#page-price .sec03 p{
	font-size: 16px;
	color: #D33E3D;
	margin: 0 0 10px;
	font-weight: 600;

}


#page-price .sec03 p.att{
	font-size: 14px;
	color: #D33E3D;
	

}




#page-price .sec04{
	padding: 40px 0;
	background: #FCF8F4;

}

#page-price .sec04 .ttl{
	text-align: center;
	margin: 0 0 20px;

}

#page-price .sec04 h2{
	margin: 0 0 30px;;
	

}


#page-price .sec04 p{
	font-size: 16px;
	margin: 0 0 20px;
	text-align: center
	

}

#page-price .sec04 ul li{
	text-align: center;
	margin: 0 0 30px;

}



#page-price .sec04 p.att{
	
	font-size: 15px;
	color: #D33E3D;
	font-weight: 600;
	text-align: left;
	

}


#page-price .sec05{
	padding: 40px 0;
	

}

#page-price .sec05 h2{
	margin: 0 0 30px;;
	

}



#page-price .sec05 p{
	font-size: 15px;
	text-align: center;
	margin: 0 0 10px;
}

#page-price .payment-table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #999;
  font-size: 13px;
	text-align: left;
}

#page-price .payment-table th,
#page-price .payment-table td{
  border: 1px solid #999;
  padding: 10px;
  vertical-align: top;
	display: block;
	 width: 100%;
}

#page-price .payment-table th{
 
  background: #F4F4F4;
  text-align: center;
  font-weight: 600;
	font-size: 15px;
}

#page-price .payment-table td{
  background: #fff;
	
}

#page-price .payment-table td p{
 background: #fff;
text-align: left!important;
	
}


#page-price .dot-title{
  position: relative;
  font-weight: bold;
  margin-bottom: 10px;
font-size: 20px;
	display: flex;
	align-items: center;
}

#page-price .dot-title::before{
  content: "";
  width: 20px;
  height: 20px;
  background: #2b87d1;
  border-radius: 50%;
	margin: 0 10px 0 0;
  
}

#page-price .attention{
 
  padding: 10px;
  color: #d33;
  margin: 10px 0 20px;
}

#page-price .payment-block{
  margin-bottom: 20px;
}

#page-price .payment-block:last-child{
  margin-bottom: 0;
}


#page-price .sec06{
	padding: 40px 0;
	

}

#page-price .sec06 .img{
	
	text-align: center;
	margin: 0 0 20px;
}


#page-price .sec06 p{
	font-size: 15px;
	
	
	
}

/* カード */
#page-price .sec06 .info-card{
	background:#fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	padding:24px;
	margin: 60px 0 0;
}

#page-price .sec06 .info-card + .info-card{
  margin-top:15px;
}

/* タイトル */
#page-price .sec06 .info-ttl{
  position:relative;
  padding-left:33px;
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#096BB9;
  padding-bottom:12px;
  border-bottom:2px dotted #0b6fb6;
 
}


#page-price .sec06 .info-ttl::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:20px;
  height:20px;

  /* ダミーSVGパス */
  background:url("https://www.oasis-water.jp/images/price/icon.svg") no-repeat center;
  background-size:contain;
}

/* 本文 */
#page-price .sec06 .info-txt{
  margin:14px 0 0;
  font-size:15px;

}



/* --------------------------------------------------------------------------------
	お友達紹介キャンペーン
-------------------------------------------------------------------------------- */

#page-friend-referral{
	
}


#page-friend-referral #mv{
	position: relative;
	/*background: url(../images/index/bg3.jpg) no-repeat center bottom;*/
	margin: 0 0 80px;
}




#page-friend-referral #mv img{
	width: 100%;
	object-fit: cover;
	
}



#page-friend-referral .img{
	text-align: center;
	margin: 0 0 40px;

        
    }

#page-friend-referral p{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 30px;

        
    }


#page-friend-referral .call{
	
	text-align: center;
	margin: 0 0 60px;

        
    }




/* --------------------------------------------------------------------------------
	プラスプレミアムのお水
-------------------------------------------------------------------------------- */



#page-premium #mv{
	position: relative;
	display: flex;
	justify-content: center;
	
}


#page-premium #mv img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	
}

#page-premium .sec01{
	margin: 0 0 30px;
}


#page-premium .sec02{
	background: #FCF8F4;
	padding: 40px 0;
}

#page-premium .sec02 h2{
	text-align:center;
	font-size: 30px;
	color: #003962;
	margin: 0 0 15px;
}


#page-premium  .btn .btn-round {
	background: linear-gradient(to bottom, #FFCA76 0%, #FF7A05 100%)
}


#page-premium .sec03 {
	margin: 0 0 70px;
}


#page-premium .sec03 .outer{
	background: url(../images/premium/bg.jpg) no-repeat center bottom;
	 background-size: cover;
	padding: 40px 0;
}

#page-premium .sec03 h2{
	text-align:center;
	font-size: 24px;
	color: #003962;
	margin: 0 0 15px;
}


#page-premium .sec03 ul{
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap:10px;
}

#page-premium .sec03 ul li{
	
}




#page-premium .sec03 .view {
	position: relative;
	width: 100%;
	height: 170px;
	z-index: 1;
}
#page-premium .sec03 .view::before {
	content: "";
	display: block;
	width: 100%;
	height: 170px; 
	background: transparent;
	position: absolute;
	left: 0;
	top: 0; 
	z-index: 1;
}
#page-premium .sec03 .view::after {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 170px; 
	z-index: 10;
	background: url(https://www.oasis-water.jp/images/premium/img-06.png) repeat-x 0 0;
	overflow: hidden;
	-moz-animation: newsloop 80s linear infinite;
	animation: typeloop 80s linear infinite;
	background-size: 1241px 170px;
}
@keyframes typeloop {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2060px 0;
	}
}

#page-premium .sec04 {
	
}




#page-premium .sec04 h2{
	text-align:center;
	font-size: 26px;
	color: #003962;
	margin: 0 0 15px;
}

#page-premium .sec04 h2 span{
	display: block;
	text-align:center;
	font-size: 25px;
	color: #096BB9;
	
}



#page-premium .sec04 ul{
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap:20px;
	margin: 0 0 40px;
	
}

#page-premium .sec04 ul li{
	
	
}



#page-premium .sec04 .txt{
	
	margin: 0 auto;
	border: 3px solid #096BB9;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}
#page-premium .sec04 .txt p{
	font-size: 20px;
	color: #096BB9;
	
}

#page-premium .sec04 .txt h3{
	font-size: 40px;
	color: #096BB9;
	text-align: center;
	
}


#page-premium .sec04 .txt h3 span{
	font-size: 60px;
	color: #096BB9;
	
}


#page-premium .sec04 .txt p.att{
	font-size: 15px;
	color: #000;
	
}

#page-premium .sec05 {
	background: url(../images/index/bg1.jpg) no-repeat;
        background-size: 100%;
        padding: 100px 0 0;
        margin: 0 0 100px;
}




#page-premium .sec05 h2{
	text-align:center;
	font-size: 30px;
	color: #003962;
	margin: 0 0 40px;
}

#page-premium .sec05 h2 span{
        display: block;
        font-size: 15px;
        text-align: center;
        color: #656565;
        font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    }
	

#page-premium .sec05 p{
	text-align:center;
	font-size: 15px;
	margin: 0 0 30px;
}


#page-premium .sec06 {

     margin: 0 0 80px;
}




#page-premium .sec06 h2{
	text-align:center;
	font-size: 30px;
	color: #003962;
	margin: 0 0 40px;
}


#page-premium .sec06 p{
	text-align:center;
	font-size: 15px;
	margin: 0 0 40px;
}


#page-premium .sec06 .mineral{
  background: #F2F7FF;
	padding: 20px;
	margin: 0 0 20px;
}

#page-premium .sec06 .mineral h3{
  color: #096BB9;
	text-align: center;
	font-size: 30px;
	margin: 0 0 20px;
	
}

#page-premium .sec06 .tbl-outer{
 overflow-x: scroll;
}


#page-premium .sec06 .mineral-table{
  width: 600px;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
}



#page-premium .sec06 .mineral-table th,
#page-premium .sec06 .mineral-table td{
  border: 1px solid #cfcfcf;
  padding: 18px 12px;
}

#page-premium .sec06 .mineral-table thead th{
  background: #1f6aa5;
  color: #fff;
  font-weight: bold;
	
}

#page-premium .sec06 .mineral-table tbody th{
  background: #e9e9e9;
  font-weight: normal;
  text-align: left;
  padding-left: 20px;
}

#page-premium .sec06 .mineral-table tbody td{
  background: #f4f4f4;
}



#page-premium .sec06 .map{
  background: #F2F7FF;
	padding: 20px;
	margin: 0 0 40px;
}

#page-premium .sec06 .map h3{
  color: #096BB9;
	text-align: center;
	font-size: 30px;
	margin: 0 0 20px;
	
}

#page-premium .sec07 {
  
	
}


#page-premium .sec07 h2{
  
	text-align:center;
	font-size: 30px;
	color: #003962;
	margin: 0 0 40px;
}

#page-premium .sec07 p{
  
	text-align:center;
	font-size: 15px;
	
	margin: 0 0 40px;
}


#page-premium .sec07 .img{
  
	text-align:center;
	
	
	margin: 0 0 40px;
}


/* カード */
#page-premium .sec07 .info-card{
	background:#fff;
	

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	padding:24px;
	margin: 60px 0 30px;
}

#page-premium .sec07 .info-card + .info-card{
  margin-top:16px;
}

/* タイトル */
#page-premium .sec07 .info-ttl{
  position:relative;
  padding-left:38px;
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#096BB9;
  padding-bottom:12px;
  border-bottom:2px dotted #0b6fb6;
 
}


#page-premium .sec07 .info-ttl::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:26px;
  height:26px;
  background:url("https://www.oasis-water.jp/images/price/icon.svg") no-repeat center;
  background-size:contain;
}

/* 本文 */
#page-premium .sec07 .info-txt{
  margin:14px 0 0;
  font-size:15px;
	text-align: left;

}



#page-premium .sec07 p.att{
  margin:14px 0 0;
  font-size:14px;
	text-align: left;

}

#page-premium .sec07 .oder-att{
  border: 2px solid #D33E3D;
	padding: 20px;
	margin: 40px 0 0;

}


#page-premium .sec07 .oder-att h3{
  color: #D33E3D;
	text-align: center;
	font-size: 24px;
	margin: 0 0 20px;

}

#page-premium .sec07 .oder-att p{
 
	text-align: left;
	font-size: 15px;
	

}



/* --------------------------------------------------------------------------------
	会社概要
-------------------------------------------------------------------------------- */




#page-content #mv{
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0 0 50px;
	
}


#page-content #mv img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	
}

#page-content #mv h2{
	position: absolute;
	z-index: 2;
	color: #fff;
	font-size: 30px;
	top: 40%;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
}


   #page-content h2 {
        font-size: 30px;
        text-align: center;
        margin: 0 0 30px;
        color: #003962;
    }



   #page-content p.lead {
        font-size: 15px;
        text-align: center;
        margin: 0 0 60px;
       
    }


   #page-content p {
        font-size: 14px;
       
       
    }



 #page-content .company-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
	 margin: 0 0 30px;
}

 #page-content .company-table th,
 #page-content .company-table td{
  border:1px solid #bdbdbd;
  padding:18px 20px;
  vertical-align:middle;
	 display: block;
}

 #page-content .company-table th{
 
  background:#e5e5e5;
  text-align:left;
  font-weight:bold;
}

 #page-content .company-table td{
  background:#fff;
}

 #page-content .company-table a{
  color:#1f6aa5;
  text-decoration:underline;
}

 #page-content .company-table a:hover{
  opacity:0.7;
}

 #page-content.outline ul{
  display: flex;
	 justify-content: center;
	 flex-direction: column;
	 gap:20px;
	 margin: 0 0 30px;
}

 #page-content.outline ul li{
 
}


 #page-content.outline .sec02{
  margin: 0 0 80px;
}

 #page-content.outline .sec02 p{
  text-align: center;
	 font-size:14px;
}


 #page-content.outline iframe{
  width: 100%;
	 height: 500px;
	 object-fit: cover;
}


/* --------------------------------------------------------------------------------
	利用規約
-------------------------------------------------------------------------------- */

#page-content.rule .rule-box{
  margin: 0 0 60px;
}



 #page-content.rule h3{
  background: #096BB9;
	 font-size: 16px;
	 padding: 10px 20px;
	 color: #fff;
	 margin: 0 0 35px;
}



#page-content.rule dl{
  counter-reset: number;
}

#page-content.rule dd{
  counter-increment: number;
  position: relative;
  padding-left: 2em;
	font-size: 14px;
	margin: 0 0 1.5em;
}

#page-content.rule dd::before{
  content: counter(number) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}


#page-content.rule ul {
       
	margin: 1em 0;
	
    }

#page-content.rule ul li{
        position: relative;
	margin: 0 0 1em;
	font-size: 14px;
	
    }

#page-content.rule ul li::before {
	display: inline-block;
        content: "";
        width: 14px;
        height: 14px;
        background: #2b87d1;
        border-radius: 50%;
        margin: 0 10px 0 0;
    }




#page-content.rule .info-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
	margin: 1.5em 0 0;
}

#page-content.rule .info-table th,
#page-content.rule .info-table td{
  border: 2px solid #707070; 
  padding: 22px 20px;
  vertical-align: middle;
}

#page-content.rule .info-table th{
  width: 240px;
  background: #F4F4F4;
  font-weight: 700;
  text-align: left;
}

#page-content.rule .info-table td{
  background: #fff;
}

#page-content.rule .info-table a{
  color: #000;
  text-decoration: none;
}

#page-content.rule .info-table a:hover{
  text-decoration: underline;
}



#page-content.rule .tbl-outer{
  overflow-x: scroll;
}


#page-content.rule .server-table{
  width:700px;
  border-collapse:collapse;
  font-size:14px;
  text-align:center;
	margin: 1.5em 0 0;
}

#page-content.rule .server-table th,
#page-content.rule .server-table td{
  border:2px solid #8f8f8f;
  padding:26px 20px;
  vertical-align:middle;
}

#page-content.rule .server-table thead th{
  background:#e5e5e5;
  font-weight:700;
	text-align:left;
}

#page-content.rule .server-table tbody th{
  background:#f0f0f0;
  font-weight:700;
  text-align:left;
}

#page-content.rule .server-table tbody td{
  background:#ffffff;
}


#page-content.law #mv h2 {
        font-size: 24px;
        
    }

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

旧テンプレ調整 水質調査

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



#page-content.inspect .txt{
 margin: 0 0 30px;
}



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

旧テンプレ調整

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


#wrap{
	width: 100%;
       padding: 0 20px;
}


#order_area input,
#order_area textarea,
#order_area select {
    width: 90% !important;
	padding: 5px;
	margin: 10px;
	
}