@charset "utf-8";

body { font-family: 'Noto Sans JP', sans-serif; /*font-family: 'Noto Serif JP', serif;*/ font-size: 16px; line-height: 160%; font-weight: normal; color: #222;}
* { box-sizing: border-box; }
* img { vertical-align: bottom; }
/* ページトップボタン */
#page-top { position: fixed; right: 20px; }
#page-top a { display: block; width: 50px; height: 50px; background: url("../img/top.svg")top no-repeat;}
.hyoji { display: none;}
/*アンカータグ用*/
.con_inner { padding-top: 30px; margin-top: -30px; overflow: hidden; }
#wrap {}

/*header*/
header { width: 1200px; margin: 0 auto; padding: 0; overflow: hidden; }
#logo_area { display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto; }
#logo_area picture { padding: 45px 0 35px; }
#logo_area img { width: 336px; height: auto; }

.contact { display: none;}
.contact a { display: block; color: #222; text-decoration: none; padding: 25px 45px 40px 18px; border-left: solid 1px #222; transition: background, 0.5s;}
.contact a:hover { background: #ddd;}

/*メニュー*/
nav{ max-width: 1000px; margin: 0 auto;}
.menu { display: flex; }
.menu a { display: block; color: #222; text-decoration: none; padding: 25px 45px 40px 18px; border-left: solid 1px #222; transition: background, 0.5s;}
.menu a:hover { background: #ddd;}
.menu_m { display: none; }
#slide { min-width: 1200px; width: 100%; aspect-ratio: 24 / 11; margin: 0 auto;}
#slide img { width: 100%; height: auto;}

/*main*/
main { width: 1200px; padding: 100px 100px 0; margin: 0 auto; }
.titles { border-left: solid 12px #007DC6; font-family: 'Noto Serif JP', serif; font-size: 32px; line-height: 100%; font-weight: 600; padding: 5px 0 9px 20px; margin-bottom: 30px;}
/*ボタン*/
.btn_madoguchi { width: 360px; height: 198px; background-image: url("../img/btn_madoguchi.png"); background-size: 360px 198px; background-position: top center; margin: 50px auto 80px; }
.btn_madoguchi a { display: block; width: 360px; height: 198px; font-family: 'Noto Serif JP', serif; font-size: 32px; font-weight: 500; color: #fff; text-decoration: none; padding: 87px 0 0 115px; transition: color 0.5s, background-color 0.5s, background-blend-mode 0.5s;}
.btn_madoguchi a:hover  { text-decoration: none; color: #555; background-color:rgba(255,255,255,0.4); background-blend-mode:lighten; }
/*ボタン2*/
.btn_madoguchi2 { width: 360px; height: 198px; background-image: url("../img/btn_madoguchi2.png"); background-size: 360px 198px; background-position: top center; margin: 50px auto 80px; }
.btn_madoguchi2 a { display: block; width: 360px; height: 198px; font-family: 'Noto Serif JP', serif; font-size: 32px; font-weight: 500; color: #666; text-decoration: none; padding: 87px 0 0 75px; transition: color 0.5s, background-color 0.5s, background-blend-mode 0.5s;}
.btn_madoguchi2 a:hover  { text-decoration: none; color: #222; background-color:rgba(255,255,255,0.4); background-blend-mode:lighten; }



/*footer*/
footer { width: 1200px; margin: 0 auto; background: #004471; color: #fff; font-size: 12px; font-weight: 300; padding: 30px 0 15px; text-align: center; box-shadow: 0 0 0 100vmax #004471; clip-path: inset(0 -100vmax);}
.names { font-size: 22px; font-weight: 500; line-height: 100%;}
.address { margin: 20px 0 0 0;}
.closed { display: flex; justify-content: center; margin: 0;}
.tels { margin-left: 8px;}
.tels a { color: #fff!important; text-decoration: none!important;}
.copy{ margin: 8px 0 0 0; }



@media screen and (max-width: 768px) {
	body {min-width: 360px;}
	/*header*/
	header { width: 100%; padding: 20px 20px;}
	#logo_area { display: block; margin: 0 0 0px;}
	#logo_area img { width: 250px; height: auto;}
	.contact { display: none;}
	
	/*メニュー*/
	.menu { display: none; }
	.menu_m { }
	#slide { min-width: auto; width: 100%; aspect-ratio: 54 / 29; margin: 0 auto;}
	
	/*main*/
	main { width: 100%; padding: 50px 20px 0;}
	.titles { border-left: solid 12px #6BC8F2; font-family: 'Noto Serif JP', serif; font-size: 24px; line-height: 110%; font-weight: 600; padding: 8px 0 8px 15px; margin-bottom: 20px;}
	.titles span { display: inline-block; }
/*ボタン*/
	.btn_madoguchi { aspect-ratio: 20 / 11; max-width: 360px; width: 100%; height: auto; background-size: cover;}
	.btn_madoguchi a { display: block; aspect-ratio: 20 / 11; max-width: 360px; width: 100%; height: auto; font-family: 'Noto Serif JP', serif; font-size: 30px; font-weight: 500; color: #fff; text-decoration: none; padding: 0; margin: 0; transition: color 0.5s, background-color 0.5s, background-blend-mode 0.5s; position: relative;}
	.btn_madoguchi a span { position: absolute; top:44%; transform: translateY(-50%); left:50%; transform: translateX(-50%); }
/*ボタン2*/
	.btn_madoguchi2 { aspect-ratio: 20 / 11; max-width: 360px; width: 100%; height: auto; background-size: cover;}
	.btn_madoguchi2 a { display: block; aspect-ratio: 20 / 11; max-width: 360px; width: 100%; height: auto; padding: 0; margin: 0; position: relative; font-size: 26px;}
	.btn_madoguchi2 a span { position: absolute; top:44%; transform: translateY(-50%); left:50%; transform: translateX(-50%); }
	

	/*footer*/
	footer { width: 100%; margin: 0; font-size: 14px; text-align: left; padding: 30px 20px 15px;}
	.names { font-size: 18px; font-weight: 500; line-height: 120%;}
	.names span { display: inline-block; margin-left: 0;}
	.address { margin: 5px 0 0 0; }
	.closed { display: contents;}
	.moon { margin-top: 10px;}
	.moon2 { margin-left: 55px;}
	.moon2 span { display: none;}
	.times { margin-top: 5px}
	.tels { margin-left: 0px;}
	.copy{ margin: 15px 0 0 0; font-size: 12px; text-align: center;}
}