@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*============================
 * フォントの読み込み
============================*/
@font-face {
	font-family: 'JohnRounded Pro Regular';
	src: url("fonts/JohnRounded-Pro-Regular.woff") format("woff"); 
}

@font-face {
	font-family: 'Spatchers-Regular';
	src: url("fonts/Spatchers-Regular.woff") format("woff"); 
}

@font-face {
	font-family: 'Togalite-Medium';
	src: url("fonts/Togalite-Medium.woff") format("woff"); 
}

/*============================
 * トグル用アイコンの読み込み
============================*/
/* FontAwesomeの読み込み */
.top-toggle-wrap .swell-block-accordion__icon i::before {    
	font: var(--fa-font-regular);
   content: "\f111";
}
.top-toggle-wrap .swell-block-accordion__icon[data-opened="false"]  i::after {    
	font: var(--fa-font-solid);
   content: "\f063";
}
.top-toggle-wrap .swell-block-accordion__icon[data-opened="true"]  i::after {    
	font: var(--fa-font-solid);
   content: "\f062";
}





/* Water Drop Button CSS */
.button {
    position: relative;
    padding: 20px 40px;
    font-size: 18px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
}

.button::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: drop 2s infinite;
}

.button:active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.6s linear;
}

@keyframes drop {
    0% {
        top: -50px;
        opacity: 1;
    }
    50% {
        top: 50%;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes ripple {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}