@charset "UTF-8";

/* -----------------------------------------------
 1200px
-------------------------------------------------- */

@media screen and (max-width: 1366px) {
}

/* -----------------------------------------------
 1200px
-------------------------------------------------- */

@media screen and (max-width: 1200px) {
#eventa li .date {
	width: 25%;
}
#eventa li .title {
	width: 75%;
}
}
/* -----------------------------------------------
1024px
-------------------------------------------------- */

@media screen and (max-width: 1024px) {
#wrapper {
  padding-top: 60px;
}
.button,
.button2,
.button3,
.button4{
    width: 100%;
}
}
/* -----------------------------------------------
 991px
-------------------------------------------------- */
@media screen and (max-width: 991px) {
h4.ribbon {
  width: 80%;
}
#eventa li .date {
	width: 30%;
}
#eventa li .title {
	width: 70%;
}
}

/* -----------------------------------------------
 768px/tablet
-------------------------------------------------- */

 @media screen and (max-width: 768px) {
body { padding-bottom: 0px; }
.container{
    padding: 3em 0;
}
.no_br br{display: none;}
     
/*-- cover --*/
#cover img{
  height: 60vh;
}
#cover .cover_ttl h1{
    font-size: 30px;
    line-height: 1.4;
}
#cover .cover_p{
    max-width: 300px;
    margin-bottom: 1em;
}

.pc { display: none !important; }
.sp { display: block !important; }

#cover2{
    height: 250px;
}
.border_r{
    border-right: none;
}
h4.ribbon {
  width: 80%;
  height: 90px;
  font-size: 1em;
}
#eventa li .date,
           .title,
		   .data {
	float: none;
}
#eventa li .date {
	width: 100%;
    margin-bottom: 0.5em
}
#eventa li .title {
	width: 100%;
	margin-bottom: 0.5em
}
h3.vertical::before {
  width: 40px;/*画像の幅*/
  height: 36px;/*画像の高さ*/
  background-size: contain;
  margin-bottom: 0; 
  margin-right: 0.5em;
}
.tategaki{
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb; 
}

.box_ab{
    padding: 2em 2em 1em 2em;
}
     
.button,
.button2,
.button3,
.button4{
    padding: 15px 100px 15px 40px; /* 上下の余白、左右の余白 */
    margin: 0.5em auto 0 auto;
}
.button::after,
.button2::after{
    top: 5px;
    right: 30px;
    width: 65px;
    height: 47px;
    background-size: 65px 47px;
}
.button3::after,
.button4::after{
    top: 7px;
    right: 20px;
    width: 70px;
    height: 50px;
    background-size: 70px 50px;
}


a.button,
a.button2,
a.button3,
a.button4{
	font-size: 17px;
}
#btn div.col-md-6{
    margin-bottom: .5em;         
}
}

/* -----------------------------------------------
smartPhone
-------------------------------------------------- */

 @media screen and (max-width: 576px) {
html, body, div, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	font-size : 14px;
}
body { line-height: 1.5;}

.container p{font-size: 14px;}
.row p{font-size: 14px;}
     
h1{ font-size:28px; font-size:1.75rem;}
h2{font-size:24px; font-size:1.5rem;}
h3{ font-size:20px; font-size:1.25rem;}
h4 ,h5 { font-size:18px; font-size:1.125rem;}
p.fs24{font-size: 120%}
p.fs20{font-size: 110%}
     
.breadcrumbs {
	text-align: left;
    margin-top: 110px;
    padding-left:1em;
}
.breadcrumbs li,.breadcrumbs li a{
  font-size: 10px;
}
h3[ttl] .icon{
    top:-15px;
    width: 25px;
}
#greenborder_btn [class*="col-"] a{
    margin: -1px 0 0 0;
}
h4.ribbon {
  font-size: 0.9em;
  padding: 1rem 0;
}
ul.listDisc_top li a::after {
  top: -5px;
  width: 30px;
  height: 30px;
  background-size: 30px;
}

h3.vertical::before {
  width: 30px;/*画像の幅*/
  height: 27px;/*画像の高さ*/
}
#cover .cover_ttl h1{
    font-size: 25px;
}
#cover .cover_p{
    max-width: 250px;
}
#cover2{
    height: 150px;
}

}


/* -----------------------------------------------
PRINT Module
-------------------------------------------------- */
@media print {
  
* {color: #666 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
body { width: 100%; }
@page  { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
thead { display: table-header-group; }
tr,img { page-break-inside: avoid; }
li { content: "» "; }
}