@charset "utf-8";

/* Base
------------------------------------------ */
@import "../base/reset.css";
@import "../base/common.css";
@import "../base/header.css";
@import "../base/footer.css";

/* body
------------------------------------------ */
body { height: auto; background: none}
body:before { z-index: 100}
.pcVer { display: block;}
.spVer { display: none;}
/* header
------------------------------------------ */
/* body.origin header { z-index: 20000} */
/* タイトル
------------------------------------------ */
h2 { height: 600px; background: url(./img/osaka/pc_bg_container2.jpg) no-repeat center center; background-size: cover; position: relative }
h2.osaka { background: url(./img/osaka/pc_bg_container2.jpg) no-repeat center center; }
h2 img { height: 50%; width: auto; position: absolute; bottom: 120px; left: 23%; }
h3 { text-align: center; font-size: 180%; margin-bottom: 20px; font-weight: normal;font-family: "Sawarabi Mincho";}
/* article
------------------------------------------ */
.newmain-content *{	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.newmain-content article { width: 800px; margin: 0 auto 40px; padding: 40px 0; font-size: 16px; border-bottom: 2px solid #aaaaaa}
.newmain-content p { margin-bottom: 20px; line-height: 2}
.newmain-content p.date { color: #ffffff; height: 40px; text-align: center; display: table-cell; vertical-align: middle; background: #00b7de; position: relative; padding: 0 0 0 20px;}
.newmain-content p.date::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 40px 40px 0 0; border-color: #00b7de transparent transparent transparent; position: absolute; top: 0;}
.newmain-content .box { position: relative;}
.newmain-content .box p{ padding: 20px; width: 200px; color: #ffffff; margin: 0; background: #00b7de; position: absolute}
.newmain-content .box.type01 { margin-bottom: 40px;}
.newmain-content .box.type01 p{ font-size:90%; bottom: -20px; right: 0;}
.newmain-content .img_r{ float: right; margin: 0 0 20px 20px;}
.newmain-content .box.type03 { text-align: right; margin-top: 40px;}
.newmain-content .box.type03 p{ top: -20px; left: 0; text-align: left;}
.newmain-content p.btn { text-align: center; width: 150px; margin: 0 auto;}
.newmain-content p.btn span { background: url(../../img/special/ic_arrow.png) no-repeat 0 50%; padding-left: 20px; }
.newmain-content p.btn a{ padding: 10px; color: #ffffff; position: relative; background: #266897; background: -moz-linear-gradient(-45deg, #266897 0%, #266897 60%, #327fa7 60%, #327fa7 100%); background: -webkit-linear-gradient(-45deg, #266897 0%,#266897 60%,#327fa7 60%,#327fa7 100%); background: linear-gradient(135deg, #266897 0%,#266897 60%,#327fa7 60%,#327fa7 100%); text-decoration: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block;}
.newmain-content p.btn a:hover{ background: #4789b8; background: -moz-linear-gradient(-45deg, #4789b8 0%, #4789b8 60%, #549ec4 60%, #549ec4 100%); background: -webkit-linear-gradient(-45deg, #4789b8 0%,#4789b8 60%,#549ec4 60%,#549ec4 100%); background: linear-gradient(135deg, #4789b8 0%,#4789b8 60%,#549ec4 60%,#549ec4 100%)}
/*******************************************

ブラウザの幅が640px以下ならここの記述が有効になる

********************************************/

@media only screen and (max-width: 640px) {
body:before { content: ""; background: none; position: static; top: 0;}
.pcVer { display: none;}
.spVer { display: block;}
h2 { height: auto; background: none; position: static}
h2 img { height: auto; width: 100%; position: static }
h3 { font-size: 140%; margin-top: 20px}
.newmain-content article { width: auto; padding: 20px 0; margin: 0 10px 20px}
.newmain-content img { width: 100%; height: auto}
.newmain-content .box { position: static;}
.newmain-content .box.type01 p, .newmain-content .box.type03 p{ position: relative; margin: -60px auto 0; /* z-index: 100 */}
.newmain-content p.type02 { text-align: center;}
.newmain-content p.type02 img { width: 60%;}
}