@charset "utf-8";
/* CSS Document */

/* The magic */
.col {
  overflow: hidden;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 
    Visibility delay gives the previously hovered element time to slide out before disappearing.
    Remove the `visibility` transition to slide in current element without sliding out previous element
  */
  transition: all 0.275s ease-in-out, visibility 0s 0.275s;
  visibility: hidden;
  will-change: transform;
  transform: translateY(100%);
}

/*下の３つはオンマウスで中身がついてくる個所*/
/*.row:hover ~ .row .slide {
  transform: translateY(-100%);
}
.row:hover .slide {
  transform: translateX(100%);
}
.row:hover .col:hover ~ .col .slide {
  transform: translateX(-100%);
}*/
.row:hover .col:hover .slide {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

/* Pen styling */
* {
  box-sizing: border-box;
}

body {
    background: #fefefe;
    color: #333;
}

h1 {
  font-size: 2.5rem;
  font-weight: 300;
  margin: 1.5em 0.5rem 1em;
  text-align: center;
}

.container {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    padding-left: 0px;
    padding-top: 0px;
    -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
}

.row {
  
display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;}

.col {
    color: #fff;
    flex: 1 1 auto;
    min-height: 260px;
    position: relative;
    width: 50%;
}
.col p.ptitle {
    font-weight: 300;
    font-size: 1.33333rem;
    line-height: 1.25;
    z-index: 0;
    position: absolute;
}
.col p.ptitle.sanka {
    color: rgba(240,86,89,1.00);
}
.col p.ptitle.fujinka {
    color: rgba(255,118,0,1.00);
}
.col p.ptitle.syounika {
    color: rgba(22,136,0,1.00);
}
.col p.ptitle.hospital {
    color: rgba(12,116,241,1.00);
}







.photo-container {
  background: #0f0523 50% 50%/cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: 1s;
  transform-origin: bottom right;
}
.photo-container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.photo-container:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
    cursor: pointer;
}

/*オンマウス要素*/
.slide {
    cursor: pointer;
    padding: 15px;
    display: flex;
    align-items: center;
    overflow-y: auto;
}
.slide p span a {
    margin-top: 20px;
}

.slide.sanka {
    background-image: url("../img/sl-sanka.jpg");
    background-position: 24px center;
    background-repeat: no-repeat;
    background-color: #FDF6F6;
}
.slide.fujinka {
    background-image: url("../img/sl-fujinka.png");
    background-position: 24px center;
    background-repeat: no-repeat;
    background-color: #FDF5E6;
}
.slide.syounika {
    background-image: url("../img/sl-syoiunika.png");
    background-position: 24px center;
    background-repeat: no-repeat;
    background-color: #F9FCF0;
}

.slide.hospital {
    background-image: url("../img/sl-hospital.png");
    background-position: 24px center;
    background-repeat: no-repeat;
    background-color: #EFF9FC;

}
.col .slide p {
    color: rgba(63,63,63,1.00);
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.col .slide.sanka p {
    color: rgba(63,63,63,1.00);

}
.col .slide.fujinka p {
    color: rgba(63,63,63,1.00);
}
.col .slide.syounika p {
    color: rgba(63,63,63,1.00);
}
.col .slide.hospital p {
    color: rgba(63,63,63,1.00);
}

.slide p a {
    color: rgba(255,255,255,1.00);
}
/*オンマウス要素*/

.container .row .col {
    display: flex;
    justify-content: center;
    align-items: center;
}
p.ptitle {
    font-size: 2em;
        text-align: center;
    }
.nakap {
        position: absolute;
    bottom: 70px;
    opacity: 0.7;
    }
.ptitle.sanka span {
    color: rgba(207,117,118,1.00);
}
.ptitle.fujinka span {
    color: rgba(244,150,78,1.00);
}
.ptitle.syounika span {
    color: rgba(96,175,90,1.00);
}
.ptitle.hospital span {
    color: rgba(66,153,224,1.00);
}




 .col .ptitle span:before {
    box-shadow: 1px 1px 0px rgba(255,255,255,0.30);
    content: "";
    width: 120%;
    height: 1px;
    background-color: rgba(0,0,0,0.20);
    position: absolute;
    left: -10%;
    bottom: 25px;
    }   
    
.photo-container.sanka {
    background: url(../img/m5_25.png),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background: url(../img/m5_25.png),-webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background: url(../img/bk-s1.png),linear-gradient(to bottom,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 94%;
    background-size: cover;

 
    }
    .photo-container.fujinka {
    background: url(../img/bk-s4.jpg),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background: url(../img/bk-s4.jpg),-webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background-image: url(../img/bk-fu.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    }
    .photo-container.syounika {
    background: url(../img/bk-s3.jpg),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background: url(../img/bk-s3.jpg),-webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background-image: url(../img/bk-ko2.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    }
    .photo-container.hospital {
    background: url(../img/bk-s2.jpg),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background: url(../img/bk-s2.jpg),-webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background-image: url(../img/bk-hs.png);
    background-repeat: no-repeat;
    background-position: 35% 98%;
    background-size: auto 130%;

    }
/*.topsc {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100vw;
    background: url("../img/sky.png") repeat-x 0 0;
    background-size: auto 100%;
    animation: bg-slider 40s linear infinite; 
    padding: 50px 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -1952px 0; } 
}
*/
@keyframes move-stripe2 {
    0% {  background-position-x: 0;  }
    100% {  background-position-x: -1952px;  }
}
.topsc {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100vw;
    padding: 50px 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-image: url("../img/sky4.png"), -webkit-linear-gradient(270deg,rgba(3,86,158,1.00) 0%,rgba(114,181,234,1.00) 100%);
    background-image: url("../img/sky4.png"), -moz-linear-gradient(270deg,rgba(3,86,158,1.00) 0%,rgba(114,181,234,1.00) 100%);
    background-image: url("../img/sky4.png"), -o-linear-gradient(270deg,rgba(3,86,158,1.00) 0%,rgba(114,181,234,1.00) 100%);
    background-image: url("../img/sky4.png"), linear-gradient(180deg,rgba(3,86,158,1.00) 0%,rgba(114,181,234,1.00) 100%);
    background-size: cover;
    /*animation: move-stripe2 50s infinite linear;
    transition: all 0.5s ease;*/
}

.topsc.sanka {
    background-image: url("../img/sky4.png"), -webkit-linear-gradient(270deg,rgba(188,119,120,1.00) 0%,rgba(188,119,120,1.00) 100%);
    background-image: url("../img/sky4.png"), -moz-linear-gradient(270deg,rgba(188,119,120,1.00) 0%,rgba(188,119,120,1.00) 100%);
    background-image: url("../img/sky4.png"), -o-linear-gradient(270deg,rgba(188,119,120,1.00) 0%,rgba(188,119,120,1.00) 100%);
    background-image: url("../img/sky4.png"), linear-gradient(180deg,rgba(188,119,120,1.00) 0%,rgba(188,119,120,1.00) 100%);  

}
.topsc.fujinka {
    background-image: url("../img/sky4.png"), -webkit-linear-gradient(270deg,rgba(245,176,108,1.00) 0%,rgba(245,176,108,1.00) 100%);
    background-image: url("../img/sky4.png"), -moz-linear-gradient(270deg,rgba(245,176,108,1.00) 0%,rgba(245,176,108,1.00) 100%);
    background-image: url("../img/sky4.png"), -o-linear-gradient(270deg,rgba(245,176,108,1.00) 0%,rgba(245,176,108,1.00) 100%);
    background-image: url("../img/sky4.png"), linear-gradient(180deg,rgba(245,176,108,1.00) 0%,rgba(245,176,108,1.00) 100%);
    background-color: rgba(245,176,108,1.00);
}
.topsc.syounika {
    background-image: url("../img/sky4.png"), -webkit-linear-gradient(270deg,rgba(137,175,129,1.00) 0%,rgba(137,175,129,1.00) 100%);
    background-image: url("../img/sky4.png"), -moz-linear-gradient(270deg,rgba(137,175,129,1.00) 0%,rgba(137,175,129,1.00) 100%);
    background-image: url("../img/sky4.png"), -o-linear-gradient(270deg,rgba(137,175,129,1.00) 0%,rgba(137,175,129,1.00) 100%);
    background-image: url("../img/sky4.png"), linear-gradient(180deg,rgba(137,175,129,1.00) 0%,rgba(137,175,129,1.00) 100%);
    background-color: rgba(137,175,129,1.00);
}
.topsc.info {
    background-image: url("../img/sky4.png"), -webkit-linear-gradient(270deg,rgba(212,242,240,1.00) 0%,rgba(162,187,217,1.00) 100%);
    background-image: url("../img/sky4.png"), -moz-linear-gradient(270deg,rgba(212,242,240,1.00) 0%,rgba(162,187,217,1.00) 100%);
    background-image: url("../img/sky4.png"), -o-linear-gradient(270deg,rgba(212,242,240,1.00) 0%,rgba(162,187,217,1.00) 100%);
    background-image: url("../img/sky4.png"), linear-gradient(180deg,rgba(212,242,240,1.00) 0%,rgba(162,187,217,1.00) 100%);
    background-color: #D4F2F0;
}


/*下スクロールアニメ*/
a.schroll {
    padding-top: 70px;
}
a.schroll {
    position: absolute;
    bottom: 5px;

    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-decoration: none;
    color: rgba(255,255,255,1.00);
}
a.schroll span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(
-45deg
);
    transform: rotate(
-45deg
);
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
/*下スクロールアニメ*/


@media screen and (max-width:600px){
h1 {
    font-size: 5vw;
}
/*.topsc {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    background: url("../img/sky.png") repeat-x 0 0;
    background-size: auto 100%;
    animation: bg-slider 23s linear infinite;
    padding-top: 50px;
    padding-bottom: 50px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}*/
.container {
    max-width: 1200px;
    width: 90%;
    padding: 0px;
    -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.22);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.22);
}

.row {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-justify-content: space-between; /* Safari */
    justify-content: space-between;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
}
.photo-container.sanka {
    background-image: url(../img/bk-s1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: rgba(251,235,236,1.00);
    background-position: 0% bottom;

 
    }
.photo-container.fujinka {
    background-image: url(../img/bk-fu.png);
    background-repeat: no-repeat;
    background-size: auto 113%;
    background-position: 70% 0%;
    }
.photo-container.syounika {
    background: url(../img/bk-s3.jpg),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background: url(../img/bk-s3.jpg),-webkit-linear-gradient(top,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
    background-image: url(../img/bk-ko2.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    }
.photo-container.hospital {
    background: url(../img/bk-s2.jpg),-moz-linear-gradient(top,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
    background-position: 60% 41%;
    background-image: url(../img/bk-hs.png);
    background-repeat: no-repeat;
    background-size: auto 100%;

    }
.col {
    min-height: 240px;

}
.col .slide p {
    font-size: 3vw;
    width: 100%;
    text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #fff,
          -1px 1px 0px #fff,  1px -1px 0px #fff,
           1px 0px 0px #fff, -1px  0px 0px #fff,
           0px 1px 0px #fff,  0px -1px 0px #fff;
}
.slide span a {
    display: block;
    text-align: center;
    background-color: rgba(255,255,255,1.00);
    border-radius: 50px;
    color: rgba(92,91,91,1.00);
    padding: 4px;
}
.slide.sanka {
    background-image: url("../img/sl-sanka.jpg");
    background-repeat: no-repeat;
    background-color: #FDF6F6;
    background-position: right -70px center;
    background-size: cover;
}
.slide.fujinka {
    background-image: url("../img/sl-fujinka.png");
    background-repeat: no-repeat;
    background-color: #FDF5E6;
    background-position: right -70px center;
    background-size: cover;
}
.slide.syounika {
    background-image: url("../img/sl-syoiunika.png");
    background-repeat: no-repeat;
    background-color: #EFF9FC;
    background-position: right -70px center;
    background-size: cover;
}
.slide.hospital {
    background-image: url("../img/sl-hospital.png");
    background-repeat: no-repeat;
    background-color: #F9FCF0;
    background-position: right -70px center;
    background-size: cover;
}
.container {
    margin: -80px auto 0;
    max-width: 1000px;
    width: 90%;
    padding-left: 0px;
    padding-top: 0px;
    -webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.20);
}
/*下スクロールアニメ*/
a.schroll {
    padding-top: 50px;
}








}
.slide span a {
    display: block;
    text-align: center;
    background-color: rgba(255,255,255,1.00);
    border-radius: 50px;
    color: rgba(92,91,91,1.00);
    padding: 4px;
}

.ptitle span {
    font-weight: normal;
    font-size: 0.8em;
    display: block;
    padding-top: 10px;
    color: rgba(255,255,255,0.60);
    }