/* エディタ画面ではさせたくない透明化などのアニメーション関係を記述 */

/******************************************************************************/
/* | レスポンシブ対応                                                           */
/******************************************************************************/
/*------------------------------------
- スマホとPCで表示/非表示の制御		 -
- 使用例(スマホのときだけ改行)   	 -
- <br class="show_sp_only">        	-
-------------------------------------*/ 
/* SP スマホ画面の設定 */
.show_sp_only { display: block;}
.show_pc_only { display: none;}
html { font-size: 14px;  } /* フォントサイズ 1rem = 14px */

/* PC画面の設定 */
@media screen and (min-width: 782px) {
    .show_sp_only { display: none;}
    .show_pc_only { display: block;}
    html { font-size: 16px;  } /* フォントサイズ 1rem = 16px */
}

/* コンテンツを非表示 */
.no_show{
	display: none !important;
}

.eye_catch_no_show {
	display: none;
}
/******************************************************************************/
/* | アニメーション                                                           */
/******************************************************************************/
/* 左右フェードインのとき、横スクロールバー発生を抑制　*/
/* スマホではbodyには効かないので注意 */ 
.no_scrollbar_x {
    overflow-x: hidden;
    overflow-y: hidden;
}
/*----------------------------------*/
/*--  スクロールでフェードイン    --*/
/*----------------------------------*/
.animation_fadein_up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s, visibility 1s, transform 1s;
}
.animation_fadein_down {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50px);
    transition: opacity 1s, visibility 1s, transform 1s;
}
.animation_fadein_left {
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: opacity 1s, visibility 1s, transform 1s;
}
.animation_fadein_right {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s, visibility 1s, transform 1s;
}
.animation_fadein {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s, transform 1s;
}
/* delay したいときに追記するクラス */
.animation_delay_100ms {transition-delay: 100ms;}
.animation_delay_200ms {transition-delay: 200ms;}
.animation_delay_300ms {transition-delay: 300ms;}
.animation_delay_400ms {transition-delay: 400ms;}
.animation_delay_500ms {transition-delay: 500ms;}
.animation_delay_600ms {transition-delay: 600ms;}
.animation_delay_1000ms {transition-delay: 1000ms;}
  
/* スクロールにより要素が見えた時にjQueryで追加するクラス */
.add-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transform: translateY(0);
}
/*----------------------------------
 ホバー 画像を大きくする
----------------------------------*/ 
.hover_scale_up{
    margin:0 auto;
	overflow:hidden;
}
	.hover_scale_up img{
		transition: 0.5s all;
	}
		.hover_scale_up img:hover{
			transform: scale(1.1, 1.1);
			transition: 0.5s all;
		}

/******************************************************************************/
/* | ボタン関係                                             				   */
/******************************************************************************/
:root {
    --yd-button-color: white; 				/* ボタンの文字色       */
    --yd-button-background: black; 			/* ボタンの背景色       */
    --yd-button-border-color: black; 		/* ボタンの境界線の色   */
    --yd-button-border-radius: 5px;		/* ボタンの角           */
    --yd-button-padding-v: 10px;			/* ボタンのpadding上下  */
    --yd-button-padding-h: 10px;			/* ボタンのpadding左右  */
    --yd-button-after-color: black; 		/* ホバー後の文字色     */
    --yd-button-after-background: white; 	/* ホバー後の背景色     */
    --yd-button-transition-duration: 0.3s; 	/* ホバー完了の時間     */
}
.yd_button {
    max-width: 300px;
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
    font-weight: bold;
    color: var(--yd-button-color);
    background: var(--yd-button-background);
    border: solid 1px var(--yd-button-border-color);
    border-radius: var(--yd-button-border-radius);
    transition: all var(--yd-button-transition-duration);
}
/* wordpressが自動で付与するクラスを初期化する */
 .yd_button .wp-block-button__link 
,.yd_button input /* contact7の送信ボタン */
,.yd_button a { 
    all: initial;
    font-weight: inherit;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: var(--yd-button-padding-v) var(--yd-button-padding-h);
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    border-radius: inherit;
    text-align: center;
}

/*--------------------*/
/* 透明化 */
/*--------------------*/
/*.yd_button:hover {*/
/*    opacity: 0.6;*/
/*}*/

/*--------------------*/
/* 色反転 */
/*--------------------*/
.yd_button:hover {
    color: var(--yd-button-after-color);
    background: var(--yd-button-after-background);
}

/*--------------------*/
/*傾く*/
/*--------------------*/
/*.yd_button:hover {*/
/*  transform: rotate(-10deg);*/
/*}*/

/* --------------------*/
/* 背景が下から上に変化 */
/*-------------------- */
/* .yd_button {
    position: relative;
    z-index: 1;
}
	.yd_button::before {
		content: "";
		width: 100%;
		height: 100%;
		border-radius: var(--yd-button-border-radius);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: var(--yd-button-after-background);
		transform-origin: 50% 0%;
		transform: scaleY(0);
		transition: transform ease var(--yd-button-transition-duration);
	}
	.yd_button:hover {
		color: var(--yd-button-after-color);
		background: transparent;
	}
		.yd_button:hover::before {
			transform-origin: 50% 100%;
			transform: scaleY(1);
		} */

/*--------------------*/
/* 背景が斜めに変化 */
/*--------------------*/
/* .yd_button {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
}
	.yd_button::before {
		content: "";
		width: 100%;
		position: absolute;
		top: 0;
		right: -60px;
		z-index: -1;
		border-right: 60px solid transparent;
		border-bottom: 60px solid var(--yd-button-after-background);
		transform: translateX(-100%);
		transition: transform ease var(--yd-button-transition-duration);
	}
	.yd_button:hover {
		color: var(--yd-button-after-color);
		background: transparent;
	}
		.yd_button:hover::before {
			transform: translateX(0);
		} */

/*--------------------*/
/*動く(拡大縮小)*/
/*--------------------*/
/*.yd_button:hover {*/
/*  animation: pulsation .7s alternate infinite;*/
/*}*/

/*@keyframes pulsation {*/
/*  0% { transform: scale(1); }*/
/*  50% { transform: scale(0.95); }*/
/*  100% { transform: scale(1.05); }*/
/*}*/

/******************************************************************************/
/* | マーカーアニメーション                                                     */
/******************************************************************************/
/* アニメーション前のスタイル */
.js-marker {
    display: inline;
    position: relative;
    background: linear-gradient(transparent 50%, #ffccff 0%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 100%; /* マーカーの太さ */
    transition: all 2s ease-in-out; /* アニメーション時間 */
    font-weight: bold;
    font-size: 20px;
  }
  
  /* アニメーション発火時 */
  .js-marker.inview {
    background-size: 100% 100%; /* 上で設定した太さに合わせる */
  }