/*
  Skin Name: Skin-TM00
  Description: Ver202103-00
  Skin URI: https://e-mura.com
  Author: むらのひがし
  Author URI: https://e-mura.com
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 1.0.2
  Priority: 9999000000
*/

/* ―――――――――――――――――――――――――――――――― */
/* {###　HOME　###] */
/* ―――――――――――――――――――――――――――――――― */
/* ------------------------------------------------------------ */
/* {#　ホームピクチャー　#] */
/* ------------------------------------------------------------ */
/* {　骨格　] */
#home-picture{
  margin-bottom:2em;
  padding:0em 1em;
  position:relative;
  overflow:hidden;
  width:100%;
  height:300px;
  line-height:0;
}
#home-picture > .pic-frame{
  position:relative;
  width:100%;
  height:100%;
  background:yellow;
  box-shadow: inset 2px 2px 8px rgba(0,0,52,0.2),
  			  inset -2px -2px 8px rgba(0,0,52,0.2);
}
/* --------------- */
.home-pic-bottom{z-index:0;position:absolute;width:100%;height:100%;top:0;}
.home-pic{z-index:10;position:relative;width:100%;height:100%;top:0;}
.home-pic1{z-index:20;position:absolute;width:100%;height:100%;top:0;}
.home-pic2{z-index:30;position:absolute;width:100%;height:100%;top:0;}
.home-pic3{z-index:40;position:absolute;width:100%;height:100%;top:0;}
.home-pic-cover{z-index:100;position:absolute;width:100%;height:100%;top:0;}
/* --------------- */
.home-pic_background{z-index:10;position:absolute;}
.home-pic_reflect{z-index:20;position:absolute;}
.home-pic_effect-back{z-index:30;position:absolute;}
.home-pic_clinic{z-index:40;position:absolute;}
.home-pic_message{z-index:50;position:absolute;}
.home-pic_effect-middle{z-index:60;position:absolute;}
.home-pic_logo{z-index:80;position:absolute;}
.home-pic_effect-front{z-index:90;position:absolute;}
.home-pic_effect-free{z-index:100;position:absolute;}
/* ----o----o----o----o----o---- */
/* [ 骨格 }end */
/* ----o----o----o----o----o---- */
/* {　メインピクチャー(home-pic)　] */
/* 基本 */
.home-pic_background{width:100%;height:300px;}
.home-pic_background img{width:100%;height:100%;}
/* --------------- */
.home-pic_message{
  width: max-content;
  max-width:100%;
  margin-top:calc(45vh - 200px);
  margin-left: calc(50% - 100px);
  transform: translateX(-50%);
  font-size:clamp(24px, 8vw, 40px) !important;
  line-height:40px;
  color: rgba(255,255,255,1);
  mix-blend-mode: overlay;
  font-weight:bold;
  font-family: "MS Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  text-shadow:
	  0px 1px 0px rgba(255,255,255,0.5),
	  1px 0px 0px rgba(255,255,255,0.5),
	  1px 1px 2px rgba(255,255,255,0.5),
	  1px 5px 4px rgba(51,0,0,0.5),
	  0 0 2px rgba(255,255,255,1),
	  0 0 10px rgba(255,255,255,1),
	  0 0 20px rgba(255,255,255,1),
	  0 0 30px rgba(255,255,255,1);
	  0px 0px 60px rgba(255,255,255,1);
  animation:home-message_move forwards 4s 1 ease-in 4s normal,
            home-message_twinkle forwards 4s infinite ease-in-out 4s alternate;
}
.home-pic_message>span{display:inline-block;}
/* --------------- */
.home-pic_clinic{
	height:290px;
	right: 5%;bottom: 10px;
    display: flex; align-items: flex-end;
}
.home-pic_clinic img{
	height:270px;min-height:270px;width:270px;
	animation:fadein-aimation forwards 12s 1 ease 0s normal,
			  zoomup-aimation both 8s infinite ease-in-out 6s alternate;
}
/* --------------- */
.home-pic_logo {bottom: 45px; left: 3%;}
.home-pic_logo img{height: 5vw;min-height:60px;max-height:80px;
  filter: drop-shadow(6px 6px 2px rgba(0, 0, 51, 0.2));
  animation:fadein-aimation forwards 12s 1 ease 0s normal,
            updown-aimation both 6s infinite ease-in-out 6s alternate;
}
/* --------------- */
.home-pic_reflect{bottom: 35px; left: 3%;opacity: 0.4;}
.home-pic_reflect img{height: 5vw;min-height:60px;max-height:80px;
  transform: translateY(100%) scale(1, -1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 10%,white 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 10%,white 100%);
  animation:fadein-aimation forwards 12s 1 ease 0s normal,
            updownreflect-aimation both 6s infinite ease-in-out 6s alternate;
}
/* ----o----o----o----o----o---- */
/* 最上部(home-pic-cover) */
.home-pic-cover{
  box-shadow: inset 2px 2px 8px rgba(0,0,52,0.2),
  inset -2px -2px 8px rgba(0,0,52,0.2);
}
/* ----o----o----o----o----o---- */
/* 効果 */
.home-pic_effect-back{}
.home-pic_effect-middle{}
.home-pic_effect-front{}
.home-pic_effect-free{}
/* ----o----o----o----o----o---- */
/* [ メインピクチャー(home-pic) }end */
/* ----o----o----o----o----o---- */
/* {　ピクチャー(home-pic1～pic3)　] */



/* ----o----o----o----o----o---- */
/* [ ピクチャー(home-pic1～pic3) }end */
/* ----o----o----o----o----o---- */
/* [#　ホームピクチャー　#}end */
/* ------------------------------------------------------------ */
/* [###　HOME　###}end */
/* ―――――――――――――――――――――――――――――――― */
/* {###　景観　###] */
/* ―――――――――――――――――――――――――――――――― */
/* ------------------------------------------------------------ */
/* {#　全般　#] */
/* ------------------------------------------------------------ */
/* {　全般要素　] */


/* [ 全般要素 }end */
/* ----o----o----o----o----o---- */
/* [#　全般　#}end */
/* ------------------------------------------------------------ */
/* {#　前景(fixed-effect要素)　#] */
/* ------------------------------------------------------------ */
/* {　前景要素　] */


/* [ 前景要素 }end */
/* ----o----o----o----o----o---- */
/* [#　前景 　#}end */
/* ------------------------------------------------------------ */
/* {#　背景(cube-area要素)　#] */
/* ------------------------------------------------------------ */
/* {　背景前面(front-cube-area-content)　] */
/* 上配置例(全幅) */
.front-cube-area-content>div.pic1{
    top: 0%;
    height: 100%;
    width: 100vw;
    max-height: 160px;
    background-image: url(xxxx.jpg);
    background-repeat: no-repeat;
    background-size: 100% 50%;
}
/* ----o----o----o----o----o---- */
/* 中央配置例(上余白優先)(全幅) */
.front-cube-area-content>div.pic2{
    top: 33%;
    height: 100%;
    width: 100vw;
    max-height: 160px;
    background-image: url(images/xxxx.jpg);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: top 33% left 0%;
}
/* 中央配置例(下余白優先)(全幅) */
.front-cube-area-content>div.pic2{
    bottom: 25%;
    height: 100%;
    width: 100vw;
    max-height: 160px;
    background-image: url(images/xxxx.jpg);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: bottom 50% left 0%;
}
/* ----o----o----o----o----o---- */
/* 下配置例(全幅) */
.front-cube-area-content>div.pic3{
    bottom: 0%;
    height: 100%;
    width: 100vw;
    max-height: 160px;
    background-image: url(images/xxxx.jpg);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: bottom;
}
/* [ 背景前面(front-cube-area-content) }end */
/* ----o----o----o----o----o---- */
/* {　背景後面(back-cube-area-content)　] */
/* --------------- */
/* 上段配置例 */
.back-cube-area-content>div.pic1{
    top: 10%;
    left: 20%;
    max-height: 120px;
    background-image: url(images/xxxxxx.png);
}
/* 上段中央配置例 */
.back-cube-area-content>div.pic1{
    top: 10%;
    left: 25%;
    max-height: 120px;
    background-image: url(images/xxxxxx.png);
    background-position: top 0% left 25%;
}
/* ----o----o----o----o----o---- */
/* 下段右寄せ配置例 */
.back-cube-area-content>div.pic2{
    bottom: 0%;
    right: 10%;
    max-height: 120px;
    background-image: url(images/xxxx.jpg);
    background-position: bottom 0% right 0%;
}
/* ----o----o----o----o----o---- */
/* 中央段(中央)配置例(上余白優先) */
.back-cube-area-content>div.pic3{
    top: 50%;
    left: 25%;
    max-height: 120px;
    background-image: url(images/xxxx.jpg);
    background-position: top 0% left 25%;
}
/* 中央段(中央)配置例(下余白優先) */
.back-cube-area-content>div.pic3{
    bottom: 50%;
    left: 25%;
    max-height: 120px;
    background-image: url(xxxx.jpg);
    background-position: bottom 0% left 25%;
}
/* [ 背景後面(front-cube-area-content) }end */
/* ----o----o----o----o----o---- */
/* [ 背景(cube-area要素) }end */
/* ------------------------------------------------------------ */
/* [###　景観　###]}end */
/* ―――――――――――――――――――――――――――――――― */
/* {###　アニメーション　###] */
/* ―――――――――――――――――――――――――――――――― */
/* {　汎用　] */
@keyframes fadein-aimation{
  from{opacity:0;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes updown-aimation{
  from{transform: translateY(0);}
  100%{transform: translateY(-8%);}
}
@keyframes updownreflect-aimation{
  from{transform: translateY(100%) scale(1, -1);}
  100%{transform: translateY(108%) scale(1, -1);}
}
@keyframes zoomup-aimation{
  from{transform: scale(1);}
  100%{transform: scale(1.02);}
}
/* [ 汎用 }end */
/* ----o----o----o----o----o---- */
/* {　ホームピクチャー用　] */
@keyframes home-message_move{
  from{}
  100%{margin-top: 40px;}
}
@keyframes home-message_move2{
  from{}
  100%{margin-top: 8vh;margin-top:max(8vh,60px);}
}
@keyframes home-message_twinkle{
  from{opacity:0.9;
    text-shadow:
	  0px 1px 0px rgba(255,255,255,0.5),
	  1px 0px 0px rgba(255,255,255,0.5),
	  1px 1px 2px rgba(255,255,255,0.5),
	  1px 5px 4px rgba(51,0,0,0.5),
	  0 0 2px rgba(255,255,255,1),
	  0 0 10px rgba(255,255,255,1),
	  0 0 20px rgba(255,255,255,1),
	  0 0 30px rgba(255,255,255,1),
	  0px 0px 32px rgba(255,255,255,1);
  }
  100%{opacity:0.6;
    text-shadow:
	  0px 1px 0px rgba(255,255,255,0.5),
	  1px 0px 0px rgba(255,255,255,0.5),
	  1px 1px 2px rgba(255,255,255,0.5),
	  1px 5px 4px rgba(51,0,0,0.5),
	  0 0 2px rgba(255,255,255,1),
	  0 0 10px rgba(255,255,255,0.8),
	  0 0 20px rgba(255,255,255,0.8),
	  0 0px 30px rgba(255,255,255,0.8);
  }
}
/* [ ホームピクチャー用}end */
/* ----o----o----o----o----o---- */
/* [###　アニメーション　###]}end */
/* ―――――――――――――――――――――――――――――――― */
/* {###　レスポンシブ　###] */
/* ―――――――――――――――――――――――――――――――― */
/* {###　1023px以下:オリジナル分岐点　###] */
@media screen and (max-width: 1023px){
/* ―――――――――――――――――――――――――――――――― */
/* ------------------------------------------------------------ */
/* {#　ホームピクチャー　#] */
/* ------------------------------------------------------------ */
/* メインピクチャー */
#home-picture{height:100vh;min-height:300px;padding:0;}
.home-pic_background{height:100%;}
/* --------------- */
.home-pic_message{
	width:100vw;
	margin-top:45vh;
	margin-left:0px;
	transform:none;
	text-align:center;
	animation:home-message_move2 forwards 4s 1 ease-in 4s normal,
	          home-message_twinkle forwards 3s infinite ease-in-out 4s alternate;
}
/* --------------- */
.home-pic_clinic{
	height:80%;min-height:300px;width:100vw;
	right:0;bottom:20vh;
	padding-left:30vw;
	justify-content:right;
}
.home-pic_clinic img{height:70vw;max-height:65vh;width:auto;object-fit: cover;}
/* --------------- */
.home-pic_logo {
	height:80px;width:100%;
	bottom: 12vh;left:0;
	padding:0% 3%;
}
.home-pic_logo img{height:unset;object-fit: contain;}
/* --------------- */
.home-pic_reflect{
	height:80px;width:100%;
	bottom: 10vh;left:0;
	padding:0% 3%;
}
.home-pic_reflect img{height:unset;object-fit: contain;}
/* ----o----o----o----o----o---- */


/* [#　ホームピクチャー　#}end */
/* ------------------------------------------------------------ */
}/* [###　1023px以下:オリジナル分岐点　###}end */
/* ―――――――――――――――――――――――――――――――― */
/* {###　599px以下：Cocoon分岐点　###] */
@media screen and (max-width: 599px){
/* ―――――――――――――――――――――――――――――――― */
/* ------------------------------------------------------------ */
/* {#　ホームピクチャー　#] */
/* ------------------------------------------------------------ */
/* メインピクチャー */
.home-pic_clinic{padding-left:0;justify-content:center;}
.home-pic_clinic img{height:65vh;}


/* ----o----o----o----o----o---- */

/* [#　ホームピクチャー　#}end */
/* ------------------------------------------------------------ */
}/* [###　599px以下：Cocoon分岐点　###}end */
/* ―――――――――――――――――――――――――――――――― */
/* [###　レスポンシブ　###]}end */
/* ―――――――――――――――――――――――――――――――― */