@charset "UTF-8";

body{
	text-align:center;
	font-size:85%;
}

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

.clearfix { display: inline-block; }
/*\*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/**/

.pc{
display: block;
}

.sp{
display: none;
}

@media screen and (max-width: 769px) {
body{
	min-width: inherit;
}

.pc{
display: none;
}

.sp{
display: block;
}
}

a:focus, *:focus { outline:none; }
p{margin:0;}
ul{	margin:0;padding:0;}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
	z-index:9999;
    width: 100%;
	-moz-box-shadow: 0px 0px 3px #ccc;
	-webkit-box-shadow: 0px 0px 3px #ccc;
	box-shadow: 0px 0px 3px #ccc;
}

#loading {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    opacity: 1.0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
  font-size: 10px;
  text-indent: -9999em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3dd961;
  background: -moz-linear-gradient(left, #000 10%, rgba(61,217,97, 0) 42%);
  background: -webkit-linear-gradient(left, #000 10%, rgba(61,217,97, 0) 42%);
  background: -o-linear-gradient(left, #000 10%, rgba(61,217,97, 0) 42%);
  background: -ms-linear-gradient(left, #000 10%, rgba(61,217,97, 0) 42%);
  background: linear-gradient(to right, #000 10%, rgba(61,217,97, 0) 42%);
  -webkit-animation: load3 1.4s infinite 000;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #000;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

CommandCss

*******************************/
.red      { color: #e00 !important; }
.blue     { color: #00F !important; }
.green    { color: #0F0 !important; }
.yellow   { color: #FF0 !important; }
.orange   { color: #F90 !important; }
.white    { color: #FFF !important; }
.black    { color: #000 !important; }
.gray     { color: #888 !important; }

.m0  { margin: 0    !important; }
.m5  { margin: 5px  !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.m35 { margin: 35px !important; }
.m40 { margin: 40px !important; }
.m45 { margin: 45px !important; }
.m50 { margin: 50px !important; }
.m60 { margin: 60px !important; }
.m70 { margin: 70px !important; }
.m80 { margin: 80px !important; }
.m90 { margin: 90px !important; }
.m100 { margin: 100px !important; }

.mt0  { margin-top: 0    !important; }
.mt5  { margin-top: 5px  !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

.mr0  { margin-right: 0    !important; }
.mr5  { margin-right: 5px  !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr45 { margin-right: 45px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }
.mr100 { margin-right: 100px !important; }

.mb0  { margin-bottom: 0    !important; }
.mb5  { margin-bottom: 5px  !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }

.ml0  { margin-left: 0    !important; }
.ml5  { margin-left: 5px  !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }

.p0  { padding: 0    !important; }
.p5  { padding: 5px  !important; }
.p10 { padding: 10px !important; }
.p15 { padding: 15px !important; }
.p20 { padding: 20px !important; }
.p25 { padding: 25px !important; }
.p30 { padding: 30px !important; }
.p35 { padding: 35px !important; }
.p40 { padding: 40px !important; }
.p45 { padding: 45px !important; }
.p50 { padding: 50px !important; }
.p60 { padding: 60px !important; }
.p70 { padding: 70px !important; }
.p80 { padding: 80px !important; }
.p90 { padding: 90px !important; }
.p100 { padding: 100px !important; }

.pt0  { padding-top: 0    !important; }
.pt5  { padding-top: 5px  !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt45 { padding-top: 45px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

.pr0  { padding-right: 0    !important; }
.pr5  { padding-right: 5px  !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
.pr45 { padding-right: 45px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pr70 { padding-right: 70px !important; }
.pr80 { padding-right: 80px !important; }
.pr90 { padding-right: 90px !important; }
.pr100 { padding-right: 100px !important; }

.pb0  { padding-bottom: 0    !important; }
.pb5  { padding-bottom: 5px  !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb45 { padding-bottom: 45px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

.pl0  { padding-left: 0    !important; }
.pl5  { padding-left: 5px  !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }
.pl45 { padding-left: 45px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.pl70 { padding-left: 70px !important; }
.pl80 { padding-left: 80px !important; }
.pl90 { padding-left: 90px !important; }
.pl100 { padding-left: 100px !important; }


.clearb{clear:both;}
.bnone{ border:none!important;}

.txtright{text-align:right; width:100%;}
.txtleft{text-align:left; width:100%;}
.txtcenter{text-align:center; width:100%;}
.float_r{float:right; display:inline;}
.float_l{float:left; display:inline;}
.vtop{ vertical-align:top;}
.imgover{}

#topback{
	bottom: 20px;
	right:20px;
	position: fixed;
	z-index: 9999;
	cursor: pointer;
}

#topback img{
width: 70px;
height: auto;
}

#topback span{
	font-size:40px;
	display:block;
	color:#666;
}

.builder{
width: 94%;
max-width: 988px;
margin: 0 auto;
text-align: left;
}


@media screen and (max-width: 769px) {

#topback{
	bottom: 10px;
	right:10px;
	position: fixed;
	z-index: 9999;
	cursor: pointer;
}

#topback img{
width: 40px;
height: auto;
}

.builder{
width: 94%;
margin: 0 3%;
text-align: left;
}

}


body{
background-image: url(../images/background2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}

header{
position: fixed;
top: 0;
left: 0;
width: 95%;
padding: 30px 2.5%;
z-index: 200;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

header h1 img{
width: 150px;
height: auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

header nav{
margin-left: 40px;
}

header nav a{
display: inline-block;
margin: 0 15px;
text-decoration: none;
color: #000;
font-weight: bold;
letter-spacing: .1em;
}

header.headTop{
width: 95%;
padding: 15px 2.5%;
background: #fff;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
border-bottom: 1px solid #eee;
}

header.headTop h1 img{
width: 80px;
height: auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

#main{
position: relative;
background: #fff;
}

#main:before{
content: "";
background-image: url(../images/main_over.png);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
padding-top: 51.75%;
position: absolute;
top: 0;
left: 0;
z-index:9;
}

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

#main .main_txt{
display: none;
position: absolute;
left: 10%;
top: 50%;
width: 30%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
}

#main .main_txt img{
width: 100%;
height: auto;
}

#main_read{
position: relative;
padding-bottom: 50px;
background: rgba(255,255,255,1);
}

#main_read .snslinks{
position: absolute;
top: 20px;
right: 30px;
}

#main_read .snslinks li{
display: inline-block;
margin-right: 10px;
}

#main_read .snslinks li img{
width: 47px;
height: auto;
}

#main_read h2{
display: block;
text-align: center;
padding: 80px 0 40px;
}

#main_read h2 img{
width: 490px;
height: auto;
}

#main_read p{
line-height: 2.4em;
margin-bottom: 40px;
}

#items{
background: rgb(254,230,255);
background: linear-gradient(330deg, rgba(254,230,255,1) 0%, rgba(157,219,255,1) 100%);
}

#items .wrapper{
padding: 0 7%;
background-image: url(../images/items_bg.png);
background-size: 120px;
background-position: top left;
background-repeat: no-repeat;
}

#items h3{
display: block;
vertical-align: baseline;
text-align: left;
color: #fff;
font-weight: bold;
padding: 60px 0;
}

#items h3 img{
width: 176px;
height: auto;
margin-right: 20px;
}

.itemlist{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.itemlist li{
flex-basis: 23%;
}

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

.linkbtn{
display: block;
text-align: right;
padding: 60px 0;
}
.linkbtn img{
width: 300px;
height: auto;
}

.spacer{
width: 100%;
padding-top: 40%;
}

#about{
background: #fff;
}

#about h3{
display: block;
vertical-align: baseline;
text-align: left;
color: #000;
background: #f7f8f8;
font-weight: bold;
padding: 60px 7%;
}

#about h3 img{
width: 176px;
height: auto;
margin-right: 20px;
}

.about_layout{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.about_layout .item{
flex-basis: 50%;
}

.about_layout .item .wrapper{
padding: 80px;
text-align: left;
line-height: 2.4em;
}

.about_layout .item img{
width: 100%;
height: auto;
}

.about_layout .item h4 img{
width: 265px;
height: auto;
margin-bottom: 30px;
}

address{
display: block;
padding: 15px 0;
text-align: center;
color: #fff;
background: #4b7d88;
}


@media screen and (max-width: 769px) {
body{
background: none;
overflow-x: hidden;
position: relative;
z-index: 0;
}

body::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url(../images/background2-sp.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -1;
pointer-events: none;
}

header{
position: inherit;
width: 95%;
padding: 10px 2.5%;
z-index: 10;
display: block;
background: #fff;
}

header h1 img{
width: 100px;
height: auto;
}

header nav{
display: none;
}

header.headTop{
width: 95%;
padding: 15px 2.5%;
background: #fff;
}

header.headTop h1 img{
width: 100px;
height: auto;
}

#main_read{
position: relative;
padding-bottom: 50px;
background: rgba(255,255,255,1);
}

#main_read .snslinks{
padding-top: 10px;
padding-right: 5%;
position: inherit;
top: inherit;
right:  inherit;
text-align: right;
}

#main_read .snslinks li{
display: inline-block;
margin-right: 5px;
}

#main_read .snslinks li img{
width: 30px;
height: auto;
}

#main_read h2{
display: block;
text-align: center;
padding: 10px 0 40px;
}

#main_read h2 img{
width: 80%;
height: auto;
}

#main_read p{
padding: 0 5%;
font-size: 13px;
text-align: left;
line-height: 2.4em;
margin-bottom: 20px;
}

#items .wrapper{
padding: 0 7%;
background-image: url(../images/items_bg.png);
background-size: 80px;
background-position: top left;
background-repeat: no-repeat;
}

#items h3{
padding: 40px 0;
}

#items h3 img{
width: 140px;
height: auto;
margin-right: 20px;
}

.itemlist{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack:auto;
-webkit-box-pack:auto;
-webkit-justify-content:auto;
justify-content:auto;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.itemlist li{
flex-basis: 48%;
margin-right: 4%;
margin-bottom: 15px;
}

.itemlist li:nth-child(2n){
margin-right: 0;
}


.linkbtn{
display: block;
text-align: center;
padding: 40px 0;
}
.linkbtn img{
width: 80%;
height: auto;
}

.spacer{
width: 100%;
padding-top: 60%;
}

#about{
background: #fff;
}

#about h3{
display: block;
vertical-align: baseline;
text-align: left;
color: #000;
background: #f7f8f8;
font-weight: bold;
padding: 40px 7%;
}

#about h3 img{
width: 140px;
height: auto;
margin-right: 20px;
}

.about_layout{
display:block;
}

.about_layout .item{
flex-basis: auto;
}

.about_layout .item .wrapper{
padding: 10%;
text-align: left;
line-height: 2.4em;
}

.about_layout .item img{
width: 100%;
height: auto;
}

.about_layout .item h4 img{
width: 60%;
height: auto;
margin-bottom: 30px;
}

address{
font-size: 11px;
}
}




#shops{
background-color: #addbfb;
background-image: url(../images/shops_items.jpg);
background-position: top right;
background-repeat: no-repeat;
background-size: contain;
}

#shops .wrapper{
padding: 0 7%;
background-image: url(../images/shops_bg.png);
background-size: 100px;
background-position: top left;
background-repeat: no-repeat;
text-align: left;
}

#shops h3{
display: block;
vertical-align: baseline;
text-align: left;
color: #fff;
font-weight: bold;
padding: 60px 0 40px;
}

#shops h3 img{
width: 176px;
height: auto;
margin-right: 20px;
}

#shops p{
  color: #fff;
  font-size: 14px;
  line-height: 2em;
}

#shops p.read{
  font-size: 40px;
  line-height: 1.6em;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 20px;
}

.shoplist{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding-top: 60px;
padding-bottom: 60px;
}

.shoplist li{
flex-basis: 28%;
margin-right: 2%;
}

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


@media screen and (max-width: 769px) {
#shops{
background-color: #addbfb;
background-image: none;
}

#shops .wrapper{
padding: 0 7%;
background-image: url(../images/shops_bg.png);
background-size: 100px;
background-position: top left;
background-repeat: no-repeat;
text-align: left;
}

#shops h3{
display: block;
vertical-align: baseline;
text-align: left;
color: #fff;
font-weight: bold;
padding: 60px 0 40px;
}

#shops h3 img{
width: 140px;
height: auto;
margin-right: 20px;
}

#shops p{
  font-size: 14px;
  line-height: 2em;
}

#shops p.read{
  font-size: 28px;
  line-height: 1.6em;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 20px;
}

.shoplist{
display: block;
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 40px;
}

.shoplist li{
margin-right: 0;
margin-bottom: 10px;
}

}