@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");
@import url("//fonts.googleapis.com/earlyaccess/notosansjapanese.css");

/*全体の設定
---------------------------------------------------------------------------*/
body{
	max-width: 100%;
	margin:0;
	padding:0;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Helvetica,Arial,sans-serif;
	font-weight:400;
	line-height:1.4;
	font-size: 16px;
	color: #000;
	background: #FFF;
	letter-spacing:.05em;
	word-wrap: break-word;
}

@media screen and (max-width: 568px) {
body{
  letter-spacing:0em;
}
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,section{
	margin: 0px;
	padding: 0px;
	display: block;
}
ul{
	list-style-type: none;
}

input,textarea,select {
	font-size: 1em;
}

img{
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}

p{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	list-style-type: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul{
	list-style-type: none;
}

li {
	list-style-type: none;
}


img{
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}

p{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	list-style-type: none;
}

input,textarea,select {
	font-size: 1em;
}

.clearfix:after {
	display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}

a {
	outline:none;
}

.overimg:hover img {
	filter:alpha (opacity=70);
	-moz-opacity:0.80;
	opacity:0.80;
}

/* .line
-------------------------------------------------- */
hr {
	display		: none;
	}
	
.clr {
	height		: 0;
	clear		: both;
	}

/* wrapper
--------------------------------------------------*/
#wrapper {
	width: 100%;
	padding: 0 auto 1%;
	line-height:1.6;
	min-height: 60vh;
}

@media only screen and  (max-width: 568px) {
#wrapper {
	min-height: initial;
}

.mt-50 {
	margin-top:60px;
}
}

/* .container
--------------------------------------------------*/
#container{
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
  width:1200px;
  box-sizing: border-box;
  }

@media screen and (max-width: 1280px) {
#container {
  width:100%;
  padding: 0 8%;
}
}

@media screen and (max-width: 800px) {
#container {
  padding: 0 3%;
}
}

@media screen and (max-width: 568px) {
#container {
  padding: 0 2%;
}
}


/* p_navi
---------------------------------------------------------------------------*/
.p_navi{
	width: 100%;
	top:0;
	left:0;
	text-align: right;
	box-sizing: border-box;
	font-size :0.7em;
	letter-spacing	: 0.05em;
	font-weight:400;
	padding:10px 60px 0 0;
	color: #FFF;
	position:absolute;
	}
	
.p_navi a {
	color: #FFF;
	font-weight:400;
	text-decoration: none;
	}

.p_navi a:hover {  
	color: #FFF;
	text-decoration: underline;
	}

@media screen and (max-width: 800px) {
  .p_navi{display:none;}
}

/* .campaign_box
--------------------------------------------------*/
.campaign_box {
  float: left;
  width:100%;
}

.campaign_box .group_wari {
  float: left;
  width:46%;
  box-sizing: border-box;
  margin:1% 2%;
  padding:1.5% 0 1%;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  -moz-box-shadow: 0 0 5px #C19194;
  -webkit-box-shadow: 0 0 5px #C19194;
  box-shadow: 0 0 5px #C19194;
}

@media screen and (max-width: 800px) {
.campaign_box .group_wari {
  width:47%;
  margin:1% 1% 1% 2%;
}
}

@media screen and (max-width: 650px) {
.campaign_box .group_wari {
  width:94%;
  margin:1% 3% 2%;
}
}

@media screen and (max-width: 568px) {
.campaign_box .group_wari {
  width:96%;
  margin:1% 2% 3%;
}
}

.campaign_box .fami_wari {
  float: left;
  width:46%;
  box-sizing: border-box;
  margin:1% 2%;
  padding:1.5% 0 1.2%;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  -moz-box-shadow: 0 0 5px #C19194;
  -webkit-box-shadow: 0 0 5px #C19194;
  box-shadow: 0 0 5px #C19194;
}

@media screen and (max-width: 800px) {
.campaign_box .fami_wari {
  width:47%;
  margin:1% 2% 1% 1%;
}
}

@media screen and (max-width: 650px) {
.campaign_box .fami_wari {
  width:94%;
  margin:1% 3% 3%;
}
}

@media screen and (max-width: 568px) {
.campaign_box .fami_wari {
  width:96%;
  margin:1% 2% 3%;
}
}

.campaign_box .camp_ct{
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  text-align: center;
}

@media screen and (max-width: 800px) {
.campaign_box .camp_ct{
  font-size:0.9em;
  letter-spacing:0em;
}
}

@media screen and (max-width: 650px) {
.campaign_box .camp_ct{
  font-size:1em;
}
}

.campaign_box .camp_nam{
  font-size:2.5em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:800;
  text-align: center;
  line-height:1.2;
  padding:1% 0 2%;
  letter-spacing:0.05em;
}

@media screen and (max-width: 800px) {
.campaign_box .camp_nam{
  font-size:2.2em;
  letter-spacing:0em;
  padding:0 0 5px;
}
}

.campaign_box .camp_nam small{
  font-size:0.7em;
}

.campaign_box .camp_dy{
  display:block;
  font-size:14px;
  line-height:1.4;
  color:#FFF;
  text-align: center;
  padding:3px 5px 2px;
}

@media screen and (max-width: 800px) {
.campaign_box .camp_dy{
  font-size:13px;
  padding:3px 3px 2px;
  letter-spacing:0em;
}
}

.campaign_box .spring{
  background-image: url("../images/bg_spring.gif") ;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #FFF3F8;
  background-size: 100% auto ;
}

.campaign_box .summer{
  background-image: url("../images/bg_summer.gif") ;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #FFF7DA;
  background-size: 100% auto ;
}

.campaign_box .summer2{
  background-image: url("../images/bg_summer2.gif") ;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #EDFAFE;
  background-size: 100% auto ;
}

.campaign_box .autum{
  background-image: url("../images/bg_autum.gif") ;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #FEF6E6;
  background-size: 100% auto ;
}

.campaign_box .winter{
  background-image: url("../images/bg_winter.gif") ;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #EDFAFE;
  background-size: 100% auto ;
}

.campaign_box .ore{
  background:#BC5000;
}

.campaign_box .gre{
  background:#105715;
}


.campaign_box .ore-tx{
  color:#ED6C11;
  text-shadow:1px 1px 1px #FBD89C;
}

.campaign_box .ore-tx2{
  color:#7F4012;
  text-shadow:0px 0px 5px #FBD89C;
}

.campaign_box .gre-tx{
  color:#105715;
  text-shadow:1px 1px 1px #CDFB9C;
}

.campaign_box .gre-tx2{
  color:#43A74A;
  text-shadow:0px 0px 5px #CDFB9C;
}

.campaign_box .bg_nvy{
  background:#ECF1F2;
}

.campaign_box .nvy{
  background:#1D3859;
}

.campaign_box .nvy-tx{
  color:#276193;
  text-shadow:1px 1px 1px #F1FAFD;
}

.campaign_box .nvy-tx2{
  color:#1B8685;
  text-shadow:0px 0px 5px #F1FAFD;
}


.campaign_box .pin{
  background:#D55166;
}

.campaign_box .pin-tx{
  color:#C82943;
}

.campaign_box .pin-tx2{
  color:#EF657B;
}


.camp_syousai {
  width:100%;
  box-sizing: border-box;
  padding:2% 3%;
}

@media screen and (max-width: 800px) {
.camp_syousai {
  padding:2%;
}
}

.camp_syousai .camp_tx{
  font-size:1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  text-align: center;
  margin-bottom:5px;
  padding:0 1%;
}

@media screen and (max-width: 800px) {
.camp_syousai .camp_tx{
  letter-spacing:0em;
  font-size:0.95em;
  margin-bottom:0;
}
}

@media screen and (max-width: 650px) {
.camp_syousai .camp_tx{
  font-size:1em;
  line-height:1.4;
}
}

.camp_syousai li{
  padding:2% 1%;
  text-align: center;
  border-bottom:1px dotted #B0B0B0;
}
.camp_syousai dl{
  width:100%;
  text-align: center;
}

.camp_syousai dt{
  display:inline-block;
  font-size:14px;
  font-weight:bold;
  width:60%;
  vertical-align:middle;
  line-height:1.3;
  letter-spacing:0em;
}

@media screen and (max-width: 800px) {
.camp_syousai dt{
  font-size:13px;
}
}

@media screen and (max-width: 568px) {
.camp_syousai dt{
  font-size:13px;
  line-height:1.4;
}
}

.camp_syousai dd{
  display:inline-block;
  font-size:2em;
  font-weight:bold;
  padding:0 3%;
  line-height:1.3;
  width:40%;
  vertical-align:middle;
  box-sizing: border-box;
  color:#DC1000;
}

@media screen and (max-width: 800px) {
.camp_syousai dd{
  padding:0 1.5%;
  letter-spacing:0em;
}
}

.camp_syousai dd span{
  font-family: Roboto,sans-serif;
  letter-spacing:0em;
  font-weight:600;
  font-size:1em;
}

@media screen and (max-width: 800px) {
.camp_syousai dd span{
  font-size:0.9em;
}
}

.net_wari{
  width:100%;
  margin:4% auto 0;
}

@media screen and (max-width: 800px) {
.net_wari{
  width:96%;
  margin:3% 2% 1%;
}
}

.net_wari dl{
  width:100%;
  text-align: center;
}

.net_wari dt{
  display:inline-block;
  font-size:14px;
  font-weight:bold;
  padding:2% 3%;
  vertical-align:middle;
  line-height:1.3;
  background:#D61F46;
  color:#FFF;
}

@media screen and (max-width: 800px) {
.net_wari dt{
  display:block;
}
}

.net_wari dd{
  display:inline-block;
  font-weight:bold;
  padding:2% 2%;
  line-height:1.3;
  vertical-align:middle;
  background:#FFF;
  font-size:14px;
}

.net_wari dd span{
  color:#D61F46;
  font-weight:bold;
}

@media screen and (max-width: 800px) {
.net_wari dd{
  display:block;
  letter-spacing:0em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.net_wari dd{
  letter-spacing:0em;
  padding:2% 3%;
}
}

.sv_wari{
  width:100%;
  margin:4% auto 0;
}

@media screen and (max-width: 800px) {
.sv_wari{
  width:96%;
  margin:3% 2% 1%;
}
}

.sv_wari dl{
  width:100%;
  text-align: center;
}

.sv_wari dt{
  display:inline-block;
  font-size:14px;
  font-weight:bold;
  padding:2% 3%;
  vertical-align:middle;
  line-height:1.3;
  background:#20B4CA;
  color:#FFF;
}

@media screen and (max-width: 800px) {
.sv_wari dt{
  display:block;
}
}

.sv_wari dd{
  display:inline-block;
  font-weight:bold;
  padding:2% 2%;
  line-height:1.3;
  vertical-align:middle;
  background:#E6FCFF;
  font-size:14px;
}

.sv_wari dd span{
  color:#D61F46;
  font-weight:bold;
}

@media screen and (max-width: 800px) {
.sv_wari dd{
  display:block;
  letter-spacing:0em;
  line-height:1.4;
}
}

@media screen and (max-width: 568px) {
.sv_wari dd{
  letter-spacing:0em;
  padding:2% 3%;
}
}

/* 嘉手納キャンペーン */
.kadena-camp{
  margin:0 auto 5%;
  width:90%;
  max-width:600px;
  text-align: center;
}

.kadena-camp img{
  width:100%;
  height:auto;
}

.kadena-camp a:hover {
	opacity: 0.7;
}

/* footer
--------------------------------------------------*/
footer{
  float:left;
  background:#018652;
  box-sizing: border-box;
  width:100%;
  margin:0 auto;
  padding:2.5% 3% 0.5%;
}

@media only screen and  (max-width: 800px) {
footer {
padding:4% 2% 50px;
}
}

.footerArea {
	width:100%;
	max-width:950px;
	margin: 0 auto 0;
}

.ftr_ttl{
	margin:0 auto;
	text-align: center;
	font-size:0.9em;
	color:#FFF;
}

.ftr_ttl img{
	width:180px;
	height:auto;
	margin-bottom:5px;
}

@media only screen and  (max-width: 568px) {
.ftr_ttl{
	letter-spacing:0em;
}
}

.ft_tx{
	margin:3% auto 0;
	text-align: center;
	color:#FFF;
	line-height:2;
}

.ft_tx strong{
	font-size:1.6em;
	font-family: Roboto,sans-serif;
	font-weight:500;
}

@media only screen and  (max-width: 568px) {
.ft_tx{
	line-height:1.8;
}

.ft_tx strong{
	font-size:1.4em;
}
}

.ft_tx a {
	text-decoration: none;
	color:#FFF;
}
.ft_tx a:hover {
	color:#FFF;
	text-decoration:none;
}


.ft_tx2{
	margin:0 auto 2%;
	text-align: center;
	color:#FFF;
	font-family: Roboto,sans-serif;
	font-weight:400;
}

.ft_tx2 a {
	text-decoration: none;
	color:#FFF;
}
.ft_tx2 a:hover {
	color:#FFF;
	text-decoration:underline;
}

footer .copy{
	text-align: center;
	font-size:12px;
	margin-top:2%;
	color: #FFF;
}

@media only screen and  (max-width: 568px) {
footer .copy{
	font-size:11px;
	margin-top:4%;
}
}

footer .copy a {
	text-decoration: none;
	color: #FFF;
}
footer .copy a:hover {
	color: #FFF;
}

.f-menu  {
	margin:2% auto;
	text-align: center;
}

@media only screen and  (max-width: 800px) {
.f-menu  {
	display:none;
}
}

.f-menu>li{font-size:0.8em;display:inline-block;padding-right:15px;margin:5px 5px 5px 0;color:#ccc;border-right:1px solid #8BAA9E;}

@media only screen and  (max-width: 568px) {
.f-menu>li{padding-right:10px;margin:5px 5px 5px 0;}
}

.f-menu a {
	text-decoration: none;
	color: #FFF;
}
.f-menu a:hover {
	opacity: 0.6;
}

.f_icon  {
	margin:0 auto;
	text-align: center;
	width:100%;
	box-sizing: border-box;
	padding:0 2%;
}

.f_icon li{
	width:35px;
	display:inline-block;
	margin:2px;
}

.f_icon li img{
	width:100%;
	height:auto;
}

.f_icon a:hover { opacity: 0.8; }

/* #side_navi
--------------------------------------------------------- */
#side_navi{
width:51px;
padding:7px 0 2px;
height:auto;
position:fixed;
top:50%;
top:60%;
right:0;
margin-top:-135px;
background: rgba(81, 53, 4, 0.8);
z-index: 110;
}

@media screen and (max-width: 800px) {
#side_navi{
width:40px;
padding:5px 0;
}
}

@media screen and (max-width: 568px) {
#side_navi{
display:none;
}
}

#side_navi li:hover {
	filter:alpha(opacity=80);  /* for IE */
	-moz-opacity: 0.8;  /* for Firefox */
	opacity: 0.8;  /* for Safari or Opera */
}

#side_navi li{
width:100%;
height:auto;
padding:2% 8px;
position:relative;
margin-bottom:5px;
box-sizing: border-box;
}

@media screen and (max-width: 800px) {
#side_navi li{
padding:2% 5px;
margin-bottom:2px;
}
}

#side_navi li img{
width:100%;
height:auto;
}

/* #side_line
--------------------------------------------------------- */
#side_line{
width:100px;
height:auto;
position:fixed;
bottom:50%;
left:0;
margin-bottom:-100px;
background: #00B900;
z-index: 110;
padding:10px;
box-sizing: border-box;
text-align: center;
}

@media screen and (max-width: 800px) {
#side_line{
bottom:0;
margin-bottom:0px;
width:auto;
padding:5px 8px;
}
}

@media screen and (max-width: 568px) {
#side_line{
padding:3px 6px;
}
}

.line_lg{
width:60%;
margin:0 auto 5px;
}

@media screen and (max-width: 800px) {
.line_lg{
width:30px;
display:inline-block;
vertical-align:middle;
margin:0;
}
}

.line_txt{
width:100%;
margin:0 auto;
color:#FFF;
font-size:12px;
}

@media screen and (max-width: 800px) {
.line_txt{
width:auto;
display:inline-block;
margin:0 5px;
vertical-align:middle;
}
}

.line_txt img{
margin-bottom:5px;
}

.line_qr{
width:100%;
margin:7px auto 0;
}

#side_line img{
width:100%;
height:auto;
}

.lnbt{
display:none;
}

@media screen and (max-width: 800px) {
.line_qr{
display:none;
}

.lnbt{
	font-size:13px;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	display:inline-block;
	vertical-align:middle;
}
.lnbt a{
	color:#FFF;
	display:inline-block;
	background-color:#319C30;
	padding:3px 10px;
	webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
	text-decoration: none;
}
.lnbt a:hover{
	color:#FFF;
	background-color:#006A00;
}
}

/* #spt_navi
--------------------------------------------------------- */
#spt_navi{display:none;}

@media screen and (max-width: 568px) {
#spt_navi{
width:100%;
height:28px;
position:fixed;
top:0;
left:0;
background: #07492F;
z-index: 110;
padding:0;
margin:0;
display:block;
overflow: hidden;
}
}

#spt_navi ul {
	width:100%;
	height:auto;
	display:block;
	border-collapse: separate;
	border-spacing: 0 0;
	padding:0 0;
}

#spt_navi ul li {
	width:25%;
	height:28px;
	display:inline-block;
	text-align:center;
	padding:0;
	border-right:0.05em solid #018652;
	vertical-align:middle;
	box-sizing: border-box;
}

#spt_navi ul li:last-child {
	width:25%;
	border-right: none;
	box-sizing: border-box;
	display:inline-block;
}

#spt_navi li img{
width:auto;
height:16px;
margin:0 auto;
padding:0;
}
#spt_navi li a { display:block;}
#spt_navi li a:hover { opacity: 0.8; }

/* page_top
========================================================================== */
#page_top {
position: fixed;
bottom: 1.5%;
right: 1.5%;
z-index:100;
width:50px;
}

@media screen and (max-width: 568px) {
#page_top {
width:40px;
bottom: 5px;
}
}

#page_top img{
width:100%;
height:auto;
}

.pcHide{display: none;}

/*---------------------------------タブレット---------------------------------------*/
@media screen and (max-width: 800px) {
.pcHide{display: block;}
.tbHide{display: none;}
}

/*---------------------------------スマホ---------------------------------------*/
@media screen and (max-width: 568px) {
.pcHide{display: block;}
.tbHide{display: block;}
.spHide{display: none;}
}

/* taisaku15
--------------------------------------- */
.taisaku15{
	width:100%;
	max-width:600px;
	box-sizing: border-box;
	position: relative;
	margin: 1% auto 3%;
	position: relative;
	-moz-box-shadow: 0 1px 3px #C2C2C2;
	-webkit-box-shadow: 0 1px 3px #C2C2C2;
	box-shadow: 0 1px 3px #C2C2C2;
	background:#FFF0FC;
	-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
	}

@media screen and (max-width: 568px) {
.taisaku15{
	margin: 15px auto;
	width:96%;
	}
}

.taisaku15 .p-photo{
	width:45%;
	height: auto;
	display:inline-block;
	}

.taisaku15 .p-text{
	width:55%;
	display:inline-block;
	padding:5px 10px 0 3%;
	box-sizing: border-box;
	vertical-align: top;
	}

@media screen and (max-width: 800px) {
.taisaku15 .p-photo{
	width:50%;
	}

.taisaku15 .p-text{
	width:50%;
	}
}

@media screen and (max-width: 568px) {
.taisaku15 .p-photo{
	width:100%;
	margin:0;
	}

.taisaku15 .p-text{
	width:100%;
	padding:0 5% 3%;
	}
}

.taisaku15 img{
	width:100%;
	height: auto;
	-webkit-border-bottom-left-radius:6px;-moz-border-bottom-left-radius:6px;border-bottom-left-radius:6px;
	}


@media screen and (max-width: 568px) {
.taisaku15 img{
	margin:0;
	-webkit-border-bottom-left-radius:0px;-moz-border-bottom-left-radius:0px;border-bottom-left-radius:0px;
	}
}

.taisaku15 .rec_ttl {
	font-size:1.4em;
	font-weight:500;
	line-height:1.5;
	color:#F0FF00;
	font-family: 'Noto Sans Japanese', sans-serif;
	padding:5px;
	display:block;
	text-align: center;
	-webkit-border-top-left-radius:6px;-moz-border-top-left-radius:6px;border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;-moz-border-top-right-radius:6px;border-top-right-radius:6px;
}

.taisaku15 .corona {
  animation: coronaAnime 1.5s infinite alternate;
}
@keyframes coronaAnime{
   0% { background-color:#E01570; }
 100% { background-color:#781564; }
}

@media screen and (max-width: 568px) {
.taisaku15 .rec_ttl {
	font-size:1.2em;
	padding:7px 5px;
	line-height:1.4;
}
}

.taisaku15 .cg_text {
	margin-top:5px;
	color:#000;
	font-size:15px;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight:400;
	line-height:1.7;
}

@media screen and (max-width: 568px) {
.taisaku15 .cg_text {
	margin-top:5px;
}
}

.ta15_bt{
	font-size:13px;
	letter-spacing	: 0.05em;
	color:#FFF;
	margin-top:15px;
	text-align: center;	
}

@media only screen and  (max-width: 800px) {
.ta15_bt{
	margin-top:5px;
	font-size:12px;
}
}

.ta15_bt a{display:inline-block;color:#FFF;text-decoration:none;background-color:#781564;padding:6px 8px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.ta15_bt a:hover{color:#FFF;text-decoration:none;background-color:#E01570;}

/* 対策シール
--------------------------------------------------*/
#side_seel{
width:120px;
height:auto;
position:fixed;
top:120px;
right:0;
background: #FFF;
z-index: 110;
padding:10px;
box-sizing: border-box;
}

@media only screen and  (max-width: 800px) {
#side_seel{width:100px;top:55px;}
}

@media only screen and  (max-width: 568px) {
#side_seel{width:70px;padding:5px;top:80px;}
}

#side_seel img{
width:100%;
height:auto;
margin:0 auto;
}