section h2 {
text-align: center;
margin-bottom: 30px;
font-weight: bold;
}
section .lead {
text-align: center;
max-width: 1000px;
margin: auto;
margin-bottom: 30px;
} .main-image-table {
position: relative;
}
.main-image-table::before,
.main-image-table::after {
content: '';
position: absolute;
z-index: 10;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.main-image-table::before {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_top_img1.png);
left: 2%;
top: -20px;
width: 122px;
height: 122px;
}
.main-image-table::after {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_top_img2.png);
right: 1%;
bottom: -40px;
width: 145px;
height: 145px;
}
.main-image {
}
.main-image .img { width: 100%;
padding-bottom: 45.9%;
min-height: 350px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media only screen and (min-width: 1401px) {
.main-image .img {
padding-bottom: 650px;
}
} .sceneemergency {
padding: 30px 0 80px;
}
.sceneemergency h2 {
text-align: center;
} .emergency-main {
max-width: 1000px;
padding: 20px 20px;
margin: 10px auto;
border: solid 3px red;
border-radius: 10px;
background-color: #FFF;
}
.emergency-contents ul > li,
.emergency-contents ol > li {
padding: 0 0 0 1em;
position: relative;
margin-top: 1em;
}
.emergency-contents ul > li:first-child,
.emergency-contents ol > li:first-child{
margin-top: 0;
}
.emergency-contents ul > li:before,
.emergency-contents ol > li:before
{
content: "\25cf";
position: absolute;
left: 0;
top: 1.5em;
font-size: 5px;
} .scenepolicy {
position: relative;
z-index: 0;
}
.scenepolicy h2 {
font-size: 45px;
display: block;
padding: 130px 150px;
position: absolute;
z-index: -1;
border-radius: 50%;
background:repeating-linear-gradient(-47deg, #f7f5be 0, #f7f5be 5px, #f9f8d2 5px, #f9f8d2 10px);
left: 50%;
top: -80px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.scenepolicy h2 > span {
position: absolute;
width: 100%;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: #3f91dd;
}
.h2-circle > h2 > span {
opacity: 0;
-webkit-transition: opacity 0.5s, top 0.8s ease;
-o-transition: opacity 0.5s, top 0.8s ease;
transition: opacity 0.5s, top 0.8s ease;
}
.h2-circle > h2 > span.ld {
opacity: 1;
top: 5%;
}
.policy-wapper {
position: relative;
padding: 100px 10px 80px;
text-align: center;
overflow: hidden;
}
.policy-wapper::after {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_23.png);
background-size: 100%;
background-position: left top;
background-repeat: no-repeat;
z-index: 10;
width: 1450px;
height: 408px;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.policy {
position: relative;
z-index: 11;
display: inline-block;
background-color: #fff;
border-radius: 10px;
padding: 50px 30px 40px;
font-size: 22px;
-webkit-box-shadow: 3px 3px 8px #c9c9c9;
box-shadow: 3px 3px 8px #c9c9c9;
}
.policy::before {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_horse.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 145px;
height: 115px;
top: -94px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.noitamina .policy::before {
animation: horse 3s ease 0.5s infinite normal;
}
@keyframes horse {
0% {
transform: translate(-50%, 0px) rotateZ(0deg);
}
25% {
transform: translate(-49%, 10px) rotateZ(5deg);
}
50% {
transform: translate(-50%, 10px) rotateZ(0deg);
}
75% {
transform: translate(-51%, 0px) rotateZ(-5deg);
}
100% {
transform: translate(-50%, 0px) rotateZ(0deg);
}
}
.policy .btn-a {
font-size: 16px;
margin-top: 30px;
}
.policy-wapper figure {
position: absolute;
}
figure.giraffe {
width: 130px;
z-index: 11;
bottom: 25px;
left: 14%;
}
figure.sun {
width: 130px;
z-index: 11;
top: 15%;
right: 18%;
}
figure.rabbit {
width: 120px;
z-index: 12;
bottom: 45px;
right: 20%;
}
figure.cloud {
width: 110px;
z-index: 11;
top: 50%;
right: 13%;
}
@media only screen and (max-width: 1200px) {
figure.giraffe {
width: 130px;
bottom: 25px;
left: 4%;
}
figure.sun {
width: 110px;
top: 15%;
right: 10%;
}
figure.rabbit {
width: 120px;
bottom: 45px;
right: 10%;
}
figure.cloud {
width: 95px;
top: 50%;
right: 3%;
}
}
@media only screen and (max-width: 767px) {
.policy::before {
width: 125px;
height: 85px;
top: -70px;
}
figure.sun {
display: none;
}
figure.rabbit {
width: 70px;
bottom: 20px;
right: 5%;
}
figure.cloud {
display: none;
}
figure.giraffe {
width: 90px;
bottom: 15px;
left: 3%;
}
}
@media only screen and (max-width: 500px) {
figure.giraffe {
display: none;
}
section .lead {
text-align: left;
}
} section.sceneblog {
background-color: #dcf2ec;
padding: 75px 0;
}
.sceneblog+.sceneblog {
padding-bottom: 75px;
}
section.sceneblog h2 {
text-align: center;
margin-bottom: 30px;
}
section.sceneblog h2 span {
position: relative;
}
section.sceneblog h2 span::before,
section.sceneblog h2 span::after {
content: '';
position: absolute;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
section.sceneblog h2 span::before {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_21.png);
width: 59px;
height: 59px;
left: -100px;
top: -20px;
}
section.sceneblog h2 span::after {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_22.png);
width: 68px;
height: 68px;
right: -100px;
top: -10px;
}
section.sceneinfo.sceneblog h2 span::before {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_19.png);
width: 59px;
height: 59px;
left: -100px;
top: -20px;
}
section.sceneinfo.sceneblog h2 span::after {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_20.png);
width: 68px;
height: 68px;
right: -100px;
top: -10px;
}
section.noitamina.sceneblog h2 span::before,
section.noitamina.sceneblog h2 span::after {
animation: bounce 0.8s ease 0.1s forwards normal;
}
@keyframes bounce {
0% {
transform: scale(0, 0);
}
40% {
transform: scale(1.2, 1.2);
}
60% {
transform: scale(1, 1);
}
80% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
} .top-news-tabList {
max-width: 980px;
margin: auto;
display: flex;
margin-bottom: 10px;
}
.top-news-tabList li {
padding: 10px;
cursor: pointer;
margin-right: 10px;
} .top-news-contentWrapper {
max-width: 1000px;
margin: auto;
}
.article_blk-article {
width: 25%;
padding: 10px;
box-sizing: border-box;
float: left;
}
.imageBlog-wrapper .article_blk-article {
position: relative;
}
span.news_new {
font-size: 13px;
color: #FFF;
display: inline-block;
text-align: center;
background-color: #f03c1c;
}
.imageBlog-wrapper span.news_new {
position: absolute;
z-index: 10;
top: -20px;
left: -5px;
width: 4em;
padding: 1.3em 0;
border-radius: 50%;
}
.article_blk {
margin-bottom: 30px;
}
.article_blk-a {
color: #4d4d4d;
display: block;
}
.imageBlog-wrapper .article_blk-a {
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 3px 10px #c9c9c9;
}
.article_blk-textBox {
padding: 10px;
background-color: #FFF;
}
.article_blk-thumb {
position: relative;
padding-bottom: 70%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.article_blk-thumb .article_blk-hover {
position: absolute;
height: 100%;
width: 100%;
-js-display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgba(239, 228, 79, 0.3);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out 0.1s;
-o-transition: opacity 0.5s ease-out 0.1s;
transition: opacity 0.5s ease-out 0.1s;
}
.article_blk-thumb .article_blk-hover:hover {
opacity: 1;
}
.article_blk-hover span {
color: #FFF;
}
.article_blk-date {
font-size: 13px;
color: #9b9b9b;
}
.article_blk-btags {
display: none;
}
.article_blk-excerpt {
display: none;
}
.article_blk-title {
font-size: 18px;
} .listBlog-wrapper .article_blk-thumb {
display: none;
}
.top-news-contentWrapper.listBlog-wrapper {
padding: 0 10px;
}
.listBlog-wrapper .article_blk {
background-color: #FFF;
border-radius: 10px;
padding: 20px 10px 10px;
margin-bottom: 0;
-webkit-box-shadow: 3px 3px 8px #c9c9c9;
box-shadow: 3px 3px 8px #c9c9c9;
}
.listBlog-wrapper .article_blk-a {
position: relative;
display: block;
}
.listBlog-wrapper .article_blk-a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
-o-transform: scale(0,1);
transform: scale(0,1);
background-color: rgba(63,145,221,0.5);
transform-origin: right;
-webkit-transition: transform 1s ease-out;
-o-transition: transform 1s ease-out;
transition: transform 1s ease-out;
}
.listBlog-wrapper .article_blk-a:hover::before {
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
transform-origin: left;
}
.listBlog-wrapper .article_blk-article {
position: relative;
width: 100%;
padding: 0;
margin-bottom: 10px;
}
.listBlog-wrapper span.news_new {
position: absolute;
left: 9em;
top: -3px;
padding: 0.8em 0.3em;
font-weight: bold;
font-size: 10px;
border-radius: 50%;
z-index: 10;
}
.listBlog-wrapper .article_blk-textBox {
padding: 5px 10px 5px;
background-color: #FFF;
}
.listBlog-wrapper .article_blk-btn {
display: none;
}
.listBlog-wrapper .article_blk-title {
display: inline-block;
padding: 3px 1em 3px 0;
} .scenefacility {
padding: 100px 60px 100px;
position: relative;
overflow: hidden;
background-color: #fff;
}
.scenefacility::before {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_deco_left.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 35%;
max-width: 420px;
height: 100px; left: 50%;
top: 2%;
transform: translateX(-110%);
}
.scenefacility::after {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_deco_right.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 35%;
max-width: 420px;
height: 100px; left: 50%;
top: 2%;
transform: translateX(10%);
}
.facility_style_wapper {
max-width: 1000px;
margin: auto;
padding: 50px 0;
}
.facility_style_wapper::before {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_25.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 70%;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.facility_style_wapper::after {
content: '';
position: absolute;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_12.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 120px;
height: 120px;
bottom: 40px;	
right: 7%;
}
.slider_box {
width: 25%;
overflow: hidden;
margin: 10px;
}
.img_box .img {
padding-bottom: 72%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slider_box h5 {
padding: 10px;
text-align: center;
}
.facility_style_wapper .slider_box {
border-radius: 10px;
background-color: #f2db6b;
}
.facility_style_wapper .slider_box > p {
padding: 0 10px 10px;
} .sceneevent {
padding: 100px 60px;
position: relative;
overflow: hidden;
}
.sceneevent::before,
.sceneevent::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 10px;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_border1.png);
background-size: contain;
background-position: 0;
background-repeat: repeat;
}
.sceneevent::before {
top: 25px
}
.sceneevent::after {
bottom: 25px;
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_border2.png);
}
.photo_style_wrapper {
max-width: 1000px;
margin: auto;
}
.photo_style_wrapper .slider_box {
padding: 10px;
background-color: #fff;
}
.photo_style_wrapper .img_box .img {
padding-bottom: 80%;
} .scenebanner {
background-color: #dcf2ec;
padding: 80px 10px;
position: relative;
}
.banner_curd_wrapper figure {
position: absolute;
width: 27px;
top: 45px;
left: 0px;
transform-origin: center;
}
.noitamina .banner_curd_wrapper figure {
animation: rotate 30s linear 0s infinite;
}
@keyframes rotate {
0% {
top: 45px;
left: 0;
transform: rotate(0deg);
}
20% {
top: 45px;
left: 0;
transform: rotate(0deg);
}
25% {
top: 20px;
left: 0;
transform: rotate(0deg);
}
30% {
top: 20px;
left: 0;
transform: rotate(45deg);
}
33% {
top: -100px; }
40% {
top: -30px; }
45% {
top: -100px; }
55% {
top: -200px; }
60% {
left: 150%;
top: -250px;
transform: rotate(90deg);
}
80% {
left: 150%;
opacity: 1;
}
81% {
left: 125%;
opacity: 0;
}
81.5% {
left: -50%;
opacity: 0;
}
82% {
opacity: 1;
left: -50%;
}
90% {
left: 0;
top: 50px;
transform: rotate(70deg);
}
100% {
}
}
.banner_curd_wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
max-width: 1000px;
margin: auto;
}
.banner_curd_wrapper::before,
.banner_curd_wrapper::after {
content: '';
position: absolute;
width: 50px;
height: 50px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.banner_curd_wrapper::before {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_13.png);
left: -15px;
top: 0;
width: 85px;
height: 85px;
}
.banner_curd_wrapper::after {
background-image: url(//www.mizuho-youchien.tokyo/contents/wp-content/themes/maintheme/images/illust_15.png);
right: 0;
bottom: -20px;
width: 140px;
height: 62px;
}
.banner_curd {
margin: 20px;
padding: 40px 20px;
width: calc(50% - 40px);
text-align: center;
background-color: #FFF;
-webkit-box-shadow: 3px 3px 8px #c9c9c9;
box-shadow: 3px 3px 8px #c9c9c9;
}
.banner_curd .text {
font-size: 18px;
margin-bottom: 30px;
}
.banner_curd h3 {
margin-bottom: 20px;
}
#beetle {
position: absolute;
}
.be0{fill:#571000;}
.be1{fill:#F2512C;} footer .global_menu {
}
@media only screen and (max-width: 1023px) {
.main-image-table::before {
width: 90px;
height: 90px;
}
.main-image-table::after {
width: 105px;
height: 105px;
}
}
@media only screen and (max-width: 767px) {
.scenepolicy h2 {
padding: 91px 105px;
top: -60px;
font-size: 38px;
}
.imageBlog-wrapper .article_blk-article {
width: 50%;
}
.scenefacility {
padding: 100px 50px 100px;
}
.sceneevent {
padding: 100px 50px;
}
.slick-prev {
left: -40px;
}
.slick-prev:hover {
left: -50px;
}
.slick-next {
right: -40px;
}
.slick-next:hover {
right: -50px;
}
}
@media only screen and (max-width: 500px) {
section .lead {
text-align: left;
}
.scenefacility {
padding: 80px 10px 100px;
}
.scenefacility::before { }
.scenefacility::after { }
.sceneevent {
padding: 100px 10px;
}
.slick-prev {
top: 100%;
transform: scale(-1, 1) translate(0, 0);
left: 33%;
}
.slick-prev:hover {
left: calc(33% - 10px);
}
.slick-next {
top: 100%;
transform: translate(0, 0);
right: 33%;
}
.slick-next:hover {
right: calc(33% - 10px);
}
.banner_curd {
width: 100%;
}
.banner_curd .text {
text-align: left;
}
.policy {
text-align: left;
}
}
.tableLayout-fixed{
width:100%;
}
.tableLayout-fixed td{
padding:2px;
}