@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************

JQやりたくて●●コピペしたもの

************************************/


.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
	opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
		transform: translateX(-100%); /*要素を左の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}


@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);/*要素を右の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}







.top-ttl{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .textanimation{
            font-size: 25px;
            font-family:"Times New Roman", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", serif;
        }
        @keyframes showTextFromBottom{
      0%{
         transform: translateY( 100% );
      
      }
      100%{
          transform: translateY( 0px );
      }
    }
    .textanimation span{
     animation: showText 3s backwards;
     display: inline-block;
    }
    .textanimation > span{
      overflow: hidden;
    }
    .textanimation > span > span{
      animation: showTextFromBottom 0.5s backwards;
    }



/*====================================================================
slick
====================================================================*/

html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

/*====================================================================
.full-screen
====================================================================*/

.full-screen .slick-list {
  overflow: visible;
}
.full-screen.slider {
  max-width: 300px;
  margin: 0 auto;
}

/*====================================================================
以下は不要です。
====================================================================*/
body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  letter-spacing: .025em;
  line-height: 1.8;
  margin: 0;
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}
.section {
  max-width: 100%;
  margin: 0 auto;
  padding: 30px 0;
  overflow: hidden;
}
.section p._a {
  font-size: 12px;
  font-weight: bold;
  margin: 30px 0 0;
}
.section p._a .link {
  display: inline-block;
  color: #607D8B;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.section p._a .link:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #607D8B;
  border-right: 2px solid #607D8B;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-right: 10px;
}


/************************************

ここｍで

************************************/



/*　固定の各日付非表示　*/
.page .date-tags .body {
	display: none;
	background:white;
}

/*　全幅表示指定　*/
.full-wide-screen {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.full-wide-screen img{
    display: block;
    height: auto;
    width: 100%;
}


#main,#heder{
	background:transparent;
	font-family:Yu Gothic,Hiragino Sans,Meiryo,Yu Mincho,Noto Sans CJK JP;
}




/************************************
 * 
追加にはれなかった　ナビ

************************************/

.navi-in a{
	color:white;
	letter-spacing:1.8px;
	font-family:"Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
	border-bottom:solid 1px rgba(225,225,225,0)
}

.navi-in a:hover{
	background:transparent;
	color:#888;
	transition: all 2s;
	border-bottom:solid 1px rgba(225,225,225,1)
}

.navi-in{
	padding-bottom:10px;
}

/*************************************
 * 
 * ■トップ　画像 full-wide-screen
 * 
*************************************/

.full-wide-screen img{
	height:100%;
}

@media screen and (max-width: 834px) {
.full-wide-screen img{
	height:;
		margin-bottom:-100px
	}
}

@media screen and (max-width: 545px) {
.full-wide-screen img{
	height:;
	}
}


/*************************************
 * 
 * ■見出し　
 * 
*************************************/
.article h2 ,.article h3{
	font-family:"Noto Serif", "游明朝", "Yu Mincho",YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
}


.article h2{
	padding-top:1rem;
	background:transparent;
	font-size:50px;
	margin-bottom:-2rem;
}



@media screen and (max-width: 834px){
.article h2{
	font-size:40px;
	}
}

@media screen and (max-width: 545px){
.article h2{
	padding-top:1rem;
	font-size:35px;
	margin-bottom:-15px;
	}
}

.article h3{
	border:none;
	font-weight:normal;
	letter-spacing:1.8px;
	font-size:16px;
}

@media screen and (max-width: 545px){
.article h3{
	font-size:14px;
	padding-top:0;
	}
}

/***********************************

■インスタ画像

************************************/

@media screen and (max-width: 545px) {
	#sb_instagram{
		padding:0 !important;
	}	
}


/*************************************
 * 
 * ■スライドインメニュー
 * 
*************************************/
.customize-partial-edit-shortcut{
	display:none;
}

.menu-drawer li{
	padding:25px;
	letter-spacing:1.8px;
	border-bottom:solid 0.8px black;
	font-size:14px;
	font-family:Yu mincho;
}

.menu-drawer a:hover{
	background:transparent;
	color:#999;
}

@media screen and (max-width: 568px) {
.menu-drawer li{
	padding:15px;
	font-size:12px;
	}
}




/*************************************
 * 
 * ■投稿ページ　一覧
 * 
*************************************/

.related-entry-card-title, .entry-card-title:hover{
	transform: translateY(2px);
	color:#888;
}

/*************************************
 * 　　　　　　　　　　
 * ■ カテゴリー　パンくず
 * 
*************************************/
.breadcrumb.sbp-main-before{
	background:transparent;
}

@media screen and (max-width: 865px) {
.breadcrumb.sbp-main-before{
	padding-left:2rem;
	margin-top:7rem;
	}	
}

@media screen and (max-width: 545px) {
.breadcrumb.sbp-main-before{
	font-size:8px;
	padding-left:1rem;
	margin-top:4rem;
	}	
}


/*　投稿ページアイキャッチ横カテゴリー非表示　*/
.cat-label{
	display:none;/*非表示したいときこれ*/
}


/*************************************
 * 　　　　　　　　　　
 * ■応募ボタン　recruit-btn
 * 
*************************************/

/*　■応募ボタン　*/
.recruit-btn{
	max-width:30%;
	margin:0 auto;
	border:solid 1px;
	background:#f8f8f8;
	border-radius: 0.5rem;
	transition: all 0.3s;
}

.recruit-btn:hover{
	transform: translateY(2px);
}

.recruit-btn a{
  background:transparent;
	color:black;
	font-weight:700;
}

@media screen and (max-width: 835px) {
.recruit-btn{
	font-size:14px;
	}	
}

@media screen and (max-width: 565px) {
.recruit-btn{
	max-width:65%;
	font-size:12px;
	}	
}

/*************************************　
 * 　　　　　　　　
 * ■グーグルマップ
 * 
 ************************************/
.g-map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
	border:0;/* ここから下幅マックス*/
	margin-right:
	calc(50% - 50vw);
	margin-left: calc(50% - 50vw); 
	max-width: none; width: 100vw
}

.g-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* グーグルコンテンツ下部分隙間埋め */
.body .widget,.content-bottom {
	margin-bottom:0;
	margin-top:0;
}




/*************************************　　
 * 　　　　　　　　　
 * ■テーブル RECRUIT table-recruit
 * 
************************************/

/*　全テーブル背景透明化　*/
table tr:nth-of-type(2n+1){
	background:transparent;
}

/*　■テーブル　リクルート　*/
/*　全体　*/
.table-recruit{
	max-width:80%;
	margin:auto;
	margin-top:1.5rem;
}
/*　左　*/
.table-rec-th,.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{
	width:20%;
	background:transparent;
}

/*　右　*/
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td.table-rec-td{

}

@media screen and (max-width: 865px){
/*　全体　*/
.table-recruit{
	max-width:80%;
}	
	
/*　上　*/
.table-rec-th,.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{
	width:100%;
	display:inline-block;
}

/*　下　*/
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td.table-rec-td{
	width:100%;
	display:inline-block;
	}
}	

@media screen and (max-width: 545px){
/*　全体　*/
.table-recruit{
	font-size:14px;
	}	
}	

/*************************************　
 * 　　　　　　　　　　
 * ■テーブル SYSTEM table-system
 * 
 ************************************/
/*　■テーブル　システム　*/
/*　全体　*/
.table-system{
	max-width:50%;
	margin:auto;
	margin-top:5rem;
	margin-bottom:5rem;
}

/*　タイトル　*/
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th.table-title{
	text-align:center;
	background:#f8f8f8;
}

/*　左　*/
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th.table-th{
	color:#524;
}

/*　右　*/
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td.table-td{
	
}

@media screen and (max-width: 865px){
/*　全体　*/
.table-system{
	max-width:80%;
	}
}

@media screen and (max-width: 545px){
/*　全体　*/
.table-system{
	margin-bottom:2rem;
	margin-top:2rem;
	}
}

/************************************
 * 
■応募フォーム　from-title from-text

************************************/

.form-title{
	margin-top:10rem;
	margin-bottom:5px;
}

.form-text{
	margin-top:1rem;
}

@media screen and (max-width: 865px){
.form-text{
	font-size:16px;
	}
}


@media screen and (max-width: 545px){
.form-text{
	font-size:12px;
	margin:0;
	}
}
	


/************************************
 * 
■投稿　各ページ内 page-img/page-text

************************************/
/*　■画像　サイズ調整　*/
.page-img img{
	max-width:600px;
	height:600px;
	margin:auto;
	margin-top:1rem;
	margin-bottom:1rem;
}

@media screen and (max-width: 865px){
.recruit-text{
	font-size:14px;
	}
	
.system-text{
	font-size:14px;
	}	

.page-text{
	width:80%;
	margin:0 auto;
	}	
	
}

@media screen and (max-width: 545px){
.page-img img{
	max-width:250px;
	height:250px;
	margin-bottom:0;
	}
	
.recruit-text{
	max-width:80%;
	margin:0 auto;
	font-size:12px;
	}
	
.system-text{
	max-width:60%;
	margin:0 auto;
	font-size:12px;
	}	
	
.page-text{
	font-size:10px;
	}	
}

/************************************
 * 
■プライバシーポリシー　pp

************************************/
.pp h3{
	font-size:30px;
	padding-left:0;
	margin-top:30px;
	margin-bottom:10px;
}

.pp p{
	margin:
}

@media screen and (max-width: 834px) {
.pp{
	padding-top:50px;
	width:80%;
	margin:auto;
	}
	
.pp h3{
	font-size:20px;
	font-weight:700;
	}	
	
}

@media screen and (max-width: 545px) {
.pp{
	padding-top:0;	
	}	
	
.pp h2{
	font-size:20px;
	}	

.pp h3{
	font-size:16px;
	}
	
.pp p{
	font-size:12px;
	}	
}