@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{background:#fff;}
.no-sidebar .content .main {background-color: transparent;}
html { scroll-behavior: smooth;}
.content {margin-top: 0;}

	.sp{display:none !important;}
	.pc{display:block !important;}
/*------------------------------------非表示にする------------------------------------*/

.date-tags,
.page-id-12 .entry-title,
.footer-meta,
.page-id-12 .breadcrumb,
.footer-bottom-logo .logo-image,
.swiper-pagination{display:none;}

/*recaptureバッジを非表示に*/
.grecaptcha-badge {
display: none;
}

/*------------------------------------ヘッダー------------------------------------*/
#header-container {padding: 10px 0;}
.page-id-12 #header-container {background-color: transparent;}
.page-id-12 #header-container .navi {background-color: transparent;z-index:3;}
.header-container-in.hlt-top-menu .logo-header {z-index: 3;}
.navi-in > ul li {width: auto;letter-spacing: 2px;}
.navi .item-label, .navi .item-description {padding: 0 20px;}
.navi-in > ul li a:hover{border-bottom:2px solid #fff;background:transparent !important;}
/*------------------------------------トップスライド画像------------------------------------*/
	.sp-slide{display:none !important;}
	.pc-slide{display:block !important;}
.swiper-wrap {
  margin: -170px calc(50% - 50vw) 0;
  max-width: 100vw;
  height: 100vh;  position: relative;
  overflow: hidden;
}
.swiper-wrapper {margin: 0px;}
.slide-img img{min-height:100vh;width:100%;object-fit: cover;}

/*-----------ボタン-----------*/
.scroll-button {
    background-color: transparent!important;
    color: #fff;
    font-weight:normal;
    font-size: 0.75em;
    position: absolute;/*ボタンの位置を変更*/
    bottom:  3em;/*画面下からの設定*/
    left: 50%;/*画面中央に設定・下の「transform」とセットで記述*/
    transform: translateX(-50%);z-index:10;text-align:center;
}
.scroll-button:before{
	display:block;
	font-family: "Font Awesome 5 Free";
	font-weight:bold;
	content: "\f103"; /*アイコン指定（シングル矢印は\f107にする）*/
	font-size: 1.5em; /*アイコンの大きさ*/
	animation: move 1s infinite alternate ease-in-out; /*アイコンをゆっくり動かす*/
color:#fff;z-index:10;
}
@keyframes move {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(10px);
    }
}
.slide-text {
	writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2em;
  font-style: normal;
	text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
height:fit-content;
padding:50px 10px;
background:rgba(0, 0, 0, 0.6);
}
/*------------------------------------こだわり------------------------------------*/
.all-wrap {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/05/slide3.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	margin: -15px calc(50% - 50vw) 0;
	padding: 80px calc(50vw - 50% + 8px) 120px;
	width: 100vw;position: relative;
}

.in-box{background:rgba(255, 255, 255, 0.87);text-align:center;padding: 50px 30px 10px;}
.in-box h2{background:transparent;border:1px solid #000;width:fit-content;margin:0 auto 30px;padding:15px 50px;}

/*------------------------------------コース------------------------------------*/

.all-wrap2 {
  background:#000;
  color:#fff;
	margin: -15px calc(50% - 50vw) 0;
	width: 100vw;position: relative;
}
.flex-box {
padding:100px 0 80px;             /* 余白指定 */
display: flex;              /* フレックスボックスにする */
flex-direction:row;         /* 要素の並び順 */
margin:0;
}
.flex-item {
padding: 0;
color:  #fff;               /* 文字色 */
margin:  0;              /* 外側の余白 */
width:50%;                 /* 幅指定 */
}
.flex-item img{width:100%;height:auto;}
.kodakari-txt{display:block;margin-left:10vw;}
.flex-img{width:70% !important;text-align:center !important;margin:0 auto !important;}


.all-wrap3 {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/04/kodawari-back2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	margin: -15px calc(50% - 50vw) 80px;
	padding: 80px calc(50vw - 50% + 8px) 120px;
	width: 100vw;position: relative;
}

/*------------------------------------お知らせ------------------------------------*/
div.whatsnew{font-size:74%;}
div.whatsnew .newmark {font-size: 60%;background-color: #bd0000;}

/*------------------------------------店舗情報------------------------------------*/

.all-wrap4 {
  background: #000;
	margin: 0px calc(50% - 50vw) 0;
	padding: 120px calc(50vw - 50% + 8px) 50px;
	width: 100vw;position: relative;
}
.all-wrap4 h2{background:transparent;border:1px solid #fff;color:#fff;width:fit-content;margin:0 auto 30px;padding:15px 50px;}

.flex-box-shop {
padding:0 0 80px;             /* 余白指定 */
display: flex;              /* フレックスボックスにする */
flex-direction:row;         /* 要素の並び順 */
margin:0;
align-items: center;
}
.flex-box-shop .flex-item {
padding: 0;
color:  #fff;               /* 文字色 */
margin:  0;              /* 外側の余白 */
width:calc(100vw / 3);                 /* 幅指定 */
}
.shop-txt{font-size:74%;text-align:center;margin:0 auto;}
.shop-txt span{font-size:120%;}
.kanzen{background:#bd0000;color:#fff;text-align:center;margin:0 auto;padding:5px 15px;width:80%;}
.goyoyaku{text-align:center;margin:15px auto 0;line-height:1.4;}
.goyoyaku span{font-size:130%;}
.btn-contact{text-align:center;margin:20px auto 0;padding:5px 15px;width:80%;}
.btn-contact a{background:#fff;color:#000;display:block;padding:5px 50px;text-decoration:none;}
.btn-contact a:hover{background:#bd0000;color:#fff;}

/*------------------------------------ご予約について------------------------------------*/

.all-wrap5 {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/04/back-nami.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	margin: 0 calc(50% - 50vw);
	padding: 100px calc(50vw - 50% + 8px) 80px;
	width: 100vw;position: relative;
}
.all-wrap5 h3{background:transparent;border:1px solid #000;color:#000;width:fit-content;margin:0 auto 30px;padding:15px 50px;}
.all-wrap5 p{font-size:84%;text-align:center;}
.tel{font-size:100%;text-align:center;color:#bd0000;}
.tel span{font-size:160%;}
.btn-contact2 {text-align:center;margin:-25px auto 50px;width:fit-content;font-size:120%;display:block;}
.btn-contact2 a{background:#000;color:#fff;display:block;padding:5px 50px;text-decoration:none;}
.btn-contact2 a:hover{background:#bd0000;color:#fff;}

/*------------------------------------フッター------------------------------------*/
.footer {
background: #000;
padding: 100px 0 0;
text-align: center;
margin-top: 0;
}
.page-id-12 .footer {
margin-top: -140px;
}
.flex-box-footer {
padding:0 0 80px;             /* 余白指定 */
display: flex;              /* フレックスボックスにする */
flex-direction:row;         /* 要素の並び順 */
margin:0;
align-items: center;
}
.flex-box-footer .flex-item {
padding: 0;
color:  #fff;               /* 文字色 */
margin:  0;              /* 外側の余白 */
width:calc(100vw / 3);                 /* 幅指定 */
}
.flex-box-footer .flex-item .footer-logo{max-height:200px;width:auto;}
.flex-box-footer .flex-item .footer-catch{max-height:140px;width:auto;}

ul.footer-nav {list-style-type:none;}
ul.footer-nav li {
height:fit-content;
display:block;
padding: 0 0 0 10px;
font-size: 16px;
font-weight: bold;
float: left;
writing-mode: tb-rl;
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
text-align: left;
letter-spacing: 10px;
	  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
ul.footer-nav li a{color:#fff;text-decoration:none;display:block;}
.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
.footer-bottom-content {color:#fff;}


/*------------------------------------ContactForm7カスタマイズー------------------------------------*/
input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select, .search-edit {
width:auto;
}
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 1px solid #e5e5e5;
	font-size:16px;
	text-align:left;
}

table.CF7_table p{margin:0;}

.CF7_table input, .CF7_table textarea {
border: 0px solid #d8d8d8 !important;background:transparent !important;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 0px solid #d8d8d8;width:95%;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:10px;
	padding: 5px;
	background: #b66565;
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:10px;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */

.contact-btn-erea{text-align:center;}


input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, button{
border: 0px solid var(--cocoon-thin-color);
background-color: #d3d3d3;
color: #000;
font-size: 16px;
width: fit-content;
padding: 10px 40px;
border-radius: 50px;
margin:0 10px 50px;
}
input[type=submit] {
border: 0px solid var(--cocoon-thin-color);
background-color: #000000;
color: #fff;
font-size: 16px;
width: fit-content;
padding: 10px 40px;
border-radius: 50px;
margin:0 10px 50px;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}
.recap{font-size:12px;text-align:center;margin:20px auto 0;}

.page-id-174 .article h1 {
width: 100vw;
background-color: #000;
}
.page-id-168 .article h1,
.page-id-172 .article h1,
.page-id-174 .article h1{
background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/04/back-nami.jpg');
background-attachment: local;
background-size: cover;
background-position: center;
margin: -38px calc(50% - 50vw) 70px;
padding: 80px calc(50vw - 50% + 8px) 80px;
width: 100vw;
position: relative;
font-size: 2em;
text-align: center;
letter-spacing: 10px;
}
.txt-wrap{width:fit-content;margin:0 auto;text-align:left;padding:0 30px;}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
.in-box{text-align:left;}
.all-wrap5 p {text-align: left;margin-left: 10vw;margin-right: 10vw;}
.flex-box-shop{display:block;}
.flex-box-shop .flex-item {width:70%;text-align:center;margin:20px auto;}
.all-wrap5 p.tel{text-align:center;}
ul.footer-nav li{padding: 0 0 0 5px;}
.sp-slide{display:block !important;}
.pc-slide{display:none !important;}
.page-id-168 .article h1, .page-id-172 .article h1, .page-id-174 .article h1 {
padding: 60px calc(50vw - 50% + 8px) 60px;
font-size: 1.6em;
letter-spacing: 0px;
}


}

/*720px以下*/
@media screen and (max-width: 720px){
	.sp{display:block !important;}
	.pc{display:none !important;}
.slide-img img {
object-fit: cover;
height: 90vh;
width: 100vw;
}
	.btn-contact2 {
margin: 0px auto 50px;
}
ul.footer-nav{display:none;}
.flex-box-footer{display:block;padding: 0;}
.flex-box-footer .flex-item {width:70%;text-align:center;margin:0 auto;}
.flex-box{display:block;}
.flex-item {margin: 0 auto 20px;width: 70%;text-align: center;}
.all-wrap3 {padding: 40px 0;}
.flex-img {width: 90% !important;}
div.whatsnew {font-size: 90%;width: 90%;margin: 0 5%;}
	.oshirase{font-size: 90%;width: 90%;margin: 0 5%;}
.flex-box-footer .flex-item .footer-logo {max-height: 120px;}
.flex-box-footer .flex-item .footer-catch {max-height: 100px;}

	
}

/*480px以下*/
@media screen and (max-width: 480px){
.flex-box-shop .flex-item {width: 100%;}
.all-wrap5 p {margin-left: 2vw;margin-right: 2vw;}
.page-id-168 .article h1, .page-id-172 .article h1, .page-id-174 .article h1 {
padding: 50px calc(50vw - 50% + 8px) 50px;
}
.flex-item {width: 90%;}
.all-wrap3 .flex-img {width: 100% !important;}
.all-wrap5 {
background-size: contain;
}
.all-wrap {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/04/kodawari-back-sp.jpg');
  background-attachment: fixed;
  background-size: initial;
  background-position: center;
	margin: 0 calc(50% - 50vw) 0;
	padding: 90px calc(50vw - 50% + 8px) 80px;
	width: 100vw;position: relative;
}
.all-wrap3 {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/uploads/2024/04/kodawari-back2-sp.jpg');
  background-attachment: fixed;
  background-size: initial;
  background-position: center;
	padding: 60px 0;
	width: 100vw;position: relative;
}
}



/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

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

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

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

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

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

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

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

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

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

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

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

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

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


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@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: #666;/*伸びる背景色の設定*/
}
@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);
  }
}

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

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

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


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}



.menu-content {
max-width: 300px;
background: rgba(0, 0, 0, 0.6);
}
.menu-drawer a {
color:#fff;
text-decoration: none;
padding: 15px;
display: block;
border-bottom: 1px #959494 dashed;
}
.fa-times {
color: #fff;/* 閉じるボタンの色 */
font-size: 0.8em;
}

/*==================================================
スライダーのためのcss
===================================*/
.all-wrap-slider {
  background-image: url('https://uoichi-sushi.net/uoichi/wp-content/themes/cocoon-child-master/slider/slider-back.jpg');
  background-attachment: fixed;
  background-size: initial;
  background-position: center;
color: #fff;
margin: -85px calc(50% - 50vw) -80px;
width: 100vw;
position: relative;
padding: 70px 0 50px;
}
ul.slider{list-style:none;}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
	margin-bottom:20px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 15px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
	list-style:none;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/padding:0;
}

.slick-dots .slick-active button{
    background:red;/*ドットボタンの現在地表示の色*/
}