@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

* {
 padding             : 0;
 margin              : 0;
}

html{
 font-size           : 62.5%;
 line-height         : 140%;
 height              : 100%;
 padding             : 0 0 0 0 !important;
}

body {
 margin              : 0;
 padding             : 0;
 height              : 100%;
 font-family         : "游明朝", YuMincho, "Sawarabi Mincho" , serif;
/* font-family         : 'Noto Sans Japanese','Meiryo',Arial,sans-serif; */
/* font-family         : "M PLUS Rounded 1c", sans-serif; */
 letter-spacing      : 0.05em;
 color               : #000000; /*#3e3a39;*/
}

img {
 max-width           : 100%;
 border              : 0;
 vertical-align      : bottom;
}
img {
    image-rendering: -webkit-optimize-contrast;
}
a{
 text-decoration     : none;
 color               : #3e3a39;
}
a:hover{
 text-decoration     : none;
 color               : #b71c25;
}
a img {
 border-top-style    : none;
 border-right-style  : none;
 border-bottom-style : none;
 border-left-style   : none;
}


a:hover img{
 opacity             : 0.5;
 filter              : alpha(opacity=50);
 -moz-opacity        : 0.5;
 -ms-filter          : "alpha(opacity=50)";
 background-color    : rgba(255, 255, 255, 0);
 margin              : 0 0 0 0 !important;
}

a img{
 opacity             : 1;
 filter              : alpha(opacity=100);
 -moz-opacity        : 1;
 -ms-filter          : "alpha(opacity=100)";
 -webkit-transition  : 0.2s;
 -moz-transition     : 0.2s;
 -o-transition       : 0.2s;
 -ms-transition      : 0.2s;
 transition          : 0.2s;
}

.clear-both{
 clear               : both;
}

.red{ color : #e50011; }/*a44329*/


a[href^="tel:"]{
 pointer-events      : none;
}

.codepc{ display     : inline; }
.codesp{ display     : none; }

.side_btn {
 position            : fixed;
 top                 : 150px;
 right               : 0;
 z-index             : 9999;
}

#page-top{
 position            : fixed;
 bottom              : 5vw;
 right               : 3vw;
 z-index             : 9998;
}
#page-top img{
 width               : 6vw;
}

ruby{
 ruby-position: under;
}



/*-------------------------------------------
ヘッダ
-------------------------------------------*/
header{
 width               : 100%;
 text-align          : center;
 background          : #0f0f0f;
}
header:after {
 content             : "";
 display             : block;
 clear               : both;
}
header h1{
 display             : none;
}



/*-------------------------------------------
フッター
-------------------------------------------*/
#footer{
 width               : 100%;
 text-align          : center;
 font-size           : 1.2vw;
 line-height         : 160%;
 background          : #221814;
 color               : #ffffff;
 padding             : 3vw 0 10vw 0;
}
#footer:after{
 content             : "";
 display             : block;
 clear               : both;
}
#footer p{
 padding             : 0 0 1.5em 0;
}
#footer p img{
 width               : 4vw;
 padding             : 0 0 1.5em 0;
}
#footer .fmenu{
 font-size           : 0.9vw;
}
#footer .fmenu a{
 color               : #ffffff;
}
#footer .fmenu a:hover{
 color               : #e50011;
}



/*-------------------------------------------
コンテンツ
-------------------------------------------*/
.container{
 width               : 76%;
 margin              : 0 auto;
 padding             : 1vw 0 5vw 0;
}
.container:after {
 content             : "";
 display             : block;
 clear               : both;
}

.container .content{
 width               : 86%;
 margin              : 0 auto;
 padding             : 1vw 0 5vw 0;
 font-size           : 1.3vw;
 line-height         : 160%;
 text-align          : justify;
 letter-spacing      : 0.05em;
}
.container .content p{
 width               : 100%;
 padding             : 0 0 2em 0;
}

.img80center{
 width               : 80%;
 padding             : 0 10% 0 10%;
}

.mds01{
 width               : 86%;
 margin              : 0 auto;
 padding             : 2vw 0 2vw 0;
 font-size           : 2.5vw;
 line-height         : 160%;
 text-align          : center;
 letter-spacing      : 0.1em;
 color               : #3e3a39;
}
.mds02{
 width               : 86%;
 margin              : 0 auto;
 padding             : 0 0 5vw 0;
 font-size           : 1.4vw;
 line-height         : 160%;
 text-align          : center;
 letter-spacing      : 0.1em;
 color               : #3e3a39;
}
.mds03{
 width               : 86%;
 margin              : 0 auto;
 padding             : 0 0 3vw 0;
 font-size           : 1.8vw;
 line-height         : 160%;
 text-align          : center;
 letter-spacing      : 0.1em;
 color               : #3e3a39;
}

.mds01 img{
 width               : 10%;
 padding             : 0 0 1vw 0;
}
.mds02 img{
 width               : 10%;
 padding             : 0 0 1vw 0;
}


.gallery{
 width               : 100%;
 margin              : 0 auto;
 padding             : 2vw 0 4vw 0;
 font-size           : 1vw;
 line-height         : 160%;
 text-align          : center;
 letter-spacing      : 0.1em;
 color               : #3e3a39;
}
.gallery .pic{
 float               : left;
 display             : inline;
 width               : 10.7vw;
 height              : 9vw;
 position            : relative;
}
.gallery .pic .imageA{
 width               : 100%;
 height              : 9vw;
 object-fit          : cover;
}

.movie-wrap {
 position            : relative;
 padding-bottom      : 56.25%; /*アスペクト比 16:9の場合*/
 height              : 0;
 overflow            : hidden;
 margin              : 0 0 5vw 0;
}
 
.movie-wrap iframe {
 position            : absolute;
 top                 : 0;
 left                : 0;
 width               : 80%;
 padding             : 0 10% 0 10%;
 height              : 100%;
}



/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mainv{
 width               : 100%;
 margin              : 0 auto;
}



/*-------------------------------------------
流れ
-------------------------------------------*/

.sec00{
 width               : 100%;
 margin              : 0 auto;
 padding             : 10vw 0 0 0;
 font-size           : 1.3vw;
}

.flow01{
 width               : 100%;
 margin              : 0 auto;
 padding             : 1em 0 1em 0;
 background          : #eeefef;
 text-align          : center;
}
.flow02{
 width               : 100%;
 margin              : 0 auto;
 padding             : 1em 0 1em 0;
 background          : #ffffff;
 text-align          : center;
}

.cost01{
 float               : left;
 display             : inline;
 width               : 47%;
 margin              : 0 3% 0 0;
}
.cost02{
 float               : left;
 display             : inline;
 width               : 47%;
 margin              : 0 0 0 3%;
}
.cost01 .cell,
.cost02 .cell{
 width               : 100%;
 margin              : 0 auto;
 padding             : 1em 0 1em 0;
 border-bottom       : 1px dotted #3e3a39;
}
.cost01 .cell2,
.cost02 .cell2{
 width               : 95%;
 margin              : 0 auto;
 padding             : 1em 0 1em 5%;
 border-bottom       : 1px dotted #3e3a39;
}
.cost01 .cell_noline,
.cost02 .cell_noline{
 width               : 100%;
 margin              : 0 auto;
 padding             : 0.5em 0 0.5em 0;
}
.cost01 .cell .price,
.cost02 .cell .price{
 width               : 100%;
 margin              : 0 auto;
 text-align          : right;
 padding             : 0.5em 0 0 0;
}
.cost01 .cell2 .price,
.cost02 .cell2 .price{
 width               : 95%;
 margin              : 0 auto;
 text-align          : right;
 padding             : 0.5em 0 0 5%;
}


.otoiawase{
 width               : 100%;
 margin              : 0 auto;
 padding             : 3vw 0 3vw 0;
 font-size           : 1.3vw;
 line-height         : 180%;
 background          : #eeefef;
 text-align          : center;
}
.otoiawase .tel{
 font-size           : 1vw;
}
.otoiawase strong{
 font-size           : 3vw;
}
.otoiawase a{
 display             : inline-block;
 margin              : 2vw 0 0 0;
 padding             : 0.5em 2em 0.5em 2em;
 background          : #ffffff;
}
.otoiawase a:hover{
 display             : inline-block;
 margin              : 2vw 0 0 0;
 padding             : 0.5em 2em 0.5em 2em;
 background          : #e50011;
 color               : #ffffff;
}






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

@media(max-width:1200px) and (min-width: 850px){

		.codepc{ display     : inline; }
		.codesp{ display     : none; }

		a[href^="tel:"]{
		 pointer-events: auto;
		}

}/*----------*/





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

@media (max-width: 850px) {

	.codepc{ display     : none; }
	.codesp{ display     : inline; }

	a[href^="tel:"]{
	 pointer-events: auto;
	}

	#page-top{
	 bottom              : 3vw;
	 right               : 1vw;
	 z-index             : 99999 !important;
	}
	#page-top img{
	 width               : 15vw;
	}



	/*-------------------------------------------
	ヘッダ
	-------------------------------------------*/
	header{
	}
	header:after {
	}
	header h1{
	}



	/*-------------------------------------------
	フッター
	-------------------------------------------*/
	#footer{
	 width               : 90%;
	 font-size           : 3.5vw;
	 line-height         : 160%;
	 padding             : 3vw 5% 10vw 5%;
	}
	#footer:after{
	}
	#footer p{
	}
	#footer p img{
	 width               : 15vw;
	 padding             : 0 0 1.5em 0;
	}
	#footer .fmenu{
	 font-size           : 3vw;
	}
	#footer .fmenu a{
	}
	#footer .fmenu a:hover{
	}



/*-------------------------------------------
コンテンツ
-------------------------------------------*/
	.container{
	 width               : 100%;
	 padding             : 0vw 0 5vw 0;
	}
	.container:after {
	}

	.container .content{
	 width               : 86%;
	 padding             : 1vw 0 5vw 0;
	 font-size           : 3.7vw;
	 line-height         : 160%;
	}
	.container .content p{
	 width               : 100%;
	 padding             : 0 0 2em 0;
	}

	.img80center{
	 width               : 100%;
	 padding             : 0 0% 0 0%;
	}

	.mds01{
	 width               : 100%;
	 padding             : 5vw 0 4vw 0;
	 font-size           : 6vw;
	}
	.mds02{
	 width               : 100%;
	 padding             : 0 0 5vw 0;
	 font-size           : 3.7vw;
	}
	.mds03{
	 width               : 100%;
	 padding             : 0 0 3vw 0;
	 font-size           : 3.7vw;
	}

	.mds01 img{
	 width               : 15%;
	 padding             : 0 0 1vw 0;
	}
	.mds02 img{
	 width               : 15%;
	 padding             : 0 0 3vw 0;
	}


	.gallery{
	 width               : 100%;
	 padding             : 0 0 10vw 0;
	 font-size           : 3vw;
	 line-height         : 160%;
	 letter-spacing      : 0em;
	}
	.gallery .pic{
	 width               : 16.6%;
	 height              : 8vw;
	}
	.gallery .pic .imageA{
	 width               : 100%;
	 height              : 8vw;
	 object-fit          : cover;
	}

	.movie-wrap {
	 margin              : 0 0 10vw 0;
	}
 
	.movie-wrap iframe {
	}



	/*-------------------------------------------
	メインビジュアル
	-------------------------------------------*/
	.mainv{
	}



/*-------------------------------------------
流れ
-------------------------------------------*/

	.sec00{
	 font-size           : 3.7vw;
	}

	.flow01{
	}
	.flow02{
	}

	.cost01{
	 width               : 100%;
	 margin              : 0 0% 0 0;
	}
	.cost02{
	 width               : 100%;
	 margin              : 10vw 0 0 0%;
	}
	.cost01 .cell,
	.cost02 .cell{
	}
	.cost01 .cell2,
	.cost02 .cell2{
	}
	.cost01 .cell_noline,
	.cost02 .cell_noline{
	}
	.cost01 .cell .price,
	.cost02 .cell .price{
	}
	.cost01 .cell2 .price,
	.cost02 .cell2 .price{
	}


	.otoiawase{
	 padding             : 6vw 0 6vw 0;
	 font-size           : 3.7vw;
	}
	.otoiawase .tel{
	 font-size           : 3vw;
	}
	.otoiawase strong{
	 font-size           : 6vw;
	}
	.otoiawase a{
	 padding             : 0.5em 1em 0.5em 1em;
	}
	.otoiawase a:hover{
	 padding             : 0.5em 1em 0.5em 1em;
	}








}/*----------*/