@charset "utf-8";
/*  common
----------------------------------------------------------------------------------------------------------- */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp.min.css);
*{font-family: YakuHanJP, 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif; font-size: 16px; word-break: normal; font-weight:normal; -webkit-font-smoothing:subpixel-antialiased; }


body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small; *font:x-small;}
select,input,button,textarea,button{ font:99% arial,helvetica,clean,sans-serif;}
table{ font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{ font-family:monospace;*font-size:108%;line-height:100%;}

a{text-decoration: none;}
img{width: auto; max-width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
strong{font-weight: bold;}


/*  出しわけ
----------------------------------------------------------------------------------------------------------- */
.pc-only{display:block;}
.sp-only{display:none;}

@media screen and (max-width: 640px) {
.pc-only{display:none;}
.sp-only{display:block;}
}


/*  footer
----------------------------------------------------------------------------------------------------------- */
#footer{background:#3c3837; color: #fefef2;}


.base-footer-txt-link{width: 100%; max-width: 260px; margin: 0 auto; text-align: center; padding-bottom: 20px;}
.base-footer-txt-link li{padding: 8px;}
.base-footer-sns-btn{width: 100%; max-width: 250px; margin: 0 auto;}
.base-footer-sns-btn li{padding: 8px;}
.base-footer-sns-btn img{width: 100%; max-width: 45px;}
.base-footer-box{border-top: solid 1px #ccc; padding: 14px 0 48px 0;}

@media screen and (max-width: 320px) {
	  .base-footer-txt-link{display: block;}
	  .base-footer-txt-link li{padding: 4px;}
	  .base-footer-sns-btn{max-width: 190px; padding-top: 16px;}
	  .base-footer-sns-btn li{padding: 1%;}
}


/*  footer -copyright
----------------------------------------------------------------------------------------------------------- */
.base-copyright{width: 95%; max-width: 1200px; margin: 0 auto; font-size: 12px; line-height:1.4; padding: 16px 0; text-align: center;}
.base-copyright span img{max-height: 16px;}
.base-copyright-win-txt{}
.base-copyright-ss-txt{padding-bottom: 16px;}
.base-copyright-txt{padding-top: 16px;}
.base-copyright img[src$=".gif"], .base-copyright img[src$=".png"] {
mage-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
image-rendering: pixelated;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (非標準プロパティ) */
}


/*  page-top
----------------------------------------------------------------------------------------------------------- */
#pageTop{ position: fixed; bottom: 20px; right: 20px; }
#pageTop a { display: block; z-index: 997; padding: 4px 8px 4px 8px; width: 40px; height: 40px; background-color: #31baae; color: #fefef2; font-weight: bold; text-decoration: none; text-align: center; }
#pageTop a:hover { text-decoration: none; opacity: 0.7;}




/*  動画埋め込み
----------------------------------------------------------------------------------------------------------- */
.movie_emb_box{width: 100%; max-width: 800px; margin: 5% auto 5% auto;}
.movie_emb{ position: relative; width: 100%; padding-top: 56.25%;}
.movie_emb iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}


/*  モーダルコンウィンドウ(menu)
----------------------------------------------------------------------------------------------------------- */
.lock { overflow:hidden;}
.modal-content { position:relative; display:none; width: calc(90% - 100px); max-width: 700px; margin:30px; padding:5% 20px 0 20px; background:#fefef2;}





.modal-overlay { z-index:2; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(60,108,236,0.75);}
.modal-wrap { z-index:3; display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow:auto;}

.modal-open { color:#00f; text-decoration:underline;}
.modal-open:hover { cursor:pointer; color:#f00;}

.modal-close{background:#3c6cec; border-radius: 30px 30px 0 0; -webkit-border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0;}
.modal-close { width:50%; max-width:292px; margin: 0 auto; display:block; padding-top: 3%; margin-top: 2%;}
.modal-close:hover { cursor:pointer;color:#f00;}

.main-menu{width:50px; position: fixed; top: 5px; right: 0; z-index: 2; margin: 20px; border: solid 1px #fefef2; background:#cc0011;}
.main-menu a{display: block; color: #fefef2;  text-decoration: none;}
.main-menu a:hover{color: #fefef2;  background:#cc0011;}

.modal-menu{width: 95%; max-width: 630px; margin: 0 auto 5px auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
.modal-menu li{width: calc(16.66% - 5px); margin: 2.5px;}
.modal-menu li img{width: 100%;}

@media screen and (max-width: 640px) {
.modal-menu li{width: calc(33.33% - 5px); margin: 2.5px;}
.modal-content2{padding: 0 0 0 0; width: calc(100% - 60px);}
.modal-content3{padding: 3% 2% 0 2%;  width: calc(96% - 60px);}
.modal-content2 .content{margin-top: 0;}

.main-menu{top: 5px; right: 0; z-index: 2; margin: 5px;}


}