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

/************************************
** 子テーマ用のスタイルを書く
************************************/
a:hover {
	color: #0062b0;
}
.blue {color:#0062b0;}
.futoji {font-weight:bold;}
.banner {padding: 0 10px;}
.banner:active {position:relative;top:5px;}

.mobile-menu-buttons .menu-button > a {
    color: #FFFFFF!important;
}

#cloud{
	background-size: 200%!important;
	background:url(https://www.unojuku.com/wp-content/uploads/2022/08/bg_cloud.png) repeat-x left top 40px ;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	-moz-animation: cloudmove 30s linear infinite;
}

@keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-moz-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}

#snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリック操作を邪魔しない */
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 1em;
  opacity: 0.8;
  user-select: none;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}



@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}

.container {
	position: relative;
	width: 100%;
	height: 200px;
}

.item {
	position: absolute;
	width: 50px;
	height: 50px;
	background:url(https://www.unojuku.com/wp-content/uploads/2022/08/plane.png) repeat-x left top 40px ;
	animation: diagonal-move-anim 3s linear infinite alternate;
}

@keyframes diagonal-move-anim {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(150px, 150px);
	}
}



.widget_search {
	padding:0 15px;
}
.logo-image {
	padding:10px 0 0;
}
.under-entry-content {
	margin:0 15px;
}
.entry-categories-tags {
    margin-bottom: 18px;
	margin-left:15px;
	margin-right:15px;
}
input[type='submit'] {
    -webkit-appearance: none;
    border: 1px solid #ddd;
    background-color: #f5f8fa;
    color: #333;
    font-size: 18px;
	font-family: "Kosugi Maru" ,sans-serif;
}
.wpcf7 form .wpcf7-response-output {
	margin:0 0 20px!important;
	background:#FFFFFF;
}
.wp-block-image.is-style-rounded img {
	border-radius:25px!important;
}
.cat-label {
    position: absolute;
	top:auto;
	left:auto;
    bottom: 0.3em!important;
    right: 0.3em!important;
    /* border: 1px solid #eee; */
    font-size: 11px;
    color: #fff;
    background-color: #0062b0;
    padding: 1px 5px;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*フォーラム*/
.single-headers {
    margin-bottom: 15px;
    display: none;
}
.buddypress-wrap .bp-subnavs {
    margin: 10px 0;
    overflow: hidden;
    display: none;
}
p.form-allowed-tags {
    max-width: 100%;
    display: none;
}
.widget_display_topics ul,
.widget_display_replies ul {
	padding-left:0;
}
.widget_display_topics ul li,
.widget_display_replies ul li {
	list-style:none;
	border-bottom:1px solid #efefef;
	padding-bottom:0.8em;
}
.bbp-author-role, span.bbp-author-ip {
	display:none;
}
#bbpress-forums li.bbp-header {
    background: #0062b0!important;
    color: #FFFFFF!important;
}
.bbp-reply-author {
	font-size:16px;
	margin-top:4px!important;
}
#bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-header {
    background: #0062b0!important;
    border-top: 1px solid #0062b0!important;
    font-weight: 700;
    padding: 8px;
    text-align: center;
}
form#bp-login-widget-form {
    padding: 0 10px;
}
.buddypress.widget .bp-login-widget-user-avatar {
    float: left;
    margin-left: 10px;
}
.bp-login-widget-user-link, .bp-login-widget-user-logout {
	margin-left:10px;
}
#bbpress-forums #bbp-search-form {
    clear: left;
    margin-bottom: 15px;
}
#bbpress-forums li.bbp-footer {
	display:none;
}
div.bbp-breadcrumb, div.bbp-topic-tags {
	font-size: 14px!important;
}
span.bbp-reply-post-date, span.bbp-topic-post-date {
	float: left;
	margin-right: 10px;
}
.subnav-filters {
	display:none;
}
#new-post > fieldset > div:nth-child(3) > p:nth-child(3), #new-post > fieldset > div:nth-child(4) > p:nth-child(3){
	display:none!important;
}
#new-post > fieldset > div:nth-child(3) > p:nth-child(4), #new-post > fieldset > div:nth-child(4) > p:nth-child(4){
	display:none!important;
}

/*タイトルを非表示にする*/
.entry-title {
    display:none!important;
}
.wrap {
    margin: 0 auto;
}
.sidebar {
    padding: 0!important;/*0 1.5%*/
	background-color:transparent!important;
	margin:0px 0;
}
.box-menu-label {
	font-weight:normal;
}
.widget-entry-cards .a-wrap {
    padding: 10px 10px 8px;
    line-height: 1.3;
    margin-bottom: 10px;
}
.a-wrap {
	background:#F0F8FF;
	margin-bottom:3%;
}
.box-menu {
	padding:5px;
	min-height:0;
}
.box-menu:hover {
	background:#F0F8FF;
}
.box-menus {
    padding:10px;
    margin: auto;
}
.box-menu-icon {
	font-size: 26px;
}
.box-menu-label {
    margin-top: -8px;
}
.sidebar h2, .sidebar h3 {
	padding:8px 12px;
	border-radius:0;
	font-weight:normal;
}
.card-thumb img {
    width: 90%;
}
.card-title {
	padding-top:4px;
}
.post-date {
	color:#0062b0;
	font-size: 16px;
}

/*検索結果*/
.entry-card .admin-pv {
	display:none;
}
.blank-box {
	border-width: 0 0 0 0px!important;
	padding: 0.6em 1em;
    border-color: #777;
	color:#FFFFFF;
    background-color: #0062b0!important;
}

#custom_html-2 > div {
	border:2px solid #0062b0;
    border-radius: 15px;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    padding: 5px 10px;
}
#custom_html-2 > div:active {
	position:relative;
	top:5px;
}
#custom_html-2 > div > a {
    text-decoration: none;
    color: #0062b0!important;
	display:block;
}

/************************************
** メニュースライダー（slick.css上書き）
************************************/

/*前へボタン*/
.slick-prev{
	top:55% !important;
	left:40% !important;	
	height:60px !important;
	width:60px !important;
	border: solid 2px #fff !important;
	border-radius:100% !important;
	background:#1074ca !important;
	z-index:9;

}

.slick-prev:before {
    font-family: none !important;
	content: "<" !important;
}

/*次へボタン*/
.slick-next{
	top:55% !important;
	right:40% !important;	
	height:60px !important;
	width:60px !important;
	border: solid 2px #fff !important;
	border-radius:100% !important;
	background:#ca4c10 !important;

}

.slick-next:before {
    font-family: none !important;
    content: ">" !important;
}

/*ここから独自css 各ボックス要素の設定*/
.menu-slider-box{
	position: relative;
	
}
a.menu-slider-a{
	text-decoration: none;
}

/*画像に載せる記事タイトル*/
.menu-slider-title{
	position: sticky;
	bottom:55%;
	text-align: center;
	font-size:30px;
	padding-left: 30px;
	padding-right: 30px;
	margin:0 15px;
	color:white;
	background-color:rgba( 70, 70, 70, 0.55 );
}

/*新着記事に日付を表示*/
.new-entry-card-date {
  	display: block;
	color:gray;
}
.post-update {
	display:none;
}

/*834px以下*/
@media screen and (max-width: 834px){
/************************************
** メニュースライダー（slick.css上書き）
************************************/
/*前へボタン*/
.slick-prev{

	height:40px !important;
	width:40px !important;
	left:36% !important;
	border-radius:20px !important;
	background:#1074ca !important;

}

.slick-prev:before {
    font-family: none !important;
	content: "＜" !important;
	 font-size:14px !important;

}
/*次へボタン*/
.slick-next{
	top:55% !important;
	right:36% !important;	
	height:40px !important;
	width:40px !important;
	border-radius:20px !important;
	background:#ca4c10 !important;

}

.slick-next:before {
    font-family: none !important;
    content: "＞" !important;
	 font-size:14px !important;

}

/*画像に載せる記事タイトル*/
.menu-slider-title{
	position: sticky;
	bottom:55%;
	text-align: center;
	font-size:18px;
	padding-left: 15px;
	padding-right: 15px;
	margin:0 6px;
	color:white;
	background-color:rgba( 70, 70, 70, 0.55 );
}
	
}

/*メニュースライダー　ここまで*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*モバイルヘッダーの色*/
.mobile-menu-buttons {
    background-color: #0062b0!important;
    color: #ffffff!important;
}
.mobile-menu-buttons .menu-icon {
    padding-top: 0px!important;
    font-size: 22px!important;
}
.mobile-menu-buttons .menu-caption {
	margin-top:-2px;
	font-size:12px;
}

/* モバイルトップメニューの背景色と高さを変更*/
.slicknav_menu {
    background: #0062b0;　
    padding: 0px;
}
.slicknav_btn {
     background-color: #0062b0;
}
.slicknav_menu .slicknav_menutxt,.slicknav_btn {
	text-shadow:none!important;
}
/*コンテンツメインの余白*/
.main {
	padding:0 15px;/*0px 15px*/
	background-color:transparent!important;
	margin:-15px 0;
}
/*グローバルメニュー*/
.navi-in a {
	font-size:20px;
}
#navi .navi-in a:hover, #footer a:hover {
    background-color: rgba(255,225,0,.2)!important;
    border-bottom: 3px solid #ffe100!important;
}
.btn {
	display:block!important;
}
.btn:active {
	position:relative!important;
	top:5px!important;
}
.btn-blue {
	padding:10px;
	width:200px;
	background:#0062b0;color:#ffffff;
	border-radius:50px;
	text-align:center;
	margin:30px auto;
	font-family: "Kosugi Maru" ,sans-serif;
}

/*フッター*/
.footer-bottom {
	margin-top:0px;
}
.footer-bottom.fnm-text-width .menu-footer li a {
    padding: 2px 10px;
	font-family: "Kosugi Maru" ,sans-serif;
	font-weight:normal;
}
.appeal-content {
    max-width: 740px;
    background-color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0 10px;
    padding: 2em;
    text-align: center;
    border-radius: 4px;
    display: block;
}
#footer {
	background:#0062b0;
}
.copyright {
	color:#ffffff!important;
}

/*画像の表示サイズ*/
.contents_full {
	width: 49%;
	display: table-cell;
	float: left;
	margin-bottom:10px;
}
.contents_full2 {
	width: 49%;
	display: table-cell;
	float: left;
	margin-left:2%;
	margin-bottom:10px;
}
.contents_full:active,.contents_full2:active {
	position:relative;
	top:5px;
}
.sanka {
	background-color: rgb(195, 13, 35);
	text-align: center;
	color: rgb(255, 255, 255);
	padding: 20px 10px;
	font-size: 30px;
}
#bp_core_login_widget-2 > div.bp-login-widget-user-links > div.bp-login-widget-user-link > a {
	text-decoration:none;
}
#bp_core_login_widget-2 > div.bp-login-widget-user-links > div.bp-login-widget-user-logout > a {
	-webkit-appearance: none;
    border: 1px solid #ddd;
    background-color: #f5f8fa;
    color: #333;
    font-size: 18px;
    font-family: "Kosugi Maru" ,sans-serif;
	text-decoration:none;
	padding: 5px 10px;
}

.logo-menu-button.menu-button{
	background-image: url(https://www.unojuku.com/wp-content/uploads/2022/08/logo.png);
	background-size: auto 50px;
	background-position: center;
	background-repeat: no-repeat;
}
.mobile_tel{
	display:none;
}
.mobile_show{
	display:block;
}
.main_title {
	font-size: 24px;
    font-weight: bold;
    color: #0062b0;
    line-height: 28px;
	margin-bottom:8px;
}

.deco {
    background: url(https://www.unojuku.com/wp-content/uploads/2022/08/bg_deco_top-1.png) repeat-x center top / 1000px,url(https://www.unojuku.com/wp-content/uploads/2022/08/bg_deco_bottom.png) repeat-x center bottom / 1000px;
	background-color:#f6e2b5;
    padding-top: 194px;
    padding-bottom: 140px;
}
.deco > div {
	background-color:#29abe2;
	color:#FFF;
	margin:auto 0;
	padding:15px;
}

section > div {
	margin:auto 0;
	padding:15px 40px;
}
.deco_title {
	font-family: "Kosugi Maru" ,sans-serif;
	text-align:center;
	font-size:30px;
	line-height:36px;
	font-weight:bold;
	margin-top:20px;
	margin-bottom:20px;
}
/*見出しマージントップ０*/
.article h2 {
	margin-top:0px;
	padding:15px 25px;
}
.wp-block-image {
	margin: 0 auto 1em!important;
    max-width: 800px;
}

.entry-card-title, .related-entry-card-title {
	font-size:24px;
}

.toc {
	background:#FFFFFF;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		display: none;
	}
    .mobile_tel{
		display:block;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.fa-close:before, .fa-multiply:before, .fa-remove:before, .fa-times:before, .fa-xmark:before {
		content: "\f00d";
		border: 2px solid #FFFFFF;
		padding: 4px 10px;
		border-radius: 50%;
	}
	.menu-close-button {
		padding: 40px 0 20px!important;
	}
	.breadcrumb {
		display:none;
	}
	.main {
		padding:px!important;/*5px 10px*/
	}
	section > div {
		margin:-15px 0;
		padding:15px;
	}
	.wrap {
    	margin: 0;
	}
	/*モバイルスライドメニュー*/
	.menu-close-button {
		padding: 20px 0;
	}
	.menu-content {
		overflow: auto;
		position: fixed;
		top: 0;
		z-index: 9999;
		width: 220px;
		text-align:center;
		max-width: 400px;
		height: 100%;
		background: rgb(0,98,182,0.9)!important;
		color:#FFF!important;
		transition: .3s ease-in-out;
		opacity: 1;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		font-family: "Kosugi Maru" ,sans-serif;
		font-weight:normal;
	}
	.menu-drawer a {
		color: #666666!important;
		text-decoration: none;
		padding: 12px 7px;
		font-family: "Kosugi Maru" ,sans-serif;
		font-weight:normal;
		display: block;
		justify-content: center;
		align-items: center;
		background:#ffffff;
		border-radius:40px;
	}
	.menu-drawer a i {
		color:#0062b0!important;
	}
	.menu-drawer li {
		margin:20px 10px;
	}
	.menu-drawer a:hover {
		background:rgb(0,98,176,0.6);
	}
	.menu-content .menu-drawer {
		padding: 0 10px 30px;
	}
	.menu-content .menu-drawer ul {
		display: block;
  		flex-wrap: wrap;
	}
	.mobile-menu-buttons .menu-icon {
		padding-top:2px;
		font-size: 28px;
	}
	/*モバイルフッター*/
	.navi-footer-in > .menu-footer li.menu-item {
		margin:6px 0px;
	}
	/*画像下のマージン*/
	.body .wp-block-image {
		margin-bottom:1em;
	}
	.sanka {
		font-size: 18px;
		padding: 20px 10px;
	}
	.entry-card-title, .related-entry-card-title {
		font-size:18px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.contents_full {
		width: 100%;
		padding:0 10px;
	}
	.contents_full2 {
		width: 100%;
		padding:0 10px;
		margin:0px auto 10px;
	}
	.wp-block-image img {
    	margin-top: 0px;
	}
}







/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
  position: relative;
  height: 100%; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  /* overflow: hidden; コンテナからはみ出した要素を隠す */
}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: rgb(247,209,224,0.3); /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(247,209,224,0.3);
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1000deg);
  }
}