@charset "utf-8";

body {
  
    z-index             :       -1;
	margin				:		0 auto 20% auto;
    height              :       100vh;
	background-color	:		rgba(60,60,60,0);
    overflow-x          :       hidden;
    overflow-y          :       scroll;

}


body:before {
    
    content             :       "";
    display             :       block;
    position            :       fixed;top:0;left:0;
    z-index             :       -1;
    width               :       100%;
    height              :       100vh;
    background          :       url("pic/common/back.jpg") center no-repeat;
    background-size     :       cover;
}


@media screen and (min-width:480px) {

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
/*position*/
    
.box_top_position {

    display     : block;
    position    : relative;
    top         : 15vh;
    margin      : 0 auto;
    
}

#menu_box {
    z-index             : 1;
    position            :absolute;
                        top: 0px;
    width               : 100vw;
}
 
#logomark_box {

    position            :relative;
                        top:15vh;
                        right:0%;
    width               : 100vw;
    height              : 32vh;
     
}
    
#syoukaibun{
    position            :       relative;
                                top:10vh;
    text-align          :       center;
	font-weight			:		bold; 
	font-size			:		1em;
	text-align			:		center;
    color               :       white;
    text-shadow			:		0px 2px 20px black;
}
  
#news_box {
    z-index             : 2;
    position            :relative;
                        top:14vh;
                        left:0%;
    width               :100vw;
    overflow            : hidden;
}
 
#snsicon_box {

    z-index             : 6;
    position            : fixed;
                        right      :18%;
                        bottom     :-5%;

}

#about_box {
    
    z-index             : 1;
    width               : 95%; 
    max-width           : 700px;
    height              : auto;
    overflow            : hidden;

}
    
    
#new_content {
    
    z-index: 2;
    display: block;
    overflow: hidden;
    width:100%;height: 360px;
    max-width: 500px;
    text-align: center;
    margin:0 auto 8%;
    padding: 3% 0 0 0;
    border-radius: 6px;
    background-color: rgba(0,0,0,0.8);
}
    
.new_content_btn {
    margin      :3% auto;
    width       : 340px;height: auto;
        
}
.sityou_cap {
    display: block;
    
}
    

    #new_cont audio{
         margin: auto;
    }
    
    #content_video{
     margin: auto;   
     width:500px;height: 281px;
    }


#privacy_policy_box{
    z-index             : 3;
    margin              : 0 auto;
    width               : 100%;
    height              : auto;
    overflow            : hidden;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
    
    

.text {
    
	position			:		relative;
                                left: 50%;
    transform			:		translate(-50%,-50%);
	margin				:		0;
	padding				:		0;
	font-weight			:		bold; 
	font-size			:		0.9em;
	text-align			:		center;
    color               :       white;
	width				:		100%;
	height				:		100%;
	text-shadow			:		0px 0px 5px black;
	
}
    

/*◆Logomark*/

#head_box{
    
    z-index             :       0;
    position            :       relative;
    margin				:		0 auto;
    width               :       240px;
    height              :       240px;
    
}

.hand_mark {
    
    z-index             :       1; 
    position            :       absolute;
    margin				:		auto 0;
	width				:		100%;
	height				:		100%;

}

.flower_mark {
    
    z-index             :       1;
	position			:		relative;
	margin				:		0 auto;
	text-align			:		center;
	width				:		100%;
	height				:		100%;

}

    
/*◆NEWS*/

#top_news {
    
    z-index             : 1;
    position            : relative; 
    margin              : 0 auto 10% auto; 
    border-radius       : 8px;
    background-size     : contain;
    background          : rgba(255,255,255,0.6);
    width               : 480px;
    height              : 220px;

}


#top_news_contents {
    
    z-index             :       3;
    position            :       relative;
	text-align			:		left;
    color               :       #444;
	text-shadow			:		1px 1px 10px #222;

}
    
#top_news_contents ul a{
    line-height         :       2;
    border-bottom       :       dashed 1px green;
    text-decoration     :       none;
}



#top_news_contents ul {
    
    overflow-y          :       scroll;
    margin              :       0 4% 4% 2%;
    height              :       200px; 

}

#top_news_contents ul li{
    margin: 0.6em 1em;
    line-height         :       2.5;
    list-style          :       none;
	font-weight			:		nomal;
	font-size			:		15px;
    }
    
#top_news_contents ul .head_news {
	font-weight			:		nomal;
    font-size           :       22px; 
    color               :       #00F;
	text-shadow			:		1px 1px 0px #fff;
}
    
::-webkit-scrollbar{
  width: 5px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  box-shadow: none;
}
    
    


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/


#sns_icon {
    
    overflow            : hidden;

}

#sns_icon ul {
    position			: fixed;right: 1%;bottom: 42px;
    float               : left;	
}

#sns_icon ul li {
    
    position			:       relative;              
    left                :       0; 
    float               :       left;
    list-style          :       none;
    margin              :       auto 5px;
    width               :       32px;
    height              :       32px;
    
}

.icon_img {
    
    width: 32px;
    height: 32px;
 
}


    
.about_box_ {
    

    padding             :       1%;
    margin              :       0 auto;
	font-weight			:		bold; 
	font-size			:		0.5em;
	text-align			:		center;
    color               :       white;
    text-shadow			:		0px 2px 10px black;
}


.about_text {
	font-weight			:		bold; 
	font-size			:		1em;
	text-align			:		left;
    color               :       white;
	width				:		100%;

}
    
.about_content {
    display: inline-block;
    vertical-align:middle;
    margin: 2%;
    width: 300px;
    min-height: 100px;
    height: auto;
    border-radius: 2px;
    

}
    .about_image{
        text-align: center;
        margin: 0 auto;
        background:url(pic/common/icon.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width:85%;height:400px;

    }
    
.about_text {
    text-align          :left;
    font-size           :14px;
    list-style          :none;
    text-shadow			:0px 0px 15px black;
    width               :85%;
    margin: 0 auto;
    padding: 1%;
}
    


#privacy_policy_box {
    
    z-index             : 1;
    margin              : 0 auto;
    width               : 75%;
    height              : auto;
    border-radius       : 8px;
}


.privacy_policy_box_ {
    padding             :       2vh;
    text-shadow			:		0px 2px 20px black;
}

.privacy_policy_box_contents {

	width				:		100%;
	text-shadow			:		0px 0px 5px black;
    margin              :       3% 0; 
}
    
.privacy_policy_text ul li{

    z-index             : 5;
    text-align          : left;
    font-size           : 0.8em;
    list-style          : disc;
    color               : black;
    font-weight			: lighter; 
    text-shadow			: none;
    margin              : 1% 10% 2% 8%;
}
    
.privacy_policy_text p {
    text-align:right;
    margin: 0 8% 0 0;
    font-size:0.8em;
    color: black;
    font-weight			:		lighter; 
    text-shadow			:		none;
}

.privacy_policy_text ul li a{
    color: white;
}
    

    
/*◆◆◆◆◆◆◆◆◆*/

#photo_list_box {
 
    z-index             :1;
    margin              :0 auto;

}

#photo_button {
    z-index             : 0;
    position            : relative;
    background-size     : cover;
    overflow            : hidden;
    width               : 100%;
}

#photo_button div {
    z-index             : 2;
    margin              : 8vh auto;
    border-radius       : 6px;
    background-size     : contain;
    box-shadow          : 0 10px 10px rgba(0,0,0,0.4);
    width               : 400px;
    height              : 160px;
}

.frame:hover {
    
	animation			:		photoBtnfunch 1s ease-out 0s 1 normal;

    border              :       solid 1px #FFF;
}

#photo_button span:active {
    
    position: relative;
        top: 10%;
}

.shadow_ {
    background: url("/photo/image/common/shadow-bana.png") no-repeat ;
    border: solid 1px rgba(0, 0, 0, 0.2);
 
}

.drop_ {
    background: url("/photo/image/common/drop_baner.png") no-repeat ;
    border: solid 1px rgba(0, 0, 0, 0.2);
}

.yoruhana_ {
    background: url("/photo/image/common/yoruhana_baner.png") no-repeat ;
    border: solid 1px rgba(0, 0, 0, 0.2);
}

@keyframes photoBtnfunch {
        
        0%		{ opacity: 0.8 ;}
		100%	{ opacity: 1 ;}
}


}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

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

body {
    overflow-y          :       scroll;
    margin				:		0 auto;
    height              :       100vh;

}
    
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
/*position*/
    
.box_top_position {

    display     : block;
    position    : relative;
    top         : 10vh;

    
}

#menu_box {

    z-index             : 3;
    position			: relative;
                        top: 0vh;
    width               : 100vw;
    height              : 0;
}

#logomark_box {
    
    position            : relative;
                        top:2vh;left: 0;
    width               : 100vw;
    height              : 50vw;
    
}
#syoukaibun{
    position            :       relative;
                                top:1vh;
    margin              :       7% auto;
    text-align          :       center;
	font-weight			:		bold; 
	font-size			:		1.1em;
    line-height         :       2em; 
	text-align			:		center;
    color               :       white;
    text-shadow			:		1px 1px 14px black;
    width               :       80vw;
    height              :       10vh;
}

#news_box {

    position            :relative;
                        top:4vh;
    width               :100vw; 
    height              : auto;
}

#snsicon_box {
    z-index             : 2;
    position            : relative;
                          bottom:0;right: 0;
    margin              : auto;
    width               :100vw;

}
    
    

    
#about_box {
    z-index             :0;
    margin              :7% auto; 
    width               :90vw;
    height              :auto;

}
    
#new_content {
    
    z-index             : 0;
    display             : block;
    position            : relative;top: 5vh;
    width               : 90vw;
    height              : 320px;   

    margin              : 8% auto 8%;

    box-shadow          : 10px 20px 25px rgba(0,0,0,0.3);
    border-radius       : 6px;
}
.new_content_btn {
    margin      : 5% auto;
    width       : 400px;
        
}


    
    
#content_video {

 margin:auto;   
 width:400px;height: 225px;
}



/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

  
    
/*◆Logomark*/

#head_box{
    
    z-index             :       0;
    position            :       relative;
    margin				:		0 auto;
    width               :       50vw;
    height              :       50vw;
    
}

.hand_mark {
    
    z-index             :       1; 
    position            :       absolute;
    margin				:		auto 0;
	width				:		100%;
	height				:		100%;

}

.flower_mark {
    
    z-index             :       1;
	position			:		relative;
	margin				:		0 auto;
	text-align			:		center;
	width				:		100%;
	height				:		100%;

}


/*◆NEWS*/
    
#top_news {
    
    z-index             : 1;
    position            : relative; 
    margin              : 5% auto;
    padding             : 0 1vw;
    width               : 87vw;
    min-height          : 300px; 
    background-color    : black;
    background          : rgba(255,255,255,0.7);
    border-radius       : 8px;
    box-shadow          : 3px 3px 10px rgba(0,0,0,0.3);
    overflow            : scroll;
}

h3 {
    padding             :       1vh 0 0;
    margin              :       3% auto;
	font-weight			:		bold; 
	font-size			:		1.8em;
    line-height         :       1.2; 
	text-align			:		center;
    color               :       white;
    text-shadow			:		0px 2px 20px black;
    width               :       100%;
}


    
#top_news_contents {
    
    z-index             :       3;
    position            :       relative;
	font-weight			:		nomal; 
	font-size			:		14px;
	text-align			:		left;
    color               :       #444;
	text-shadow			:		0px 0px 8px #555;
    
    
}
    
#top_news_contents ul a {

    line-height         :       2;
    border-bottom       :       dashed 1px green;
    text-decoration     :       none;

}

#top_news_contents ul {
    overflow-y          :       scroll;
	height				:		auto;
}

#top_news_contents ul li{
    margin: 1% 3% 1% 0;
    line-height         :       3;
    list-style          :       none;
	font-weight			:		nomal;
	font-size			:		15px;
    }
    
.head_news {
	font-weight			:		nomal;
    font-size           :       22px; 
    color               :       #00F;
	text-shadow			:		1px 1px 0px #fff;
}
    
::-webkit-scrollbar{
  width: 5px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  box-shadow: none;
}
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
    
.icon_img {
    
    width: 40px;
    height: 40px;
 
}

#sns_icon {
    position            : relative;top: 8vh;
    overflow            : hidden;
    width               : 100%;
    height              : auto;
    margin              : 7% auto ;
}



#sns_icon ul li {
    
    list-style          : none;
    width               : 40px;
    height              : 40px;

}

#sns_icon ul li:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

#sns_icon ul li:active{
    box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
}
    
.about_box_ {
  
    padding             :       1%;
    margin              :       2% auto;
	font-weight			:		bold; 
	font-size			:		0.6em;
	text-align			:		center;
    color               :       white;
    text-shadow			:		0px 2px 5px black;
    overflow            :       hidden;
}


.about_box_contents {
    margin              :       4% auto;
	font-weight			:		bold; 
	font-size			:		2em;
	text-align			:		right;
    color               :       white;
	width				:		82%;
	text-shadow			:		0px 0px 5px black;
    
}
    
.about_text p {
    margin: 4% auto;
    text-align:left;
    font-size:1.1em;
    list-style: none;
    text-shadow			:		0px 0px 15px black;

}
    
    .myname{
        
        position: relative;right: 10%;
        
    }
    
#privacy_policy_box {
    
    z-index             : 1;
    margin              : 0 auto;
    text-align          : center;
    width               : 95vw;
    height              : auto;
    border-radius       : 8px;
}


.privacy_policy_box_ {
    padding             :       1vh;
    text-shadow			:		0px 2px 20px black;
}

.privacy_policy_box_contents {

	width				:		100%;
	text-shadow			:		0px 0px 5px black;
    margin              :       2% auto; 
}
    
.privacy_policy_text ul li{

    z-index             : 5;
    text-align          : left;
    font-size           : 0.8em;
    list-style          : disc;
    color               : black;
    font-weight			: lighter; 
    text-shadow			: none;
    margin              : 2% 10% 0 2%;
}
    
.privacy_policy_text p {
    text-align:right;
    margin: 0 8% 0 0;
    font-size:0.8em;
    color: black;
    font-weight			:		lighter; 
    text-shadow			:		none;
}

.privacy_policy_text ul li a{
    color: white;
}
    
    
}
.gallery_bass {
    
}