/*
Theme Name: ささや
Theme URI: 
*/


/* ＰＣスタイル*/















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




/* ＰＣスタイル*/




@charset "utf-8";

@media (min-width: 997px)  {

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{


}



/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;

}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}


.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}



.list-mv07{
	opacity: 0;
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}



/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}







/*可視で横からフワ*/

.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}


.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/





.inst_fade_migi{

	animation-name:yuragifadein_migi;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein_migi {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(-50px);
	transform: translateX(-50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}




/*---------------*/
/*---------------*/


#all_wall{
width:100%;
height:auto;

}


#head_fix{
width:100%;
height:auto;
position:fixed;
z-index:20;

}





#fix_shop_cart{
position:fixed;
top:30%;
right:0;
z-index:20;
}


.midashi_1{
width:100%;
height:auto;
font-size:8px;
color:#CC9900;
background-color:#DDEBF7;

}




#head_adrress{
color:#000000;

height:auto;


letter-spacing:0.2em;

}





#head_logo_mob{
display:none;

}



#head_logo{
margin-top:10px;
}


/*----メニュー------*/

#g-nav{
width:100%;
max-width:1280px;
height:auto;
box-sizing: border-box;
position:relative;

padding-top:5px;
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

}



#head_wara{


}


.mob_menu{
display:none;
}


#head_menu{
width:35%;

text-align:right;
}



#head_inn{
margin-top:0px;
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top:0px;


}

#head_inn li{
border-right-width: 1px;
border-right-style: solid;
border-right-color:#333333;

border-left-width: 1px;
border-left-style: solid;
border-left-color:#333333;
}

#head_inn li+li{
border-right-width: 1px;
border-right-style: solid;
border-right-color:#333333;

border-left-width:0;

}


#head_inn li span{
display:block;
}


.navItem a {
    display: block;
	padding-top:15px;
 box-sizing: border-box;
    width: 105px;
    text-align: center;
    font-size: 14px;
  color:#000000;
font-weight:bold;
}

/* 擬似要素でテキストを表示 */
.navItem a::after {
    display: block;
    margin-top: .5rem;
    font-size: 10px;
    font-weight: lighter;
}
.navItem_naiyou a::after {
    content: "service";
}

.navItem_sekou a::after {
    content: "work";
}


.navItem_nagare a::after {
    content: "work flow";
}

.navItem_price a::after {
    content: "price";
}




#head_inn li a:hover{
text-decoration:underline;
}


.mob_menu{
display:none;
}


#top_gazou_main_mob{
display:none;
}

#top_gazou{
position:relative;
width:100%;
 height:100vh;
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
margin-right: auto;
margin-left: auto;
padding-top:0;
z-index:10;
}


#top_gazou_text{
position:relative;
width:100%;
 height:100vh;

}

#top_gazou_title{
position:absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);/*ここで戻しているのがポイント*/
  text-align:center;

/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	
}



.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 40px;
  margin-top: 15px;
}
.smooth.is-animated {
  clip-path: inset(0);
}



#top_gazou_title h2{
font-size:40px;
color:#FFFFFF;
letter-spacing:0.2em;
margin-bottom:20px;
font-weight:bold;


	
	
}

#top_gazou_title h1{
font-size:80px;
color:#FFFFFF;
letter-spacing:0.2em;
margin-bottom:20px;
font-weight:bold;
}

#top_gazou_title p{
font-size:24px;
color:#FFFFFF;
letter-spacing:0.2em;
margin-bottom:20px;
font-weight:bold;
}





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




#top_gazou_main{
position:fixed;
width:100%;
height:auto;
z-index:5;
}

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

#main_box{
height:auto;
width:100%;
background-color:#FFFFFF;
position:relative;
z-index:10;


}


/*-----カラム１段目-----------*/

#info_area{
width:100%;
height:auto;
position:relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color:#DDEBF7;
padding-top:150px;
padding-bottom:100px;
}

#info_img{
width:50%;
height:auto;
}

#info_img img{
width:100%;
height:auto;
  border-top-right-radius: 250px;/*要素の右上角にborder-radius90pxを指定*/
  border-bottom-right-radius: 250px;/*要素の右下角にborder-radius30pxを指定*/
}


#info_text{
width:44%;
height:auto;
padding-right:15%;
box-sizing: border-box;
}


#info_text h2{
font-size:20px;
letter-spacing:0.2em;
font-weight:bold;
margin-top:40px;
margin-bottom:20px;
}


#info_text p{
font-size:16px;
text-indent:1em;
line-height:2em;
color:#333333;

}

#happa_box01{
width:30%;
height:auto;
position:absolute;
top:0;
right:0;
}


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


/*-----カラム２段目--------------*/

#naiyou_area{
position:relative;
width:100%;
height:auto;
padding-top:100px;
padding-bottom:100px;
background-color:#DDEBF7;
}




#naiyou_area h2{
font-size:28px;
letter-spacing:0.2em;
font-weight:bold;
text-align:center;
margin-bottom:80px;
}


#naiyou_area_wara{
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;

display: flex;
flex-wrap: wrap;
justify-content: space-between;
}


#naiyou_area_box{
width:24%;
height:auto;

}


#naiyou_area_box_img{
width:100%;
height:auto;
}

#naiyou_area_box_img img{
width:220px;
height:220px;
 border-radius:50%;
 object-fit: cover;
}

#naiyou_area_box h3{
margin-top:20px;
margin-bottom:20px;
font-weight:bold;
letter-spacing:0.2em;
font-size:24px;
}

#naiyou_area_box p{
margin-top:20px;
line-height:2em;
}


#happa_box02{
width:30%;
height:auto;
position:absolute;
bottom:0;
left:0;
}

#happa_box02{
width:40%;
height:auto;
position:absolute;
bottom:0;
left:0;
}

#happa_box02 img{
width:100%;
height:auto;
vertical-align:bottom;

}


/*----option----------*/


.option_title{
font-size:36px;
margin-bottom:80px;
letter-spacing:0.2em;
font-weight:bold;
text-align:center;
color:#0099CC;
}
.option_title span{

}


#option_wall{
width:100%;
height:auto;
position:relative;
}




#option_area{
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;
padding-top:150px;
}

#option_area h3{
font-size:28px;
width:100%;
letter-spacing:0.2em;
padding-bottom:10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6699cc;
margin-bottom:40px;
}

.option_midashi{
font-size:20px;
margin-bottom:10px;
}

.option_midashi_sub{
font-size:14px;
}


#option_row{
width:100%;
height:auto;

display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:40px;
}



.option_bun{
font-size:16px;
line-height:2.5em;
}



#option_box{
width:50%;
height:auto;

}


#option_gazou{
width:45%;
height:auto;
}

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


#sejutu_info{
background-color:#EAFAFF;
 border-radius: 15px;
 padding:30px;
 margin-top:50px;
}


#sejutu_row{
width:100%;
height:auto;

display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:20px;
}


#sejutu_row_gazou{
width:20%;
height:auto;
}

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

#sejutu_row_text{
width:78%;
height:auto;
font-size:16px;
line-height:2.5em;
}


#option_cake{
width:80%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:50px;
margin-bottom:300px;
}

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


/*----料金----------*/

#survice_area{
width:100%;
height:auto;
background-color:#DDEBF7;
padding-top:80px;
padding-bottom:80px;
color:#0099CC;
}

#survice_wara{
width:100%;
max-width:1080px;
height:auto;
margin-right: auto;
margin-left: auto;
}



#survice_area h2{

font-size:24px;
letter-spacing:0.2em;
padding-bottom:10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6699cc;
margin-bottom:20px;
}


#survice_area p{
line-height:2.5em;
}


#survice_area a{
text-decoration:underline;
}

/*----ロケーションエリア-----------*/


#location_area{
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}


#location_map{
width:50%;
height:auto;
position:relative;
}

#location_map img{
width:100%;
height:auto;
vertical-align:bottom;
}


#location_access{
position:absolute;
top:0;
left:0;

color:#FFFFFF;
/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	
	
}

#location_access h2{
font-size:36px;
letter-spacing:0.2em;
font-weight:bold;
margin-bottom:30px;
padding-top:40px;
padding-left:20px;

}


#location_access p{
font-size:20px;
letter-spacing:0.2em;
margin-bottom:10px;
padding-left:20px;

}


#location_adress p{
margin-top:30px;
font-size:16px;
}



.copyright{
background-color:#DDEBF7;
color:#FFFFFF;
text-align:center;
padding-top:100px;
height:350px;
}


}























































































































































@media (min-width: 5px) and (max-width: 997px) {


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{



}



/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;

}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}


.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}



.list-mv07{
	opacity: 0;
	transform: translate(0,0px); 
	-webkit-transform: translate(0,0px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}




/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}





/*可視で横からフワ*/






.inst_fade_left{
}
/*---↑これは不使用----jsファイル anime_huwa.js内にinst_fade_leftクラスにinst_fadeのクラスを追記する記述あり-----------------*/


.inst_fade{

	animation-name:yuragifadein;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0s;
	opacity: 0;
}


@keyframes yuragifadein {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(50px);
	transform: translateX(50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}




.inst_fade_migi{

	animation-name:yuragifadein_migi;
	animation-duration:1s;
	animation-fill-mode:forwards;
	visibility: visible !important;
	animation-delay:0.3s;
	opacity: 0;
}


@keyframes yuragifadein_migi {
from {
opacity: 0;
    filter: blur(10px);
	transform: scale(1.02);
    transform: translateY(-50px);
	transform: translateX(-50px);
}
to {
opacity: 1;
    filter: blur(0);
	transform: scale(1);
    transform: translateY(0px);
	transform: translateX(0px);
}
}



















/*---------------*/

/*ハンバーガーをクリックすると展開するメニュー----------------------*/


#g-nav{
position:fixed;
top: 40px;
right:10px;
width:60px;
height:60px;
z-index:100;

background-color:rgba(255,255,255,0.9);
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;

}


#g-nav.panelactive{
width:100%;
left:0px;
}


#head_menu{
 position:absolute;
 top:60px;
 left:0px;
	width:100%;
    height:calc(100vh - 140px);
background-color:rgba(0,0,0,0.85);

display: flex;
align-items: center;
justify-content: center;
z-index:999;

	text-align: center;



		-webkit-transition: opacity 1s, visibility 0s ease 1s;
      -moz-transition: opacity 1s, visibility 0s ease 1s;
      -ms-transition: opacity 1s, visibility 0s ease 1s;
      -o-transition: opacity 1s, visibility 0s ease 1s;
      transition: opacity 1s, visibility 0s ease 1s;;
      opacity: 0;
	  visibility: hidden;



}



/*アクティブクラスがついたら透過なしにして最前面へ*/
#head_menu.panelactive{

	transition-delay: 0s;/*safari対策らしい*/
opacity: 1;
visibility: visible;


}

#head_logo{
display:none;
}


#head_logo_mob{
width:50%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:10px;
}



#head_logo_mob img{
width:100%;
height:auto;

}



#head_inn{
width:100%;
height:auto;
}

.head_menu_btn{
    position:relative;

width:100%;
height:60px;
font-weight:bold;




box-sizing: border-box;

}

.head_menu_btn span{

}


.head_menu_btn a{


	   display: flex;
align-items: center;
justify-content: center;

  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

transition: 0.5s;
letter-spacing:0.1em;
color:#FFFFFF;

}


.head_menu_btn a:hover{
background-color:#FFFFFF;
color:#000000;
transition: 0.5s;
text-decoration:none;
}

/*========= ハンバーガー部分===============*/
.openbtn{
	position:absolute;
    z-index: 888;/*ボタンを最前面に*/
	top:1px;
	right: 15px;
	cursor: pointer;

    width: 65px;
    height:85px;



}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 32px;
    height: 3px;

	background-color:#000000;
  	width: 60%;
  }

.openbtn span:nth-of-type(1) {
	top:10px;
}

.openbtn span:nth-of-type(2) {
	top:28px;
}

.openbtn span:nth-of-type(3) {
	top:46px;
}

.openbtn.active span:nth-of-type(1) {
    top: 25px;
    left: 22px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 37px;
    left: 22px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
}



/*------スマホメニューここまで---------*/



#head_adrress{
display:none;
}



#fix_shop_cart{
position:fixed;
bottom:0%;
right:0;
z-index:20;
width:60px;
height:auto;
}



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



.midashi_1{
width:100%;
height:10px;
font-size:8px;
color:#CCCCCC;
background-color:#DDEBF7;

}








/*--------------*/




#top_gazou_main_mob{

width:100%;
 height:100vh;
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
z-index:5;

}







#top_gazou_main_mob img{
width:100%;
height:auto;
vertical-align:bottom;
}

#top_gazou_main{
display:none;
}



#top_gazou{
position:relative;
width:100%;
 height:auto;
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
margin-right: auto;
margin-left: auto;
padding-top:0;
z-index:10;
}


#top_gazou_text{
position:relative;
width:100%;
 height:auto;

}

#top_gazou_title{
position:absolute;
top: 40%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);/*ここで戻しているのがポイント*/
  text-align:center;

/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	
	
}



.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 60px;
  margin-top: 15px;
}
.smooth.is-animated {
  clip-path: inset(0);
}



#top_gazou_title h2{
font-size:20px;
color:#FFFFFF;
letter-spacing:0.2em;
margin-bottom:20px;
font-weight:bold;
line-height:1.5em;

	
}

#top_gazou_title h2 span{
display:block;
}


#top_gazou_title h1{
font-size:32px;
color:#FFFFFF;
letter-spacing:0.3em;
margin-bottom:20px;
font-weight:bold;
}

#top_gazou_title p{
font-size:20px;
color:#FFFFFF;
letter-spacing:0.2em;
margin-bottom:20px;
font-weight:bold;
}





#top_gazou_text img{
width:100%;
height:auto;
vertical-align:bottom;
}




#top_gazou_main{
position:fixed;
width:100%;
height:auto;
z-index:5;
}

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

#main_box{
height:auto;
width:100%;
background-color:#FFFFFF;
position:relative;
z-index:10;


}


/*-----カラム１段目-----------*/

#info_area{
width:100%;
height:auto;
position:relative;
background-color:#DDEBF7;
padding-top:150px;
padding-bottom:0px;
}

#info_img{
width:100%;
height:auto;
}

#info_img img{
width:100%;
height:auto;
  border-top-right-radius: 250px;/*要素の右上角にborder-radius90pxを指定*/
  border-bottom-right-radius: 250px;/*要素の右下角にborder-radius30pxを指定*/
}


#info_text{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}


#info_text h2{
font-size:20px;
letter-spacing:0.2em;
font-weight:bold;
margin-top:40px;
margin-bottom:20px;
}


#info_text p{
font-size:16px;
text-indent:1em;
line-height:2em;
color:#333333;

}

#happa_box01{
width:40%;
height:auto;
position:absolute;
top:0;
right:0;
}


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


/*-----カラム２段目--------------*/

#naiyou_area{
position:relative;
width:100%;
height:auto;
padding-top:50px;
padding-bottom:100px;
background-color:#DDEBF7;
}




#naiyou_area h2{
font-size:20px;
letter-spacing:0.2em;
font-weight:bold;
text-align:center;
margin-bottom:30px;
}


#naiyou_area_wara{
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;

}


#naiyou_area_box{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-bottom:50px;
}


#naiyou_area_box_img{
width:60%;
height:auto;
margin-right: auto;
margin-left: auto;
}

#naiyou_area_box_img img{
width:100%;
height:auto;
 border-radius:50%;
 object-fit: cover;
}

#naiyou_area_box h3{
margin-top:20px;
margin-bottom:20px;
font-weight:bold;
letter-spacing:0.2em;
font-size:24px;
}

#naiyou_area_box p{
margin-top:20px;
line-height:2em;
}




#happa_box02{
width:50%;
height:auto;
position:absolute;
bottom:0;
left:0;
}

#happa_box02 img{
width:100%;
height:auto;
vertical-align:bottom;

}


/*----option----------*/


.option_title{
font-size:20px;
margin-bottom:80px;
letter-spacing:0.2em;
font-weight:bold;
text-align:center;
color:#0099CC;
}
.option_title span{

}


#option_wall{
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
position:relative;
}




#option_area{
width:90%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;
padding-top:150px;
}

#option_area h3{
font-size:20px;
width:100%;
letter-spacing:0.2em;
padding-bottom:10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6699cc;
margin-bottom:40px;
}

.option_midashi{
font-size:20px;
margin-bottom:10px;
}

.option_midashi_sub{
font-size:14px;
}


#option_row{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;

margin-top:40px;
}



.option_bun{
font-size:16px;
line-height:2.5em;
}



#option_box{
width:100%;
height:auto;

}


#option_gazou{
width:100%;
height:auto;
}

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


#sejutu_info{
background-color:#EAFAFF;
 border-radius: 15px;
 padding:30px;
 margin-top:50px;
}


#sejutu_row{
width:100%;
height:auto;

margin-top:20px;
}


#sejutu_row_gazou{
width:60%;
height:auto;
margin-right: auto;
margin-left: auto;
}

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

#sejutu_row_text{
width:100%;
height:auto;
font-size:16px;
line-height:2.5em;
}


#option_cake{
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:50px;
margin-bottom:100px;
}

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


/*----料金----------*/

#survice_area{
width:100%;
height:auto;
background-color:#DDEBF7;
padding-top:80px;
padding-bottom:0px;
color:#0099CC;

}

#survice_wara{
width:90%;
max-width:1080px;
height:auto;
margin-right: auto;
margin-left: auto;
margin-right: auto;
margin-left: auto;
padding-bottom:50px;
}



#survice_area h2{

font-size:24px;
letter-spacing:0.2em;
padding-bottom:10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6699cc;
margin-bottom:20px;
}


#survice_area p{
line-height:2.5em;
}


#survice_area a{
text-decoration:underline;
}


/*----ロケーションエリア-----------*/


#location_area{
width:100%;
height:auto;
background-color:#000000;

}


#location_map{
width:100%;
height:400px;
position:relative;
vertical-align:bottom;
}

#location_map img{
width:100%;
height:auto;
vertical-align:bottom;
overflow:hidden;
}


#location_access{
position:absolute;
top:0;
left:0;

color:#FFFFFF;
/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	
	
}

#location_access h2{
font-size:16px;
letter-spacing:0.2em;
font-weight:bold;
margin-bottom:30px;
padding-top:40px;
padding-left:20px;

}


#location_access p{
width:80%;
font-size:14px;
letter-spacing:0.2em;
margin-bottom:10px;
padding-left:20px;

}


#location_adress{
margin-top:30px;
}


#location_adress p{
font-size:14px;
line-height:1em;
}



.copyright{
background-color:#DDEBF7;
color:#FFFFFF;
text-align:center;
padding-top:100px;
height:350px;
}


}