/*================================================
 *  CSSリセット
 ================================================*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-size: 100%;
	vertical-align:baseline;
	box-sizing: border-box;	
}

article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}

body {
  line-height: 1;
  text-size-adjust: 100%;
}

ol, ul {
  list-style: none;
  list-style-type: none;
  margin-bottom: 1em;
}

img {
	-ms-interpolation-mode: bicubic;
	vertical-align:bottom;
}





/*================================================
 *  一般・共通設定
 ================================================*/
html {
	font-size: 62.5%;/* -> 10px; */
}
body {
	font-size: 1.6em;/* -> 16px; */
	line-height: 1.8em;/* -> 18px; */
	
	color:#545047;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	background:#fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
} 



@media screen and (max-width:767px) {/*スマホでは非表示に*/
.spno {
display:none;
}
}

@media screen and (min-width:768px) {/*PCでは非表示に*/
.pcno {
display:none;
}
}

/*================================================
 *  ヘッダー
 ================================================*/
header {
	margin: 0 auto;
}

#hedinfo {
	margin: 0 auto;
	padding-bottom: 8px;
	position: fixed;
	top:0;
	background: rgba(255,255,255,0.9);
	z-index:9999;
	width:100%;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.22);	
	}

@media screen and (min-width:768px) {/*PC追加指定*/
#hedinfo{
	padding-bottom: 0px;
	position: static;
	display:block;
	background: rgba(255,255,255,1);
	z-index:0;
	max-width: 1040px;
    box-shadow:none;	
	height:127px;/*いれないとDW崩れる*/
	
}
}

/*-----------------------------------*/
#logo {
	padding:0;	
	
}

#logo img{
	height:48px;
}

@media screen and (min-width:768px) {/*PC追加指定*/
#logo {
	padding-left: 5px;
	float: left;
	display:block;

}

#logo img{
	height:auto;
}
}

/*-----------------------------------*/
#logo h1{
    line-height: 0rem;
	color:#726d5c;
	margin-left: 3px;
	font-size: 1rem;
}

@media screen and (min-width:768px) {/*PC追加指定*/
#logo h1{
	margin-left: 10px;
	font-size:1.7rem;
	}
}

/*-----------------------------------*/
#address {
	display:none;
}

@media screen and (min-width:768px) {/*PC追加指定*/
#address {
	display:block;
	text-align:right;
	font-size: 1.5rem;
	color: #444444;
    padding-top: 13px
}

#address p {
	font-weight:bold;
	padding: 3px;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}

.telsyze {
	font-size: 2.5rem;
	color: #c9171e;
	font-weight: bold;
}

.telsyze:before {
	content: "\f095";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 2.5rem;
}


#address:after {/*floatの解除*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
}

/*-----------------------------------*/
.spicon{
	text-align:center;
	top: 0;
    position: absolute;
    right: 0;
}

.spicon li{
	margin:0;
	float:right;
	margin-right:0.5rem;
	margin-left:0.5rem;
}

.spicon li a{
	color: #455282;
}

.iconyoyaku,
.icontel,
.iconmail,
.iconmenu{
	font-size: 1rem;
	line-height: 2rem;
	white-space: nowrap;
    color: #455282;
}
.menuicon:after{
	font-family: "Font Awesome 5 Free";
	content: "\f0c9";
	font-weight: 900;
	margin-left: 0px;
	font-size: 3.5rem;
}
.hedmenuonclick::after{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 0px;
	font-size: 3.5rem;
}

.mail:after{
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
	font-weight: 400;
	margin-left: 0px;
	font-size: 3.5rem;
}

.tel:after{
	font-family: "Font Awesome 5 Free";
	content: "\f095";
	font-weight: 900;
	margin-left: 0px;
	font-size: 3.5rem;
}
.yoyaku_b:after{
	font-family: "Font Awesome 5 Free";
	content: "\f073";
	font-weight: 400;
	margin-left: 0px;
	font-size: 3.5rem;
}

.spicon:after {/*floatの解除*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

@media screen and (min-width:768px) {/*PC追加指定*/
.spicon{
display:none;
}
}

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



/* ––––––––––––––––––––––––––––––––––––––––––––––––––
メガメニュー
–––––––––––––––––––––––––––––––––––––––––––––––––– */	
.menu-container {
	z-index: 2;
    display:none;
    width: 100%;
	margin-bottom: 5px;
	position: fixed;
	overflow-y: auto;
	height:100%; 
	-webkit-overflow-scrolling: touch;   /*慣性スクロールを追加*/
	margin-top: 56px;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.menu-container {
	display:block;

	margin-top: 0px;
	border-top: solid 1px #bbad92;
	box-shadow:0px -7px 0px 0px #8a8a8a inset;
	background-color: #faf8f4;
	position:static ;
	overflow-y:visible;
}



}

/*-----------------------------------*/
.menu-container li{
	margin: 0 auto;
}

.menu > ul {
	margin: 0 auto;
	padding: 0;
	background-color: #FFF;
	width: 100%;
    margin-bottom: 56px;
	border-top: solid 1px #ddd;
	}
	
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul {
  max-width: 1040px;
  position: relative;/* position: relativeにしない場合はメガメニューの横幅が画面いっぱいになる */
  background: none;
  padding-bottom: 0px;
	margin-bottom: 0px;
	border:none;
}
}

.menu > ul:before,
.menu > ul:after {
  content: "";
  display: table;
}
.menu > ul:after {
  clear: both;
}

/*-----------------------------------*/
.menu > ul > li {
    display: block;
	padding:0;
	text-align: center;	
    margin: 0;
	border-bottom: solid 1px #ddd;
}
	  
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li {
	float: left;
	border-bottom:none;
	width: 14.28571428571429%;
	border-left: solid 1px #d6c6af;
	box-shadow:0px -7px 0px 0px #8a8a8a inset;
	background-color: #faf8f4;

}
.menu > ul > li:hover{
	background: #e6d7b8;
}
	

.menu > ul > li:hover:after {
	position: absolute;
	content: '';
	top: 69%;
    border: 6px solid transparent;
    border-bottom: 6px solid #8a8a8a;
}
}

/*-----------------------------------*/
.rightli:before{
    content: '';
    display: block;
    width: 1px;
    height: 73px;
    background-color: #ddd;
    position: absolute;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.rightli:before{
    display:none;
}

.pcno{
	display:none !important;
}
}

/*-----------------------------------*/
.subname{
	white-space: nowrap;
}

/*-----------------------------------*/
.menu li.home {
  border-left: none;
}

/*-----------------------------------*/
@media only screen and (max-width: 767px) {/*スマホだけの指定*/
.menu li.spno{
	display:none;
}
}

/*-----------------------------------*/
.menu > ul > li a {
	width: 100%;
	font-size: 1.3rem;	
	color: #3a2d22;	
	display: block;
	line-height: 1.7rem;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 18px 0px 18px 20px;	
}


		
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li a {
		font-size: 1.3rem;	

	text-align: center;
	padding: 12px 0px 12px 0px;	
}
}




/* ––––––––––––––––––––––––––––––––––––––––––––––––––
クリック時の矢印と背景色設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.haslist > a:after{
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 10px;
	font-size: 1.7rem;
	position:absolute;
    right: 12px;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.haslist > a:after{
	position: static;
}
}

.megaonclick{
	background: #e6d7b8 !important;
}	

@media screen and (min-width:768px) {/*PC追加指定*/
.megaonclick:after {
	position: absolute;
	content: '';
	top: 69%;
    border: 6px solid transparent;
    border-bottom: 6px solid #8a8a8a;
	    left: auto;
}
}

.megaonclick > a{
	font-weight:bold;
}

.megaonclick > a:after{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 10px;
	font-size: 1.7rem;
}

/*カラム落ち防止策*/
.single:after {
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
	margin-left: -10px;
	font-size: 1.7rem;
	visibility:hidden;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
矢印背景設定ここまで
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*シングルメニュー中身ここから*/
.menu > ul > li > ul.normal-sub {
  padding-top: 5px;
  padding-bottom: 10px;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li > ul.normal-sub {
  width: 28.5%;
  left: auto;
}
}

.menu > ul > li > ul.normal-sub > li {
	width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {/*ボタン装飾*/
	padding: 1.3em 0;
    margin: 0 auto;
    width: 96%;
	border-left: 10px solid #3a2d22;
		border-bottom: 1px dotted #3a2d22;
	background-color:#FFF;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
}
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li > ul.normal-sub > li a {
		border-bottom: none;
}
}

.menu > ul > li > ul.normal-sub > li a:hover {
	border-left: 10px solid #a12f23;
	transition: 0.2s ease-out;
}
/*シングルメニュー中身ここまで*/




/*メガメニュー中身ここから*/
/*-----------------------------------*/
.menu > ul > li > ul {
	display: none;
	left: 0;
	margin: 0;
	padding: 0px 0;
	background: #e6d7b8;
  	position: relative;
	width: 100%;
  }
  
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li > ul {
	position: absolute;
	width: 100%;
	z-index: 1;
	padding-bottom: 20px;
	box-shadow: 6px 6px 11px 1px rgba(0,0,0,0.2);

}
}

/*-----------------------------------*/
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
  content: "";
  display: table;
}

.menu > ul > li > ul:after {
  clear: both;
}

/*-----------------------------------*/
.menu > ul > li > ul > li {
    margin: 0;
    width: 100%;
  }
  
@media screen and (min-width:768px) {/*PC追加指定*/
.menu > ul > li > ul > li {
	float: left;
	width: 33.333333%;
    margin-top: 10px;
  }
}

/*-----------------------------------*/
.menu > ul > li > ul > li a {
	padding: 0.4rem 0;
	text-align: center;	
	font-size: 1.3rem;	
}




@media screen and (min-width:768px) { 
/*　画面サイズが768からはここを読み込む　*/
.menu > ul > li > ul > li a {
	font-size: 1rem;	
}
}

@media screen and (min-width:794px) { 
/*　画面サイズが794からはここを読み込む　*/
.menu > ul > li > ul > li a {
	font-size: 1.1rem;	
}
}

@media screen and (min-width:928px) {
/*　画面サイズが923pxからはここを読み込む　*/
.menu > ul > li > ul > li a {
	font-size: 1.3rem;	
}	
}	
	
	
	


/*-----------------------------------*/
.menu-syomei,
.menu-profile,
.menu-kazoku{
    box-shadow: 3px 4px 7px -3px rgba(0,0,0,.2);
	}

.menu-syomei{
    margin: 0px 3px;
}

.menu-profile {
    margin: 10px 3px;
}

.menu-kazoku {
    margin: 0px 3px 5px 3px;

}

@media screen and (min-width:768px) {/*PC追加指定*/
.menu-syomei {
    margin: 10px 5px 10px 10px;
}
.menu-profile {
}
.menu-kazoku {
    margin: 10px 10px 5px 5px;
}
}

/*-----------------------------------*/
.title-menu-syomei,
.title-menu-profile,
.title-menu-kazoku {
    padding: 0;
    background: #3a2d22;
	text-align: center;
	color:#FFF;
	font-size: 1.6rem;
	padding: 0.2rem;
	
	
}

@media screen and (min-width:768px) {/*PC追加指定*/
.title-menu-syomei,
.title-menu-profile,
.title-menu-kazoku {
	font-size: 2rem;
	padding: 0.3em;
    background: #6a9440;
    border-bottom: solid 0px #5c769a;
	
	border-top-left-radius: 13px;
    border-top-right-radius: 13px;

	
	
}


}

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


/*-----------------------------------*/
.megamenulist {
    margin: 0;
    padding: 0;
	background-color:#FFF;
}

/*-----------------------------------*/
.megamenulist h4{
	    padding: 0.3em 0;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.megamenulist h4{
}
}

.megamenulist li{
	border: dotted 1px #c3beba;
}

/*-----------------------------------*/
.megamenu-panel{
	width:100%;
	padding:0;
	display: flex;
	margin-bottom: 0;
	}

/*-----------------------------------*/
.megasize1{
	width : 100% ;
	margin:3px;
	padding:0;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.megasize1{
}
}

.megasize2{
	width : 100% ;
	margin:3px;
	padding:0;
}	
@media screen and (min-width:768px) {/*PC追加指定*/
.megasize2{
	padding:0;
	margin:3px;
	}
	}


@media screen and (min-width:768px) {/*PC追加指定*/
.megasize1,
.megasize2{
	margin:0 3px;
}
}
	
/*-----------------------------------*/
.megasize1:hover:hover,
.megasize2:hover:hover{
	opacity:0.8;
	}

/*-----------------------------------*/
.megasize1 img,
.megasize2 img{
	filter: brightness(100%);
}


.megasize1 img{
	max-width: 30%;
	vertical-align: middle;
}

.megasize2 img{
	max-width: 50%;
	vertical-align: middle;
	display: block;
    margin: 0 auto;
	margin-bottom: 5px;	

}
@media screen and (min-width:768px) {/*PC追加指定*/
.megasize1 img{
	max-width: 100%;
	display: block;
    margin: 10px auto;
	margin-bottom: 5px;	
}

.megasize2 img{
	max-width: 100%;
	display: block;
    margin: 10px auto;
	margin-bottom: 5px;	
}


}




/* ––––––––––––––––––––––––––––––––––––––––––––––––––
閉じるボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu_close {
    display: block!important;
    text-align: center!important;
    color: #7d8383!important;
    text-shadow: 0px 1px 0px #fafafa!important;
	padding:20px!important;
	font-size: 1.6rem!important;
	line-height: 1.8rem!important;
	border-bottom:none;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.menu_close {
	display:none!important;
}
}




/*================================================
 *  メイン画像
 ================================================*/
#header_img {
	width: 100%;
    text-align: center;
    background-color: #faf8f4;
	padding-top: 65px;/*スマホ固定ヘッダー分の高さ指定*/

}
@media screen and (min-width:768px) {/*PC追加指定*/
#header_img {
    margin: 5px 0 5px 0;
	padding:0;
	}
}

#header_img img {
	display: block;
	margin: 0 auto 0 auto;
  	max-width: 100%;
    height: auto;
}

nav {
	display: block;
}


/*================================================
 *  コンテンツ全体
 ================================================*/

#contents {
	position:relative;
	max-width:1040px;
	margin:0 auto;
	}
	
/* タブレット向けデザイン
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
#contents {
	width:100%;
	}
}

@media screen and (min-width:768px) {/*PC追加指定*/
#contents {
	display:flex;
	flex-direction: row-reverse;
} 

#contents:after {/*DW用floatの解除*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
} 	
}
/*================================================
 *  サイドバー全体
 ================================================*/
aside {
	width:100%;
} 
@media screen and (min-width:768px) {/*PC追加指定*/
aside {
	width:27.99999%;
	float:left;/*DWで正常に表示する為だけ*/
} 
} 

/*-----------------------------------*/
#sub {
	width:100%;
	margin:0 auto;
	margin-top:1.5rem;
	height:100%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
#sub {
	width:92%;

}
}

#sub a:hover {
		opacity:0.7;
}

/*================================================
 *  メイン全体
 ================================================*/
main {
	width:100%;
	height:100%;
	margin:0 auto;
	background:#fff;

} 
@media screen and (min-width:768px) {/*PC追加指定*/
main {
	width:70%;
	float:right;/*DWで正常に表示する為だけ*/

}
}

#main{
padding: 5px;	
}




/*================================================
 *  サイドバー上部ボタン
 ================================================*/
.sideb h2{
	text-align:left;
	margin: 0;
    border: none;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.sideb h2 br{
  display:block;
}
}

 
.menu_yoyaku_btn,
.menu_nagare_btn,
.menu_mail_btn {
		margin-bottom:1.5rem;
		box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}

.menu_yoyaku_btn a,
.menu_nagare_btn a,
.menu_mail_btn a{
    color: #000;
    display: block;
    border: solid 5px #FFF;
    padding: 7px 4px 3px 55px;
	font-size: 1.5rem;
    line-height: 1.9;
}

.menu_yoyaku_btn a{
	background-image: url(../img/bg_yoyaku.jpg);
	background-size:auto 66px;
}
.menu_nagare_btn a{
	background-image: url(../img/bg_nagare.jpg);
	background-size:auto 66px;
}
.menu_mail_btn a{
	background-image: url(../img/bg_Q&A.jpg);
	background-size:auto 66px;
}


/*================================================
 *  カレンダー
 ================================================*/
#calenderframe h2{
	border-bottom: dotted 4px #6587b5;
	text-align: center;
    margin: 1.7rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.8em;
    margin-top: 0;
	color: #000;
		}

iframe#calender{
	width:100%;
	height:206px;
	border:none;
	}
	
@media screen and (min-width:768px) {/*PC追加指定*/
iframe#calender{
	height:400px;/*下は367*/
}
}

/*================================================
 *  予約表のカレンダー
 ================================================*/
#calenderframe_yoyaku h3{
	border-bottom: dotted 4px #6587b5;
	text-align: center;
    margin: 1.7rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.8em;
    margin-top: 0;
	color: #000;
		}

iframe#calender_yoyaku{
	width:100%;
	height:206px;
	border:none;
	}
	
@media screen and (min-width:768px) {/*PC追加指定*/
iframe#calender_yoyaku{
		width:71%;
}
}




/*================================================
 *  サイドバー撮影メニュー
 ================================================*/
.sidemenu {
    cursor: pointer;
    margin-bottom: 0;
    padding: 7px 0 7px 40px;
    color: #000;
    padding-right: 35px;
	font-size: 1.4rem;
	text-align:left;
	background-color:#f0f1f2;
	background:linear-gradient(to bottom, #f7f7f7, #e0e0e0);
	    border: none;
		margin-top:0;

}
@media screen and (min-width:768px) {/*PC追加指定*/
.sidemenu {
	display:none;
}
}

/*-----------------------------------*/
.sidemenu:before{
	content: "\f0c9";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 2.2rem;	
	position: absolute;
	left: 10px;
}

.sidemenu:after{
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 3rem;	
	right:8px;
	position: absolute;
}

.side_onclick:after{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 2.5rem;	
	right:5px;
	position: absolute;
}

/*-----------------------------------*/
.menubox{
  border: solid 1px #ececec;
  border-bottom:none;
  margin-bottom:2rem;
}

/*-----------------------------------*/
.menulist {
  margin:auto;
  width: 100%;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.menulist {
}
}

/*-----------------------------------*/
.menulistimg{
vertical-align: middle;
margin-right:10px;
height:43px;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.menulistimg {
	display:none;
}
}

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

.sidemenu_catename{
	text-align: center;
    margin: 0;
    padding: 8px;
    margin-top: 0;
    font-size: 1.6rem;
    color: #FFF;
    background-color: #6587b5;
	padding: 8px 0px;
	border:none;
}

.sidemenu_catename:before{
	content: "\f030";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 2.6rem;
	margin-right:15px;
    vertical-align: bottom;
}




.menulist h4 {
	text-align: center;
	margin: 0;
	padding:8px;
	margin-top: 0;
	font-size: 1.6rem;
	color: #FFF;
    background-color: #6587b5;
}

.menulist h4:before{
	content: "\f030";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 2.6rem;
	margin-right:15px;
    vertical-align: bottom;
}



.menulist li {
	margin: 0;
	list-style: none;
}

.menulist li a{
	color: #3d3c41;
	display: block;
	border-bottom: solid 1px #ececec;
    padding: 7px 0px 7px 7px;
	font-size: 1.4rem;
	background:linear-gradient(to bottom, #ffffff, #eeeff1);
}

.menulist li a:before{
	content: "\f138";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right:15px;
	color:#999999
}
	
/*================================================
 *  ツイッターウィジェット
 ================================================*/
.twitterbox{
	display:none;
}
@media screen and (min-width:768px) {/*PC追加指定*/	
.twitterbox{
	display:block;
	text-align: center;
	width:100%;
	height:450px;
	padding: 8px;
	margin-bottom:10px;
	background-color: #f1f0f1;
}
}

.twitter-timeline{
	width:100%;
	height:100%!important;
}


/*================================================
 *  QRコード
 ================================================*/
.qrcode{
	display:none;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.qrcode{
	display:block;
	text-align: center;
    padding-bottom: 1em;
    border: 1px dotted #ddd;

	}
.qrcode img{
	max-width:100%;
}
}
/*================================================
 *  ＳＮＳアイコン
 ================================================*/
 .snsicon{
	margin-top: 10px;
}

.bloglink{
	float: left;
	padding-left: 15px;
	margin-right: 5px;
}
.bloglink h2{
	text-align:left;
	margin: 0;
    border: none;
}
	

.line{
    margin-bottom: 5px;
	float: left;
	margin-right: 5px;
}

.bloglink img{
	max-width:100%;
}

.twi{
	padding-left: 15px;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	margin:0 auto;
	clear:both;
	width:100%;
	background:#f7f3ef;
}

/*-----------------------------------*/
.footmenu{
    margin: 0 auto;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.footmenu{
	width: 100%;
	max-width: 1040px;
	margin: 10px auto;
	display: table;
	padding-left: 1.5rem;
    padding-top: 2rem;
	padding-bottom: 2rem;
}
}

/*-----------------------------------*/
.footmenu ul {
	width:100%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.footmenu ul {
	float:left;	
	width:24.99999%;
	border-right: 1px solid #adadad;

}
}

/*-----------------------------------*/
.footmenu h6 {
	margin: 0 auto;
	text-align: center;
}

/*-----------------------------------*/
.footmenu li {
	float: left;
	width:33.3333%;
	text-align:center;
	margin: 0 auto;
	padding:0.5rem;
	font-size:1.2rem;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.footmenu li {
	float: none;
	width:100%;
	margin: 0 auto;
	padding:0;
	font-size:1.3rem;
	
}
}

.footmenu_title{
	color: #382400;
    font-size: 1.4rem!important;
	font-weight: bold;	
}
/*-----------------------------------*/
.footmenu a {
	color:#000;
}
.footmenu a:hover {
	color:#a12f23;
}
/*-----------------------------------*/
.copyright {
	clear:both;
	padding:20px 0;
	font-size:1.1rem;
	text-align:center;
	color:#333e48;
	background:#e5d6c9;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	width: 50px;
	height: 60px;
	position: fixed;
	bottom:15px;
	right:15px;
	background: #ef3f98;
	background:#15adb3;

	opacity: 0.8;
	border-radius: 15px;
}
.totop  a{
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
}
.totop  a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f102";
	font-weight: 900;
	font-size: 20px;
	color: #fff;
	position: absolute;
	bottom: 25px;
	right: 0;
	left: 0;
	text-align: center;
}
.totop  a::after{
	content: 'TOP';
	font-size: 13px;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
}

.totop :hover {
	background:#14c0c5;
	border-radius: 15px;

}
	


/*================================================
 *  基本
 ================================================*/
a {
	color:#545047;
	text-decoration:none;
}

h2 {
	margin-bottom:0.5em;
	margin-top:1.5em;
	font-size:2.1rem;
	color:#333;
	border-bottom:3px solid #999;
}

@media screen and (min-width:768px) {/*PCでは改行させない*/
.spbr{
  display:none;
 }
}	
	



@media screen and (min-width:768px) {/*PCでは改行させない*/
h2 br{
  display:none;
 }
}

#main > section > h2:before{
	content: "\f358";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
	color: #999;
}

h3 {
    text-align: center;
	font-size: 1.9rem;
	font-weight: bold;
}

@media screen and (min-width:768px) {/*PCでは改行させない*/
h3 br{
  display:none;
 }
}

h4 {
	font-size:1.4rem;
	text-align:center;
	font-weight: bold;
}

.center{
	text-align:center;
	display: block;
}

.right{
	text-align:right;
}

.img_right{
	float:right;
}
.img_right:after{
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}


.img_inbox{
	width:29%;	
}

.img_inbox img{
	max-width: 100%;
}

.img_left{
	float:left;
	margin-right: 10px;
}
@media screen and (min-width:768px) {/*PC*/
.img_left{
	margin-right: 12px;
}
}

.img_left:after{
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

.clear{
	margin-bottom:10px;	
}
.clear:after{
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";	
}

.big{
	font-size:2rem;	
}

p {
	margin:0 0 0em 0;
	margin-bottom: 1em;
}

strong {
	font-weight:bold;
}

.red{
		color:#d45451;
}

.blue{
		color:#4b8cff;
}

li {
	margin-left:1em;
}

/*================================================*/
/*未整理・未使用*/
/*
h5 {
	margin-bottom:0.25em;
	padding:2px;
	font-size:16px;
	border-left:5px solid #15adb3;
	background:#eee;
}

h6 {
	margin-bottom:0.25em;
	color:#382400;
	font-size:14px;
	font-weight:bold;
}


ul,ol,dl {
	margin:0 0 0em 0;
}

ol li {
	list-style:decimal;
}


dt {
	margin-bottom:0em;
	border-bottom:0px dotted #ddd;
}
dt:before {
	content:"\0025a0";
}
dd {
	margin-bottom:1em;
}
*/




/*================================================
 *  テーブル基本
 ================================================*/
table {
	margin: 5px auto;
	/*　filter:drop-shadow(2px 2px 4px #999);*/
	border:1px solid #d9d9d9;
	margin-bottom:2em;
	width:100%;
	font-size:1.4rem;	
	background:#fff;
	border-collapse:collapse;
	color:#232323;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
@media screen and (min-width:768px) {/*PC追加指定*/
table {
	font-size:1.6rem;
	}
}

th {
	padding: 2px 5px;
	text-align:center;
	vertical-align:middle;
	background:#fff;
	border:1px solid #9e9e9e;	
}

td {
	padding: 2px 5px;
	text-align:left;
	vertical-align:middle;
	background:#fff;
	border:1px solid #9e9e9e;	
}
@media screen and (min-width:768px) {/*PC追加指定*/
th,td{
	padding: 3px 5px;
}
}

table p {
  margin-bottom: 0em;
}

table img {
	vertical-align: middle;
}

/*================================================
 *  indexページパネル画像
 ================================================*/
.top_main{
	width: 100%;
	display: flex;
	position:relative;
    margin: 0px auto;	
	}

.top_main_sub {
	padding: 5px;
	text-align: center;
	float: left;
	box-sizing:border-box;
}

.top_main_sub img{
	max-width:101%;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	
}

.top_main_sub:after {
	clear: both;
	content: '';
	display: block;
}

/*================================================
 *  インフォメーション
 ================================================*/
#infobox {
	background-image: url(../images/information_bg4.jpg);
	background-repeat: no-repeat;
	background-position: center top;	
	background-size: 100% 100%;
    padding-top: 4px;
    padding-bottom: 12px;
    padding-right: 15px;
    padding-left: 15px;
    line-height: 25px;
	margin:15px auto;

}
@media screen and (min-width:768px) {/*PC追加指定*/
#infobox {
	background-repeat: no-repeat;
	background-position: center top;	
	background-size: 100% 100%;
	padding-top: 10px;
    padding-left: 30px;
	padding-bottom: 20px;
	padding-right: 30px;
	line-height: 25px;
	margin:15px auto;
}
}
#infobox h2{
	font-size:1.9rem;
	border-bottom:none;
	color: #4a260e;
	margin-top:0.5em;
}

#infobox li{
	margin-left:0;
	margin-bottom:1rem;
}

#infobox li:before {
    content: "\f4ad";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    margin-right: 7px;
    font-size: 1.7rem;
    display: inline-block;
	transform: scaleX(-1);
}
@media screen and (min-width:768px) {/*PC追加指定*/
#infobox li{
	margin-left:1rem;
	color: #999999;
}
}


/*================================================
 *  indexページボックスメニュー
 ================================================*/
 
/*リボンボックス*/

.ribbon_box {
	display: block;
	position: relative;
	margin: 15px auto;
	padding: 10px 0;
	width: 100%;
	background: #f1f1f1;
	padding-bottom: 0;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
  
@media screen and (min-width:768px) {/*PC追加指定*/
.ribbon_box {
		width: 98.99999999%;
}
}

.ribbon10 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 5px 0;
    margin: 0 0 0 -12px;
    width: calc(100% + 12px);
    color: white;
    background: #00afcc;
    background: #338788;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.2);
	border-top-left-radius: 4px;
}

.ribbon10 h3{
    margin: 0;
    padding: 0 15px;
    border-top: dashed 1px #FFF;
    border-bottom: dashed 1px #FFF;
    font-size: 1.9rem;
    line-height: 38px;
	font-weight: unset;
}

.ribbon10 h3:before{
	content: "\f030";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2.6rem;
    margin-right: 15px;
    vertical-align: bottom;
    color: #FFF;
}


.ribbon10:after{
    position: absolute;
    content: '';
    z-index: 1;
    top: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-width: 25px 15px 25px 0px;
	border-color: transparent #f1f1f1 transparent transparent;
    border-style: solid;
}

.ribbon10:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 12px #006879;
}

/*個別ボックス*/

.indexmenu_category{
	overflow: hidden; /*floatの解除、ここがポイント*/
	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	margin-top:10px;
}

.indexmenu_category h3{/*使用してない*/
	background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.top_menu_box2 {
	width         : 50%;                 /* BOXの幅              */
	margin: 0;
	float: left;
	padding       : 0;                /* 文字の位置合わせ     */
	margin-bottom:10px;
}

.top_menu_box2:nth-child(2n+1) {
  clear: both;/*内容の長さ違いによるカラム落ち防止*/
}

.top_menu_box {
	width         : 95%;                 /* BOXの幅              */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	padding-top:5px;
	background-color: #FFF;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.top_menu_box {
	width         : 95%;                 /* BOXの幅              */
	background    : #f9f5ea;              /* BOXの背景色          */
	border        : 1px solid #999999;   /* 枠線の指定           */
	border-radius : 15px;                  /* 角丸の指定           */
	padding       : 10px;                /* 文字の位置合わせ     */
	margin:0 auto;
}
}

.top_menu_box h4 {
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
	padding-top:5px;
	background-color: #fbf5f0;
	font-size:1.4rem;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.top_menu_box h4 {
	background-color: #FFF;
}

.top_menu_box h4 a{
	font-weight:bold;
}
}

.top_menu_box img {
	width: 60%;
	padding: 0;
	background-color: #FFF;
	margin:0 auto;
	display: block;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.top_menu_box img {
	width: 36%;
	float: right;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	margin-left: 1px;

}
}

.top_menu_box p{
display:none;	
}
@media screen and (min-width:768px) {/*PC追加指定*/
.top_menu_box p{
display:block;	
}
}


/*================================================
 *  地図
 ================================================*/
.topimg{
	text-align:center;
	}
	
.topimg img{
	max-width: 100%;
}











/*================================================
 *  固定ヘッダーによるページ内リンク位置ずれ調整
 ================================================*/
@media screen and (max-width:767px) {/*スマホのみ*/
.pagelink{
    padding-top: 65px;
    margin-top: -2.5em;
}
}

/*================================================
 *  上部目次リスト
 ================================================*/
.pagemenu{
	width: 100%;
    font-size: 1.4rem;
    padding: 20px;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.pagemenu{
	font-size: 1.6rem;
}
}
 
.pagemenu li{
    margin: 0;
    border-bottom: solid 1px #d6c6ae;

}
@media screen and (min-width:768px) {/*PC追加指定*/
.pagemenu li{
    margin: 5px;
}
}

.pagemenu li:before{
	content: "\f35a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 7px;
	font-size: 1.7rem;
	margin-left:7px;
}
 
.box_mokuji {
    margin: 5px auto;
    background: #fff9ef;
	width: 83%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box_mokuji .box-title {
    font-size: 1.2em;
    background: #696969;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/*================================================
 *  サイドバー目次リスト
 ================================================*/
#sub > .box_mokuji {
    margin: 5px auto;
    background: #fff9ef;
	width: 100%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 10px;　/* 上端から10pxのところで固定 */	
}
@media screen and (max-width:767px) {/*スマホでは非表示に*/
#sub > .box_mokuji {
display:none;
}
}

#sub > .box_mokuji .box-title {
    font-size: 1.2em;
    background: #696969;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

@media screen and (min-width:768px) {/*PC追加指定*/
#sub > .box_mokuji > .pagemenu{
	padding:0;
	font-size: 1.4rem;
}
}
 
/*================================================
 *  青色　囲い枠
 ================================================*/
.box1 {/* 薄青色 */
	padding: 8px;
    margin: 1em auto;
	margin-bottom:20px;
    color: #232323;
    background: #fff;
	border:1px dotted #b5d0ff;
    border-left: solid 10px #b5d0ff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	width: 100%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.box1 {/* 薄青色 */
	padding: 13px;
	width: 91%;
}
}
.box1 h3{
    padding: 7px;
    font-size: 1.9rem;
    background: #eee;
	margin-bottom: 1em;
}

/*================================================
 *  青色　囲い枠 ※スマホ非表示、ワイド91
 ================================================*/
.box11_spno{
	padding: 0px;
    margin: 0;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.box11_spno {/* 薄青色 */
	padding: 8px;
    margin: 1em auto;
	margin-bottom:20px;
    color: #232323;
    background: #fff;
	border:1px dotted #b5d0ff;
    border-left: solid 10px #b5d0ff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	width: 91%;
	padding: 13px;
}
}
.box11_spno h3{
    padding: 7px;
    font-size: 1.9rem;
    background: #eee;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

/*================================================
 *  青色　囲い枠 ※各種証明写真料金表専用　スマホ非表示、ワイド100
 ================================================*/
.box1_spno{
	padding: 0px;
    margin: 0;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.box1_spno {/* 薄青色 */
	padding: 8px;
    margin: 1em auto;
	margin-bottom:20px;
    color: #232323;
    background: #fff;
	border:1px dotted #b5d0ff;
    border-left: solid 10px #b5d0ff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	width: 100%;
	padding: 13px;
}
}
.box1_spno h3{
    padding: 7px;
    font-size: 1.9rem;
    background: #eee;
	margin-bottom: 1em;
}

/*================================================
 *  黄色　囲い枠
 ================================================*/	
.box2 {/* 黄色 */
	padding: 8px;
    margin: 1em auto;
	margin-bottom:20px;
    color: #232323;
    background: #fff;
	border:1px dotted #ffc06e;
    border-left: solid 10px #ffc06e;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	width: 100%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.box2 {/* 黄色 */
	padding: 13px;
	width: 91%;
}
}
.box2 h3{
    padding: 7px;
    font-size: 1.9rem;
    background: #eee;
	margin-bottom: 1em;
}

/*================================================
 *  ピンク　囲い枠
 ================================================*/
.box_pink {/* 背景ピンク幼児パスポート・お子様受験 */
	padding: 7px;
    margin: 2.5em auto;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 6px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
	width      : 97%;
	overflow: auto;
	margin-top:1.3em;
}

@media screen and (min-width:768px) {/*PC追加指定*/
.box_pink {
	padding: 15px;
    box-shadow: 0px 0px 0px 10px #ffeaea;
	width: 88%;
}
}

.box_pink h3{
	padding: 7px;
    font-size: 1.9rem;
	margin-bottom: 1em;
	background-color: #fff;
}

/*================================================
 *  ×マークリスト
 ================================================*/
.ng_list li{
    margin-bottom: 1em;
}

.ng_list li:before{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 7px;
	font-size: 1.7rem;
	margin-left:-17px;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.ng_list li:before{
	margin-right: 5px;
	margin-left:-8px;
}
}

.ng_list li:last-child {
    margin-bottom: 0em;
}

/*================================================
 *  ◎マークリスト
 ================================================*/
.ok_list li{
    margin-bottom: 1em;
}
	
.ok_list li:before{
	content: "\f140";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	font-size: 1.7rem;
	margin-left:-19px;
	color:#990000;
}
.ok_list li:last-child {
    margin-bottom: 0em;
}

/*================================================
 *  きれい仕上げ要望リスト
 ================================================*/	
.kireirei li{
	float:left;
}

.kireirei li:before{
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	font-size: 1.2rem;
	color:#990000;
}

.kireirei li:last-child {
    margin-bottom: 1em;
}


.kireirei:after {/*floatの解除*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

.my-orange {/*吹き出しマーク*/
	color: #5d5d5d;
	font-size:3rem;
	}
	
/*================================================
 *  ヘアメイク
 ================================================*/	
.hairmake li{
	list-style:disc;
	margin-left: 20px;
}

/*================================================
 *  着せ替え画像
 ================================================*/	
.kisekae_img{
	margin: 0 auto;
    text-align: center;
}
.kisekae_img img{
	max-width:50%;
	
}

/*================================================
 *  料金表見出し
 ================================================*/
.midashibox {
    margin: 0 auto;
    max-width: 376px;
    overflow: auto;
	margin-bottom:0.5em;
}
.midashibox img {
    float: left;
    margin-right: 5px;
    width: 26%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.midashibox img {
    margin-right: 28px;
	margin-left: 28px;
}
}

.midashibox h3 {
    padding-top: 38px;
    float: left;
    font-size: 1.9rem;
    border-bottom: 3px solid #2fa5a9;
	background-color: #FFF;
}

/*================================================
 *  証明写真料金表テーブル
 ================================================*/
.syoumei_ryoukinhyo{
	max-width: 520px; 
	}
	
.syoumei_ryoukinhyo td,
.syoumei_ryoukinhyo th{
	border:1px solid #177778;	
	}	

.maisu{
	background-color:#ffffff;
	text-align:center;	
	white-space: nowrap;	

	}
	
.title{
	background-color:#2ea5a9;
	color:#ffffff;
	text-align:center;
	white-space: nowrap;	
	}

.plice-1{
	background-color:#ffffc7;
	text-align:right;
	white-space: nowrap;	
	}
.plice-2{
	background-color:#ffffcc;
	text-align:right;
	color:#fe0000;
	font-weight:bold;	
	white-space: nowrap;	
	}
	
.comment{
	padding:5px;
	font-size:1.2rem;
	line-height: 1.8em;
	text-align:left;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.comment{
	padding:15px;
	font-size:1.6rem;
}
}

.comment p:before{
	content: "\f140";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	color:#990000;
}

.syoumei_ryoukinhyo_sogo{
	max-width: 100%; 
	font-size:1.1rem;
	color: #232323;

	}
@media screen and (min-width:380px) {/**/
.syoumei_ryoukinhyo_sogo{
	font-size:1.4rem;
}
}

@media screen and (min-width:768px) {/*PC追加指定*/
.syoumei_ryoukinhyo_sogo{
	font-size:1.5rem;
}
}


.syomei_sogo_syurui	{
	text-align: center;
}
	
/*================================================
 *  料金表　オプション　テーブル
 ================================================*/
.syoumei_ryoukinhyo_option{
	max-width: 520px;
}

.title_option{
	background-color:#ededed;
	text-align:center;
	white-space: nowrap;	
}

.comment_option{
	padding:5px;
	font-size:1.2rem;
	line-height: 1.8em;
	text-align:left;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.comment_option{
	padding:7px;
	font-size:1.6rem;
}
}

	
/*================================================
 *  証明写真データパック
 ================================================*/
h3.detapack{
	margin:0;
	background: #fff;
	font-size: 2rem;
}

.detapack_ryoukinhyo{
	max-width: 520px;
	margin:10px auto;
}
	
.detapack_naiyo_image{
	border:none;
	white-space: nowrap;
	font-size: 2rem;
	width: 50%;
	}	
.detapack_naiyo_image img{
    width: 50%;
	}	
	
.detapack_naiyo{
	border:none;
	white-space: nowrap;
	font-size: 1.2rem;
	width: 50%;
	}	
@media screen and (min-width:768px) {/*PC追加指定*/
.detapack_naiyo{
	font-size:1.6rem;
}
}

.detapack_list li:before{
	content: "\f140";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	color:#990000;
}

/*================================================
 *  証明写真仕上がり・焼増し
 ================================================*/
.siagari{
	max-width: 653px;
	margin:10px auto;

}

.title_siagari{
	background-color:#4b8cff;
	text-align:center;
	white-space: nowrap;	
	color:#FFF;
}

.syurui_siagari{
	white-space: nowrap;	
	background-color:#ffffc7;
	text-align:center;	

}

/*================================================
 *  お受験用テーブル
 ================================================*/
.syoumei_ryoukinhyo_pink{ 
 max-width: 520px;
}
 
.syoumei_ryoukinhyo_pink td,
.syoumei_ryoukinhyo_pink th{
	border: 1px solid #a9a9a9; 
 }
.title_pink{
	background-color: #ffeaea;
}
.ozyuken_image{
	text-align:center;
	white-space: nowrap;

}

.ozyuken_image img{
    width: 33.43%;
	margin-right: 10px;
	max-width: 100%;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.ozyuken_image img{


 }
}
/*================================================
 *  パスポートテーブル
 ================================================*/
.maisu_passviza{
	background-color:#ffffff;
	white-space: nowrap;
}
@media screen and (min-width:768px) {/*PCでは改行させない*/
.maisu_passviza br{
  display:none;
 }
}

/*================================================
 *  プロフィールテーブル
 ================================================*/
.prof_ryoukinhyo{
	max-width:100%; 
	font-size: 1.2rem;
}
@media screen and (min-width:343px) {
.prof_ryoukinhyo{
		font-size: 1.3rem;
 }
}
@media screen and (min-width:366px) {
.prof_ryoukinhyo{
		font-size: 1.4rem;
 }
}

.prof_ryoukinhyo td,
.prof_ryoukinhyo th{
	border:1px solid #D9D9D9;	
}	

.pause{
	width:21%;
}
@media screen and (min-width:768px) {
.pause{
	width:15%;
}
}
@media screen and (min-width:1012px) {
.pause{
	width:20%;
}
}


.title_prof{
	background-color:#4b8cff;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/*================================================
 *  プロフ写真料金表サンプル写真
 ================================================*/
.ryoukin_pause{
	max-width:27%;
}
@media screen and (min-width:768px) {
.ryoukin_pause{
	max-width:100%;
}
}

/*================================================
 *  家族写真料金表サンプル写真
 ================================================*/
.ryoukin_pause2{
    max-width: calc(100% / 4);
}
@media screen and (min-width:768px) {
.ryoukin_pause2{
	max-width:18%;
}
}
@media screen and (min-width:823px) {
.ryoukin_pause2{
	max-width:20%;
}
}
@media screen and (min-width:1019px) {
.ryoukin_pause2{
	max-width:100%;
}
}

/*================================================
 *  カレッジコーステーブル
 ================================================*/
.prof_ryokinhyo_student{
	max-width:100%; 
	font-size: 1.2rem;
}
@media screen and (min-width:343px) {
.prof_ryokinhyo_student{
		font-size: 1.3rem;
 }
}
@media screen and (min-width:366px) {
.prof_ryokinhyo_student{
		font-size: 1.4rem;
 }
}

.prof_ryokinhyo_student td,
.prof_ryokinhyo_student th{
	border:1px solid #D9D9D9;	
	}	

.title_student{
	background-color:#95378a;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/*================================================
 *  ロケーションスナップテーブル
 ================================================*/
.location  {
	max-width:100%; 
	font-size: 1.2rem;
}
@media screen and (min-width:343px) {
.location{
	font-size: 1.3rem;
}
}
@media screen and (min-width:366px) {
.location{
	font-size: 1.4rem;
}
}

.location td,
.location th{
	border:1px solid #D9D9D9;	
}

.title_location{
	background-color:#00981a;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/*================================================
 *  予約表テーブル
 ================================================*/
.yoyaku{
	max-width:645px; 
	font-size: 1.2rem;
}
@media screen and (min-width:357px) {
.yoyaku{
	font-size: 1.3rem;
}
}
@media screen and (min-width:380px) {
.yoyaku{
		font-size: 1.4rem;
}
}	
	
.yoyaku td,
.yoyaku th{
	border:1px solid #D9D9D9;	
	}
		
.yoyaku th{
	background-color:#f3f5f4;
	}
	
.yoyaku td{
	background-color:#fff;
	}
	
.yoyaku tr td:nth-of-type(3) {
	background-color:#ffffcc;
	white-space: nowrap;

}

.yoyaku tr td:nth-of-type(1) {

}
@media screen and (min-width:768px) {
.yoyaku tr td:nth-of-type(1) {
	width: 10%;
}
}

.yoyaku_day p{

}
@media screen and (min-width:768px) {
.yoyaku_day p{
	text-align:center!important;;
}
}

input[type="radio" i] {
	width: 19px;
    height: 19px;
	vertical-align: middle;
	margin: 3px 4px;
}

@media screen and (min-width:768px) {
input[type="radio" i] {
	width: 24px;
    height: 24px;
	vertical-align: middle;
	margin: 3px 8px;
}
}

/*================================================
 *  予約確認画面
 ================================================*/
#main_yoyaku_kakunin2 {
	max-width:728px;
	margin:0 auto;
	line-height:120%;
	background:#fff;
	padding: 10px;
	font-size: 1.6rem;
	
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#main_yoyaku_kakunin2 {
	width:100%;
	margin:0 auto;
}
.yoyaku_img2 img{
	display: block;
    margin: 0 auto 0 auto;
    max-width: 100%;
    height: auto;
}
}	
	

/*================================================
 *  お問合せテーブル
 ================================================*/

.otoiawase_table{
	max-width:645px; 
}

.otoiawase_table td,
.otoiawase_table th{
	padding:5px;
	text-align:center;	
}

.otoiawase_table th{
	background-color:#f3f5f4;
}

/*================================================
 *  家族写真料金表テーブル
 ================================================*/
/*撮影料*/
.kazoku{
	max-width:100%; 
	font-size: 1.3rem;
}
@media screen and (min-width:334px) {
.kazoku{
	font-size: 1.4rem;
}
}

.kazoku td,
.kazoku th{
	border:1px solid #9a9a9a;	
}

.kazoku-satueiryou{
	background-color:#4b8cff;
	color:#ffffff;
	text-align:center;
	font-size:1.5rem;
	white-space: nowrap;
}
@media screen and (min-width:343px) {
.kazoku-satueiryou{
	font-size:1.8rem;
}
}
	
.kazoku-maisu{
	background-color:#ffffff;
	color:#333333;
	text-align:left;
	vertical-align:middle
	}

/*プリント料*/
.print{
	max-width:100%; 
	font-size: 1.3rem;
}
@media screen and (min-width:334px) {
.print{
	font-size: 1.4rem;
}
}

.print td,
.print th{
	border:1px solid #9a9a9a;	
}

.print_size{
	background-color:#ffffff;
	text-align:center;
	white-space: nowrap;
}
	
.printryou{
	background-color:#95378a;
	border:1px solid #D9D9D9;
	color:#ffffff;
	text-align:center;
	font-size:1.5rem;
}

/*例えば*/
.tatoeba  {
	
}

.tatoeba td,
.tatoeba th{
	border:none;	
}

.tatoeba-1{
	background-color:#fff;
	text-align:left;
	color:#000;
	border:1px solid #D9D9D9;
	vertical-align:middle;
	text-align:center;
	white-space: nowrap;
	padding: 4px 0;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.tatoeba-1{
	background-image: url(../images/table_kiwaku.png);
	background-size: 100% 100%;
	padding: 30px 13px;
}
}

.tatoeba-01,
.tatoeba-0{
	background-image: url(../images/table_silk.jpg);
	background-size: 117% 100%;
	border:1px solid #D9D9D9;
	text-align:center;
	padding: 10px 0;
}

.tatoeba-0 img{
	filter:drop-shadow(8px 4px 4px #888) brightness(103%);
	width: 46%;

}


/*例えば小さめ*/
.tatoeba_s  {
	font-size: 1.3rem;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.tatoeba_s{
	font-size:1.4rem;
}
}

.tatoeba-01 img{
	filter:drop-shadow(8px 4px 4px #888) brightness(103%);
	width: 30%;
}




/*================================================
 *  例えばの吹き出し
 ================================================*/
p.ribonex {
	position: relative;
	display: inline-block;
	width: auto;
	min-width: 115px;
	text-align: center;
	background: #62a855;
	border-radius: 60px;
	z-index: 0;
	padding:10px 35px;
	font-size:2rem;
	color: #FFF;
	margin-left: -5px;
    margin-bottom: 26px;
}

p.ribonex:before {
	content: "";
	position: absolute;
	bottom: -17px; left: 15px;
	margin-left: 0;
	display: block;
	width: 15px;
	height: 15px;
	background: #62a855;
	border-radius: 50%;
	z-index: 0;
}

p.ribonex:after {
	content: "";
	position: absolute;
	bottom: -25px; left: 25px;
	margin-left: 0;
	display: block;
	width: 8px;
	height: 8px;
	background: #62a855;
	border-radius: 50%;
	z-index: 0;
}

/*================================================
 *  文字飾り枠
 ================================================*/

.waku1{
	text-align: center;
}

.waku1 p{
	position: relative;
    display: inline-block;
	color: #364e96;/*文字色*/
	border: solid 3px #364e96;/*線色*/
	border-radius: 0.5em;/*角丸*/
    font-size: 1.4rem;
	margin: 10px auto;
	text-align: center;
	padding: 10px 5px;
}
@media screen and (min-width:768px) {/*PC追加指定*/
.waku1 p{
	padding: 10px 40px;
}
}





/*================================================
 *  パネルギャラリー画像
 ================================================*/
#panel,
#panel2 {
	background-image: url(../images/bgpanel.gif);
	background-size: 100% 100%;
	text-align: center;
	margin-top:0px;
	margin-bottom:14px;
	padding:0;
	filter:drop-shadow(2px 4px 4px #999) brightness(100%);
	width:100%;
	padding-bottom: 10px;
}

#panel2 {
	background-image: url(../images/bgpanel2.gif);
}

@media screen and (min-width:768px) {/*PC追加設定*/
#panel,
#panel2 {
	margin-top:10px;
	margin-bottom:20px;
	padding:10px;
}
}

#panel img,
#panel2 img {
	margin: 6px;
	filter:drop-shadow(2px 2px 2px #777) brightness(104%);
	transform: rotate(0deg);
	width: 21%;
}
@media screen and (min-width:768px) {/*PC追加設定*/
#panel img,
#panel2 img {
	margin: 10px;
	width: 21%;
}
}


/*================================================
 *  料金表種類リボン　プロフィール用
 ================================================*/
.ryoukinribon {
 /* display: inline-block; */
    position: relative;
    text-align: center;
    padding: 10px 0px;
    font-size: 1.7rem;
    color: #FFF;
    background: #325A8C;
    margin-bottom: 20px;
	
}

.ryoukinribon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 12px transparent;
    border-right: solid 10px rgb(149, 158, 155);/*折り返し部分*/
}

.ryoukinribon:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 12px transparent;
    border-left: solid 10px rgb(149, 158, 155);/*折り返し部分*/
}

/*================================================
 *  画像
 ================================================*/
.inimg{
    margin: 0 auto;
    max-width: 100%;
}

/*================================================
 *  撮影の流れページ
 ================================================*/
.nagare {
	background-image: url(../img/bg_blueglad.jpg);
    background-size: 100% 100%;
    text-align: center;
    filter: drop-shadow(2px 4px 4px #999) brightness(100%);
    width: 100%;
    padding-bottom: 1px;
}

.nagare p{
	margin-bottom: 0.5rem;
}

.nagare img {
	margin: 10px;
}

.yajirusi{
	margin: 10px;
    margin-top: 15px;
}

/*================================================
 *  Q&A
 ================================================*/
.midashinami{
    font-size: 1.6rem;
    text-align: left;
    font-weight: bold;
}

.qalist li{
	list-style-type:disc;
	margin-left: 24px;
}

/*================================================
 *  証明写真サイズ一覧テーブル
 ================================================*/
.sizehyou{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media screen and (min-width:768px) {/*PC追加設定*/
.sizehyou{
    display: flex;
}
}

.syoumeisize_wrap{
	width:100%;
}
@media screen and (min-width:768px) {/*PC追加設定*/
.syoumeisize_wrap{
	width:50%;
	margin: 5px;
}
}

.shikaku  {
	width:100%;
	margin-bottom:1em;
	font-size:12px;
	margin:0 auto;
}
	
.shikaku td{
	padding:3px;
}

.shikaku th{	
	text-align:center;
	background-color:#CFC;
}
	
/*================================================
 *  サイトマップ
 ================================================*/
.sitemap_hyo_wrap{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}
 @media screen and (min-width:768px) {/*PC追加設定*/
.sitemap_hyo_wrap{
    display: flex;
}
}

.sitemap_hyo_wrap h3{
	background-color: #eee;
	padding: 7px;
}

.sitemap_hyo{
	width:100%;
}
 @media screen and (min-width:768px) {/*PC追加設定*/
.sitemap_hyo{
	width:50%;
	margin:10px;	
}
}
.sitemap_hyo ul{
	margin-bottom: 4rem;	
}

.sitemap_hyo li {
	padding: 10px;
	text-align: center;
}

.sitemap_hyo a {
	text-decoration: underline;
}

/*================================================
 *  リンク集ページ用
 ================================================*/
#link {
	padding:5px;
}
#link a {
	text-decoration: underline;
}

/*================================================
 *  会社概要
 ================================================*/
.torihiki{
	width:100%;
	margin-bottom:1em;
	font-size:1.4rem;
	margin:0 auto;
}

.torihiki th{
	white-space:nowrap;
}
	
.torihiki td{
	text-align:center;
}

.torihiki .por{
	text-align:left;
}


.torihiki ol{
	list-style-type: decimal;
	margin-left:10px;
	margin-top:10px;
}




/*================================================
 *  モーダル
 ================================================*/



#modal-content {
	width: 80% ;
	margin: 0 ;
	padding: 10px 5px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
@media screen and (min-width:768px) {/*PC追加指定*/
#modal-content {
	width: 50% ;
	margin: 0 ;
	padding: 10px 5px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
}

 
#modal-content-innar{
	margin:0 auto;
	width:100%;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}
 
.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}



/*================================================
 *  ギャラリーパネル画像
 ================================================*/
.galary_main{
	width: 100%;
	position:relative;
    margin: 0px auto;	
	background-image: url(../images/bgpanel2.gif);
	background-image: url(../img/galary_bg.jpg);
	background-size: 100% 100%;
	filter:drop-shadow(1px 2px 3px #999) brightness(100%);
    justify-content: center;	
	
	margin-top:0px;
	margin-bottom:14px;		
	}
@media screen and (min-width:768px) {/*PC追加設定*/
.galary_main {
	margin-top:10px;
	margin-bottom:20px;
}
}

.bg_pink{
	background-image: url(../img/galary_bg3.jpg);

}

.galary_main ul{
    margin: 0 auto;
	padding: 0;
	display: flex;
}
@media screen and (min-width:768px) {/*PC追加設定*/
.galary_main ul{
		padding: 0 13px;
}
}

.galary_main li{
	padding: 5px;
	box-sizing:border-box;
    margin: 0 auto;
	float: left;/*DWプレビュー用*/
    padding: 7px 6px;
}
@media screen and (min-width:768px) {/*PC追加設定*/
.galary_main li{
	padding:10px 7px;
}
}

.galary_main img{
	max-width:100%;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.galary_main_sub2:after {/*DWプレビュー用*/
	clear: both;
	content: '';
	display: block;
}




/*================================================
 *  新予約表テーブル
 ================================================*/
.yoyaku_hyou{
	max-width:645px; 
	font-size: 1.2rem;
}
@media screen and (min-width:357px) {
.yoyaku_hyou{
	font-size: 1.3rem;
}
}
@media screen and (min-width:380px) {
.yoyaku_hyou{
		font-size: 1.4rem;
}
}	
	
.yoyaku_hyou td,
.yoyaku_hyou th{
	border:1px solid #D9D9D9;	
	}
		
.yoyaku_hyou th{
	background-color:#efefef;
	}
	
.yoyaku_hyou td{
	background-color:#fff;
	}
	
.yoyaku_hyou tr td:nth-of-type(2) {
	background-color:#ffffcc;
	text-align:right;
	white-space: nowrap;

}

.yoyaku_hyou tr td:nth-of-type(1) {
	text-align:left;
}
@media screen and (min-width:768px) {
.yoyaku_hyou tr td:nth-of-type(1) {

}
}

.yoyaku_hyou label{
	display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.yoyaku_hyou_right{
	text-align:right;
	padding-right: 4px;
}

@media only screen and (max-width: 767px) {
.splight{
	display: block;
	text-align:right;
	padding-right: 4px;
}
	
	
	
	
#main section #infobox ul li {
	color: #F00;
}
#contents main #main #mailformpro .toiawase .yoyaku.day tr .yoyaku_day {
	color: #00FF00;
}