/**  リセット用CSS  **/
@import url(crestrap.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 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 { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }


/* CSS Document */
@media screen and (max-width: 320px){
}
@media screen and (min-width: 375px) and (max-width: 413px){
}
@media screen and (min-width: 414px) and (max-width: 767px){
}
@media screen and (min-width: 768px) and (max-width: 1023px){
}
@media screen and (min-width: 1024px) and (max-width: 1279px){
}
@media screen and (min-width: 1280px) and (max-width: 1440px){
}
@media screen and (min-width:1441px) {
}

.clearfix{display: block;}

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


ul,li{
list-style:none;
margin:0;padding:0;
text-align:center;
-webkit-box-sizing: border-box!important;
box-sizing: border-box!important;
}

.box_1, .x3-box_2,{
	margin:0 auto;
	padding:10px 0;
	font-size: 0px;
	letter-spacing: 0;
	text-align: center;
}

@media (max-width: 320px){.box_1, .x3-box_2.box_1, .x3-box_2{width:100%;}}
@media (min-width: 600px) and (max-width: 959px){..box_1, .x3-box_2{width:100%;}}
@media (min-width: 960px) and (max-width: 1280px){.box_1, .x3-box_2{width:100%;}}
@media (min-width: 1281px) {.box_1, .x3-box_2{width:100%;}}

.box_1 li, .x3-box_2 li{
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.x3-box_2 img{width:100%; height: auto;border-radius: 20px;z-index:10;border:4px solid #fff;
filter: drop-shadow(4px 4px 3px rgba(0,0,0,.2));
animation: fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - */

/* x3-box_2 */
.x3-box_2 li{ padding: 0px 1% 3% 1%;}

@media (min-width: 1441px)  {
	.x3-box_2 li{width:48%;}
}
@media  (min-width: 1281px) and (max-width: 1440px){
	.x3-box_2 li{width:48%;}
}
@media  (min-width: 1025px) and (max-width: 1280px){
	.x3-box_2 li{width:48%;}
}
@media (min-width: 961px) and (max-width: 1024px){
	.x3-box_2 li{width:48%;}
}
@media  (min-width: 769px) and (max-width: 960px){
	.x3-box_2 li{width:48%;}
}
@media (min-width: 600px) and (max-width: 768px){
	.x3-box_2 li{width:48%;}
}
@media  (min-width: 414px) and (max-width: 599px){
	.x3-box_2 li{width:100%;}
}
@media (min-width: 375px) and (max-width: 413px){
	.x3-box_2 li{width:100%;}
}
@media (max-width: 320px){
	.x3-box_2 li{width:100%;}
}

.long{width:90%!important; height:auto!important;}


@media screen and (max-width: 320px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 15px!important;padding: 0.6em 0.8em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 45%;}
.floor-namber{font-size:160%;color:#ffff66;margin-right:10px;vertical-align:middle;}
.read-wrap {width:100%;height:150px;border-radius: 20px;position:relative;z-index:1;margin-bottom:15px;}
.read-wrap p {width:90%;text-align:justify;font-size: 11px;font-weight: nomal;line-height: 160%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 375px) and (max-width: 413px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 18px!important;padding: 0.6em 0.8em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 45%;}
.floor-namber{font-size:160%;color:#ffff66;margin-right:10px;vertical-align:middle;}
.read-wrap {width:100%;height:160px;border-radius: 20px;position:relative;z-index:1;margin-bottom:20px;}
.read-wrap p {width:85%;text-align:justify;font-size: 12px;font-weight: nomal;line-height: 160%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 414px) and (max-width: 599px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 18px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 45%;}
.floor-namber{font-size:160%;color:#ffff66;margin-right:10px;vertical-align:middle;}
.read-wrap {width:100%;height:180px;border-radius: 20px;position:relative;z-index:1;margin-bottom:20px;}
.read-wrap p {width:90%;text-align:justify;font-size: 14px;font-weight: nomal;line-height: 160%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 600px) and (max-width: 768px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 22px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:160%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:100%;height:180px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:90%;text-align:justify;font-size: 16px;font-weight: nomal;line-height: 170%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 769px) and (max-width: 960px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 26px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:160%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:100%;height:160px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:93%;text-align:justify;font-size: 16px;font-weight: nomal;line-height: 170%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 961px) and (max-width: 1024px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:45px;z-index:3;}
.title-h1{font-size: 28px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:170%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:100%;height:160px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:90%;text-align:justify;font-size: 16px;font-weight: nomal;line-height: 170%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
.long{width:100%!important; height:auto!important;}
}

@media screen and (min-width: 1025px) and (max-width: 1280px){
.box_1 li{width:100%; padding-bottom: 25px;position:relative;top:50px;z-index:3;}
.title-h1{font-size: 35px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:180%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:100%;height:200px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:90%;text-align:justify;font-size: 20px;font-weight: nomal;line-height: 180%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
}

@media screen and (min-width: 1281px) and (max-width: 1440px){
.box_1 li{width:100%; padding-bottom: 30px;position:relative;top:60px;z-index:3;}
.title-h1{font-size: 40px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:180%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:100%;height:200px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:90%;text-align:justify;font-size: 20px;font-weight: nomal;line-height: 180%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
}

@media screen and (min-width:1441px) {
.box_1 li{width:100%; padding-bottom: 30px;position:relative;top:60px;z-index:3;}
.title-h1{font-size: 45px!important;padding: 0.6em 1.5em;}
.title-h1::after {position: absolute;content: '';top: 100%;left: 50%;}
.floor-namber{font-size:180%;color:#ffff66;margin-right:20px;vertical-align:middle;}
.read-wrap {width:95%;height:220px;border-radius: 20px;position:relative;z-index:1;margin-bottom:30px;}
.read-wrap p {width:90%;text-align:justify;font-size: 24px;font-weight: nomal;line-height: 180%;position:relative;top:20px;z-index:5;margin:0;padding:1.5em 0;}
}

.read-wrap {font-family: 'Kosugi Maru', sans-serif;background-color:#FFF;border:4px solid #fd8008;}

.read-wrap:first-letter {
  font-size: 2em;
  font-weight:bold;
  color: #fc6666;
}

/* タイトル */
.title-h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
color:#fff;
text-align: center;
position: relative;
background-color: #FBAB7E;
background-image: linear-gradient(0deg, #FBAB7E 0%, #F7CE68 100%);
border-radius: 10px;
filter: drop-shadow(8px 8px 4px rgba(0,0,0,.2));
}

.title-h1::after {
border: 15px solid transparent;
border-top: 15px solid #FBAB7E;
width: 0;
height: 0;
}

@media screen and (min-width: 320px) and (max-width: 767px){
.title-h1{filter: drop-shadow(4px 4px 3px rgba(0,0,0,.2));}}

@media screen and (min-width: 768px) and (max-width: 959px){
.title-h1{filter: drop-shadow(5px 5px 3px rgba(0,0,0,.2));}}

@media screen and (min-width: 960px) and (max-width: 1441px){
.title-h1{filter: drop-shadow(8px 8px 4px rgba(0,0,0,.2));}}


h3 {font-family: 'Kosugi Maru', sans-serif;}


 /* 放映紹介 */
 .info-box {background-color:#fff;}
.info-box-right p {font-family: 'Kosugi Maru', sans-serif;font-weight:400;}
.info-box-right p span {color:#0F80FF;}
.info-box-right a {color:#0000ff; font-weight:700;}

.catchcopy {font-family: 'M PLUS Rounded 1c', sans-serif;margin-top:10px;}
.catchcopy:first-letter {font-size: 2em;margin-right:-5px;color: #fc6666;font-weight:bold;}

.media-info {font-size: 25px; color: #fc6666;margin-bottom:10px;font-family: 'Kosugi Maru', sans-serif;font-weight:700;}


@media screen and (max-width: 320px){
.info-box {width:100%;padding:12px;overflow:hidden;margin: 5px 0 20px 0;border:6px solid #FC6666;border-radius:20px;}
.info-box-left {width:100%;float:clear;margin-bottom:1%;}
.info-box-right {width:100%;float:clear;text-align:justify;line-height:140%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 16px;line-height:140%; color: #000;margin-bottom:15px;}
.media-info {font-size: 14px; line-height:120%;margin-bottom:3px;}
.info-box-right p{font-size: 12px;margin-bottom:3px;;line-height:140%;}
}
@media screen and (min-width: 375px) and (max-width: 413px){
.info-box {width:100%;padding:12px;overflow:hidden;margin: 5px 0 20px 0;border:8px solid #FC6666;border-radius:20px;}
.info-box-left {width:100%;float:clear;margin-bottom:1%;}
.info-box-right {width:100%;float:clear;text-align:justify;line-height:140%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 16px;line-height:140%; color: #000;margin-bottom:15px;}
.media-info {font-size: 14px; line-height:120%;color: #fc6666;margin-bottom:3px;}
.info-box-right p{font-size: 12px;margin:0;line-height:140%;}
}
@media screen and (min-width: 414px) and (max-width: 599px){
.info-box {width:100%;padding:13px;overflow:hidden;margin: 5px 0 20px 0;border:8px solid #FC6666;border-radius:20px;}
.info-box-left {width:100%;float:clear;margin-bottom:1%;}
.info-box-right {width:100%;float:clear;text-align:justify;line-height:140%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 18px;line-height:140%; color: #000;margin-bottom:15px;}
.media-info {font-size: 16px; line-height:120%;color: #fc6666;margin-bottom:3px;}
.info-box-right p{font-size: 14px;margin:0;line-height:140%;}
}
@media screen and (min-width: 600px) and (max-width: 768px){
.info-box {width:100%;padding:15px;overflow:hidden;margin: 15px 0 30px 0;border:8px solid #FC6666;border-radius:20px;}
.info-box-left {width:100%;float:clear;margin-bottom:1%;}
.info-box-right {width:100%;float:clear;text-align:justify;line-height:140%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 18px;line-height:140%; color: #000;margin-bottom:15px;}
.media-info {font-size: 16px; line-height:120%;color: #fc6666;margin-bottom:3px;}
.info-box-right p{font-size: 14px;margin:0;line-height:140%;}
}
@media screen and (min-width: 769px) and (max-width: 960px){
.info-box {width:100%;padding:15px;overflow:hidden;margin: 15px 0 30px 0;border:8px solid #FC6666;border-radius:20px;}
.info-box-left {width:43%;float:left;margin-right:2%;}
.info-box-right {width:55%;float:left;text-align:justify;line-height:160%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 16px;line-height:135%; color: #000;margin-bottom:10px;}
.media-info {font-size: 14px; line-height:120%;color: #fc6666;margin-bottom:3px;}
.info-box-right p{font-size: 12px;margin-bottom:0px;line-height:140%;}
}
@media screen and (min-width: 961px) and (max-width: 1024px){
.info-box {width:100%;padding:15px;overflow:hidden;margin: 15px 0 30px 0;border:8px solid #FC6666;border-radius:20px;}
.info-box-left {width:30%;float:left;margin-right:2%;}
.info-box-right {width:68%;float:left;text-align:justify;line-height:160%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 18px;line-height:135%; color: #000;margin-bottom:10px;}
.media-info {font-size: 16px; line-height:120%;color: #fc6666;margin-bottom:3px;}
.info-box-right p{font-size: 12px;margin-bottom:0px;line-height:140%;}
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
.info-box {width:100%;padding:20px;overflow:hidden;margin: 15px 0 30px 0;border:10px solid #FC6666;border-radius:20px;}
.info-box-left {width:35%;float:left;margin-right:2%;}
.info-box-right {width:63%;float:left;text-align:justify;line-height:160%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 20px;line-height:140%; color: #000;margin-bottom:10px;}
.media-info {font-size: 18px; color: #fc6666;margin-bottom:0px;}
.info-box-right p{font-size: 14px;margin-bottom:0px;line-height:140%;}
}
@media screen and (min-width: 1281px) and (max-width: 1440px){
.info-box {width:100%;padding:25px;overflow:hidden;margin: 15px 0 30px 0;border:10px solid #FC6666;border-radius:20px;}
.info-box-left {width:45%;float:left;margin-right:2%;}
.info-box-right {width:53%;float:left;text-align:justify;line-height:160%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 23px;line-height:140%; color: #000;margin-bottom:25px;}
.media-info {font-size: 24px; color: #fc6666;margin-bottom:5px;}
.info-box-right p{font-size: 16px;margin-bottom:0px;}
}
@media screen and (min-width:1441px) {
.info-box {width:100%;padding:25px;overflow:hidden;margin: 15px 0 30px 0;border:10px solid #FC6666;border-radius:20px;}
.info-box-left {width:36%;float:left;margin-right:2%;}
.info-box-right {width:62%;float:left;text-align:justify;line-height:160%;word-break:break-all;}
.catchcopy {font-weight:bold;font-size: 30px;line-height:140%; color: #000;margin-bottom:25px;}
.info-box-right p{font-size: 18px;margin-bottom:0px;}
}