@charset "utf-8";

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior: smooth;}
body{padding-bottom:3em;line-height:1.6;font-size:1.2em;color:#333;font-family: "Noto Sans JP", sans-serif;font-weight:500;   letter-spacing: 0.05em;}

@media (width >= 820px) {
	body{padding-bottom:0;}
}


h1,h2,h3,h4,h5,h6 {font-size:100%;color:#111;}
li {list-style-type:none;}
div{background-image:url(image);}
img{ outline:none;border:none;}
a{outline:none; border:none;text-decoration:none;}

:root{
--faw:'Font Awesome 7 Free';
}

header,#footer{padding:0 1em;}

h1 {font-size:0.7em;color:#999;font-weight:normal;}
.logo img{width:100%;max-width:200px;}

nav{position:fixed;left:0;bottom:0;width:100%;background:#fff;border-top:solid 1px #ccc;}
nav ul{display:flex;}
nav li{	flex:1;display:grid;}
nav a{display:grid;place-content:center;letter-spacing:0;text-align:center;padding:1.2em 0;color:#222;font-size:0.8em;font-weight:700;transition:background-color 0.4s;}
nav a span{white-space:nowrap;}
nav a:hover{background-color: #ff0;}

#top img{width:100%;}

#pc_support .box{max-width:800px;margin:auto;padding:4em 1em;}
#pc_support #top{background:#ff0;}
#pc_support #top .box{display:block;padding:2em 1em;}
#pc_support #top div{flex:1;}
#pc_support #top h2{margin-bottom:0.5em;text-align:center;font-size:clamp(1.6em, calc(1.6rem + ((1vw - 0.234375em) * 0.6214)), 2.2em);
-webkit-text-stroke:6px #fff;paint-order:stroke fill;}
#pc_support #top h2 span{display:block;text-align:center;font-size:1.2rem;}
#pc_support #top ul{display:flex;justify-content:center;gap:1em;}
#pc_support #top ul li{flex:1;display:grid;place-content:center;aspect-ratio:1/1;width:100%;max-width:120px;max-height:120px;border:solid 2px #111;border-radius:100%;font-size:0.8em;}
#pc_support #top img{max-width:100%;}
#pc_support h3{margin-bottom:1.4em;text-align:center;font-size:clamp(1.4em, calc(1.4rem + ((1vw - 0.234375em) * 1.0356)), 2.4em);font-weight:700;}
#pc_support h3 span{display:block;}

#about p{margin-bottom:2em;}
#about .tel a{display:block;padding:0.5em 0;text-align:center;font-size:1.6em;font-weight:bold;background:#222;color:#fff;border-radius:1em;}
#about .tel a span{font-size:0.8em;}
#about ul {padding:1em;background:#d8eaef;border-radius:1rem;}
#about ul li{padding:1em;/*padding-left:1.2em;text-indent:-1.3em;*/background:#fff;border-radius:1rem;}
#about ul li:not(:last-child){margin-bottom:0.5em;}
/*#about ul li::before{content:'\f14a';font-family:var(--faw);font-weight:600;padding-right:0.5em;color:#f60;}*/

#example ul{margin-bottom:2em;}
#example ul li{padding-left:1.2em;text-indent:-1.3em;}
#example ul li:not(:last-child){margin-bottom:0.8em;}
#example ul li::before{content:'\f14a';font-family:var(--faw);font-weight:600;padding-right:0.5em;color:#f60;}

#charge{background:#d8eaef;border-radius:1rem;}
#charge .charge section{text-align:center;font-size:clamp(1em, calc(1rem + ((1vw - 0.234375em) * 0.6214)), 1.6em);color:#111;letter-spacing:0;
border:solid 4px #fff900;border-radius:1rem;background:#fff;}
#charge .charge .sec1,#charge .charge .sec2{margin-bottom:2em;font-weight:900;}
#charge h4{padding:0.3em;font-size:1.4em;background:#fff900;}
#charge .charge p span.flex{display:flex;flex-direction:column;justify-content:center;padding:2em 0;}
#charge .charge p span.flex > span{display:grid;place-content:center;}
#charge .charge p span.flex > span:not(.span1){font-size:1.4em;}
#charge .charge p span.flex span span{display:block;font-size:1.8em;text-shadow:2px 2px 2px #ccc;}
#charge .charge p span.flex .span1{padding:0 0.5em;font-size:2em;color:#999;font-weight:900;}
#charge .charge p span.flex .fs3{display:inline;font-size:1.4rem;}
#charge .charge p .span1{display:block;padding:0 0.5em;text-align:center;font-size:1.6em;}
#charge .charge .sec2 p{display:block;text-align:center;font-weight:500;padding:1em 0;font-size:1.2em;font-weight:900;}
#charge .charge .sec2 table{border-collapse:collapse;margin:0 auto 2em;}
#charge .charge .sec2 table tr:first-child{border-bottom:solid 1px #999;}
#charge .charge .sec2 table th,#charge .charge .sec2 table td{padding:0 0.8em;font-weight:500;}
#charge .sec3 p{padding:1em 0;font-weight:700;font-size:1.2em;}
#charge .sec3 p span{padding:0 0.5em;font-size:0.6em;}
#charge ul{display:flex;justify-content:center;gap:0.5em;margin: 0 0 2em;}
#charge ul li::before{content:none;}
#charge ul li img{max-height:36px;}

#area ul{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:1em;}
#area ul li{display:grid;}
#area ul li a{display:grid;place-content:center;width:100%;padding:0.5rem 0 0;text-align:center;border:solid 4px #ccc;border-radius:1rem;color:#111;transition:transform 0.3s;}
#area ul li a::after{content:'\f107';font-family:var(--faw);font-weight:600;display:block;margin-top:0.5rem;text-align:center;}
#area ul li a:hover{transform:scale(1.1);}
#area ul li span{font-size:1.3em;font-weight:700;}

@media (width >= 820px) {
	nav{border:none;}
	#pc_support #top .box{display:flex;justify-content:center;align-items:center;}
	#pc_support #top ul li{font-size:1em;}
	#about ul {padding:2em;}
	#charge .charge{}
	#charge .charge p span.flex{display:flex;flex-direction:row;justify-content:center;}
	#charge .charge p span.flex > span:not(.span1){background:rgba(255,255,255,0.8);border-radius:1rem;}
	#charge .charge p .span1{display:inline-block;padding:0 0.4em;}
	#area ul li a{padding:1rem 0 0;}
	#area ul li a::after{margin-top:1rem;}
}


 .sec0{padding:4em 1em;background:#f9f9f9;letter-spacing:0;}
 .sec0 > section{width:100%;max-width:960px;margin:auto;}
 .sec0 h2{margin-bottom:0.5em;font-size:clamp(1.2em,5vw,1.6em);text-align:center;}
 .sec0 h2 span{display:inline;overflow:hidden;color:#111;vertical-align:baseline;text-align:center;}
 .sec0 h2 .span1{display:block;font-size:0.8em;}
 .sec0 h2 .span2{font-size:1.2em;color:#5e9175;font-weight:900;background:linear-gradient(-180deg,#fff 60%,#ff0 60%,#ff0);}
 .sec0 h2 .span3{font-size:1.2em;color:#ff0036;font-weight:900;background:linear-gradient(-180deg,#fff 60%,#ff0 60%,#ff0);}
 .sec0 h2 .span4{display:block;font-size:1.2em;font-weight:900;}
 .sec0 h2::after{content:'';display:block;width:100%;height:5px;margin-top:0.5em;
background: repeating-linear-gradient(-45deg ,var(--main) 0,var(--main) 3px ,#fff 3px, #fff 6px ,#ccc 6px, #ccc 9px ,#fff 9px, #fff 12px );}
 .sec0 p{font-size:0.9em;}
 .sec0 p:not(:last-child){margin-bottom:1em;}
 .sec0 p span{font-weight:600;color:#C00;}
 .sec0 .col{background:var(--main);border-radius:1rem;}
  .sec0 .col h3{margin-bottom:0.8em;font-size:1.6em;font-weight:900;color:#111;text-align:center;}
 .sec0 .col h3 span{text-align:center;}
 .sec0 .col h3 span.sp1{display:block;padding:0.6em 0;margin-bottom:1em;font-weight:700;font-size:0.6em;border-radius:1rem;color:#fff;}
 .sec0 .col .box1{margin-bottom:1em;}
 .sec0 .col .box2{padding:4rem 1rem;background:#fff;border-radius:1rem;}
 .sec0 .col .box2 section{max-width:600px;margin:auto;}
 .sec0 .col .box1 h3 span.sp1{background:#5e9175;}
 .sec0 .col .box2 h3 span.sp1{background:#ff0036;}
 .sec0 .col h3 span.sp2{display:block;font-size:0.8em;}
 .sec0 .col h3 span.sp3{display:block;background:linear-gradient(-180deg,rgba(255,255,0,0) 0%,rgba(255,255,0,0) 60%,rgba(255,255,0,1.0) 60%,rgba(255,255,0,1.0) 100%);
  /*-webkit-text-stroke: 4px #fff;  text-stroke: 4px #fff;  paint-order: stroke;*/}
 .sec0 .col ul{margin-bottom:2em;padding:1em 0 0;border-top:dotted 4px #111;}
 .sec0 .col li{padding:0.2em 0;font-weight:500;font-size:0.9em;padding-left:1.2em;text-indent:-1.3em;}
 .sec0 .col li::before{content:'\f14a';font-family:var(--faw);font-weight:600;padding-right:0.5em;color:#f60;}
 .sec0 .col .box2 img{width:100%;}
 .sec0 .col a{display:block;width:100%;margin:auto;padding:1em 0;font-size:1.1em;text-decoration:none;text-align:center;background:#ff0;border-radius:100px;font-weight:700;color:#111;transition:transform 0.3s;}
 .sec0 .col a::after{content:'→';display:inline-block;padding-left:2em;}
 .sec0 .col a:hover{transform:scale(1.1);}

@media (width >= 820px) {
 .sec0 .col .box1{margin-bottom:0;}
 .sec0 .col h3{margin-bottom:0.8em;font-size:1.8em;font-weight:900;color:#111;text-align:center;}
 .sec0 p{font-size:1em;}
 .sec0 .col ul{padding:1em 1em 0;}
 .sec0 .col li{font-size:inherit;}
 .sec0 .col a{font-size:inherit;}
}

#access{padding:4em 1em;max-width:960px;margin:auto;}
#access h2{margin-bottom:1em;font-size:clamp(1.2em,5vw,1.6em);text-align:center;}
#access iframe{margin-bottom:2em;}
#access table{margin-bottom:2em;}
#access th{min-width:5em;}
#access p a{text-decoration:underline;}

.form{padding:4em 1em;text-align:center;background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.form p,.form a{text-align:center;display:block;}
.form > p{font-size:1.6em;font-weight:bold;}
.form p.form_p1{margin-bottom:2em;}
.form a{max-width:500px;margin:auto;font-size:clamp(1.6em, calc(1.6rem + ((1vw - 0.234375em) * 0.6214)), 2.2em);padding:0.5em 0;}
.form a.reservation2{background:#222;color:#fff;border-radius:0.5rem;}
.form a.reservation2::before{content:'\f0e0';font-family:var(--faw);font-weight:600;margin-right:0.3em;}
.form a.tel2{color:#369;font-weight:700;font-size:clamp(1.8em, calc(1.8rem + ((1vw - 0.234375em) * 0.4142)), 2.2em);}
.form a.tel2::before{content:'\f098';font-family:var(--faw);font-weight:600;margin-right:0.3em;}

#contents2 > img{width:100%;margin-bottom:20px;}






/* 480px以上用の記述 
---------------------------------------------------------------------------------------------------------------------------------- */
@media (width >= 1024px) {
#wrapper{}
.logo img{width:100%;max-width:300px;}
	
	#footer{	box-sizing:border-box;position:relative;max-width:960px;margin:0 auto;padding:0 1em;}
	header{position:sticky;top:0;left:0;display:flex;justify-content:space-between;align-items:center;width:100%;padding:1em;background:#fff;z-index:9999;}
	h1{}
	.logo a{width:300px;}
	header div{flex:1;}
	nav{position:static;width:auto;background:none;}
	nav li{display:block;}
	nav a{display:block;white-space:nowrap;font-size:1em;padding:1em;}
	div#pankuzu{	margin-bottom:40px;	padding-top:10px;	}
	#pankuzu a{text-decoration:underline;color:#09C;}
	
	#contents{margin-top:10px;}
	#contents:after{content:".";display:block;clear:both;visibility:hidden;}
	main{padding-bottom:30px;}
}




footer{clear:both;background-color: #041217;}
#footer{
position:relative;
margin:0 auto;
padding:30px 0 ;
text-align:left;
font-size:12px;
line-height:1.75em;
background-image:url(image/info_bg2.jpg);
background-repeat:repeat-y;
}
#footer:after{content:".";display:block;clear:both;visibility:hidden;}

#footer a,#footer p,.addr p,small{color:#bbd1da;}
#footer a.top{
position:absolute;
top:-30px;
left:50%;
display:block;
width:140px;
line-height:30px;
margin-left:-70px;
text-align:center;
background:#041217;
}
#footer a.top:hover{background:#0b2834;}
#footer .list{padding:0 1em 2em;}
#footer li a{display:block;width:100%;line-height:34px;}
#footer ul li{border-bottom:1px dotted #CCC;}
#footer li a:after{content:"▸";display:block;float:right;margin-right:5px;}

#footer .section{padding:0 1em;}
#footer .section a img{width:100%;}
#footer p,#footer p a{padding:20px 0 0;color:#4f6c78}

.addr{clear:both;overflow:hidden;padding:30px 0;background-color:#0B2834;}
.addr p{margin:0 auto;font-size:8px;}
.addr p a.f_logo{display:block;max-width:300px;height:50px;margin:auto;background:url(../image/logo3.gif) no-repeat left center;text-indent:-9999px;background-size:100%;}
.addr p span{display:none;}

@media screen and (min-width: 480px) ,print {
	#footer a.top{
	position:absolute;
	top:-30px;
	left:auto;
	right:0;
	display:block;
	width:140px;
	line-height:30px;
	text-align:center;
	background:#041217;
	}

	#footer .list{width:210px;float:left;margin-right:85px;padding:0;}
	#footer .section{padding:0;}
	#footer .section a img{width:auto;}
	#footer li a:hover{background-color:#0099CC;color:#FFF;text-indent:0.5em;}
	.addr p{width:980px;margin:0 auto;font-size:12px;}
	.addr p a.f_logo{display:block;width:300px;height:36px;float:left;background:url(../image/logo3.gif) no-repeat left center;text-indent:-9999px;}
	.addr p span{display:block;margin-left:320px;height:36px;padding-left:20px;border-left:1px dotted #CCC;line-height:18px;}
}
.addr p a.tel{color:#FFF;}

small{display:block;padding:5px 0;text-align:center;background:#111;font-size:12px;letter-spacing:1px;}