/*
Theme Name: scooter-refresh
Theme URI: https://blossomthemes.com/wordpress-themes/styled-fashion/
Template: sarada-lite
Author: Blossom Themes
Author URI: https://blossomthemes.com/
Description: If you're a fashion-savvy individual who wants an easy-to-use theme, Styled Fashion is the perfect theme for you. Whether your blog covers topics like travel, lifestyle, fashion, beauty or food - this theme will ensure that your content steals the show every time. With unlimited colors and 1000+ fonts available, you can design a site that truly reflects who you are as a business. Additionally, you can make your Instagram posts more popular and thereby increase the number of followers. By utilizing the predefined newsletter spot, you can easily grow an email list and stay connected with your audience. It is also compatible with WooCommerce if you want to build an online store. Styled Fashion is responsive, SEO-friendly, speed-optimized, translation ready, and RTL-compatible. Check the demo at https://blossomthemes.com/theme-demo/?theme=styled-fashion, read the documentation at https://docs.blossomthemes.com/docs/sarada-lite/, and get support at https://blossomthemes.com/support-ticket/.
Version: 1.0.1
Requires at least: 4.7
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: styled-fashion
Tags: blog,one-column,two-columns,right-sidebar,left-sidebar,footer-widgets,custom-background,custom-header,custom-menu,custom-logo,featured-images,threaded-comments,full-width-template,rtl-language-support,translation-ready,theme-options,photography,e-commerce
*/

:root {
  --primary-color: #d47a57;
  --primary-color-rgb: 212, 122, 87;
  --secondary-color: #d69f81;
  --secondary-color-rgb: 214, 159, 129;
  --font-color: #171717;
  --font-color-rgb: 23,23,23;
  --background-color: #fff;
  --background-color-rgb: 255, 255, 255;
  --primary-font: 'Lato', sans-serif;
  --secondary-font: 'Caveat';
}

.site-header.style-four .header-mid .site-branding {
    max-width: 100%;
    flex: auto;
  }

  .site-header.style-four .header-mid .main-navigation {
    flex: initial;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-btn {
    padding-left: 30px;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-title {
    display: none;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-btn .toggle-bar {
    right: 0;
  }

  .site-header.style-four .header-mid .main-navigation .nav-menu {
    display: block;
  }

  .site-header.style-four+.site-banner {
    background: none;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: none;
  }
  
  .site-header.style-four .header-mid {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .site-header.style-four .header-mid .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .site-header.style-four .header-mid .site-branding {
    display: flex;
    flex: initial;
    /* max-width: 200px; */
  }
  .site-header.style-four .header-mid .site-branding.has-logo-text {
    flex-direction: column;
  }
  @media(min-width:768px){
    .site-header.style-four .header-mid .site-branding.has-logo-text {
      flex-direction: row;
      align-items: center;
    }
  }
  
  .site-header.style-four .header-mid .site-branding .site-title-wrap {
    padding-left: 15px;
    text-align: left;
  }
  
  .site-header.style-four .header-mid .main-navigation {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: 5%;
  }
  @media(min-width:1024px){
    .site-header.style-four .header-mid .main-navigation .nav-menu {
      display: flex;
      flex-wrap: wrap;
    }
  }
 
  
  .site-header.style-four .header-mid .header-right {
    display: flex;
    flex-wrap: wrap;
    flex: initial;
    align-items: center;
  }
  
  .site-header.style-four .header-social {
    display: none;
    position: fixed;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999;
  }
  
  .site-header.style-four .header-social .social-networks {
    flex-direction: column;
  }
  
  .site-header.style-four .header-social ul li {
    font-size: 1em;
  }

  .site-header.style-four .header-social ul li a {
    padding: 0;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 1em;
    color: rgba(var(--font-color-rgb), 0.8);
    border: 1px solid rgba(var(--font-color-rgb), 0.1);
    background: #fff;
  }
  
  .site-header.style-four .header-social ul li a:hover {
    background: var(--primary-color);
    color: #fff;
  }

  .site-banner.style-four {
    padding: 100px 12%;
    background: rgba(var(--secondary-color-rgb), 0.4);
  }
  
  .site-banner.style-four .item {
    position: relative;
    padding: 15px 0;
  }
  
  .site-banner.style-four .item .banner-img {
    padding: 5px 10px;
  }
  
  .site-banner.style-four .item img {
    width: auto;
    border: 5px solid #fff;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  
  .site-banner.style-four .middle-item .item img {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  
  .site-banner.style-four .item .banner-caption {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 85px;
    width: 100%;
    left: 0;
    text-align: left;
    background: none;
    min-height: auto;
  }
  
  .site-banner.style-four .item .banner-caption .category {
    display: inline-block;
    margin-bottom: 0;
  }
  
  .site-banner.style-four .banner-caption .category a {
    position: relative;
    z-index: 1;
    background: #fff;
    margin-bottom: 0;
    margin-top: 10px;
  }
  
  .site-banner.style-four .banner-caption .category a::after {
    content: "";
    background: rgba(var(--primary-color-rgb), 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: all ease 0.35s;
    -moz-transition: all ease 0.35s;
    transition: all ease 0.35s;
  }
  
  .site-banner.style-four .banner-caption .category a:hover::after {
    background: var(--primary-color);
  }
  
  .site-banner.style-four .banner-caption .banner-title {
    font-size: 1.56em;
    max-width: calc(100% - 20px);
    line-height: 1.9;
    margin: 0;
  }
  
  .site-banner.style-four .banner-caption .banner-title a {
    display: inline;
    background: #fff;
    padding: 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  .site-banner.style-four .owl-carousel .owl-nav .owl-prev {
    left: -8%;
  }
  
  .site-banner.style-four .owl-carousel .owl-nav .owl-next {
    right: -8%;
  }

  .site-banner.style-four .banner-caption .banner-title {
    font-size: 1.33em;
  }

  .site-banner.style-four .item .banner-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .site-banner.style-four .item .banner-caption {
    bottom: 40px;
  }

  .site-banner.style-four .item .banner-img {
    padding-left: 5px;
    padding-right: 5px;
  }
.footer-b {
    background: #085e36;
    padding: 15px 0;
}
.site-banner.style-four .banner-caption .banner-title {
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: bold;
}
.banner-caption .category {
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.grid-layout .site-main article .entry-title {
    font-size: 1.3rem;
    line-height: 1.55;
    font-weight: bold;
}
.grid-layout .site-main article {
    padding: 1rem;
    background: #a1d4be;
    border-radius: 1rem;
    border: solid 1px;
}
.grid-layout .site-main article img {
    border-radius: 0.65rem;
    border: solid 3px #fff;
    height: 15rem;
    object-fit: cover;
}
article .category, .single .site-content .entry-header .category {
    background: unset;
}
.site-main article .entry-content p {
    font-size: 16px;
}
.btn-readmore::before, .btn-readmore::after {
    display: none;
}
.button-wrap a {
    text-align: center;
    background: #085e36;
    padding: 0.5rem 3rem;
    font-size: 1rem;
    border-radius: 5rem;
    display: block;
    margin: 0 auto;
    max-width: 12rem;
    border: solid 2px #fff;
    color: #fff;
}
  @media screen and (max-width: 767px) {
    /*============================
	SITE HEADER STYLE TEN
	============================*/
	.site-header.style-two .container {
		padding-left: 15px;
		padding-right: 15px;
		max-width: 420px;
	}

	.site-header.style-two .secondary-menu {
		flex: initial;
		order: 2;
	}

	.site-header.style-two .site-branding {
		text-align: left;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.site-header.style-two .site-branding .site-logo + .site-title-wrap {
		padding-left: 15px;
	}

	.site-header.style-two .right {
		flex: auto;
		justify-content: center;
		width: 100%;
		margin-top: 15px;
		order: 3;
    }
    
    /*==========================
	SITE BANNER STYLE TWO
	==========================*/
	.site-banner.style-two .item-wrap {
		max-width: 420px;
		margin: 0 auto;
		padding: 0 15px;
	}

	.site-banner.style-two .banner-caption {
		padding: 20px;
    }
 
}

/* Logo overflow issue */

@media only screen and (max-width:600px) {
 .site-logo	.custom-logo-link img {
      width: auto;
	}
	.custom-logo-link {
		margin-right: 40px;
	}
}



footer#colophon,.header-img-wrap {
    position: relative;
    overflow: hidden; /* スクーターが画面外にいる時の横スクロールを防止 */
}

footer#colophon:before {
    background: url(https://scooter-refresh.com/wp-content/uploads/2026/02/bk.png) no-repeat center bottom / cover;
    content: "";
    display: block;
    width: 100%;
    height: 30rem;
    position: relative;
    z-index: -1;
}

/* スクーターのアニメーション設定 (::after) */
footer#colophon::after,div#content .header-img-wrap:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 5rem; /* 地面（背景画像）からの高さ調整 */
    z-index: 2;
    
    /* 画像の設定 */
    width: 100px; 
    height: 60px; 
    background: url(https://scooter-refresh.com/wp-content/uploads/2026/02/scoo.png) no-repeat center/contain;
    
    /* アニメーション：横移動とバウンドを同時に適用 */
    animation: 
        move-x-left 12s linear infinite,
        bounce-y 0.3s cubic-bezier(0.32, -0.02, 0.57, 1.23) infinite alternate;
}
div#content .header-img-wrap:before {
    top: unset;
    left: unset;
    width: 100px;
    height: 35px;
    min-height: unset;
    z-index: -1;
    opacity: 1;
    bottom: 10rem;
}
/* 横方向の動き（右から左へ / 向きはそのまま） */
@keyframes move-x-left {
    0% { 
        right: -150px; 
        transform: scale(1); /* 左右反転を解除 */
    }
    100% { 
        right: 110vw; 
        transform: scale(1); 
    }
}

/* 上下のバウンド（跳ねる動き） */
@keyframes bounce-y {
    0% { 
        margin-bottom: 0;
        transform: scaleY(0.85); /* 着地：少し潰れる（右向き維持） */
    }
    100% { 
        margin-bottom: 35px; /* 跳ねる高さ */
        transform: scaleY(1); /* 空中（右向き維持） */
    }
}
.single.style-one .header-img-wrap::after, .single.style-three .header-img-wrap::after, .single.style-six .header-img-wrap::after, .page-template-default.style-one .header-img-wrap::after, .page-template-default.style-three .header-img-wrap::after, .page-template-default.style-six .header-img-wrap::after {
    opacity: 0.6;
}
.ran li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.ran li a:first-of-type {
    flex: 0 0 60px;
}
.ran li a:first-of-type img {
    border-radius: 50rem;
    height: 60px;
}
.ran li a:nth-of-type(2) {
    flex: 1;
    color: #333;
}

@media (max-width: 991px) {
.mv-left {
    background: #ffffff66;
    width: 100%;
    position: absolute;
    height: 50vh;
}
.mv-right,.mv-container {
    width: 100%;
    height: 50vh;
}
.mvcon {
    margin-bottom: 2rem;
}
}

ul.ran {
    margin-left: 0;
    padding-left: 0;
}
body {
    font-size: 15px;
}
.single .site-content > .header-img-wrap .entry-title, .single .site-main > .entry-header .entry-title, .page-template-default .site-content > .header-img-wrap .entry-title, .page-template-default .site-main > .entry-header .entry-title {
    font-weight: 600;
    font-size: 1.8em;
    letter-spacing: 2px;
    color: #fff;
}
.entry-content h2 {
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 2px;
    background: #73bf9d;
    padding: 0.5rem;
    color: #fff;
    margin: 3rem auto 1rem;
}
.single .site-main .entry-content ul {
    border: solid 1px #73bf9d;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}
.single .site-main .entry-content ul li {
    font-size: 16px;
}
.footer-b .container {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.footer-b .container a {
    color: #fff !important;
}
.footer-b .site-info {
    color: #fff;
}
 .page-template-default .site-main .entry-content {
    font-size: 0.8rem;
}
.widget ul li {
    font-size: 0.8rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}
h2.wp-block-heading {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    background: #73bf9d;
    color: #fff;
    padding: 0.5rem;
    font-weight: bold;
}
article .category a, .single .site-content .entry-header .category a {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.entry-content h3 {
    color: #328f65;
    font-size: 1.2rem;
    font-weight: bold;
}
.nav-links span.post-title {
    font-size: 0.8rem !important;
}
.nav-links div {
    border: solid 1px #73bf9d;
    border-radius: 1rem;
    padding: 1rem;
}
.site-branding .site-title-wrap .site-title a {
    display: none;
}
#secondary {
    border: solid 1px #73bf9d;
    border-radius: 1rem;
    padding: 1rem;
}
.site-banner.style-four .item img {
    height: 50vh;
    object-fit: cover;
}
.site-banner.style-four {
    padding: 30px 12%;
}
.single.style-one .header-img-wrap::after, .single.style-three .header-img-wrap::after, .single.style-six .header-img-wrap::after, .page-template-default.style-one .header-img-wrap::after, .page-template-default.style-three .header-img-wrap::after, .page-template-default.style-six .header-img-wrap::after ,.site-banner.style-four{
    background: linear-gradient(#15945cad, #15945cad), url(https://scooter-refresh.com/wp-content/uploads/2026/02/bk.png) no-repeat center center !important;
}
.archive .content-area .page-header .page-title {
    font-size: 1.2rem;
}
@media (max-width: 1025px) {
footer#colophon:before {
    height: 15rem;
}
	.single .site-content > .header-img-wrap .entry-title, .single .site-main > .entry-header .entry-title, .page-template-default .site-content > .header-img-wrap .entry-title, .page-template-default .site-main > .entry-header .entry-title {
    font-size: 1.4em;
}
.entry-content h2 {
    font-size: 1.2rem;
}
.post-navigation .nav-links .post-img {
    height: 6rem;
}
footer#colophon::after {
    bottom: 10rem;
}
}
@media (max-width: 1768px) {
    .post-navigation .nav-links .post-img {
        height: 4rem;
    }
}
.pan {
    max-width: 1170px;
    margin: 0 auto;
    font-size: 0.8rem;
}
@media screen and (max-width: 1199px) {
.pan{
        max-width: 1000px;
    }
}
@media screen and (max-width: 1024px) {
    .pan{
        max-width: 768px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media screen and (max-width: 767px) {
.pan{
        max-width: 420px;
    }
div#content .header-img-wrap:before {
    bottom: 6rem;
}
}
.breadcrumb-wrapper {
    display: none;
}


.home .pan {
    display: none;
}
.single .site-content > .header-img-wrap .entry-title, .single .site-main > .entry-header .entry-title, .page-template-default .site-content > .header-img-wrap .entry-title, .page-template-default .site-main > .entry-header .entry-title {
    color: #333;
    line-height: 1.2;
    font-size: 1.6rem;
}
article .category, .single .site-content .entry-header .category {
    margin-bottom: 0px;
}
@media (max-width: 767px) {
	.single .site-content > .header-img-wrap .entry-title, .single .site-main > .entry-header .entry-title, .page-template-default .site-content > .header-img-wrap .entry-title, .page-template-default .site-main > .entry-header .entry-title {
    font-size: 1.3rem;
}
.pan {
    display: flex;
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    flex-wrap: nowrap;
}
footer#colophon::after, div#content .header-img-wrap:before {

    animation: move-x-left 5s linear infinite, bounce-y 0.3s cubic-bezier(0.32, -0.02, 0.57, 1.23) infinite alternate;
}
}