@charset "utf-8";
/* ==================================================
pc, ipad
================================================== */
@media screen and (min-width:835px) {
/* --------------------------------------------------
#sec01
-------------------------------------------------- */
#sec01 {
text-align: center;
width: 100%;
height: 550px;
background: url(/uploads/image/acci/01/sec01_img01.jpg) no-repeat;
display: table;
background-size: cover;
}
#sec01 .sec01_inner {
vertical-align: middle;
padding: 0 40px;
margin: 0 auto;
display: table-cell;
}
#sec01 .title {
color: #ffffff;
text-shadow: 1px 1px 6px #000000;
}
/* --------------------------------------------------
.lead
-------------------------------------------------- */
.lead {
text-align: center;
color: #ffffff;
padding: 30px 40px;
background: #41bdce;
}
/* --------------------------------------------------
#sec02
-------------------------------------------------- */
#sec02 {
margin: 80px auto 0;
}
#sec02 h3 {
text-align: center;
}
#sec02 ol {
margin-top: 25px;
}
#sec02 ol > li {
margin-top: 25px;
}
#sec02 ol > li:first-child {
margin-top: 0;
}
#sec02 ol li h4 {
color: #218f74;
margin-top: 25px;
text-align: center;
}
#sec02 ol li:first-child h4 {
margin-top: 0;
}
#sec02 ol li .img {
text-align: center;
margin-top: 20px;
}
#sec02 ol li .arrow {
text-align: center;
}
#sec02 ol .ex .ex_inner {
padding: 30px 0 50px;
background: #e9f5f2;
margin-top: 20px;
}
#sec02 ol .ex ul {
width: 956px;
background: url(/uploads/image/acb/img/common_bg_line01.png) center repeat-y;
margin: 0 auto;
}
#sec02 ol .ex ul li:first-child {
width: 440px;
float: left;
}
#sec02 ol .ex ul li:last-child {
width: 440px;
float: right;
}
#sec02 ol .ex ul li > p:first-child {
text-indent: -16px;
margin-left: 16px;
}
#sec02 ol .ex ul li div {
margin-top: 10px;
}
#sec02 ol .ex ul li div p:first-child {
width: 215px;
margin-left: 16px;
float: left;
}
#sec02 ol .ex ul li div p:last-child {
float: right;
}
#sec02 ol .ex ul li:last-child p:nth-child(2) {
margin: 30px 0 0 16px;
}
#sec02 ol .ex ul li:last-child p:last-child {
margin: 30px 0 0 16px;
}
#sec02 .notice {
text-align: right;
width: 1040px;
margin: 15px auto 0;
}
/* --------------------------------------------------
#sec03
-------------------------------------------------- */
#sec03 {
width: 956px;
margin: 80px auto 0;
}
#sec03 h3 {
text-align: center;
}
#sec03 .sec03_inner {
margin-top: 30px;
}
#sec03 .sec03_box {
width: 395px;
float: left;
}
#sec03 .sec03_inner dl {
margin-top: 15px;
}
#sec03 .sec03_txt01 {
width: 520px;
line-height: 1.8;
float: right;
}
}
/* ==================================================
ipad
================================================== */
@media screen and (min-width: 835px) and (max-width: 1100px) {
/* --------------------------------------------------
#sec01
-------------------------------------------------- */
#sec01 {
height: 500px;
}
/* --------------------------------------------------
#sec02
-------------------------------------------------- */
#sec02 ol .ex .ex_inner {
padding-right: 40px;
padding-left: 40px;
}
#sec02 ol .ex ul {
width: auto;
}
#sec02 ol .ex ul li:first-child {
width: 46%;
}
#sec02 ol .ex ul li:last-child {
width: 46%;
}
#sec02 ol .ex ul li div p:first-child {
width: 49%;
}
#sec02 ol .ex ul li div p:last-child {
width: 45%;
}
#sec02 ol .ex ul li div p:last-child img {
width: 100%;
}
#sec02 .notice {
width: auto;
text-align: right;
margin: 15px 40px 0;
}
/* --------------------------------------------------
#sec03
-------------------------------------------------- */
#sec03 {
width: auto;
margin-right: 40px;
margin-left: 40px;
}
#sec03 .sec03_box {
width: 41%;
float: left;
}
#sec03 .sec03_box img {
width: 100%;
}
#sec03 .sec03_txt01 {
width: 54%;
float: right;
}
}
/* ==================================================
sp
================================================== */
@media screen and (max-width:834px) {
/* --------------------------------------------------
#sec01
-------------------------------------------------- */
#sec01 {
text-align: center;
width: 100%;
background: url(/uploads/image/acci/01/sec01_img01-sp.jpg) no-repeat;
background-size: cover;
}
#sec01 .sec01_inner {
padding: 22% 5.3%;
margin: 0 auto;
}
#sec01 .title {
color: #ffffff;
text-shadow: 1px 1px 3px #000000;
}
/* --------------------------------------------------
.lead
-------------------------------------------------- */
.lead {
color: #ffffff;
padding: 3% 5.3%;
background: #41bdce;
line-height: 1.8;
}
/* --------------------------------------------------
#sec02
-------------------------------------------------- */
#sec02 {
margin-top: 9%;
}
#sec02 h3 {
text-align: center;
margin: 0 5.3%;
}
#sec02 ol {
margin-top: 2%;
}
#sec02 ol > li {
margin: 2% 5.3% 0;
}
#sec02 ol > li:first-child {
margin-top: 0;
}
#sec02 ol > .ex {
margin-right: 0;
margin-left: 0;
}
#sec02 ol li h4 {
color: #218f74;
margin: 2% 14px 0;
text-indent: -14px;
}
#sec02 ol li:first-child h4 {
margin-top: 0;
}
#sec02 ol li .img {
margin-top: 3%;
text-align: center;
}
#sec02 ol li .arrow {
margin-top: 3%;
text-align: center;
}
#sec02 ol li .arrow img {
width: 20%;
}
#sec02 ol li .title {
margin-right: 5.3%;
margin-left: 5.3%;
}
#sec02 ol .ex .ex_inner {
padding: 5% 0;
background: #e9f5f2;
margin-top: 3%;
}
#sec02 ol .ex ul {
padding: 0 5.3%;
}
#sec02 ol .ex ul li:first-child {
width: 46%;
float: left;
}
#sec02 ol .ex ul li:last-child {
width: 46%;
float: right;
}
#sec02 ol .ex ul li > p:first-child {
text-align: left;
text-indent: -14px;
margin-left: 14px;
}
#sec02 ol .ex ul li div {
margin-top: 3%;
}
#sec02 ol .ex ul li div p:first-child {
margin-left: 14px;
}
#sec02 ol .ex ul li div p:last-child {
margin-top: 3%;
text-align: center;
}
#sec02 ol .ex ul li div p:last-child img {
width: 60%;
}
#sec02 ol .ex ul li:last-child p:nth-child(2) {
margin: 3% 0 0 14px;
}
#sec02 ol .ex ul li:last-child p:last-child {
margin: 3% 0 0 14px;
}
#sec02 .notice {
text-align: right;
margin: 2% 5.3% 0;
}
/* --------------------------------------------------
#sec03
-------------------------------------------------- */
#sec03 {
margin: 9% 5.3%;
}
#sec03 h3 {
text-align: center;
}
#sec03 .sec03_inner {
margin-top: 4%;
}
#sec03 .sec03_box {
width: 41%;
float: left;
}
#sec03 .sec03_box img {
width: 100%;
}
#sec03 .sec03_box dl {
margin-top: 4%;
}
#sec03 .sec03_txt01 {
width: 54%;
line-height: 1.8;
float: right;
}
}