@charset "utf-8";
/*リセット
==================================================================================================================*/
html, body, h1, h2, h3, h4, h5, h6, div, p, hr, dl, dt, dd, ol, ul, menu, li
, form, fieldset, legend, label, table, caption, thead, tbody, tfoot, tr, th, td
, section, header, main, article, aside, nav, footer, address, summary
, span, a, cite, strong, em, small, i, b, q, u, sub, sup, ruby, rt
, img, picture, source, figure, figcaption, canvas, iframe, audio, video {
  font-size: inherit; font-weight: inherit; font-style: inherit; text-align: inherit;
  margin: 0; padding: 0; background-repeat: no-repeat; border: 0 none; }
* { outline: none; box-sizing: border-box; }
*:focus { outline:none; }
html { -webkit-text-size-adjust: none; height:100%; }
body { font-style:normal; font-weight:normal; font-size:100%; text-align:left; }
ol, ul, li { list-style-image: none; list-style-position: outside; list-style-type: none; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
img { border:0 none; width: auto; height: auto; max-width: 100%;vertical-align:top;  }
strong, em { font-weight:bold; }
small{ font-size:80%; }
sub,sup{ font-size:70%; line-height:0; position:relative; vertical-align:baseline; }
sup{ vertical-align:text-top; top:-.5em; }
sub{ vertical-align:text-bottom; bottom:-.25em; }

.fMin { font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; }
.fGot{ font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; }
.fMaru{ font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; }
.fTime{ font-family: "Times New Roman","Times New Roman",sans-serif; }
@font-face { font-family:"FAsolid"; src:url("./fa-solid-900.woff") format("woff"); }
@font-face { font-family:"FAregular"; src:url("./fa-regular-400.woff") format("woff"); }

.dbl{display: block;}
.dib{display: inline-block;}
.din{display: inline;}
.dtb{display: table;}
.right, .right p{ text-align:right; }
.center, .center p { text-align:center; }
.under{ text-decoration: underline;}
.bold{ font-weight: bold; }
.small{ font-size: 90%; }
.small2{ font-size: 80%; }
a.blank[target="_blank"]::after { font-family: "FAsolid"; font-weight:900; content: "\f35d";
  display: inline-block; margin:0 0 0 3px; }
.float_left {float: left;}
.float_right {float: right;}
.img_left{ display:block; float:left; margin:0 30px 30px 0; }
.img_right{ display:block; float:right; margin:0 0 30px 30px; }
.img_top{ margin-bottom:30px; }
.clear { clear: both; }
.clearfix::after { display: block; clear: both; content: ""; }
.flex{ display: flex; flex-flow: row wrap; }
.flex_between{ justify-content: space-between; }
.flex_center{ justify-content: center; }
.flex_around{ justify-content: space-around; }
.flex_a_center{ align-items: center; }
.indent { padding-left:1em; text-indent: -1em;}
.lineclamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; }
.lineclamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow:hidden; }
.float_box{width:60%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateY(-45%) translateX(-50%);
}
@media (max-width: 599px) {
  .float_box{
    position:relative;width:95%;
    top: 0;
    left: 0;
    transform: translateY(0) translateX(0);
    margin: 0 auto;  
  }
} 
/*テキスト横の線*/
.text-line-right{
	display: flex;
	align-items: center;
}

.text-line-right:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
	margin-left: 1em;
	background: #CCC;
}
/*基本スタイル
==================================================================================================================*/
/*基本文字サイズ&文字色*/
body {
  font-family:"Noto Sans JP","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; 
  line-height:1.9;
  color:#333;
  background: #fff;
  letter-spacing: -0.02em;
}
h1, h2, h3, h4, h5, h6 { padding:.6em 0;font-family:"Noto Sans JP";font-weight: 600;}
.c_mrk { background-color:#feffc7; padding:0 3px;font-weight: bold; } /*ラインマーカー*/
.c_posi  { color:#d64a5a; }
.c_point { color:#d64a5a; }
.c_nega  { color:#5488a2; }
.c_off   {color:#cac5ba;}/*off*/
.c_base  {color:#71a16e;}
table { border-collapse: collapse; border-spacing:0; }
caption { text-align:left; font-weight:bold; color:#993300; }
td, th { border: 1px solid #ccc; padding:3px; }
a { text-decoration: none; }
p { margin:0px 0px .8em 0px; }
hr{ margin:1em 0; padding:.5em 0 0 0; border:none; border-top:1px solid #300; }
hr.br{ border:none; }

.inner { max-width: 1200px; margin: 0 auto; padding: 0; }

article { overflow:hidden; }
section {margin: 0 auto; }
@media (max-width: 899px){
  .inner{width:95%;margin:0 auto;}
}
@media all and (min-width: 600px){
	.noPC{ display:none !important; }
}
@media all and (max-width: 599.999px){
	.noSP{ display:none !important; }
}
@media (max-width: 599px) {
  .noTab, .noTab caption, .noTab thead, .noTab tfoot, .noTab tbody, .noTab tr, .noTab th, .noTab td { display:block; width:100%; }
  .noTab tr { margin-top:10px; }
  .img_left{ float:none; margin:10px auto; text-align:center; }
  .img_right{ float:none; margin:10px auto; text-align:center; }
}

.gh1 { font-size:150%; margin:.5em 0; }
.sh1 { margin:.5em 0; }


header .inner { position:relative; padding:0; }
#hlogo img { width:80px; display:block; }
#hnavi { position:absolute; left:100px; top:50%; transform:translateY(-50%); }
#hnavi li { display:inline-block; vertical-align:middle; margin-right:3px; }
#hnavi a { display:block; padding:10px; border-radius:3px;
  background:#999; color:#fff; font-weight:bold; text-decoration:none; }
#hmbtn { height:50px; width:50px; position:absolute; top:0; right:10px; display:none; }

#bread { background:#eee; font-size:80%; padding:0.3em; }
#bread li { display:inline-block; }
#bread li::before { font-family:FAsolid; content:"\f105"; font-weight:900; color: #999;; display:inline-block; margin:.1em .5em; }
#bread li:first-of-type::before { content:"\f015"; margin:.1em .5em .1em 0; }
#bread a { color:#666; }

#side { padding:1em; margin:1em 0; border:1px solid #ccc; }
.vw100 { max-width:100vw; margin:0 calc((100vw - 100%) / -2);}
/*
#main { width:calc(100% - 210px); float:left; }
#side { width:200px; float:right; position:sticky; top:80px; }
*/

.e_fadein { opacity:.3; transition:opacity .3s; }
.e_fadein.on { opacity:1; }
.e_scrlin .sh1{ transform:translateX(20%); transition:transform .3s; }
.e_scrlin.on .sh1 { transform:translateX(0); }
.e_under .e_tgt { position:relative; }
.e_under .e_tgt::after { content:""; position:absolute; left:0; bottom:0;
  height:3px; width:0; background:#ff0; transition:width 1s; z-index: -1;}


.e_under.on .e_tgt::after { width:100%; }
.e_imgslazy img { opacity:0; transition:opacity 3s; }
.e_imgslazy img[src] { opacity:1; }

/*タイムラグ*/
.delay li:nth-child(1) {transition-delay:0ms;}
.delay li:nth-child(2) {transition-delay:200ms;}
.delay li:nth-child(3) {transition-delay:400ms;}
.delay li:nth-child(4) {transition-delay:600ms;}
.delay li:nth-child(5) {transition-delay:800ms;}
.delay li:nth-child(6) {transition-delay:1000ms;}
.delay li:nth-child(7) {transition-delay:1200ms;}
.delay li:nth-child(8) {transition-delay:1400ms;}
.delay li:nth-child(9) {transition-delay:1600ms;}
.delay li:nth-child(10){transition-delay:1800ms;}

/*タイムラグアンダーライン用*/
.e_under .e_tgt.n1::after{transition-delay:0ms;}
.e_under .e_tgt.n2::after{transition-delay:400ms;}
.e_under .e_tgt.n3::after{transition-delay:600ms;}


@media only screen and (max-width:799px) {
  #hmbtn { display:block; }
  #hmbtn span { position:absolute; top:14px; right:10px;
    display:block; width:30px; height:22px; background:#999; cursor:pointer;
    border-top:9px solid #fff; border-bottom:9px solid #fff; transition:all 0.3s; }
  #hmbtn span:before { content:''; position:absolute; top:-9px; right:0;
    width:30px; height:4px; background:#999; transition:all 0.3s; }
  #hmbtn span:after { content:''; position:absolute; bottom:-9px; right:0;
    width:30px; height:4px; background:#999; transition:all 0.3s; }
  .menu-is-open #hmbtn span { background:#fff; }
  .menu-is-open #hmbtn span:before { top:0; right:0; transform:rotate(-135deg); }
  .menu-is-open #hmbtn span:after { bottom:0; right:0; transform:rotate(135deg); }
  
  #hnavi { top: 80px; left:auto; right: 0; width: 300px; max-height: calc(100vh - 80px);
    overflow:hidden; pointer-events:none; overflow:hidden; transform:none; }
  .menu-is-open #hnavi { pointer-events:auto; overflow-y:auto; }
  #hnavi ul { width:300px; max-height:100%;
    transition: .5s ease-in-out; transform:translateX(300px); }
  #hnavi li { display:block; }
  .menu-is-open #hnavi ul { transform: translateX(0); }
  
  #main { width:auto; float:none; }
  #side { width:auto; float:none; position:static; margin:30px 0; border-top:1px solid #ccc; padding-top:10px; }
}

#toTop { position:fixed; bottom:0px; right:10px; opacity:0; pointer-events:none; transition:opacity .5s; }
#toTop::before { display: inline-block; color:#ccc; line-height:1;
  font-family: "FAsolid"; font-weight:900; content:"\f0aa"; font-size:32px; }
.body-scrolled #toTop { opacity:1; pointer-events:auto; cursor:pointer; }
.menu-is-open #toTop { display:none; }
footer{padding:5vh 0;}
footer ul  { text-align: center; }
footer li  { display:inline-block; margin:1em;}
footer li a{ font-size:90%;color:#333; }
#ftr_logo{text-align: center;margin-top:2em;}
#copyright { padding:0.3em 0;background:#666; color:#fff; text-align:center; font-size:80%; }
#copyright a{ color:#fff;margin-left:5em; }

@media (max-width: 599px) {
  footer{padding:2em 0;}
  footer li  { margin:0.4em;}
  footer li a{ font-size:80%;}
}


/*ユーザー投稿
==================================================================================================================*/
/* ユーザー投稿本文 .uTextはサイト上表示でのみ適用のスタイル、.editor-styles-wrapper はWPのエディタでも反映されるスタイル */
.uText img{ max-width:100%; width:auto; height:auto; }

.editor-styles-wrapper .kakomi { padding:20px 25px; margin:20px; border-radius:4px; }
.editor-styles-wrapper .wk_gray{ border: 3px dashed #eee; }
.editor-styles-wrapper .bg_gray{ background:#f7f7f7; }
.editor-styles-wrapper .wk_orange{ border: 3px dashed #faebd7; }
.editor-styles-wrapper .bg_orange{ background:#fff7f4; }
.editor-styles-wrapper .wk_blue{ border: 3px solid #6495ed; }
.editor-styles-wrapper .bg_blue{ background:#6495ed; }
.editor-styles-wrapper .h2_orange{ background:#ffa37f; color:#fff; padding:13px 15px; }
.editor-styles-wrapper .h2_orange::before{
	position: absolute; content: ''; height: 1px; width: 98%;
	background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
	background-size: 10px 3px;
	top: 5px;
	left: 1%;
	z-index: 999; }
.editor-styles-wrapper .h2_orange::after{
	position: absolute; content: ''; height: 1px; width: 98%;
	background-image: linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.7) 60%,transparent 60%,transparent 100%);
	background-size: 10px 3px;
	bottom: 5px;
	left: 1%;
	z-index: 999; }
.editor-styles-wrapper .h3_orange{ padding:6px 7px; border-left:5px solid #fff; border-bottom:1px dashed #fff; border-color:#ffa37f; }

.editor-styles-wrapper .fukidashi_l {background: #a8bf4e; margin:0 auto 0 60px; padding: 5px 10px; position: relative; border-radius: 30px; display:table;  line-height:1.3;}
.editor-styles-wrapper .fukidashi_l::before {
  content:"";background:url(person1.png) no-repeat; background-size:contain;
  position:absolute; top:0; left:-60px;
  width:60px; height:60px;
}
.editor-styles-wrapper .fukidashi_l::after {
	content: ""; position: absolute; top: 3px; left: -19px;
	border: 8px solid transparent; border-right: 18px solid #a8bf4e; transform: rotate(35deg);
}
.editor-styles-wrapper .fukidashi_r {background: #a8bf4e; margin:0 60px 0 auto; padding: 5px 10px; position: relative;border-radius: 30px; display:table; line-height:1.3;}
.editor-styles-wrapper .fukidashi_r::before {
  content:"";background:url(person1.png) no-repeat; background-size:contain;
  position:absolute; top:0; right:-60px;
  width:60px; height:60px;
}
.editor-styles-wrapper .fukidashi_r::after {
	content: ""; position: absolute; top: 10px; right: -19px;
	border: 8px solid transparent; border-left: 18px solid #a8bf4e; transform: rotate(10deg);
}


/*ボタン*/
.btn {margin:3em auto 4em auto;text-align: center;}
.btn a {
  background: #99c397;
  color: white;
  padding: 0.7em 3em;
  margin: 0 0 0 1em;
  text-decoration: none;
  font-size: 140%;
  transition: all 0.5s;
}

.btn a:before {
  content: "―";
  display: inline-block;
  margin: 0 0.5em 0 0.1em;
}

.btn a.btn_reserve {
  background: white;
  color: #333;
  border-radius: 30px; 
  font-size:180%;
  font-weight: 800;
}

.btn a:hover {
  background: #71a16e;
  color: white;
}

.btn_more {
  display: flex;
  align-items: center; 
  justify-content: center;
}
.btn_more:before,
.btn_more:after {
  height:1px;
content: "";
flex-grow: 1;
background:#999;
}

.btn_more span{font-size:200%;padding:0 0.5em;}

/*テンプレート設定　上部固定メニュー
==================================================================================================================*/
/*ヘッダー*/


header .inner { position:relative; padding:0;height:80px; }
#hdr_logo{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*グローバルナビ*/

#hdrnav {
  position: absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}

#hdrnav ul li {
    display: inline-block;
    line-height: 1.4;
    margin: 0 0 0 2.5em;
    text-align: right;
    font-size: 100%;
    color:#333;
  }

#hdrnav ul li a {
    text-decoration: none;
    padding-bottom:0.5em;
    border-bottom: 3px solid #FFF;
    transition: all 1s;
    color:#333;
}


#hdrnav ul li a:hover {
    border-bottom: 3px solid #99c397;
}

@media (max-width:799px) {
    header {
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        z-index: 10;
    }
    #hdrnav {
      position: relative;
      width: 100%;
      margin: 0;
      height: 100vh;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
      transition: all 1s ease-out;
      overflow-y: scroll;
      top:0;
      transform: translateY(0);
    }
    #hdrnav ul{display: flex;flex-wrap: wrap;}    
    #hdrnav ul#gnav li {
      display:block;
      width: 40%;
      margin:0.5em 5%;
      background: #FFF;
      border-radius: 5px;
      text-align: center;
      padding:0;
    }
    #hdrnav ul#gnav li a{
      border:none;
      display: block;
      width:100%;
      height:100%;
      padding: 0.5rem;
    }
}



/*メニューアイコン*/
#hdrnav ul#gnav li img {
  display: none;
  width:25px;
  height:25px;
  text-align: center;
  margin:5px auto 0 auto;
}

@media screen and (max-width: 799px) {
  #hdrnav ul#gnav li img {
    display: none;/*非表示*/
    /*display: inline-block;表示*/
  }
}

@media screen and (max-width: 359px) {
  #hdrnav ul#gnav li img {
    display: none;
  }
}
@media screen and (max-width: 799px) {
  body.menu-is-open #hdrnav {
    z-index: 9;
    opacity: 1;
    background: #bccaba;
    visibility: visible;
  }
}
/*gnav span ふりがな表示*/

#hdrnav ul#gnav li a span {
  display: none;
  font-size: 70%;
}

@media screen and (max-width: 799px) {
  #hdrnav ul#gnav li a span {display: block;}
}
@media screen and (max-width: 359px) {
  #hdrnav ul#gnav li a span {display: none; margin-top: 1rem;  }
}
/*スマホ用メニュー*/
@media screen and (max-width: 799px) {
  ul#snav    {text-align: center;}
  ul#snav li {list-style-type:disc;}
  ul#snav li a {border:none;font-size:80%;}
}

/*お問い合わせ*/

#hdrInquiry {
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 9;
}
@media screen and (max-width: 599px) {
  #hdrInquiry {
    bottom: 0;
    top: auto;
    width: 100%;
    height: 50px;
  }
  #hdrInquiry ul {
    display: flex;
    justify-content: center;
    height: 50px;
    margin: 0;
  }
  #hdrInquiry ul li {
    width: 50%;
    height: 100%;
    display: block;
    position: relative;
  }
  #hdrInquiry ul li#hdrTel {
    background-color: #93c453;
  }
  #hdrInquiry ul li#hdrTel:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
    background-image: url(../common/tel.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #hdrInquiry ul li#hdrRsv {
    background-color: #df3a65;
  }
  #hdrInquiry ul li#hdrRsv:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
    background-image: url(../common/reserve.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #hdrInquiry ul li a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50px;
    margin: auto;
    width: 80%;
    height: 2rem;
    color: white;
    font-size: 1rem;
    text-decoration: none;
  }
}
/*SNS*/
ul.sns{text-align: center;}
footer ul.sns{margin-top:3em;}
ul.sns li {
  display: block;
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 2px;
  text-decoration: none;
  text-align: center;
  z-index: 8;
}

ul.sns li a {
  display: block;
}

ul.sns li a img {
  width: 50px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px !important;
}


ul.sns li a :hover {
  width: 50px;
  height: 100px;
  overflow: hidden;
  vertical-align: bottm !important;
  margin-top: -50px !important;
}


ul.sns li a::before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: -1;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background-color: #99c397;
}

ul.sns li a:hover::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
#hdrnav ul.sns li {
  margin:3em 2px;
}
#hdrnav ul.sns li a{
  border:none;
}
#hdrnav ul.sns li a img{
  margin-top: -50px !important;
}

#reserve{padding:10vh 0;min-height:40vh;background-image: url(../top/reserve_photo1.jpg);background-size: cover;color:#FFF;text-align: center;}
#reserve h2{margin-bottom:1em;font-size:160%;}
@media (max-width:599px) {
  #reserve p{font-size:90%;width:95%;margin:0 auto;}
}

/*メイン*/


/* 以下、個別ページ用 */
/*共通*/
h2.ettl{font-weight: normal;padding:0;}
.inner75{width:75%;max-width:1400px;margin:0 auto;}
@media (max-width:1439px) {
  .inner75{width:95%;max-width:1000px;}
  header .inner{width:100%;}
}
h2{font-size:250%;}


/* サブページ　共通 */
.sub_page h1{font-size:170%;text-align: center;margin:2em auto;}
.sub_page h2{font-size:170%;}
.photo_box1        {height:40vh;overflow: hidden;margin:0 auto 5em auto;}
.photo_box1 .inbox1{width:33%;height:100%;}
.photo_box1 .inbox2{width:66%;height:100%;}
.photo_box1 img{object-fit: cover;height:100%;width:100%;object-position:top;}
@media (max-width: 599px) {
  .sub_page h1{font-size:150%;margin:0.5em auto;}
  .sub_page h2{font-size:140%;}    
  .photo_box1        {margin:0 auto 1em auto;}
  .photo_box1 .inbox1{display: none;}
  .photo_box1 .inbox2{width:100%;}
}


.layout_box1 .txtSet{width:55%;position: relative;}
.layout_box1 .imgSet{width:45%;}
.layout_box1 .imgSet .box1,.layout_box1  .imgSet .box2{width:50%;}
.layout_box1 .imgSet .box1 img,.layout_box1 .imgSet .box2 img{width:100%;}
@media (max-width: 599px) {
  .layout_box1 .txtSet{width:100%;padding:10px;}
  .layout_box1 .imgSet{width:100%;padding-top:3em;}
  .layout_box1 .imgSet .box1{width:100%;}
  .layout_box1 .imgSet .box2{display:none;}
} 

.bg_stone{background-image: url(../common/bg_stone.jpg);background-size: cover;padding:5vh;}
@media (max-width: 599px) {
  .bg_stone{padding:0px;}
}
#post_navi{text-align: center;margin:3em auto;}
#post_navi img{width:12px;height:12px;margin:0 0.5em;}
#list_navi{text-align: center;margin:3em auto;}
#list_navi img{width:12px;height:12px;margin:0 0.5em;}

/*スタイル個別 type-style.php concept/treatment*/
.style_box1        {margin:0 auto 5em auto;}
.style_box1{flex-direction: row;height:60vh;overflow:hidden;flex-wrap: wrap;}
.style_box1 li.main {width:55%;height:100%;}
.style_box1 li.secd {width:44%;height:49.5%;overflow: hidden;margin:0 auto 1% 1%;}
.style_box1 li.thrd {width:44%;height:49.5%;overflow: hidden;margin:0 0 0 1%;}

.style_box1 img{object-fit: cover;height:100%;width:100%;object-position:top;}
.style_data{margin-bottom:5em;}
.style_data .comment{width:70%;}
.style_data .before{width:25%;}
.style_data .before h4{text-align: center;font-weight: normal;}
/*関連記事*/
ul.related {margin-bottom: 2em;}
ul.related li{width:33%;}
ul.related li{display: table; }
ul.related li .img_area{width:40%;display: table-cell;padding-right:10px;}
ul.related li dl{width:50%;display: table-cell;}


/*視覚効果
==================================================================================================================*/
/*ズームアウト*/
.zmOut {
	overflow: hidden;
	margin: auto;
}
.zmOut img {
	display: block;
	transition: 3s;/*効果時間*/
	transition-timing-function:ease-in-out;/*ゆっくり始まって、ゆっくり終わる*/
	transform: scale(1.1);/*active前の拡大値*/
	opacity: 1.0;/*不透明度*/
}
.zmOut.on  img {
	transform: none;/*active時に拡大解除*/
	opacity: 1;/*不透明度を元に戻す*/
}

/*下からのフェードイン*/
.e-fadein{
  transition: 1s;
  transition-timing-function: ease;
  transform: translateY(50px);
  opacity: 0;
}

.e-fadein.on{
  transform: none;
  opacity: 1;
}
/*右からのフェードイン*/
.e-fadeinR{
	transition: 1s;/*効果時間*/
  transition-timing-function: ease;
	transform:translateX(100px);/*右に配置*/
	opacity: 0;/*不透明度*/
}
.e-fadeinR.on{
	transform: none;/*active時に拡大解除*/
	opacity: 1;/*不透明度を元に戻す*/
}
/*左からのフェードイン*/
.e-fadeinL{
	transition: 1s;/*効果時間*/
  transition-timing-function: ease;
	transform:translateX(-100px);/*左に配置*/
	opacity: 0;/*不透明度*/
}
.e-fadeinL.on{
	transform: none;/*active時に拡大解除*/
	opacity: 1;/*不透明度を元に戻す*/
}
/*下からスライドイン*/
.e-slidein{
	transition: 0.5s;/*効果時間*/
	transition-timing-function:ease;/*一定*/
	transform:translateY(50px);/*右に配置*/
}
.e-slidein.on {
	transform: none;/*active時に拡大解除*/
}
/*右からスライドイン*/
.e-slideinR{
	transition: 0.5s;/*効果時間*/
	transition-timing-function:ease;/*一定*/
	transform:translateX(100px);/*右に配置*/
}
.e-slideinR.on {
	transform: none;/*active時に拡大解除*/
}
/*左からスライドイン*/
.e-slideinL{
	transition: 0.5s;/*効果時間*/
	transition-timing-function:ease;/*一定*/
	transform:translateX(100px);/*右に配置*/
}
.e-slideinL.on {
	transform: none;/*active時に拡大解除*/
}
/*右からスライドマスク*/
.e-maskR{
  mask-image: url("../images/mask.jpg");
  mask-repeat: no-repeat;
  mask-position: 0 -700px;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../images/mask.jpg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 700px 0;
  -webkit-mask-size: 100%;
	transition: 1s;/*効果時間*/
}
.e-maskR.on {
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  transform: none;/*active時に拡大解除*/
}
/*左からスライドマスク*/
.e-maskL{
  mask-image: url("../images/mask.jpg");
  mask-repeat: no-repeat;
  mask-position: 0 1200px;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../images/mask.jpg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -1200px 0;
  -webkit-mask-size: 100%;
	transition: 2s;/*効果時間*/
}
.e-maskL.on {
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  transform: none;/*active時に拡大解除*/
}

/*背景マスクの時は外枠が必須*/
.imgSet{/*背景マスク・ズーム外枠*/
  display: block;
  overflow: hidden;
  width:100%;
  height:350px;
  margin: auto;
  position: relative;
}
/*背景マスク右*/
.imgSet{
  display: block;
  overflow: hidden;
  width:100%;
  height:350px;
  margin: auto;
  position: relative;
}
.maskbgR{
  display: block;
  position: absolute;
  top:0;
  left:0;
  width:0%;
  height:100px;
  background-color: #787878;
  z-index: 1;
}
.maskbgR.on{
  width:100%;
  height:350px;  
  transform-origin: top left;
  transform: translate(-100%);
  animation: maskslideR 2s;
}
@keyframes maskslideR{
0%{transform: translate(100%);}
50%{transform: translate(0%);}
60%{transform: translate(0%);}
100%{transform: translate(-100%);}
}
.e-maskBR{
  position: absolute;
  display: block;
  width:100%;
  height:350px;
  mask-image: url("../images/maskbg.jpg");
  mask-repeat: no-repeat;
  mask-position: -700px 0;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../images/maskbg.jpg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -700px 0;
  -webkit-mask-size: 100%;
  transition:all 1s ease 0.5s;/*効果時間*/
}
.e-maskBR.on{
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  transform: none;/*active時に拡大解除*/
}
.e-maskBR img{
  opacity: 0;
  transition:all 1s ease 0.5s;/*効果時間*/
}
.e-maskBR.on img{
  opacity: 1;
}

/*背景マスク左*/

.maskbgL{
  display: block;
  position: absolute;
  top:0;
  left:0;
  width:0%;
  height:100px;
  background-color: #6f9fa6;
  z-index: 1;
}
.maskbgL.on{
  width:100%;
  height:350px;  
  transform-origin: top left;
  transform: translate(-100%);
  animation: maskslideL 2s;
}
@keyframes maskslideL{
0%{transform: translate(-100%);}
50%{transform: translate(0%);}
60%{transform: translate(0%);}
100%{transform: translate(100%);}
}
.e-maskBL{
  position: absolute;
  display: block;
  width:100%;
  height:350px;
  mask-image: url("../images/maskbg.jpg");
  mask-repeat: no-repeat;
  mask-position: -700px 0;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("../images/maskbg.jpg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -700px 0;
  -webkit-mask-size: 100%;
  transition:all 1s ease 0.5s;/*効果時間*/
}
.e-maskBL.on{
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  transform: none;/*active時に拡大解除*/
}
.e-maskBL img{
  opacity: 0;
  transition:all 1s ease 0.5s;/*効果時間*/
}
.e-maskBL.on img{
  opacity: 1;
}

/*ズームは外枠が必須*/
/*ズームイン*/
.zoomin img {
	transition: 2s;/*効果時間*/
	transition-timing-function:ease-in-out;/*ゆっくり始まって、ゆっくり終わる*/
	transform: scale(1);/*active前の拡大値*/
	opacity: .8;/*不透明度*/
}
.zoomin.on img {
	transform: scale(1.1);/*active時に拡大解除*/
  opacity: 1;/*不透明度*/
}
/*ズームアウト*/
.zoomout img {
	transition: 2s;/*効果時間*/
	transition-timing-function:ease-in-out;/*ゆっくり始まって、ゆっくり終わる*/
	transform: scale(1.2);/*active前の拡大値*/
	opacity: .8;/*不透明度*/
}
.zoomout.on img {
	transform: scale(1);/*active時に拡大解除*/
  opacity: 1;/*不透明度*/
}

.e-scrlin { transform:translateX(20%); transition:transform .3s; }
.e-scrlin.on { transform:translateX(0); }
.e_under .e_tgt { position:relative; }
.e_under .e_tgt::after { content:""; position:absolute; left:0; bottom:0;
  height:3px; width:0; background:#ff0; transition:width 1s; }
.e_under.on .e_tgt::after { width:100%; }
.e_imgslazy img { opacity:0; transition:opacity 3s; }
.e_imgslazy img[src] { opacity:1; }