@charset "utf-8";
@import url("../../../common/css/style.css");
@import url("../../../common/css/page.css");
/* ページセット
───────────────────────────────────*/

#contact_fix {
	display: none;
}

#fixed_btn1{
  position: fixed;
  border:2px #fff solid;
  background: url(../img/fixed_btn_bg.jpg) repeat top left;
  /*background-size: 122px 20px;*/
  padding:15px;
  box-sizing:border-box;
  width: 100%;
  box-sizing:border-box;
  display: block;
  bottom: 0;
  z-index: 100;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:bold;
  font-size:1.8rem;
}

#fixed_btn1::after{
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/fixed_btn_arw.svg) no-repeat center center;
  background-size: 16px 16px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -7px;
}


h2.contents_title{
	font-size:2.4rem;
}

h2.ajst_fnt{
	font-size:1.8rem!important;	
}

/* header
─────────*/

#campaign_info {
	position: relative;
}
#campaign_info > div {
	padding: 15px 0 0 0;
	background: url(../img/back_footer.jpg) no-repeat bottom center;
}
#campaign_page {
	margin-top: 20px;
	background: url("../img/back_main_img.jpg") no-repeat center top;
}
#campaign {
	position: relative;
}
#campaign_set {
	padding: 50px 30px 0px 30px;
}
#campaign_set > div {
	width: 100%;
	text-align: center;
}
#btn_buy {
	display: none;
}
#campaign_set h2 {
	margin-bottom: 40px;
}
#campaign_set h2 > img {
	width: 100%;
	max-width: 546px;
}
#campaign_set > div > img {
	width: 90%;
	max-width: 334px;
}
#campaign_set > div img#pc {
	display: none;
}


/* top comment 
─────────*/

#top_comment {
	text-align: left;
	padding: 40px 10px 40px 10px;
	color: #0397ee;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.6;
}
#top_comment br {
	display: none;
}


/* navigation
─────────*/
	
#nav3 {
	width: 100%;
	margin-bottom:40px;
	padding:0 15px;
	box-sizing: border-box;
}
#nav3 ul {
	display: flex;
}
#nav3 ul li:first-child {
}
#nav3 ul li {
	display: block;
	box-sizing: border-box;
	padding:0 5px;
}

#nav3 ul li img{
	width:100%;
}


/* needs
─────────*/
	
#needs {
	padding:40px 10px 15px 10px;
	margin: 0 auto 55px auto;
}
#needs h2 {
	margin-bottom: 40px;
}
#needs p {
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.6;
}


/* seen & needs
─────────*/
	
#s_outline {
	background: #e9fbff;
	position: relative;
	margin-bottom: 34px;
	padding:10px;
}
#s_outline::before {
	content: "";
	background: url("../img/bg_wave1.jpg") repeat-x left top;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	top: -34px;
	left: 0;
}
#s_outline::after {
	content: "";
	background: url("../img/bg_wave2.jpg") repeat-x left bottom;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	bottom: -34px;
	left: 0;
}
#s_outline h3 {
	font-size: 1.8rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 30px;
	padding-left: 26px;
	position: relative;
}
#s_outline h3:before {
	content: "";
	width: 20px;
	height: 28px;
	display: inline-block;
	background: url(../img/h3_icon.png) no-repeat;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -16px;
}


/* seen2
─────────*/
	
#s_seen {
	margin-bottom:40px;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 5px;
}
#s_seen dl {
	margin-bottom: 15px;
	font-size: 1.6rem;
}
#s_seen dl dt {
	text-align: center;
	margin-bottom: 15px;
	width: 130px;
	box-sizing: border-box;
}
#s_seen dl dt span {
	display: inline-block;
	background: #0397ee;
	color: #fff;
	width: 100%;
	font-size: 1.8rem;
	text-align: center;
	border-radius: 1em;
	box-sizing: border-box;
}
#s_seen dl dd {
	font-size: 1.6rem;
	margin-bottom: 15px;
	box-sizing: border-box;
}
#s_seen > p {
	font-size: 1.6rem;
}

#s_seen > img{
	width:100%;
	display:block;
	margin:35px auto 0 auto;
}

/* needs2
─────────*/
	
#s_needs {
	padding: 20px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 5px;
	box-sizing: border-box;
}
#s_needs p {
	font-size: 1.6rem;
	margin-bottom: 1em;
}

#s_needs > img{
	width:100%;
	display:block;
	margin:35px auto 0 auto;
}

/* rollingStock
─────────*/
	
#rolling_stock {
	padding: 80px 20px;
	margin: 0 auto;
	box-sizing: border-box;
}
#rolling_stock div {
	background: #fff;
	box-sizing: border-box;
	margin-bottom: 1em;
}
#rolling_stock div > img {
	width:100%;
	display:block;
	margin-bottom:60px;
}

#rolling_stock div p {
	line-height: 2;
	font-size: 1.6rem;
}

#rolling_stock h2 {
	margin-bottom: 40px;
}
#rolling_stock > p {
	text-align: left;
	font-size: 1.6rem;
}
#rolling_stock > p a {
	color: #0397ee;
}

/* eco server
─────────*/
	
#ecoserv {
	background: #e9fbff;
	padding: 6px 10px 10px 10px;
	position: relative;
	margin-bottom: 60px;
}
#ecoserv div {
	margin: 0 auto;
}
#ecoserv div > img {
	display:block;
	width:100%;
	margin-bottom:40px;
}
#ecoserv::before {
	content: "";
	background: url("../img/bg_wave1.jpg") repeat-x left top;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	top: -34px;
	left: 0;s
}
#ecoserv::after {
	content: "";
	background: url("../img/bg_wave2.jpg") repeat-x left bottom;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	bottom: -34px;
	left: 0;
}
#ecoserv h2 {
	margin-bottom: 40px;
}
#ecoserv h2 + p {
	text-align:left;
	margin-bottom: 40px;
	font-size: 1.6rem;
}
#ecoserv dl dt {
	font-size: 1.8rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 0.5em;
	padding-left: 26px;
	position: relative;
}
#ecoserv dl dt:before {
	content: "";
	width: 20px;
	height: 28px;
	display: inline-block;
	background: url(../img/h3_icon.png) no-repeat;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -16px;
}
#ecoserv dl dd {
	font-size: 1.6rem;
	margin-bottom: 1em;
	line-height: 1.9;
}


/* BUY
─────────*/
  
#buy {
	padding:0 10px;
}
#buy h2 {
	margin-bottom: 40px;
}
#buy ul {
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#buy ul li {
	border: 1px #ccc solid;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	margin-bottom: 40px;
	background: #fff;
}
#buy ul li > div {
	padding-bottom: 55px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

#buy ul li > img {
	display:block;
	width:100%;
	max-width:195px;
	height:auto;
	margin:0 auto 20px auto;
}

#buy ul li > div h3 {
	font-size: 1.8rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 15px;
}

#buy ul li > div p {
	font-size: 1.6rem;
	line-height:1.8;
}

#buy ul li > div a {
	display: block;
	width: 100%;
	color: #fff;
	background: #0397ee;
	padding: 10px 0 10px 0;
	text-align: center;
	text-decoration: none;
	position: absolute;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	font-size:1.6rem;
}

/* 定期購入扉
─────────*/

#teiki_list {
	margin-bottom:40px;
}
#teiki_list > div {
	padding: 15px 15px 30px 15px;
}
#teiki_list ul {
}
#teiki_list ul li {
	margin-top: 20px;
}
#teiki_list ul li img {
	width: 100%;
}
#teiki_list ul li.mode_pc {
	display: none;
}


/* button eco server
─────────*/

#btn_ecoserv {
	padding-bottom: 80px;
}

#btn_ecoserv > .mode_pc {
	display: none;
}
#btn_ecoserv > .mode_sp {
	display: block;
	width:100%;
	height:auto;
}

#btn_ecoserv > .mode_sp > img{
	width:100%;
	height:auto;	
}

@media only screen and (min-width: 640px) {
	
/* comment
─────────*/
	
#top_comment {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2;
	text-align: left;
	display:block;
}

/* buy
─────────*/
  
#buy {
	padding:10px;
	margin:0;
	box-sizing:border-box;
}
#buy h2 {
	margin-bottom: 60px;
}
#buy ul {
	box-sizing:border-box;

}
#buy ul li {
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border: 1px #ccc solid;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	margin-bottom: 40px;
	background: #fff;
}

#buy ul li > img {
	display:block;
	width:50%;
	max-width:190px;
	height:auto;
}

#buy ul li > div {
	margin-left: 30px;
	padding-bottom: 45px;
	width: 50%;
	box-sizing: border-box;
	position: relative;
}
#buy ul li > div h3 {
	font-size: 1.8rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 15px;
}
#buy ul li > div a {
	display: block;
	width: 100%;
	color: #fff;
	background: #0397ee;
	padding: 6px;
	text-align: center;
	text-decoration: none;
	position: absolute;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
}


}

@media only screen and (min-width: 1040px) {
	
h2.contents_title{
	font-size:4rem;
}

#fixed_btn1{
	display:none;	
}

/* header
─────────*/
	
#campaign_info > div {
	padding: 50px 0 0 0;
}
#campaign_page {
	margin-top: 55px;
	background: url("../img/back_main_img.jpg") no-repeat center top;
	padding: 0;
}
#campaign_set {
}
#campaign_set > div {
	width: 1040px;
	margin: 0 auto;
	height: 480px;
	position: relative;
	text-align: left;
}

#btn_buy {
	display: inherit;
	position:relative;
	margin-top: 30px;
	margin-left: 1070px;
	z-index: 1000;
}

.fixed {
    position: fixed !important;
    top: 110px;
	bottom: inherit !important;
    z-index: 10000;
	opacity:1;
	-moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.fixed_op{
	opacity:0;
	visibility:hidden;
	-moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;	
}

#campaign_set > div h2 {
	display: inherit;
	position: relative;
	top: 150px;
}
#campaign_set > div h2 {
	display: inherit;
	position: relative;
	top: 160px;
}
#campaign_set > div #top_bottle {
	position: absolute;
	right: 0;
	top: 40px;
}

/* top comment
─────────*/
	
#top_comment {
	padding: 0 0 90px 0;
	color: #0397ee;
	font-size: 2rem;
	font-weight: bold;
	line-height: 2;
	text-align: center;
}
#top_comment br {
	display: inline;
}

/* navigation
─────────*/
	
#nav3 {
	width: 1040px;
	margin: 0 auto 100px auto;
	box-sizing: border-box;
}
#nav3 ul {
	display: flex;
}
#nav3 ul li:first-child {
	padding-left: 65px;
}
#nav3 ul li {
	display: block;
	width: 260px;
	flex: 1;
	paddingr-right: 65px;
	box-sizing: border-box;
}

#nav3 ul li img{
	width:260px;
}

/* needs
─────────*/
	
#needs {
	width: 1040px;
	padding-top: 60px;
	margin: 0 auto 55px auto;
}
#needs h2 {
	margin-bottom: 60px;
}
#needs p {
	text-align: center;
	font-size: 1.6rem;
	line-height: 2;
}

/* seen & needs
─────────*/
	
#s_outline {
	background: #e9fbff;
	padding: 80px 0 80px 0;
	position: relative;
	margin-bottom: 34px;
}
#s_outline::before {
	content: "";
	background: url("../img/bg_wave1.jpg") repeat-x left top;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	top: -34px;
	left: 0;
}
#s_outline::after {
	content: "";
	background: url("../img/bg_wave2.jpg") repeat-x left bottom;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	bottom: -34px;
	left: 0;
}
#s_outline h3 {
	font-size: 2.2rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 30px;
	padding-left: 26px;
	position: relative;
}
#s_outline h3:before {
	content: "";
	width: 20px;
	height: 28px;
	display: inline-block;
	background: url(../img/h3_icon.png) no-repeat;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -16px;
}


/* seen2
─────────*/
	
#s_seen {
	width: 1040px;
	min-height: 489px;
	background: #fff url(../img/seen_img.jpg) no-repeat;
	background-position: right 40px top 15px;
	margin: 0 auto 55px auto;
	padding: 60px 40px 40px 40px;
	box-sizing: border-box;
	border-radius: 5px;
}
#s_seen dl {
	width: 490px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
	font-size: 1.6rem;
}
#s_seen dl dt {
	text-align: center;
	margin-bottom: 10px;
	width: 130px;
	box-sizing: border-box;
}
#s_seen dl dt span {
	display: inline-block;
	background: #0397ee;
	color: #fff;
	width: 100%;
	font-size: 1.8rem;
	text-align: center;
	border-radius: 1em;
	margin-bottom: 10px;
	box-sizing: border-box;
}
#s_seen dl dd {
	width: 360px;
	font-size: 1.6rem;
	margin-bottom: 10px;
	padding-left: 25px;
	box-sizing: border-box;
}
#s_seen > p {
	width: 490px;
	font-size: 1.6rem;
}

#s_seen > img{
	display:none;	
}


/* needs2
─────────*/
	
#s_needs {
	width: 1040px;
	min-height: 466px;
	margin: 0 auto;
	padding: 120px 40px 40px 530px;
	box-sizing: border-box;
	background: #fff url(../img/needwater_img.jpg) no-repeat;
	background-position: top 40px left 40px;
	border-radius: 5px;
	box-sizing: border-box;
}
#s_needs p {
	font-size: 1.6rem;
	margin-bottom: 1em;
}
#s_needs > img{
	display:none;
}


/* rollingStock
─────────*/
	
#rolling_stock {
	width: 1040px;
	padding: 80px 0 80px 0;
	margin: 0 auto;
	box-sizing: border-box;
}
#rolling_stock div {
	min-height: 498px;
	background: #fff url(../img/rolling_stock_img.jpg) no-repeat;
	background-position: top 0 right 0;
	box-sizing: border-box;
	margin-bottom: 80px;
}
#rolling_stock div > img {
	display:none;
}
#rolling_stock div > p {
	width: 460px;
	line-height: 2;
	padding-top: 200px;
	font-size: 1.6rem;
}
#rolling_stock h2 {
	margin-bottom: 60px;
}
#rolling_stock > p {
	text-align: center;
	font-size: 1.6rem;
}
#rolling_stock > p a {
	color: #0397ee;
}


/* eco server
─────────*/
	
#ecoserv {
	background: #e9fbff;
	padding: 40px 0 80px 0;
	position: relative;
	margin-bottom: 34px;
}
#ecoserv div {
	width: 1040px;
	margin: 0 auto;
	box-sizing:border-box;
}
#ecoserv div > div {
	padding-left: 550px;
	min-height: 423px;
	background: url("../img/ecoserver_img.png") no-repeat;
}
#ecoserv div > img {
	display:none;
}

#ecoserv::before {
	content: "";
	background: url("../img/bg_wave1.jpg") repeat-x left top;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	top: -34px;
	left: 0;
}
#ecoserv::after {
	content: "";
	background: url("../img/bg_wave2.jpg") repeat-x left bottom;
	background-size: 2000px 34px;
	width: 100%;
	height: 34px;
	display: block;
	position: absolute;
	bottom: -34px;
	left: 0;
}
#ecoserv h2 {
	margin-bottom: 60px;
}
#ecoserv h2 + p {
	text-align: center;
	margin-bottom: 60px;
	font-size: 1.6rem;
}
#ecoserv dl dt {
	font-size: 2.2rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 10px;
	padding-left: 26px;
	position: relative;
}
#ecoserv dl dt:before {
	content: "";
	width: 20px;
	height: 28px;
	display: inline-block;
	background: url(../img/h3_icon.png) no-repeat;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -16px;
}
#ecoserv dl dd {
	font-size: 1.6rem;
	margin-bottom: 50px;
	line-height: 1.9;
}

/* 定期購入
─────────*/

#teiki_list {
}
#teiki_list > div {
	padding: 50px 0 55px 0;
	width: 1040px;
	min-width: 1040px;
	margin: 0 auto;
}
#teiki_list ul {
	margin: 0 25px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#teiki_list ul li {
	margin-top: 45px;
	width: 450px;
}
#teiki_list ul li a {
	-webkit-transition: box-shadow 300ms 0s ease;
	-o-transition: box-shadow 300ms 0s ease;
	transition: box-shadow 300ms 0s ease;
	display: block;
}
#teiki_list ul li a:hover {
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
}
#teiki_list ul li img {
	width: 100%;
}
#teiki_list ul li.mode_pc {
	display: block;
}
#teiki_list ul li.mode_sp {
	display: none;
}

/* BUY
─────────*/
  
#buy {
	width: 1040px;
	margin: 0 auto 0 auto;
}
#buy h2 {
	margin-bottom: 60px;
}
#buy ul {
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#buy ul li {
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border: 1px #ccc solid;
	border-radius: 5px;
	box-sizing: border-box;
	width: 500px;
	padding: 15px;
	margin-bottom: 60px;
	background: #fff;
}

#buy ul li > img {
	display:block;
	width:auto;
	height:auto;
}

#buy ul li > div {
	margin-left: 30px;
	padding-bottom: 45px;
	width: 50%;
	box-sizing: border-box;
	position: relative;
}
#buy ul li > div h3 {
	font-size: 2rem;
	font-weight: bold;
	color: #0397ee;
	margin-bottom: 15px;
}
#buy ul li > div a {
	display: block;
	width: 100%;
	color: #fff;
	background: #0397ee;
	padding: 6px;
	text-align: center;
	text-decoration: none;
	position: absolute;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
}


/* btn ecoserver 
─────────*/

#btn_ecoserv {
	padding-bottom: 80px;
}
#btn_ecoserv > .mode_pc {
	margin-left: -3px;
	display: block;
}
#btn_ecoserv > .mode_sp {
	display:none;
}

}