@charset "UTF-8";

/* --------------------------------------
	global
-------------------------------------- */

	/* hacks */

	@media only screen and (min-width:768px) { .sp { display:none !important; } }
	@media only screen and (max-width:767px) { .pc { display:none !important; } }

	#mata_face_cp	img		{ width:100%; display:block; vertical-align:bottom; }
	#mata_face_cp a img	{ transition:opacity ease 0.3s;			}
	#mata_face_cp .ma		{ margin-left:auto; margin-right:auto;	}
	#mata_face_cp .pr		{ position:relative;					}
	#mata_face_cp .pa		{ position:absolute;					}
	#mata_face_cp .pf		{ position:fixed;						}
	#mata_face_cp .db		{ display:block;						}
	#mata_face_cp .di		{ display:inline;						}
	#mata_face_cp .dib	{ display:inline-block;					}
	#mata_face_cp .dn		{ display:none;							}
	#mata_face_cp .df		{ display:flex;							}
	#mata_face_cp .fww	{ flex-wrap:wrap;						}
	#mata_face_cp .fwnw	{ flex-wrap:nowrap;						}
	#mata_face_cp .jcc	{ justify-content:center;				}
	#mata_face_cp .jcsb	{ justify-content:space-between;		}
	#mata_face_cp .jcfs	{ justify-content:flex-start;			}
	#mata_face_cp .jcfe	{ justify-content:flex-end;				}
	#mata_face_cp .aic	{ align-items:center;					}
	#mata_face_cp .aifs	{ align-items:flex-start;				}
	#mata_face_cp .aife	{ align-items:flex-end;					}
	#mata_face_cp .oxh	{ overflow-x:hidden;					}
	#mata_face_cp .tl		{ text-align:left;						}
	#mata_face_cp .tc		{ text-align:center;					}
	#mata_face_cp .tr		{ text-align:right;						}
	#mata_face_cp .tj		{ text-align:justify;					}
	#mata_face_cp .hac	{ left:50%; transform:translateX(-50%); }
	#mata_face_cp .vam	{ top :50%; transform:translateY(-50%); }
	#mata_face_cp .z0		{ z-index:0;							}
	#mata_face_cp .z1		{ z-index:1;							}
	#mata_face_cp .z2		{ z-index:2;							}
	#mata_face_cp .z3		{ z-index:3;							}
	#mata_face_cp .z4		{ z-index:4;							}
	#mata_face_cp .z5		{ z-index:5;							}

	.marugo { font-family:dnp-shuei-mgothic-std, 'Shuei MaruGo', sans-serif !important; font-weight:400; }
	.bold,
	.bold * { font-weight:600 !important; }
	.orange { color:#ff8701; }



/* ----------------------------------
	layout
---------------------------------- */

	body
	{
		scrollbar-width		:none; /*Firefox対応のスクロールバー非表示コード*/
		-ms-overflow-style	:none; /*Internet Explore対応のスクロールバー非表示コード*/
	}
	body::-webkit-scrollbar			{ display:none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/ }
	body							{ background:#F9F5ED; }

	header							{ background:rgba(255,255,255,0.75); max-width:750px; width:100%; height:70px; position:fixed; left:calc(50% - 375px); top:0; padding:0 0 0 25px; z-index:999; }
	header h1						{ width:220px; }
	header nav .menu				{ background:#fffdeb; }
	header nav .menu__inner ul li a	{ color:#333; font-size:1.8rem; }
	header nav .menu .closeBtn span	{ color:#333; }

	main							{ padding-top:0; }

	#mata_face_cp					{ max-width:750px; background:#fff; box-shadow:0px 0px 54px 0px rgb(0 0 0 / 30%); overflow-x:hidden; margin:auto; }
	footer							{ height:unset; margin:0 0 90px; }

	@media screen and (max-width:750px)
	{
		header							{ max-width:100vw; height:9.333vw; left:calc(50% - 50vw); padding:0 0 0 3.333vw; }
		header h1						{ width:29.333vw; }
		#mata_face_cp					{ max-width:100vw; box-shadow:0 0 7.2vw 0 rgb(0 0 0 / 30%); }
		footer							{ margin:0 0 12vw; }
	}



/* ----------------------------------
	bg
---------------------------------- */

	#mata_face_cp section.fv		{ background:url('../img/bg_01.png') 0 0 / 100% no-repeat;margin: 70px 0 0; }
	#mata_face_cp section.blk-02	{ background:url('../img/bg_02.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-03	{ background:url('../img/bg_03.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-04	{ background:url('../img/bg_04.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-05	{ background:url('../img/bg_05.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-06	{ background:#fdedee; }
	#mata_face_cp section.blk-07	{ background:url('../img/bg_06.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-08	{ background:url('../img/bg_07.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-09	{ background:url('../img/bg_08.png') 0 0 / 100% no-repeat; }
	#mata_face_cp section.blk-10	{ background:url('../img/bg_09.png') 0 0 / 100% no-repeat; }

	#mata_face_cp .bgwhite { background-color: #FFF; }

	@media screen and (max-width:750px) {
		#mata_face_cp section.fv		{ margin: 9.333vw 0 0; }
	}
/* ----------------------------------
	decorations
---------------------------------- */

	/* fade  */
	#mata_face_cp	.fadeIn,
	#mata_face_cp	.fadeIn.faded					{ transition: 1.2s;}

	/* btns */
	#mata_face_cp .btn1							{ width:93.33%; max-width: 700px; bottom: 3%; left: 0; right: 0; margin: 0 auto; }
	#mata_face_cp .btn2-1							{ width:78.57%; max-width: 550px; bottom:18.3%; left: 0; right: 0; margin: 0 auto; }
	#mata_face_cp .btn2-2							{ width:78.57%; max-width: 550px; bottom:17.6%; left: 0; right: 0; margin: 0 auto; }
	#mata_face_cp .btn3							{ 
		width:106%; 
		max-width: 732px; 
		bottom:2%; 
		margin: 0 auto; 
		left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
		cursor: pointer;
	}
	#mata_face_cp .btn4							{ width:78.57%; max-width: 550px; bottom:18.5%; left: 0; right: 0; margin: 0 auto; }
	#mata_face_cp .btn5							{ width:78.57%; max-width: 550px; bottom:22%; left: 0; right: 0; margin: 0 auto; }
	#mata_face_cp .btn6							{ width:78.57%; max-width: 550px; bottom:21.8%; left: 0; right: 0; margin: 0 auto; }

å
	/* acc */
	#mata_face_cp .acc .trg {
		cursor: pointer;
	}
	#mata_face_cp .acc .trg::before,
	#mata_face_cp .acc .trg::after				{ transition:transform 0.5s; content:''; display:block; background:#756c67; width:3%; height:3%; position:absolute; right:7%; top:50%; }
	#mata_face_cp .acc .trg::after				{ transition:transform 0.5s; transform:rotate(90deg); }
	#mata_face_cp .acc .trg.active::after			{ transition:transform 0.5s; transform:rotate( 0deg); }




/* ----------------------------------
	links
---------------------------------- */

	#mata_face_cp .links div								{ background:url('../img/links/bg.png') center top / 100% repeat-y; }
	#mata_face_cp .links div.branches						{ padding:0 0 75px; }
	#mata_face_cp .links div.branches ul					{ margin:30px 0 0 0;}
	#mata_face_cp .links div.branches ul li				{ margin:0 auto 30px; }
	#mata_face_cp .links div.branches ul li:nth-child(1)	{ width:61.200%; }
	#mata_face_cp .links div.branches ul li:nth-child(2)	{ width:18.801%; }
	#mata_face_cp .links div.branches ul li:nth-child(3)	{ width:14.134%; }
	#mata_face_cp .links div.branches ul li:nth-child(4)	{ width:50.134%; margin-bottom:0; }
	#mata_face_cp .links div.branches ul li a				{ font-size:32px; color:#649ed5; text-decoration:underline; margin:0 0 30px; }
	#mata_face_cp .links div.tel							{ padding:0 0 75px; }
	#mata_face_cp .links div.tel .number					{ width:78.668%;						margin:40px auto 30px; }
	#mata_face_cp .links div.tel .txt						{ font-size:24px; }
	#mata_face_cp .links div.sns ul:nth-of-type(1)		{ width:69.6%;		padding:40px 0;		margin:0 auto; }
	#mata_face_cp .links div.sns ul:nth-of-type(2)		{ width:50.0%;							margin:0 auto; }
	#mata_face_cp .links div.sns ul:nth-of-type(1) li		{ width:45.978%; }
	#mata_face_cp .links div.sns ul:nth-of-type(2) li		{ width:24.268%; }
	#mata_face_cp footer .logo							{ width:46.668%;	padding:50px 0;		margin:0 26.5%; }
	#mata_face_cp footer small							{ font-size:20px; }

	@media screen and (max-width:750px)
	{
		#mata_face_cp .links div.branches					{ padding:0 0 10vw; }
		#mata_face_cp .links div.branches ul				{ margin:4vw 0 0 0; }
		#mata_face_cp .links div.branches ul li			{ margin:0 auto 4vw; }
		#mata_face_cp .links div.branches ul li a			{ font-size:4.267vw; margin:0 0 4vw; }
		#mata_face_cp .links div.tel						{ padding:0 0 10vw; }
		#mata_face_cp .links div.tel .number				{ margin:5.333vw auto 4vw; }
		#mata_face_cp .links div.tel .txt					{ font-size:3.2vw; }
		#mata_face_cp .links div.sns ul:nth-of-type(1)	{ padding:5.333vw 0; }
		#mata_face_cp footer .logo						{ padding:6.667vw 0; }
		#mata_face_cp footer small						{ font-size:2.667vw; }
	}

	#mata_face_cp #acc_fv .tab_area {
    margin: 2% auto 0;
	}
	#mata_face_cp #acc_fv {
		margin-bottom: 8%;
	}

	#mata_face_cp #cv {
		margin-top: -70px;
		padding-top: 70px;
		margin-bottom: 9%;
		
	}
	@media screen and (max-width:750px) {
		#mata_face_cp #cv {
			margin-top: -9.333vw;
			padding-top: 9.333vw;
		}
	}
	#mata_face_cp .cv .panel_area,#mata_face_cp .acc_fv .panel_area {
		width: 93.33%;
		margin: 0 auto;
	}
	#mata_face_cp .cv .tab_area,#mata_face_cp .acc_fv .tab_area {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 93.33%;
		margin: 8% auto 0;
	}
	#mata_face_cp .cv .tab,#mata_face_cp .acc_fv .tab {
		cursor: pointer;
		transition : 0.4s;
		width: 48.57%;
	}
	#mata_face_cp .cv .tab:hover,#mata_face_cp .acc_fv .tab:hover {
		opacity: 0.7;
		transition : 0.4s;
	}
	#mata_face_cp .cv .tab.active,#mata_face_cp .acc_fv .tab.active {
		opacity: 1;
	}
	#mata_face_cp .cv .tab_panel,#mata_face_cp .acc_fv .tab_panel {
		display:none;
	}
	#mata_face_cp .cv .tab_panel.active,#mata_face_cp .acc_fv .tab_panel.active {
		display:block;
		animation: appear .4s ease;
	}
		@keyframes appear {
			0%{
				opacity: 0.5;
			}
			100%{
				opacity: 1;
			}
		}
		#mata_face_cp .cv .tab.active .small ,#mata_face_cp .cv .tab .big ,
		#mata_face_cp .acc_fv .tab.active .small ,#mata_face_cp .acc_fv .tab .big{
			display:none;
		}
		#mata_face_cp .cv .tab.active .big ,#mata_face_cp .cv .tab .small ,
		#mata_face_cp .acc_fv .tab.active .big ,#mata_face_cp .acc_fv .tab .small {
			display:block;
			animation: appear01 .4s ease;
		}
		@keyframes appear01 {
			0%{
				opacity: 0.5;
			}
			100%{
				opacity: 1;
			}
		}
		#mata_face_cp .bnr01 {
			position: fixed;
			z-index: 99;
			bottom: 1%;
			left: 0;
			right: 0;
			width: 93.33%;
			max-width: 700px;
			text-align: center;
			margin: 0 auto;
			cursor: pointer;
			}
			
	@media screen and (min-width:751px) {
		#mata_face_cp .bnr01 {
			display: none;
			position: fixed;
			z-index: 99;
			bottom: 1%;
			left: 0;
			right: 0;
			width: 450px;
			text-align: center;
			margin: 0 2% 0 auto;
			cursor: pointer;
		}
		
	}
	@media screen and (min-width:1700px) {
		#mata_face_cp .bnr01{
			margin: 0 auto;
		}
		#mata_face_cp .bnr01 img{
			position: absolute;
			right: -137%;
			bottom: 0;
		}
	}