@charset utf-8;

header #header_image { height: 600px; text-align: center; }
header #header_image h2 { font-family: ONE-Mobile-Title; font-size: 40px; padding-top: 200px; font-weight: normal; }
header #header_image h1 { font-family: ONE-Mobile-Title; font-size: 90px; padding-top: 30px; font-weight: normal; }
header #header_image h3 { font-size: 20px; padding: 6px 40px 5px; letter-spacing: 5px; font-weight: 500; margin-top: 30px; }

.page_safeday header #header_image { background: #B6A690 url(../image/sub_image/safeday_sub_bg.jpg) no-repeat 50% 50%; background-size: cover; }
.page_safeday header #header_image h2,
.page_safeday header #header_image h1,
.page_safeday header #header_image h3 { color: #333; text-shadow: rgba(255,255,255,.5) 0 0 1px; }

.page_safezone header #header_image { background: #B6A690 url(../image/sub_image/safezone_sub_bg.jpg) no-repeat 50% 50%; background-size: cover; }
.page_safezone header #header_image h2,
.page_safezone header #header_image h1,
.page_safezone header #header_image h3 { color: #fff; text-shadow: rgba(0,0,0,.5) 0 0 1px; }

.page_happy header #header_image { background: #B6A690 url(../image/sub_image/happy_sub_bg.jpg) no-repeat 50% 50%; background-size: cover; }
.page_happy header #header_image h2,
.page_happy header #header_image h1,
.page_happy header #header_image h3 { color: #fff; text-shadow: rgba(0,0,0,.5) 0 0 1px; }

@media all and (max-width:1280px) {
header #header_image { height: 500px; }
header #header_image h2 { padding-top: 150px; }
}

@media all and (max-width:768px) {
header #header_image h2 { font-size: 35px; }
header #header_image h1 { font-size: 80px; letter-spacing: -1px; }
header #header_image h3 { font-size: 18px; letter-spacing: 1px; }
}

@media all and (max-width:480px) {
header #header_image h1 { font-size: 60px; letter-spacing: -1px; }
}

section h3	{ font-family: ONE-Mobile-Title; font-size: 30px; text-align: center; padding: 50px 0 20px; font-weight: normal; }
section h5	{ font-size: 18px; text-align: center; color: #333; padding-bottom: 50px; font-weight: normal; line-height: 160%; }

section table { width: 90%; max-width: 1400px; margin: 0 auto; border-collapse:collapse; }
section table th,
section table td { vertical-align: middle; line-height: 130%; }

section#section1 { text-align: center; }
section#section1 h6 { margin: 100px 0 50px; color: #666; font-size: 18px; font-weight: normal; line-height: 130%; background: url(../image/sub_image/page_section1-1.png) 50% 50% no-repeat; }
section#section1 h1 { font-family: ONE-Mobile-Title; font-size: 40px; font-weight: normal; color: #EA5648; padding-bottom: 10px; }
section#section1 div { width: 90%; max-width: 1400px; height: 600px; margin: 50px auto 100px; }

section#section2 { background-color: #EEEEEE; }
section#section3 { background-color: #333333; }
section#section3 h3	{ color: #fff; }
section#section3 h5	{ color: #fff; }
section#section5 { background-color: #EEEEEE; }

.page_safeday section#section1 h1 { background: url(../image/sub_image/page_section1-2.png) 38% 100% no-repeat; }
.page_safeday section#section1 div { background: url(../image/sub_image/safeday_sub_image.jpg) 50% 50% no-repeat; background-size: cover; }

.page_safeday section#section2 ul { width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 100px; overflow: hidden; }
.page_safeday section#section2 li { width: calc(25% - 2px); height: 300px; margin: 0 1px; background-color: #fff; float: left; text-align: center; padding: 50px 10px 0; }
.page_safeday section#section2 li p { font-family: ONE-Mobile-Title; font-size: 22px; color: #3A5868; margin: 30px 0 15px; }
.page_safeday section#section2 li span { font-size: 15px; line-height: 130%; color: #666666; }

.page_safeday section#section3 ul { width: 90%; max-width: 1400px; margin: 0 auto; padding: 20px 20px 100px; overflow: hidden; background: url(../image/sub_image/page_section3-bg1.png) 100% 37% no-repeat; }
.page_safeday section#section3 li { font-family: ONE-Mobile-Title; font-size: 22px; width: 250px; height: 250px; margin: 0 calc((20% - 250px)/2) 0; background-color: #fff; float: left; text-align: center; padding: 50px 10px 0; border-radius: 250px; line-height: 130%; }
.page_safeday section#section3 li p { color: #fff; width: 50px; height: 50px; line-height: 50px;  font-size: 25px; position: absolute; top: 0; margin: -20px 90px 0; border-radius: 50px; }
.page_safeday section#section3 li:nth-child(odd) p { background-color: #EA5648; }
.page_safeday section#section3 li:nth-child(even) p { background-color: #3A5868; }
.page_safeday section#section3 li:nth-child(odd) { color: #EA5648; }
.page_safeday section#section3 li:nth-child(even) { color: #3A5868; }
.page_safeday section#section3 li.line1 { padding-top: 115px; }
.page_safeday section#section3 li.line2 { padding-top: 100px; }
.page_safeday section#section3 li.line3 { padding-top: 85px; }
.page_safeday section#section3 .section3-2 { height: 320px; background: url(../image/sub_image/page_section3-bg3.jpg) 50% 50% no-repeat; background-color: cover; text-align: center; }
.page_safeday section#section3 .section3-2 h3 { margin-bottom: 25px; }

.page_safeday section#section4 { padding-bottom: 100px; }
.page_safeday section#section5 { padding-bottom: 100px; }
.page_safeday section#section4 th:first-child,
.page_safeday section#section5 th:first-child { font-family: ONE-Mobile-Title; font-size: 25px; color: #fff; background-color: #3A5868; width: 20%; font-weight: normal; }
.page_safeday section#section4 .table_th,
.page_safeday section#section5 .table_th { display: none; }

.page_safeday section#section4 th { background-color: #CCCCCC; font-size: 20px; padding: 30px; border: 1px #fff solid; }
.page_safeday section#section4 td { font-size: 18px; padding: 30px; border: 1px #ccc solid; color: #333; }
.page_safeday section#section4 td:first-child { text-align: center; font-weight: bold; }

.page_safeday section#section5 th { background-color: #CCCCCC; font-size: 20px; padding: 30px; border: 1px #fff solid; }
.page_safeday section#section5 td { font-size: 18px; padding: 30px; border: 1px #eee solid; color: #333; background-color: #fff; text-align: center; }
.page_safeday section#section5 .table5 th { background-color: #EA5648; }
.page_safeday section#section5 .table5 td { font-weight: bold; }


.page_safezone section#section1 h1 { background: url(../image/sub_image/page_section1-2.png) 48% 100% no-repeat; }
.page_safezone section#section1 div { background: url(../image/sub_image/safezone_sub_image.jpg) 50% 50% no-repeat; background-size: cover; }

.page_safezone section#section2 { padding: 100px 0; }
.page_safezone section#section2 ul { width: 90%; max-width: 1400px; margin: 0 auto; overflow: hidden; }
.page_safezone section#section2 ul li { float: left; margin-left: 20px; margin-bottom: 20px; }
.page_safezone section#section2 ul li:nth-child(odd) { margin-left: 0; }

.page_safezone section#section3 ul { width: 90%; max-width: 1400px; margin: 0 auto; padding: 20px 20px 100px; overflow: hidden; background: url(../image/sub_image/page_section3-bg1.png) 100% 37% no-repeat; }
.page_safezone section#section3 li { font-family: ONE-Mobile-Title; font-size: 22px; width: 250px; height: 250px; margin: 0 calc((20% - 250px)/2) 0; background-color: #fff; float: left; text-align: center; padding: 50px 10px 0; border-radius: 250px; line-height: 130%; }
.page_safezone section#section3 li p { color: #fff; width: 50px; height: 50px; line-height: 50px;  font-size: 25px; position: absolute; top: 0; margin: -20px 90px 0; border-radius: 50px; }
.page_safezone section#section3 li:nth-child(odd) p { background-color: #EA5648; }
.page_safezone section#section3 li:nth-child(even) p { background-color: #3A5868; }
.page_safezone section#section3 li:nth-child(odd) { color: #EA5648; }
.page_safezone section#section3 li:nth-child(even) { color: #3A5868; }
.page_safezone section#section3 li.line1 { padding-top: 115px; }
.page_safezone section#section3 li.line2 { padding-top: 100px; }
.page_safezone section#section3 li.line3 { padding-top: 85px; }
.page_safezone section#section3 .section3-2 { height: 320px; background: url(../image/sub_image/page_section3-bg3.jpg) 50% 50% no-repeat; background-color: cover; text-align: center; }
.page_safezone section#section3 .section3-2 h3 { margin-bottom: 25px; }

.page_safezone section#section4 { text-align: center; }
.page_safezone section#section4 .pc_view { margin: 50px 0; width: 90%; max-width: 1326px; }
.page_safezone section#section4 .mobile_view { display: none; width: 90%; max-width: 676px; }
.page_safezone section#section4 hr { border-width:1px 0px 0px 0px; border-style:solid; border-color:#ddd; margin-top: 100px; }
.page_safezone section#section4 ul { width: 90%; max-width: 1400px; margin: 0 auto 100px; overflow: hidden; display: flex; }
.page_safezone section#section4 li { float: left; margin: 50px 0 100px; }
.page_safezone section#section4 li img { padding-right: 10px; }
.page_safezone section#section4 li p { text-align: left; font-family: ONE-Mobile-Title; line-height: 200%; padding-left: 20px; }
.page_safezone section#section4 li p.text1 { font-size: 22px; color: #EA5648; line-height: 110%; margin-bottom: 15px; }
.page_safezone section#section4 li p.text2 { font-size: 20px; color: #3A5868; }
.page_safezone section#section4 li p.text3 { font-size: 20px; color: #3A5868; padding-left: 30px; }
.page_safezone section#section4 li p span { font-size: 0.8em; }
.page_safezone section#section4 li p.text3 span { display: block; line-height: 180%; }

.page_safezone section#section5 { padding: 0 0 100px;}
.page_safezone section#section5 ul { width: 90%; max-width: 1400px; margin: 30px auto; overflow: hidden; }
.page_safezone section#section5 li { float: left; text-align: center; line-height: 130%; margin-bottom: 15px; }
.page_safezone section#section5 li.line1 { line-height: 60px; }
.page_safezone section#section5 li.text1 { width: 24.25%; margin-left: 1%; height: 90px; font-family: ONE-Mobile-Title; font-size: 20px; color: #EA5648; background-color: #fff; border: #DDDDDD; padding: 18px 10px; }
.page_safezone section#section5 li.text1:nth-child(4n+1) { margin-left: 0; }
.page_safezone section#section5 li.text2 { width: 100%; background-color: #3A5868; color: #fff; padding: 35px 50px; }
.page_safezone section#section5 li.text2 p { font-family: ONE-Mobile-Title; font-size: 20px; border-bottom: 1px #fff solid; padding: 0 50px 35px; margin-bottom: 35px; }
.page_safezone section#section5 li.text2 span { font-size: 18px; padding: 0 50px; }
.page_safezone section#section5 li.text3 { width: 49.5%; height: 300px; background-size: cover !important; margin-left: 1%; }
.page_safezone section#section5 li.text3:nth-child(2n) { margin-left: 0; }


.page_happy section#section1 h1 { background: url(../image/sub_image/page_section1-2.png) 43% 100% no-repeat; }
.page_happy section#section1 div { background: url(../image/sub_image/happy_sub_image.jpg) 50% 50% no-repeat; background-size: cover; }

.page_happy section#section2 { text-align: center; }
.page_happy section#section2 .pc_view { margin: 50px 0; width: 90%; max-width: 1237px; }
.page_happy section#section2 .mobile_view { display: none; width: 90%; max-width: 765px; }

.page_happy section#section3 { text-align: center; }
.page_happy section#section3 ul { width: 90%; max-width: 1400px; margin: 100px auto 0; padding-bottom: 100px; overflow: hidden; }
.page_happy section#section3 li { float: left; width: 24.25%; height: 198px; margin-left: 1%; margin-bottom: 15px; background-color: #fff; }
.page_happy section#section3 li:nth-child(4n+1) { margin-left: 0; }
.page_happy section#section3 li div { display: none; width: 100%; height: 100%; background-color: rgba(237,68,72,.75); background-repeat: no-repeat; background-position: 50% 35%; color: #fff; font-family: ONE-Mobile-Title; font-size: 25px; line-height: 280px; }
.page_happy section#section3 li:hover div { display: block; }

.page_happy section#section4 ul { width: 90%; max-width: 1400px; margin: 100px auto 0; overflow: hidden; }
.page_happy section#section4 li { width: 50%; height: 350px; margin-bottom: 100px; line-height: 200%; }
.page_happy section#section4 li:nth-child(1),
.page_happy section#section4 li:nth-child(2),
.page_happy section#section4 li:nth-child(5),
.page_happy section#section4 li:nth-child(6) { float: left; }
.page_happy section#section4 li:nth-child(3),
.page_happy section#section4 li:nth-child(4),
.page_happy section#section4 li:nth-child(7),
.page_happy section#section4 li:nth-child(8) { float: right; }
.page_happy section#section4 li:nth-child(2),
.page_happy section#section4 li:nth-child(6) { padding-left: 30px; }
.page_happy section#section4 li p { font-family: ONE-Mobile-Title; font-size: 30px; margin-bottom: 40px; }
.page_happy section#section4 li span { font-size: 16px; color: #333; }
.page_happy section#section4 li span b { display: block; color: #EA5648; }
.page_happy section#section4 img { width: 100%; max-width: 700px; }

.page_happy section#section5 ul { width: 90%; max-width: 1400px; margin: 50px auto 0; padding-bottom: 100px; overflow: hidden; }
.page_happy section#section5 li { float: left; width: 24.25%; margin-left: 1%; margin-bottom: 15px; height: 200px; background-color: #fff; text-align: center; line-height: 130%; padding: 0 10px; }
.page_happy section#section5 li p { font-family: ONE-Mobile-Title; font-size: 22px; padding: 50px 0 35px; }
.page_happy section#section5 li span { font-size: 16px; color: #333; letter-spacing: -1px; }
.page_happy section#section5 li.box0 p,
.page_happy section#section5 li.box1 p,
.page_happy section#section5 li.box4 p,
.page_happy section#section5 li.box5 p,
.page_happy section#section5 li.box8 p,
.page_happy section#section5 li.box9 p { color: #3A5868; }
.page_happy section#section5 li.box2 p,
.page_happy section#section5 li.box3 p,
.page_happy section#section5 li.box6 p,
.page_happy section#section5 li.box7 p { color: #EA5648; }
.page_happy section#section5 li.box_left { margin-left: 0; }
.page_happy section#section5 li.img1 { width: 49.5%; background-size: cover !important; }
.page_happy section#section5 li.img1:nth-child(odd) { margin-left: 0; }


@media all and (max-width:1600px) {

.page_safeday section#section3 li { font-size: 20px; font-size: 22px; width: 220px; height: 220px; margin: 0 calc((20% - 220px)/2) 0; padding: 50px 5px 0; letter-spacing: -2px; }
.page_safeday section#section3 li p { margin: -20px 80px 0; }
.page_safeday section#section3 li.line1 { padding-top: 100px; }
.page_safeday section#section3 li.line2 { padding-top: 85px; }
.page_safeday section#section3 li.line3 { padding-top: 70px; }

.page_safeday section#section4 th:first-child,
.page_safeday section#section5 th:first-child { font-size: 22px; }

.page_safeday section#section4 td { padding: 30px 15px; }
.page_safeday section#section5 td { padding: 30px 15px; }


.page_safezone section#section2 { padding: 100px 0; }
.page_safezone section#section2 ul { width: 90%; max-width: 1400px; margin: 0 auto; overflow: hidden; }
.page_safezone section#section2 ul li { width: 49%; margin-left: 2%; text-align: center; }
.page_safezone section#section2 ul li img { width: 100%; }

.page_safezone section#section3 li { font-size: 20px; font-size: 22px; width: 220px; height: 220px; margin: 0 calc((20% - 220px)/2) 0; padding: 50px 5px 0; letter-spacing: -2px; }
.page_safezone section#section3 li p { margin: -20px 80px 0; }
.page_safezone section#section3 li.line1 { padding-top: 100px; }
.page_safezone section#section3 li.line2 { padding-top: 85px; }
.page_safezone section#section3 li.line3 { padding-top: 70px; }

.page_safezone section#section4 ul { display: block; width: 850px; }
.page_safezone section#section4 li { width: 50%; margin-bottom: 0; }
.page_safezone section#section4 li:last-child { width: 100%; }
.page_safezone section#section4 li p.text3 span { display: inline-block; width: 50%; line-height: 130%; }

.page_happy section#section5 li { height: 180px; }
.page_happy section#section5 li p { font-size: 20px; padding: 40px 0 20px; }
.page_happy section#section5 li span { font-size: 15px; }

}

@media all and (max-width:1280px) {

section h3	{ padding-top: 100px; }
section	{  padding-bottom: 50px; }

.page_safeday section#section2 li { width: 49%; margin: 0 0.5% 10px; }

.page_safeday section#section3 ul { padding: 20px 0 50px; background: url(../image/sub_image/page_section3-bg2.png) 50% 100% no-repeat; }
.page_safeday section#section3 li { width: 100%; height: 100px; float: none; border-radius: 5px; margin: 0 0 30px; }
.page_safeday section#section3 li br { display: none; }
.page_safeday section#section3 li p { margin: -20px  calc((50% - 32px))  0; }
.page_safeday section#section3 li.line1 { padding-top: 40px; }
.page_safeday section#section3 li.line2 { padding-top: 40px; }
.page_safeday section#section3 li.line3 { padding-top: 40px; }
.page_safeday section#section3 .section3-2 { height: 380px; }
.page_safeday section#section3 .section3-2 h3 { margin-top: 25px; }

.page_safeday section#section4 th:first-child,
.page_safeday section#section5 th:first-child,
.page_safeday section#section5 .table5 th { display: none; }
.page_safeday section#section4 .table_th,
.page_safeday section#section5 .table_th { display: table-cell; font-family: ONE-Mobile-Title; font-size: 25px; color: #fff; background-color: #3A5868; text-align: center; padding: 40px; font-weight: normal; }

.page_safeday section#section4 td br { display: none; }


.page_safezone section#section3 ul { padding: 20px 0 50px; background: url(../image/sub_image/page_section3-bg2.png) 50% 100% no-repeat; }
.page_safezone section#section3 li { width: 100%; height: 100px; float: none; border-radius: 5px; margin: 0 0 30px; }
.page_safezone section#section3 li br { display: none; }
.page_safezone section#section3 li p { margin: -20px  calc((50% - 32px))  0; }
.page_safezone section#section3 li.line1 { padding-top: 40px; }
.page_safezone section#section3 li.line2 { padding-top: 40px; }
.page_safezone section#section3 li.line3 { padding-top: 40px; }
.page_safezone section#section3 .section3-2 { height: 380px; }
.page_safezone section#section3 .section3-2 h3 { margin-top: 25px; }

.page_safezone section#section4 .pc_view { display: none; }
.page_safezone section#section4 .mobile_view { display: block; margin: 30px auto; }

.page_safezone section#section5 li.text1 { width: 49.5%; margin-left: 1%; }
.page_safezone section#section5 li.text1:nth-child(4n+1) { margin-left: 0; }
.page_safezone section#section5 li.text1:nth-child(4n+3) { margin-left: 0; }
.page_safezone section#section5 li.text2 span { padding: 0 40px; }


.page_happy section#section2 .pc_view { display: none; }
.page_happy section#section2 .mobile_view { display: block; margin: 0 auto; padding-top: 80px; }

.page_happy section#section4 li { height: 300px; margin-bottom: 50px; }
.page_happy section#section4 li p { font-size: 25px; margin-bottom: 20px; }
.page_happy section#section5 li span br { display: none; }

}

@media all and (max-width:1024px) {

.page_safeday section#section1 div { height: 400px; }

.page_safezone section#section2 { padding: 50px 0; }
.page_safezone section#section2 ul li { width: 100%; margin-left: 0; }
.page_safezone section#section2 ul li img { width: 100%; }

.page_safezone section#section4 ul { width: 90%; }
.page_safezone section#section4 li img { width: 100%; }
.page_safezone section#section4 li p.text1 img { width: auto; }

.page_safezone section#section5 li.text2 { padding: 35px;}
.page_safezone section#section5 li.text2 span { font-size: 16px; padding: 0 10px; }
.page_safezone section#section5 li.text3 { width: 100%; margin-left: 0; }


.page_happy section#section4 li { height: auto; width: 100%; padding-top: 30px; padding-left: 0 !important; }
.page_happy section#section4 li:nth-child(odd) { margin-bottom: 0; }

.page_happy section#section5 li { width: 49%; margin-left: 2%; }
.page_happy section#section5 li:nth-child(odd) { margin-left: 0; }
.page_happy section#section5 li.img1 { width: 49%; }
.page_happy section#section5 li span br { display: block; }
.page_happy section#section5 li.box0 p { color: #3A5868; }
.page_happy section#section5 li.box1 p { color: #EA5648; }
.page_happy section#section5 li.box2 p { color: #3A5868; }
.page_happy section#section5 li.box3 p { color: #EA5648; }
.page_happy section#section5 li.box4 p { color: #3A5868; }
.page_happy section#section5 li.box5 p { color: #EA5648; }
.page_happy section#section5 li.box6 p { color: #3A5868; }
.page_happy section#section5 li.box7 p { color: #EA5648; }
.page_happy section#section5 li.box8 p { color: #3A5868; }
.page_happy section#section5 li.box9 p { color: #EA5648; }

}

@media all and (max-width:768px) {

.page_safeday section#section1 h1 { font-size: 30px; background: transparent !important; line-height: 160%; }

.page_safeday section#section2 li { padding: 50px 5% 0; }
.page_safeday section#section2 li span br { display: none; }

.page_safeday section#section3 li { height: 150px; padding: 0 10px; padding-top: 70px !important; }
.page_safeday section#section3 li:nth-child(2) { padding-top: 55px !important; }

.page_safezone section#section3 li { height: 150px; padding: 0 10px; padding-top: 70px !important; }

.page_safezone section#section4 li p.text3 span { width: 100%; }

.page_safezone section#section5 li.text1 { width: 100%; margin-left: 0; }
.page_safezone section#section5 li.text2 span { display: block; }

.page_happy section#section3 li { width: 49%; margin-left: 2%; }
.page_happy section#section3 li:nth-child(2n+1) { margin-left: 0; }

.page_happy section#section5 li.img1 { width: 100%; margin-left: 0; }
.page_happy section#section5 li { width: 48.5%; margin-left: 3%; }
.page_happy section#section5 li span br { display: none; }

}

@media all and (max-width:480px) {

.page_safeday section h5	{ font-size: 16px; width: 90%; margin: 0 auto; }
.page_safeday section h5 br { display: none; }

.page_safeday section#section2 li { width: 100%; margin: 0 0 10px; }
.page_safeday section#section2 li span br { display: block; }

.page_happy section#section3 li { width: 100%; margin-left: 0; }

.page_happy section#section5 li { width: 100%; height: auto; margin-left: 0; padding: 0 30px 40px; }
.page_happy section#section5 li span br { display: block; }
.page_happy section#section5 li.img1 { height: 150px; }

}