@charset "UTF-8";
/* CSS Document 

Hobo(English)
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;

TBCGothic Std（見出し）
font-family: tbcgothic-std, sans-serif;
font-weight: 800;
font-style: normal;

blue: #54BECC;
*/

body {
font-family: '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
font-weight: 500; /*windows対策*/
text-align: center;
color:#333;
-webkit-text-size-adjust: 100%;
letter-spacing: 0.05em;
}
*{
	margin:0;
	padding:0;
-moz-box-sizing: border-box;
  box-sizing: border-box;
}
img{
	vertical-align: bottom;
	max-width:100%;
}
a img {
	border:none;
}
a {
	color:#333;
	text-decoration: none;
	transition:.3s;
}
a:hover{
	color:#54BECC;
	
}

.clearfix:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
* html .clearfix             { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
li {
	list-style:none;
}
i {
	padding:0 5px;
}

.pc {
	
}
.tablet{
display:none;
}
.sp {
	display:none;
}
.ssp {
	display:none;
}
/*PC改行加える*/
.br-pc{
	display:inherit;
}
 /*PC改行無効*/
.br_sp{
	display:none;
}
.br_ssp{
	display:none;
}

@media only screen and (max-width:768px){
body{
font-size:90%;
}
img{
	border: 0;
	max-width: 100%;
    height: auto;
}
 
.pc {
	display:none;
}
.tablet{
display:block;
}
.sp {
	display:block;
}
.ssp {
	display:none;
}
	/*SP改行無効*/
.br-pc{
	display:none;
}
/*SP改行加える*/
.br_sp { display:block; }
.br_ssp{
	display:none; 
}
}
@media only screen and (max-width:480px){
.tablet{
display:none;
}
.ssp {
	display:block;
}
	/*SP改行無効*/
.br-pc{
	display:none;
}
/*SP改行加える*/
.br_sp { display:block; }
.br_ssp{
	display:block; 
}
}

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

wrapper

************************************/
.wrapper {
	max-width:940px;
	margin:auto;
}
.wrapper_s {
	max-width:940px;
	margin:auto;
}
.wrapper:after,
.wrapper_s:after{  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  

@media only screen and (max-width:768px){
	.wrapper {
	max-width:100%;
	margin:0 auto;
	}
	.wrapper_s {
	max-width:90%;
	margin:0 auto;
}

}
/************************************

animation

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

/*ズームイン表示*/
.list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/*フェードイン表示*/
.list-mv02{
	opacity: 0;
}
.list-mv02:not(:target) {
opacity: 1\9; /*IE9対策*/
}
.mv02{
	opacity: 1.0;
}

/*回転*/
.list-mv03{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.mv03{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}

/*3D回転*/
.list-mv04{
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}
.mv04{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

/*上移動*/
.list-mv05{
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px); 
}
.mv05{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/*移動＋フェードイン表示*/
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	z-index: 1;
}
.list-mv07:not(:target) {
opacity: 1\9; /*IE9対策*/
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	z-index: 1;
}

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

.list(flexboox)

************************************/
.list {
	display: block; /* before Android4.3 iOS6:Safari */
	display: -ms-flexbox;/*IE10*/
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:  wrap;
}
.list:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
.list article {
	width:auto;
}
/*IE8▼*/
.list article {
float: left\9;
}
/*IE9▼*/
.list article:not(:target) {
float:left¥9;
}
/*IE10▼*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.list article  {
	float:left !important;
}
}
/************************************

bagle_back

************************************/
#bagle_back{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
z-index: -1;
}
#bagle_back #bagle1{
position:fixed;
width:500px;
height:500px;
top:-45px;
left:-50px;
background: url(../images/back_bagle1.png) no-repeat left top;
background-size: contain;
transition: 1s;
}
#bagle_back #bagle2{
position:fixed;
width:500px;
height:500px;
top:300px;
right:-50px;
background: url(../images/back_bagle2.png) no-repeat left top;
background-size: contain;
transition: 2s;
}
#bagle_back .list-mv01{
	transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	opacity:0;
}
#bagle_back .mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	opacity:1;
}
@media only screen and (max-width:768px){
#bagle_back #bagle1{
width:250px;
height:250px;
top:-10%;
left:-10%;
}
#bagle_back #bagle2{
width:250px;
height:250px;
top:auto;
bottom:-10%;
right:-10%;
}
}

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

header

************************************/
header{
position:relative;
width:100%;
padding:20px 0;

}
header:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
header h1 a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
background-image:url(../images/logo.png);
background-repeat: no-repeat;
background-position: left top;
background-size:contain;
display: block;
height: 100px;
width: 200px;
margin:0 auto 30px;

}

header h1 a:hover{
background-image:url(../images/logo_o.png);
opacity:1;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
header h1 a {
background-image:url(../images/logo@2x.png);
}
header h1 a:hover{
background-image:url(../images/logo_o@2x.png);
}
}
header h2{
display:none;
}
header nav{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;

}
header nav ul{
letter-spacing: -1em;
}
header nav ul li{
letter-spacing: 0.2em;
display:inline-block;
margin:0 20px;
}
header nav ul li a:hover{
color:#54BECC;
opacity:1;
}

@media only screen and (max-width:768px){
header{
position:relative;
}
header h1 a {
height: 60px;
width: 120px;
margin:15px auto ;
}
header nav{
display:none;
}
}

/****** fixed *****/
header.fixed{
position:fixed;
top:0;
left:0;
width:100%;
z-index: 100;
background: #fff;
height:80px;
padding:10px 0;
transition: 0s;
}
header.fixed h1{
display:inline-block;
vertical-align: middle;
height: 60px;
width: 120px;
}
header.fixed h1 a {
height: 60px;
width: 120px;
margin:0 auto 0px;
}
header.fixed nav{
display:inline-block;
vertical-align: middle;
margin:0px 0 0 30px;
}
/************************************

footer

************************************/
footer{
background:url(../images/foot_back.png) repeat-x center bottom;
padding:20px 0 100px;
position: relative;
}
footer .ill{
position: absolute;
left:20px;
bottom:70px;
background-image: url(../images/foot_ill1.png) ;
background-repeat:  no-repeat ;
background-position:  center;
background-size: contain;
width:97px;
height:86px;
z-index: 1;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
footer .ill{
background-image: url(../images/foot_ill1@2x.png) ;
}
}

footer nav{
margin:0 0 40px;
letter-spacing: -1em;
}
footer nav li{
letter-spacing: 0.1em;
display:inline-block;
margin:0 20px;
font-size:90%;
}
footer h2{
font-size:110%;
margin:0 0 20px;
}
footer p{
font-size:80%;
line-height: 1.8;
}
@media only screen and (max-width: 768px) {
footer{
background:none;
padding:20px 0 110px;
}
footer .ill{
left:0;
right:0;
margin:auto;
bottom:40px;
width:59px;
height:52px;
}
footer nav{
margin:0 0 20px;
padding:15px 0;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}
footer nav li{
margin:0 10px;
font-size:90%;
}
footer h2{
font-size:100%;
margin:0 0 20px;
}
footer h2 span{
font-size:80%;
}
}
@media only screen and (max-width: 480px) {
footer nav li{
margin:5px 0;
width:33.3%;
}
}
/************************************

PageUP

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

#pageup a {
position: fixed;
right:50px;
bottom:50px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
background-image:url(../images/pageup.png);
background-repeat: no-repeat;
background-position: left top;
background-size:contain;
display: block;
height: 140px;
width: 90px;
z-index:10;
}
#pageup a:hover{
transform: scale(1.1);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#pageup a {
background-image:url(../images/pageup@2x.png);
}
}
@media only screen and (max-width: 768px) {
#pageup a {
bottom:5px;
height: auto;
width: auto;
text-indent: inherit;
white-space: normal;
overflow: hidden;
text-decoration: none;
background-image:none;
z-index: 101;
font-size:30px;
line-height: 1;
width:30px;
height:30px;
color:#fff;
right:0;
}
}

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

side

************************************/
#side{
position: fixed;
right:20px;
top:580px;
width:450px;
text-align: left;
transform: rotate( 90deg );
transform-origin: right top;
z-index: 100;
}
#side h2{
font-size:14px;
letter-spacing: 0.2em;
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;
display:inline-block;
position: relative;
margin:0 75px 0 0;

}
#side h2::before{
position: absolute;
top: 10px;
right: -70px;
background-color: #000;
width:60px;
height:1px;
content: "";
}
#side ul{
display:inline-block;
margin-right:5px;
}
#side ul li{
display:inline-block;
letter-spacing:0;
font-size:20px;
line-height: 1;
margin:0 3px;
transform: rotate( -90deg );
}

#side .onlineshop{
display:inline-block;
}
#side .onlineshop a{
background: #54BECC;
color:#fff;
border:1px solid #54BECC;
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size:14px;
letter-spacing: 0.2em;
padding:7px 20px 7px 40px;
border-radius: 2em;
position: relative;
}
#side .onlineshop a::before{
position: absolute;
top: 7px;
left: 13px;
color: #fff;
font-size: 18px;
width:18px;
line-height: 1;
font-family: 'FontAwesome';
content: "\f07a";
transform: rotate( -90deg );
}
#side .onlineshop a:hover{
background: #fff;
color:#54BECC;
border:1px solid #54BECC;
}
#side .onlineshop a:hover::before{
color:#54BECC;
}

@media only screen and (max-width:768px){
#side{
background: #54BECC;
right:auto;
top:auto;
left:0;
bottom:0;
width:100%;
transform:none;
transform-origin: left bottom;
padding:8px ;
}
#side h2{
display:none;
}

#side ul li{
font-size:16px;
line-height: 1;
margin:0 3px;
transform: none;
}
#side ul li a{
color:#fff;
}
#side .onlineshop{
display:inline-block;
margin:0 3px;
}
#side .onlineshop a{
background: none;
color:#fff;
border:none;
font-size:14px;
padding:0 0 0 22px;
border-radius:none;
}
#side .onlineshop a::before{
position: absolute;
top: 1px;
left: 0px;
color: #fff;
font-size: 16px;
width:20px;
transform: none;
}
#side .onlineshop a:hover{
background: none;
color:#fff;
border:none;
}
#side .onlineshop a:hover::before{
color:#fff;
}

}
/************************************

drawer_MENU

************************************/
.drawer--top.drawer-open .drawer-nav {
top: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*------------------------------------*\
Right
\*------------------------------------*/
.drawer--right .drawer-nav {
right: -16.25rem;
-webkit-transition: right 1.2s cubic-bezier(0.19, 1, 0.22, 1);
transition: right 1.2s cubic-bezier(0.19, 1, 0.22, 1); }

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
right: 0; }

.drawer--right.drawer-open .drawer-hamburger {
right: 16.25rem; }

/*------------------------------------*\
Hamburger
\*------------------------------------*/
.drawer-hamburger {
position: fixed;
z-index: 104;
top: 0;
display: block;
box-sizing: content-box;
width: 40px;
box-sizing: border-box;
color: #fff;
padding: 0;
padding-top: 20px;
padding-right: .5rem;
padding-bottom: 20px;
padding-left: .5rem;
-webkit-transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border: 0;
outline: 0;
background-color: transparent; }

.drawer-hamburger:not(:target) {
display: none\9;
/*IE9対策*/ }

/*ie11*/
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, .drawer-hamburger {
display: none; } }
.drawer-hamburger:hover {
cursor: pointer; background: transparent;}

.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 0px; }

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
width: 100%;
height: 1px;
-webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #000; }

.drawer-hamburger-icon:before {
position: absolute;
top: -8px;
left: 0;
content: ' '; }

.drawer-hamburger-icon:after {
position: absolute;
top: 8px; 
left: 0;
content: ' '; }

.drawer-open .drawer-hamburger-icon {
/* background-color: transparent;*/ }

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
top: 0; }

.drawer-open .drawer-hamburger-icon:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }

.drawer-open .drawer-hamburger-icon:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); }

.drawer-nav {
text-align: left;
font-size: 100%;
line-height: 1.5; }
.drawer-nav a {
text-decoration: none;
color: #000; }
.drawer-nav h2{
font-size:100%;
margin:8% 8% 0px;
}

.drawer-nav ul {
padding: 4% 8%;
border-bottom:1px solid #000;
}
.drawer-nav ul li {
padding: 8px 0 8px 15px;
position: relative; }

.drawer-nav ul li::before {
position: absolute;
top: 10px;
left: 2px;
font-family: 'FontAwesome';
content: "\f105"; }
.drawer-nav ul li.nomark {
padding: 8px 0 8px 0; }
.drawer-nav ul li.nomark::before {
content: ""; 
}
.drawer-nav ul li ul {
padding: 4% 0% 0;
border-bottom:none;
font-size:90%;
}
.drawer-nav ul li ul li::before {
position: absolute;
top: 10px;
left: 1px;
font-family: 'FontAwesome';
content: "\f0da"; 
font-size:9px;
}
.drawer-nav ul.sns li{
display:inline-block;
padding: 8px 20px 8px 0;
font-size:18px;
}
.drawer-nav ul.sns li::before {
content:"";
}
/************************************

main section article dl

************************************/
main{
display:block;
/*margin-top:120px;*/
}
#second main{
margin-top:50px;
}

@media only screen and (max-width:768px){
main{
margin-top:0px;
}
#second main{
margin-top:0px;
}
}


section:after,article:after,dl:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
}  
main section{
position:relative;
margin-top:0px;
margin-bottom:80px;
padding-top:0px;
transition: .8s;
opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
main section:not(:target) {
opacity: 1\9; /*IE9対策*/
}
main section.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/*移動＋フェードイン表示*/
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.list-mv07:not(:target) {
opacity: 1\9; /*IE9対策*/
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

@media only screen and (max-width:768px){
main section{
margin-top:0;
padding-top:0;
margin-bottom:50px;
}

}
/************************************

main midashi

************************************/
main h2,main h3{
font-family: tbcgothic-std, sans-serif;
font-weight: 800;
font-style: normal;
letter-spacing: 0.15em
}
main h2.midashi{
display:inline-block;
background: url(../images/sen.png) repeat-x left bottom;
padding:0 5px 10px;
margin:0 auto 40px;
font-size:160%;
}
main h2.midashi a{
display:block;
}
main h3.kakko{
font-size:130%;
margin:0 0 40px;
display:inline-block;
padding:15px 50px;
position: relative;
}
main h3.kakko::before{
position: absolute;
top: 0;
left: -10px;
width:10px;
height:100%;
border-top:1px solid #333;
border-left:1px solid #333;
border-bottom:1px solid #333;
content: "";
}
main h3.kakko::after{
position: absolute;
top: 0;
right: -10px;
width:10px;
height:100%;
border-top:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #333;
content: "";
}
/************************************

.bt

************************************/
.bt a{
background-color: #54BECC;
background-image: url(../images/bt_yaji.png);
background-repeat: no-repeat;
background-position: 20px center;
background-size: 25px;
color:#fff;
display:inline-block;
padding:15px 80px 15px 80px;
position: relative;
border-radius: 2em;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.bt a{
background-image: url(../images/bt_yaji@2x.png);
}
}
.bt a:hover{
opacity:.7;
}
@media only screen and (max-width:768px){
.bt a{
background-position: 10px center;
background-size: 15px;
padding:10px 50px 10px 50px;
}
}
/************************************

raf

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

.raf {
	width:1280px;
	margin:0 auto;
}
.raf img {
	width:100%;
	height:auto;
}