@charset "utf-8";
/* CSS Document */
.clearfix {zoom:1;}
.clearfix:after{content: ""; display: block; clear: both;}
img{border: none;}
a:focus{outline: none;}
a:link{color:#d72446; text-decoration:none;}
a:visited{color:#d72446;}

#pageall{font-size:14px;}
#pagewrap{width:1230px; margin:0 auto; color:#444444;}
#pagewrap .header{letter-spacing:1px; line-height:160%; font-size:26px; margin:30px 0; margin-bottom:15px; text-align:center; margin-bottom:15px; padding:1rem;}
#pagewrap .header span{font-size:12px; font-weight:normal; letter-spacing:2px; color:#3d3d3d;}


#pagewrap .contents-wrap {display: flex; flex-wrap:wrap; justify-content: space-between; align-items:stretch;}
#pagewrap .contents-box {display: flex; flex-direction: column; margin-bottom: 3rem; width: 100%; background-color:#ffffff; border:2px solid #444444; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
#pagewrap .contents-box p.key img {display: block; width: 100%; height: auto; border-bottom:2px solid #444444;}
#pagewrap .contents-box h3 {background-image:url("../images/new.png"); background-repeat:no-repeat; background-position: 10px; padding: 2rem 0 1.5rem 5.5rem; font-size: 1.9rem; line-height:130%;}
#pagewrap .contents-box h2 {padding:2rem 0 1.5rem 1.5rem; font-size: 1.9rem; line-height:130%;}
#pagewrap .contents-box h2 span,#pagewrap .contents-box h3 span{font-size:1.3rem;}
#pagewrap .contents-box p.day{padding:0 0 1.5rem 1.5rem; letter-spacing:0.2rem; color:#d72446; font-size:120%; line-height:140%;}
#pagewrap .contents-box ul.tag{display: flex; flex-wrap: wrap; padding:1rem 1rem 1.5rem 1rem; }
#pagewrap .contents-box ul.tag li{background-color:#e8e8e8; padding:0.7rem 1.3rem 0.5rem 1.3rem; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; margin-right:5px; letter-spacing:1px; margin-bottom:7px;}
#pagewrap .contents-box .info{padding:0 0 1rem 1rem; border-bottom:2px solid #444444; line-height:140%;}
#pagewrap .contents-box .my-color{color:#d72446;}
#pagewrap .contents-box ul.tag li:before{content:"# ";}
#pagewrap .contents-box p.story{padding:1.5rem 1.5rem 0 1.5rem; letter-spacing:1px; line-height:160%;}
#pagewrap .contents-box p.p-15{padding-bottom:1.5rem;}

#pagewrap .contents-box div.free{border-top:2px solid #444444;}
#pagewrap .contents-box div.free p{padding:1rem 0 0.5rem 1rem;}
#pagewrap .contents-box div.free table{margin:1rem 0; width:100%;}
#pagewrap .contents-box div.free td{vertical-align:middle;}
#pagewrap .contents-box div.free td.prof{padding:0 1rem; width:65px;}
#pagewrap .contents-box div.free td.name{font-size:16px; font-weight:bold; line-height:140%;}
#pagewrap .contents-box div.free td.name span{font-size:13px; font-weight:normal;}
#pagewrap .contents-box div.free td.menu{width:50px; text-align:center; font-size: 1.4em}

#pagewrap .contents-box div.free ul{display: flex; flex-wrap:wrap; justify-content: space-between; align-items:stretch;}
#pagewrap .contents-box div.free li{width: 298px;}
#pagewrap .contents-box div.free li img{width: 298px; object-fit: cover; height: 190px;}

.lb {display: flex; position: fixed; width: 100%; height: 100%; top: 0; left: 0; justify-content: center; align-items: center; background: rgba(0,0,0,.7); opacity: 0; transition: .3s opacity ease; z-index: -1;}
.lb img {width: auto !important; height: 70% !important; transform: scale(.7); transition: .4s transform ease; pointer-events: none;}
.lb:target {opacity: 1; z-index: 103;}
.lb:target img {transform: scale(1);}
.lb::before,.lb::after {display: block; position: fixed; content: ""; width: 24px; height:3px; top: 24px; right: 12px; background: #ffffff; border-radius: 4px;}
.lb::before {transform: rotate(-315deg);}
.lb::after {transform: rotate(315deg);}
#pagewrap .contents-box div.free p.icon{padding: 1rem 2rem; font-size: 1.3rem;}



#pagewrap .contents-box ul.sns{display: flex; flex-wrap: wrap; margin-top: auto; border-top:2px solid #444444;}
#pagewrap .contents-box ul.sns li{width: 49%; diplay:block; padding:1rem; text-align:center; font-weight:bold; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
#pagewrap .contents-box ul.sns li:first-child{border-right:2px solid #444444;}

.contents-box div.change{font-size:15px; letter-spacing:1px;}
.contents-box div.change span{font-weight:normal;}
.contents-box div.change p{background-color:#444444; color:#ffffff; font-weight:bold; text-align:center; padding:10px 0; font-size:16px; margin-bottom:10px;}
.contents-box div.change table{width:96%; margin:0 2%; border:1px solid #f5a5a5; background-color:#fff9f9;}
.contents-box div.change table td{border:1px solid #f5a5a5; vertical-align:middle; padding:10px; color:#f5a5a5; font-weight:bold; line-height:150%;}
.contents-box div.change table td span{font-weight:bold; font-size:110%;}
.contents-box div.change table td.title{background-color:#ffffff; color:#000000; font-weight:normal;}
.contents-box div.change table td.arrow{background-color:#f5a5a5; border-bottom:1px; border-style: dashed; border-color: #ffffff; text-align: center;}
.contents-box div.change table tr:last-child .arrow{border-bottom:1px solid #f5a5a5;}
.contents-box div.emagency{text-align:right; padding:10px;}


@media screen and (max-width: 768px){
#index-menu,#footer-page-top,#footer{display:none;}
#pagewrap{width:100%;}
#pagewrap .header{ font-size:18px; margin-bottom:15px; text-align:center; margin-bottom:15px; padding:1rem; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.contents-wrap {flex-direction: column;}
.contents-box {width: 100% !important;}
#smart-header{width:100%; height:60px; position: relative; border-bottom:3px solid #01b386;}
#smart-header h1{position: absolute; top: 0px; left: 12px; padding: 13px 0 0 0; overflow: hidden; width:153px; height:36px;}
#pagewrap .contents-box div.free li{width: 50%;}
.lb img{width: 100% !important; height: auto !important;}
#pagewrap .contents-box div.free li img {object-fit: cover; width: 100%; height: 160px;}

}
@media screen and (min-width: 768px){
#smart-header,.foot-menu{display:none;}

}