@charset "UTF-8";
/*
 Theme Name: GROWN [SANGO-CHILD]
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 2.19.5
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

:root {
	--colorTxt: #000000;
	--colorMain:#228dc2;
	--colorAccent: #228dc2;
	--colorSub: #114a60;
	--colorGradation: linear-gradient(145deg, var(--colorAccent) 0%, var(--colorSub) 100%);
	--colorGradationLight: linear-gradient(130deg, rgba(0, 67, 145, 0.9) 0%, rgba(0, 54, 117, 0.9) 50%, rgba(0, 54, 117, 0.9) 100%);
	--colorBlack: #000000;
	--colorWhite: white;
}

/*all page*/
body{
	max-width:100svw;
	overflow-x:hidden;
	letter-spacing:.1em;
}
h1,h2,h3,h4,h5,p,a{
	word-break: keep-all;
	line-break: strict;
	overflow-wrap: break-word;
}
#content{
	margin-top:70px !important;
}
div#container {
    overflow-x: hidden;
}
.home #content{
	margin-top:0 !important;
}
@media only screen and (min-width: 769px) {
    .one-column #main {
        max-width: 100%;
    }
}
#drawer__content, .widget{
	background:var(--color-bg-dark);
}
.widget ul li a{
	color:var(--color-main);
	text-align:center;
}
.footer-meta ul li a, .related-posts .splide__slide a:hover,.related-posts li a:hover{
	color:var(--color-main);
}
#breadcrumb{
	background:transparent;
}
.single-title, .page-title, .search-title, .c_linkto:hover, .c_linkto:link, .c_linkto:visited, .nofound-title i, #breadcrumb li:after, .related-posts .splide__slide a, .related-posts li a{
	color:var(--color-txt);
}
.search-title .fa-search, .searchform__submit, .footer .wp-block-search .wp-block-search__button, .sidebar .wp-block-search .wp-block-search__button, .drawer .wp-block-search .wp-block-search__button, .withtag_list > span, .btn-raised a, .raised{
	color:var(--color-bg);
	background:var(--colorSub);
}
.c_linkto{
	background:var(--color-bg-dark);
	color:var(--color-txt);
}
#content.one-column, #entry, .nofound-title, .nofound-contents, #archive_header{
	background:transparent;
	color:var(--color-txt);
}
.center-left{
	text-align:left;
}
.center-left br{
	display:none;
}
@media screen and (min-width: 750px){
	.center-left{
		text-align:center;
	}
	.center-left br{
		display:block;
	}
}
.margin0{
	margin:0 !important;
	line-height:1.2em;
}
.button-slant a {
    padding: .5em;
    border-radius: 0;
    border-bottom: .4em solid #333333;
	font-size:1.2em;
	font-weight:normal;
	letter-spacing: .2em;
}
.sgb-box-simple .sgb-box-simple__body .wp-block-button.button-slant {
	margin: 0;
}
.entry-content h2{
	margin:0;
	line-height:1.2em;
}
#contetn a:hover{
	transform:scale(1.05);
}
a.footer-menu__btn.dfont {
    display: none;
}
.fa-magnifying-glass:before, .fa-search:before {
    content: "\f002";
    color: white;
}
h1.page-title{
	font-size:clamp(2em, 4vw, 4vw);
	color:var(--colorMain);
	line-height:1.2em;
}

/*TOP page*/
.home .page-title{
	display:none;
}
#content.page-forfront{
	padding:0;
}
.home div#inner-content, .home .entry-content {
    margin: 0 !important;
	width: 100% !important;
}
#content.page-forfront .entry-content{
	max-width:100%;
}
.top-menu-image .wp-element-caption {
    background: linear-gradient(0deg, #000000d6, #0000) !important;
}
.top-menu-image a img:hover {
    filter: saturate(1.5) contrast(2);
    transition: filter 0.5s ease;
}
@media screen and (max-width:600px) {
	.home .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
		width:100%;
	}
}


/*contactform7*/
.wpcf7 form{
	padding: 5% 5% 0;
	background: var(--color-bg-dark);
	border-radius: var(--wp--custom--rounded--small);
}
.wpcf7-not-valid-tip{
	color:var(--color-accent);
}
input[type="submit"] {
	width:100%;
	padding:0.8em;
	background:var(--colorMain);
	color:white;
	font-weight:bold;
	font-size:1.2em;
	border:none;
	transform:scale(1);
}
.text-color-red{
	color:var(--colorMain);
}

/*404page*/
.error404 .notfound{
	box-shadow:none;
}
.nofound-title{
	display:none;
}
.error404 .nofound-img{
	display:none;
}
.withtag_list ul{
	background:var(--color-bg-dark);
}
.error404 #inner-content main {
    width: 100%;
    display: block;
    padding: 0;
}

/*shareボタン*/
.sns-btn{
	display:none;
}

/*ヘッダーコンテンツブロック*/
.header-menu {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	max-width:100svw;
	overflow-x:hidden;
	animation:header-menu-slideIn 2s;
}
@keyframes header-menu-slideIn {
  0%{
	  opacity: 0;
	  transform: translateY(-100px);
  }
  100% {
	  opacity: 1;
	  transform: translateY(0);
  }
}
.header-menu-button {
    display: flex;
    justify-content: end;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	width: 50px;
	height: 50px;
	backdrop-filter: blur(10px);
	padding: 10px;
	color:var(--colorMain);
	background-size:400% 400%;
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 100%);
	box-shadow: 0 0 15px rgba(255, 255, 255, .2);
}
button.wp-block-navigation__responsive-container-close svg {
	color: var(--colorWhite);
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}
.wp-block-site-logo.is-default-size img {
	width: 250px;
}
@media screen and (min-width:1200px) {
	.wp-block-navigation__responsive-container-close svg,
	.wp-block-navigation__responsive-container-open svg {
		width: 60px;
		height: 60px;
	}
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	width: 80%;
	padding: 0 0 15px 15px;
	margin-left: 20%;
	text-align: left;
	font-weight: bold;
	background: var(--colorGradation);
	color: white;
	backdrop-filter: blur(10px);
	animation: slideInRight .3s forwards;
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@media screen and (min-width:1200px) {
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		width: 50%;
		margin-left: 50%;
	}
}
.wp-container-core-navigation-is-layout-1.wp-container-core-navigation-is-layout-1 {
	flex-direction: row-reverse !important;
}
.wp-block-navigation li span {
	font-size: 1.2em;
	font-weight:bold;
}
.wp-block-navigation li a {
    transition: all 0.3s ease;
}
.wp-block-navigation li a:hover{
	transform:scale(1.1, 1.1);
}
ul.wp-block-navigation-submenu {
	margin-left:1em;
}
ul.wp-block-navigation-submenu li a span:before {
	content: "- ";
}
ul.wp-block-navigation-submenu li a span {
	padding: .2em 0;
	font-size: 1em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	padding: .5em 0 0 0;
}
form.wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
    margin-top: 1.4em;
}
button.wp-block-search__button.has-icon.wp-element-button {
    background: var(--colorMain);
}
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
	border: none;
	width: 100%;
}
form.wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
	width: 95%;
}
.wp-block-search .wp-block-search__input {
	border: none;
	border-radius: 6px 0 0 6px;
}
.wp-block-search__button {
	margin-left: 0;
	padding: 10px;
	border-radius: 0 6px 6px 0;
}

/*フッター*/
.footer .ft_widget, .footer .my_popular_posts{
	margin: 0;
}
#footer-menu{
	padding:0 10px 10px;
}

/*スクロール時に左右から交互に画像表示するアニメーション*/
.scroll-right {
  opacity: 0;
  transform: translateX(50%) scale(1.5); /* 右にスライド */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-left {
  opacity: 0;
  transform: translateX(-50%) scale(1.5); /* 左にスライド */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-right.show-image, .scroll-left.show-image {
  opacity: 1;
  transform: translateX(0) scale(1); /* 元の位置に戻す */
}


/*スクロール時に見出し表示するアニメーション*/
.wp-block-heading span{
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
	transform:translateY(-.5em);
	display:inline-block;
}
.wp-block-heading.show-heading span {
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform:translateY(0);
}
.wp-block-heading.show-heading span:nth-child(1) { transition-delay: 0.05s; }
.wp-block-heading.show-heading span:nth-child(2) { transition-delay: 0.1s; }
.wp-block-heading.show-heading span:nth-child(3) { transition-delay: 0.15s; }
.wp-block-heading.show-heading span:nth-child(4) { transition-delay: 0.2s; }
.wp-block-heading.show-heading span:nth-child(5) { transition-delay: 0.25s; }
.wp-block-heading.show-heading span:nth-child(6) { transition-delay: 0.3s; }
.wp-block-heading.show-heading span:nth-child(7) { transition-delay: 0.35s; }
.wp-block-heading.show-heading span:nth-child(8) { transition-delay: 0.4s; }
.wp-block-heading.show-heading span:nth-child(9) { transition-delay: 0.45s; }
.wp-block-heading.show-heading span:nth-child(10) { transition-delay: 0.5s; }
.wp-block-heading.show-heading span:nth-child(11) { transition-delay: 0.55s; }
.wp-block-heading.show-heading span:nth-child(12) { transition-delay: 0.6s; }
.wp-block-heading.show-heading span:nth-child(13) { transition-delay: 0.65s; }
.wp-block-heading.show-heading span:nth-child(14) { transition-delay: 0.7s; }
.wp-block-heading.show-heading span:nth-child(15) { transition-delay: 0.75s; }
.wp-block-heading.show-heading span:nth-child(16) { transition-delay: 0.8s; }
.wp-block-heading.show-heading span:nth-child(17) { transition-delay: 0.85s; }
.wp-block-heading.show-heading span:nth-child(18) { transition-delay: 0.9s; }
.wp-block-heading.show-heading span:nth-child(19) { transition-delay: 0.95s; }
.wp-block-heading.show-heading span:nth-child(20) { transition-delay: 1.0s; }
.wp-block-heading.show-heading span:nth-child(21) { transition-delay: 1.05s; }
.wp-block-heading.show-heading span:nth-child(22) { transition-delay: 1.1s; }
.wp-block-heading.show-heading span:nth-child(23) { transition-delay: 1.15s; }
.wp-block-heading.show-heading span:nth-child(24) { transition-delay: 1.2s; }
.wp-block-heading.show-heading span:nth-child(25) { transition-delay: 1.25s; }
.wp-block-heading.show-heading span:nth-child(26) { transition-delay: 1.3s; }
.wp-block-heading.show-heading span:nth-child(27) { transition-delay: 1.35s; }
.wp-block-heading.show-heading span:nth-child(28) { transition-delay: 1.4s; }
.wp-block-heading.show-heading span:nth-child(29) { transition-delay: 1.45s; }
.wp-block-heading.show-heading span:nth-child(30) { transition-delay: 1.5s; }

/* スクロールボタンアニメーション */
a.wp-block-button__link.wp-element-button{
	opacity:0;
	transition: opacity 1s ease, transform 1s ease;
}
a.wp-block-button__link.wp-element-button.show-button {
	opacity:1;
}

/* スクロール段落アニメーション */
.entry-content p {
  opacity: 0;
  transform: translateY(-2em);
  transition: opacity 1s ease, transform 1s ease;
  display: inline-block;
  width: 100%; /* 幅を親に合わせる */
}
.entry-content p.show-paragraph {
  transform: translateY(0);
  opacity: 1;
}

/*ページのフェードイン*/
#container.page-fade-in{
	opacity: 1;
	transform: unset;
}
#container{
	opacity: 0;
	transition: opacity 1s ease, transform 0s ease;
}