@charset "utf-8";
#area0 {
	position: relative;
  'margin-top: 70px;
}
#area1 {
	position: relative;
  margin-top:15%;
}

/*--------------------全体のコンテンツ----------------*/
.contents {
	  clear: both;
    overflow: hidden;
	  padding-top: 0px;
	  margin:0 auto;
    width:100%;
}

/*---------------------画面トップ------------------------------*/
.img-frame{
    position: relative;
    width: 90%;
    height: 32vh;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 25px;
 }
 .img-frame::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
 }
 .buil01{
    position: absolute;
    top:0;
    right:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
 }
 .buil01{
    background-image: url('../images/entry2.jpg');
	'clip-path: polygon(0% 100%, 17.5% 0%, 100% 0%, 100% 100%);
 }

 @media screen and (max-width: 767px){
    .img-frame{
       width: 100%;
       height: 250px;
    }
}

/*========= テキストを滑らかに出現させるためのCSS ===============*/
.contact {
	  position: absolute;
	  bottom:-10%;
	  left:10%;
    color: #fff;
    font-size: 5vw;
	  font-family: BIZ UDゴシック;
    text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
	  background-color: #79a6c4;
	  padding: .5% 2%;
    line-height: 1.5;
    
}

.contact2 {
	  position: absolute;
	  bottom:-25%;
	  left:10%;
    color: #fff;
    font-size: 1.5vw;
	  font-family: BIZ UDゴシック;
    text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
	  background-color: #79a6c4;
	  padding: .5% 2%;
    z-index:999;
}

@media screen and (max-width: 767px){
    .contact {
        font-size: 3rem;
        left:0;
        padding: 0 5%;
    }
    .contact2 {
        font-size: 1rem;
        bottom:-25%;
        left:0;
        padding: 1% 5%;
    }
}


/*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
  overflow: hidden;
  display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
  transition: .8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(40deg);
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}



/* Animation Seven */
.about-yumec{
    position:relative;
    width:100%;
    height:20em;
    background: linear-gradient(130deg,rgba(50, 112, 154, 0.6), rgba(154, 225, 64, 0.6))fixed,
  url('../base/OMIKA3.svg');
    background-size: 100% auto;
    background-repeat:no-repeat;
	  background-attachment:fixed;
}
.rec-message{
	  position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-family:Meiryo UI;
    font-weight:600;
    color: #fff;
}

.about-yumec2{
    font-size:1.5vw;
    text-align:center;
}

/*==================================================
背景色が伸びて出現
===================================*/
.bg_slide{
    position:relative;
    margin-top:10%;
}
.bg_slide p{
	padding:0 20px;
    vertical-align:middle;
}
/*全共通*/

.bgextend{
  	animation-name:bgextendAnimeBase;
  	animation-duration:1s;
  	animation-fill-mode:forwards;
  	position: relative;
  	overflow: hidden;/*　はみ出た色要素を隠す　*/
  	opacity:0;
    font-size:7vw;
    font-family:Impact;
    padding-bottom:4%;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}


/*左から右*/
.bgLRextend::before{
    animation-name:bgLRextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#559bab;
    /*伸びる背景色の設定*/;
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

.slide_sub{
    text-align:left;
	font-size:1em;
    font-weight:bold;
    margin:-2.5em 0 0 3em;
}


/*----------地図表示----------------*/
.map{
    width:80%;
    margin:5% auto 0;
}

.map ul {
  position:relative;
  z-index:1;
}
.map li{
  display:inline-block;
  width:48%;
  vertical-align:top;
}

.access_honsha, .access_omika{
   display: inline-block;
    vertical-align: top;
    margin-left:5%;
    font-size:1.5vw;
}

.honsha, .omika{
    font-size:1.5vw;
    font-weight:bold;
}

/* アクセスマップ */
.map iframe{
  	margin:0 5%;
}

@media screen and (max-width:800px){
	.map {
		  width:100%;
	    text-align: center;
	}
	
	.map li{
	    display: inline-block;
	    width: 80%;
	    margin: 1em auto;
	    vertical-align: top;
	    font-size:1.8vw;
  }
  .honsha, .omika {
    font-size:20px;
  }

  li p {
    font-size:15px;
  }
}


/* ----------地図が左から表示---------------- */
.sample {
  	overflow: hidden;
  	position: relative;
}
@keyframes sample-one {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(24px);
  }

  32% {
    opacity: 0;
    transform: scale(1.5) translateY(24px);
  }
}

.sample-second.sample-animation {
  animation: sample-second-img 2s cubic-bezier(.4, 0, .2, 1);
}

.sample-second.sample-animation:before {
  animation: sample-second-before 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes sample-second-img {
  0% {
    opacity: 0;
  }
}

@keyframes sample-second-before {
  100% {
    transform: translateX(100%);
  }
}



/*----------メールフォーム----------------*/
#contact_mail{
    position:relative;
    width:90%;
    margin:10% auto 0;
}

.email{
	  position:relative;
    margin: 0 auto 5em;
    width:100%;
}
/* 問い合わせ説明内容 */
.toiawase{
	  padding-top:5%;
    margin: 0 15%;
    font-size:1.5vw;
    color:#000;
}

.email dl {
	font-size:1vw;
}

#form_submit {
	font-size:1.2vw;
}

media screen and (max-width:800px){
	.toiawase {
	    font-size: 15px;
	}
}

.kojin{
    background:linear-gradient(transparent 60%, #FFFF00 0%);
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
.about-yumec{
    position:relative;
    width:100%;
    height:50vh;
    background: linear-gradient(130deg,rgba(50, 112, 154, 0.6), rgba(154, 225, 64, 0.6))fixed,
  url('../base/OMIKA2.svg');
    background-size:100% auto;
    background-repeat:no-repeat;
	background-attachment:fixed;
}

.contents {
	width:100%;
	padding-bottom: 20px;	/*下に空けるボックス内の余白*/
}
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.contents{
	width:100%;
	padding-top: 30px;		/*上に空けるボックス内の余白*/
	padding-bottom: 20px;	/*下に空けるボックス内の余白*/
}

.about-yumec{
  position:relative;
  width:100%;
  height:30vh;
  background: linear-gradient(130deg,rgba(50, 112, 154, 0.6), rgba(154, 225, 64, 0.6))fixed,
  url('../base/OMIKA.svg');
  background-size:100% auto;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
}