/*
Theme Name: Seiji
Theme URI: 
Author: Kaori
Author URI: 
Description: This is a child theme of Himawari
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: himawari
Text Domain: seiji
Tags: 
*/

/* Basic Styles */
html {
    scroll-behavior: smooth;
}

main {
    margin-top: 0;
}

.scroll-margin {
    scroll-margin-top: 60px!important;
}

a {
    text-decoration: none;
    cursor: pointer !important;
}

/* hover effects */
header a:hover {
    color: var(--wp--preset--color--light-blue);
}

footer a:hover {
    color: #BABABA!important;
}

footer .button1 a:hover {
    color: var(--wp--preset--color--charcoal) !important;
}

ul li,
.link__hover img {
    transition: transform 0.3s ease;
}

ul li:hover,
.link__hover :hover {
    transform: translateY(-3px);
}

/* button */
.wp-element-button,
.wp-block-button__link {
    transition: all 0.3s ease !important;
}

.wp-block-button {
    padding: 10px 20px !important;
}

.wp-element-button:hover, a.wp-block-button__link:hover {
    color: var(--wp--preset--color--charcoal) !important;
}

.button1 .wp-block-button .wp-block-button__link {
    color: var(--wp--preset--color--charcoal);
    background-color: var(--wp--preset--color--light-blue-2);
}

.button1 .wp-block-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--light-blue);
    color: var(--wp--preset--color--charcoal);
}

.button2 .wp-block-button .wp-block-button__link {
    color: var(--wp--preset--color--white);
    background-color: var(--wp--preset--color--dark-blue);
}

.button2 .wp-block-button .wp-block-button__link:hover {
    color: var(--wp--preset--color--charcoal);
    background-color: var(--wp--preset--color--light-blue-2)
}

/* Header */
.home__header {
    justify-content: center
}

@media (min-width: 920px) {
    .home__header {
        justify-content: space-between !important;
    }
}

/* welcome section */

.welcome {
    padding: 0;
}

 .hero-photo {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

@media (min-width: 900px) and (max-width: 1200px) {
  .welcome {
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch;
  }
}

@media (max-width: 900px) {
  .hero-columns {
    flex-wrap: wrap !important;
  }

  .hero-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .hero-photo {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .hero-photo img {
    width: 100%;
    height: auto;
  }
}

/* About section mountain */
.about_us{
    position: relative;
}

.mountain {
    position: absolute;
    top: -1rem;
    left: 50%;
    bottom: -1rem;
    translate: calc(-50%);
	width: 100%;
	height: auto;
    filter: blur(60px);
    border-radius: 50% ;
	background:linear-gradient(45deg, #9CC6D6, #e1eef3,#8ebc68);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 12s ease infinite;
    z-index: -1;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* About image Slider */
.swiper-slide img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    min-width: 0;
    border-radius: 5px;
    z-index: 0 !important;
}

.swiper-button-pause {
    bottom: 7px;
    right: 7px;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.swiper-pagination-bullet {
    background-color: gray!important;
}

@media (max-width: 781px) {
    .about__img {
        margin: 0 10rem !important;
    }
}

@media (max-width: 600px) {
    .about__img {
        margin: 0 5rem !important;
    }
}

@media (max-width: 500px) {
    .about__img {
        margin: 0 2rem !important;
    }
}

/* About Seiji Image */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 300px; /* Adjust as needed */
    overflow: hidden;
}

.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    opacity: 0;
    animation: slideshow 8s ease-in-out infinite;
}

.slideshow-image:nth-child(1) { animation-delay: 0s; }
.slideshow-image:nth-child(2) { animation-delay: 4s; }

@keyframes slideshow {
    0%, 25% { opacity: 0; }
    30%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Our Menu */
.our_menu .wp-block-separator {
    border-top: 1px solid;
}

.menu_column {
    flex-wrap: nowrap !important;
}

@media (max-width: 600px) {
    .our_menu {
        padding: 1.5rem .25rem !important;
    }
}

/* Menu svg icon */
.svg-icon {
    max-width: 100%;
    height: auto;
    overflow: visible;
  }

/* footer */

@media (max-width: 800px) {
    .footer__container {
        justify-content: center;
    }
}

footer.wp-block-template-part {
    margin-top: 0;
}

/* Change social icons to white */
.wp-block-social-links .wp-social-link a,
.wp-block-social-links .wp-social-link a:hover {
  color: var(--wp--preset--color--dark-blue)!important;
}

/* Optional: Change the background of social icons if needed */
.wp-block-social-links .wp-social-link {
  background-color: white;
}

/* Ensure the SVG icons themselves are white */
.wp-block-social-links .wp-social-link svg {
  fill: var(--wp--preset--color--dark-blue)!important;
}

/* mobile menu */
body .wp-block-navigation__responsive-container {
    background-color: #18254eda !important;/* change Background of mobile menu*/
    color: white !important;
    font-weight: 700;
    font-size: 1.5rem;
}

body .wp-block-navigation__responsive-container-open,
body .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    width: 55px !important;
    height: 55px !important;
    background-color: #9cc6d6cf !important;/* Change color of hamburger btn background */
    border-radius: 999px !important;
    z-index: 99999 !important;
}

body .wp-block-navigation__responsive-container-open svg,
body .wp-block-navigation__responsive-container-close svg {
    color: #333333;
    height: 48px !important;
    width: 48px !important;
    padding-left: 4px !important;
    padding-top: 3px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-start;
    padding-top: 12vh!important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
    font-size: 1.5rem !important;
}


.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    gap: 1rem;
}

.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
    color: #333333;
}

.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-button {
    margin-top: 5rem;
}

/* adjust the break point of mobile menu */
@media (min-width: 920px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none;
    }
  }

  /* Show the mobile menu toggle button below 850px */
  @media (max-width: 920px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    
    /* Hide the desktop menu below 850px */
    .wp-block-navigation__container {
      display: none;
    }
    
    /* Ensure the mobile menu container is full width */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open {
      display: flex;
    }
    .footer__nav {
        display: flex;
        
    }
    .order_now {
        position: fixed;
        right: .75rem;
        bottom: .75rem;
        z-index: 9999;
    }
  }

/* fade-in effect for elements */
.page-id-2 .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
 }
  
 /* Visible state: elements are shown */
 .page-id-2 .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
 }

 /* follow instagram button */
 #sb_instagram .sbi_follow_btn a {
    background-color: var(--wp--preset--color--dark-blue) !important;
 }

 #sb_instagram .sbi_follow_btn a:hover {
    color: var(--wp--preset--color--charcoal);
    outline: none;
    box-shadow: inset 0 0 10px 20px var(--wp--preset--color--light-blue-2);
 }

 .instagram-section {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.instagram-section #sb_instagram {
  width: 100% !important;
  max-width: none !important;
}

/* Contact Form */
.wpcf7 input,
.wpcf7 textarea {
    background-color: var(--wp--preset--color--white);
}

.wpcf7 textarea {
    width: 600px;
}

.wpcf7-form .wpcf7-submit {
    background-color: var(--wp--preset--color--dark-blue);
}

.wpcf7-form .wpcf7-submit:hover {
    background-color: var(--wp--preset--color--light-blue);
}