@charset "utf-8";

p.read{text-align:center; margin:12px auto;}

.heading{ text-align:center; margin:60px auto 20px;}
h2 {display: flex; justify-content: center; align-items: center;}
h2::before,
h2::after {
  content: "";
  flex-grow: 1;
  height: 8px;
  background-image: repeating-linear-gradient(-45deg, #777 0, #777 1px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%);
  background-size: 8px 8px;
}
h2::before {margin-right: 30px;}
h2::after {margin-left: 30px;}

h3{margin:0;}
h4{color:#666600; margin-bottom:0; margin-top:22px; padding-bottom:0; font-size:1.2em;}
h4:before{content:"■";}

h5{font-size:1.1em; margin:0; padding:4px 0; font-weight:normal; color:#666600;}

.boxF{text-align:center; width:80%; margin:12px auto;}
.box{border:2px solid #CCCCCC; padding:4px 12px; display:inline-block; margin:0 auto; text-align:left;}
.box ul{margin:12px 0 12px 24px; list-style-type:disc;}
.box strong{color:#CC9900; font-size:1.2em; font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;}
.box p.notes{font-size:0.8em; color:#990000;}

div.pagemenu{margin:0 auto; padding:0; text-align:center;}
div.pagemenu ul{display:grid; justify-content: space-evenly; grid-template-columns: repeat(2, 1fr); gap:12px; padding:30px 12px;}
div.pagemenu li a {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
 }
 
div.pagemenu li{background-color:#EDD589; color:#333333;
	position: relative;
	padding:6px 12px 6px 12px; display: flex; align-items: center;
	color: #000;
}
div.pagemenu li:hover{background-color:#CCCCCC;}
div.pagemenu ul div{position: relative; display: inline-block; text-align:left; padding:8px 0 8px 24px; vertical-align: middle; text-decoration: none; width:100%; margin:0 auto; box-sizing:border-box;}
div.pagemenu ul div::before, ul.pagemenu div::after{position: absolute; top: 0; bottom: 0; left:8px; margin: auto; content: ""; vertical-align: middle;}
div.pagemenu ul div::before{top: 5px; box-sizing: border-box; width: 5px; height: 5px; border: 5px solid transparent; border-top: 5px solid #333333;}
@media screen and (max-width:1080px) {
div.pagemenu ul{grid-template-columns	:1fr 1fr;}
}
@media screen and (max-width:760px) {
div.pagemenu ul{grid-template-columns	:1fr;}
div.pagemenu li{padding-top:2px; padding-bottom:2px;}
}


div.detail{border:1px solid #CCCCCC; background-color:#FCF9F3; padding: 0; width:84%; margin:30px auto 60px; clear:both;}
div.detailL{float:left; padding:8px;}
div.detailR{float:left; padding-left:12px; padding-bottom:12px; width:68%;}
div.detailR h4:first-child{margin-top:0;}
/*div.detail p{text-align:center;}*/

div.detail .prc{font-size:0.8em; text-align:left; margin:0;}
div.detail ul{margin:0 0 12px 24px; padding:0;}
div.detail ul li strong.colon:before{ content:"："; font-weight:normal;}
div.detail dt{color:#F4047C; font-weight:bold; width:120px; float:left; clear:left;}
div.detail dt span, dd span{font-size:0.8em;}
div.detail dd{margin-left:120px;}
div.detail hr{border:none; border-bottom:1px dotted #CCCCCC; clear:both; padding-top:12px;}

div.detail:after{clear:both; content:""; display:block;}

p.link_case{text-align:center; padding-top:20px; padding-bottom:12px;}
p.link_case a{background-color:#FF0099; color:#FFFFFF; padding:10px 30px; border-radius:30px; -webkit-border-radius: 30px; -moz-border-radius:30px;}
p.link_case a:hover{text-decoration:none; background-color:#DA016D;}


p.tel{}
p.tel a{font-weight:bold; color:#996600; font-size:2em;}
p.links{margin:20px 0;}
p.links a{background-color:#E3CD93; color:#333333; border-radius:20px; -webkit-border-radius: 20px; -moz-border-radius:20px; padding:4px 20px;}
p.links a:hover{text-decoration:none; background-color:#D8C072;}
p.links a.pdf{background-color:#FFC679; color:#663300}
p.links a.pdf:hover{background-color:#FABF5F;}

div.detail .tels{padding-top:12px;}
div.detail .tels p{text-align:left;}


@media screen and (max-width:1080px) {
div.detailL{float:left;}
div.detailR{float:left; width:64%;}
}

@media screen and (max-width:880px) {
div.detail{width:auto;}
div.detailL{float:left; width:20%;}
div.detailL img{max-width:100%;}
div.detailR{float:left; width:74%; padding-left:2px;}
div.detail ul li strong.colon:before{content:""; display:block;}
}

@media screen and (max-width:700px) {
.boxF{width:auto;}
div.pagemenu ul{width:auto;}
}

@media screen and (max-width:560px) {
p.read{text-align:left;}
div.detail .prc{display:block;}

div.detailL{float:none; width:auto; text-align:center;}
div.detailL img{max-width:none;}
div.detailR{float:none; width:auto; padding-left:0; padding-right:2px;}
p.links{ text-align:center;}
div.detail .tels p{text-align:center;}
}

@media screen and (max-width:480px) {
p.links{font-size:0.9em;}
p.links a{padding:8px;}
}

@media screen and (max-width:380px) {
div.pagemenu ul{font-size:0.8em;}

p.links a{display:block; text-align:center;}
}