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

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

header

************************************/
#top header{
position:absolute;
top:400px;
left:0;
width:100%;
z-index: 100;
}
#top header h2{
font-family: tbcgothic-std, sans-serif;
font-weight: 800;
font-style: normal;
text-align: right;
font-size:17px;
letter-spacing: 0.1em;
display:block;
position:absolute;
bottom:180px;
left:0;
right:0;
margin:auto;
width:30px;
height:350px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#top header.fixed{
position:fixed;
top:0;
left:0;
width:100%;
}
#top header.fixed h2{
display:none;
}
@media only screen and (max-width:768px){
#top header{
position:absolute;
top:0px;
left:0;
width:100%;
}
#top header h2 {
width:100%;
height:auto;
position:absolute;
top:30px;
text-align: center;
font-size:80%;
bottom:auto;
/*** 縦書き解除 ***/
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
#top header h1 {
padding-top:50px;
}
}
@media only screen and (max-width:480px){
#top header h2{
font-family: tbcgothic-std, sans-serif;
font-weight: 800;
font-style: normal;
text-align: left;
font-size:14px;
letter-spacing: 0.1em;
display:block;
position:absolute;
bottom:auto;
top:20px;
left:0;
right:0;
margin:auto;
width:20px;
height:280px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#top header h1 {
padding-top:270px;
}
}
/************************************

#top_illust

************************************/
main section#top_illust{
width:100%;
height:800px;
position: relative;
transition:0;
opacity: 1;
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px);
}
#top_illust div{
position:absolute;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#top_illust #top_ill1{
background-image: url(../images/ill1_p1.png);
width:150px;
height:250px;
top:420px;
left:220px;
transition: 0.5s;
}
#top_illust #top_ill2{
background-image: url(../images/ill2_flower.png);
width:90px;
height:120px;
top:400px;
right:300px;
transition: 1s;
}
#top_illust #top_ill3{
background-image: url(../images/ill3_p2.png);
width:110px;
height:180px;
top:300px;
right:150px;
transition: 0.8s;
}
#top_illust #top_ill4{
background-image: url(../images/ill4_bicycle.png);
width:100px;
height:84px;
top:700px;
right:0;
left:0;
margin:auto;
transition: 2s;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#top_illust #top_ill1{
background-image: url(../images/ill1_p1@2x.png);
}
#top_illust #top_ill2{
background-image: url(../images/ill2_flower@2x.png);
}
#top_illust #top_ill3{
background-image: url(../images/ill3_p2@2x.png);
}
#top_illust #top_ill4{
background-image: url(../images/ill4_bicycle@2x.png);
}
}

@media only screen and (max-width:768px){
main section#top_illust{
height:180px;
margin-bottom:20px;
}
#top_illust #top_ill1{
width:75px;
height:125px;
top:20px;
left:20px;
}
#top_illust #top_ill2{
width:45px;
height:60px;
top:40px;
right:100px;
}
#top_illust #top_ill3{
width:55px;
height:90px;
top:50px;
right:15px;
}
#top_illust #top_ill4{
width:50px;
height:42px;
top:130px;
right:0;
left:0;
margin:auto;
}
}
@media only screen and (max-width:480px){
main section#top_illust{
height:360px;
position: relative;
}
#top_illust #top_ill1{
top:22%;
left:20px;
}
#top_illust #top_ill2{
top:40%;
right:20%;
}
#top_illust #top_ill3{
top:55%;
right:5%;
}
#top_illust #top_ill4{
top:70%;
right:auto;
left:10%;
margin:auto;
}
}

#top_illust #top_ill1.list-mv01{
	transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	opacity:0;
}
#top_illust #top_ill1.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	opacity:1;
}
#top_illust #top_ill2.list-mv01{
	transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	opacity:0;
}
#top_illust #top_ill2.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	opacity:1;
}
#top_illust #top_ill3.list-mv01{
	transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	opacity:0;
}
#top_illust #top_ill3.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	opacity:1;
}
#top_illust #top_ill4.list-mv05{
	transform: translate(500px,0px); 
	-webkit-transform: translate(500px,0px); 
	opacity:0;
}
#top_illust #top_ill4.mv05{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	opacity:1;
}
@media only screen and (max-width:768px){
	#top_illust #top_ill4.list-mv05{
	transform: translate(100%,0px); 
	-webkit-transform: translate(100%,0px); 
	opacity:0;
}
}
/************************************

#concept

************************************/
#concept .image{
margin:0 0 50px;
width:100%;
}
#concept .image:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
}
#concept .image div{
float:left;
width:25%;
margin:0 0%;
}
#concept .image div .image_img{
width:100%;
height:0;
padding-top:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#concept .image .image1 .image_img{
background-image: url(../images/bagle1.png);
}
#concept .image .image2 .image_img{
background-image: url(../images/bagle2.png);
}
#concept .image .image3 .image_img{
background-image: url(../images/bagle3.png);
}
#concept .image .image4 .image_img{
background-image: url(../images/bagle4.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#concept .image .image1 .image_img{
background-image: url(../images/bagle1@2x.png);
}
#concept .image .image2 .image_img{
background-image: url(../images/bagle2@2x.png);
}
#concept .image .image3 .image_img{
background-image: url(../images/bagle3@2x.png);
}
#concept .image .image4 .image_img{
background-image: url(../images/bagle4@2x.png);
}
}
#concept .c_midashi{
display:inline-block;
position: relative;
}
#concept .c_midashi::before{
position: absolute;
bottom: -60px;
right: -120px;
background:url(../images/ill5_p3@2x.png) no-repeat left top;
background-size: contain;
width:90px;
height:90px;
content: "";
}
#concept h2{
position:relative;
display:inline-block;
margin:0 0 40px;
font-size:150%;
letter-spacing: 0.2em;
}
#concept h2::before{
position: absolute;
top: -10px;
left: -80px;
background:url(../images/fuki1.png) no-repeat left top;
background-size: contain;
width:60px;
height:60px;
content: "";
}
#concept h2::after{
position: absolute;
top: -10px;
right: -80px;
background:url(../images/fuki2.png) no-repeat left top;
background-size: contain;
width:60px;
height:60px;
content: "";
}
#concept p{
line-height: 2;
margin-bottom:30px;
}
#concept .bt{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2em;
}
@media only screen and (max-width:768px){
#concept .image{
margin:0 0 30px;
}
#concept .c_midashi::before{
display:none;
}
#concept h2{
margin:0 0 30px;
font-size:130%;
letter-spacing: 0.1em;
}
#concept h2::before{
top: -10px;
left: -60px;
}
#concept h2::after{
top: -10px;
right: -60px;
}
}
@media only screen and (max-width:480px){
#concept h2::before{
top: 0px;
left: -70px;
}
#concept h2::after{
top: 0px;
right: -70px;
}
#concept p{
text-align: left;
margin:0 5% 20px;
}
}
/************************************

#news

************************************/
#news h2.midashi{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;
}
#news .list{

margin:0 auto 50px;
}
#news article{
width:29.3%;
margin:0 2%;
}
#news article a{
display:block;
}
#news article .image{
background-image: url(../images/circle_tensen.png) ;
background-repeat:  no-repeat ;
background-position:  right bottom;
background-size: 150px;
padding-bottom:20px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#news article .image{
background-image: url(../images/circle_tensen@2x.png) ;
}
}

#news article .image img{
border-radius: 50%;
width:70%;
transition:.5s;
transition-timing-function: ease;
}
#news article:hover .image img{
transform: scale(1.1);
}
#news article .text{
margin:5px 15% 0;
}
#news article .text p{
font-size:75%;
letter-spacing: 0.1em;
}
#news article .text h4{
font-size:90%;
font-weight: normal;
letter-spacing: 0.05em;
}
#news .bt{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2em;
}
@media only screen and (max-width:768px){
#news .list{
margin-bottom:20px;
}
#news article .image{
background-size: 80%;
padding-bottom:20px;
text-align: left;
}
#news article .image img{
width:90%;
}
#news article .text{
margin:5px 10% 0 0;
}
}
@media only screen and (max-width:480px){
#news article{
width:31.3%;
margin:0 1%;
}
#news article .image{
background-size: 90%;
padding-bottom:15px;
}
#news article .image img{
width:100%;
}
#news article .text{
text-align: left;
}
#news article .text h4{
letter-spacing: 0;
font-size:80%;
}
}
/************************************

about

************************************/
#about h2.midashi{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;	
}
#about .map iframe{
width:100%;
height:300px;
margin:0 auto 30px;
}
#about h3{
margin:0 0 1em;
}
#about p{
line-height: 2;
}
#about #calendar{
margin:50px 0 0;
}
@media only screen and (max-width:768px){
#about h3 span{
font-size:80%;
display:block;
}
#about p{
font-size:80%;
}
}

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

instagram

************************************/
#instagram h2.midashi{
font-family: hobo-std, sans-serif;
font-weight: 400;
font-style: normal;	
}
#instagram .other{
margin-top: 3rem;
display: flex;
-webkit-flex-wrap: wrap; 
flex-wrap:  wrap;
justify-content: center;
}
@media only screen and (max-width:768px){
#instagram .other{

display: block;
}
}
#instagram .other li{
margin:0 10px;
}
@media only screen and (max-width:768px){
#instagram .other li{
margin:10px ;
}
}
#instagram .other li a{
display: block;
background-color: #54BECC;
color:#fff;
font-weight: bold;
padding:15px 50px;
border-radius: 2em;
}
@media only screen and (max-width:768px){
#instagram .other li a{
paddding:15px;
}
}