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

/* 下からふわっと表示
.effect-fade {
opacity : 0;
transform : translate(0, 150px);
transition : all 1000ms;
}


.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

/* ueからふわっと表示
.effect-fade-ue {
opacity : 0;
transform :translateY(-150px);
transition : all 1000ms;
}


.effect-fade-ue.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}


/*右からふわっと表示


.effect-fade-migi {
opacity : 0;
transform : translateX(150px);
transition : all 1000ms;
}

.effect-fade-migi.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}


/*左からふわっと表示 

.effect-fade-migi2 {
opacity : 0;
transform : translateX(-150px);
transition : all 1000ms;
}

.effect-fade-migi2.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}




/*下から0秒遅れてふわっと表示 
.effect-fade-delay0 {
opacity : 0;
transform : translate(0, 150px);
transition : all 1000ms;
transition-delay :0s;
}

.effect-fade-delay0.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

/*下から0.5秒遅れてふわっと表示 
.effect-fade-delay {
opacity : 0;
transform : translate(0, 150px);
transition : all 1000ms;
transition-delay :0.5s;
}

.effect-fade-delay.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}


/*下から２秒遅れてふわっと表示


.effect-fade-delay2 {
opacity : 0;
transform : translate(0, 150px);
transition : all 1000ms;
transition-delay :1s;
}

.effect-fade-delay2.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

@media only screen and (max-width: 750px) {
	/*下から1秒遅れてふわっと表示
	.effect-fade-delay {
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 1000ms;
	transition-delay :0s!important;
	}
	/*下から２秒遅れてふわっと表示
	.effect-fade-delay2 {
	opacity : 0;
	transform : translate(0, 150px);
	transition : all 1000ms;
	transition-delay :0s!important;
	}
}




/*ホームボタンを非表示*/
.footer-menu__btn {
    display: none !important;
}

/*フッターコピーライト*/

.footer #footer-menu {
    background-color: #000!important;/* 背景色のコード */
}
.footer #footer-menu a, .footer .copyright {
    color: #FFF!important; /* 文字色のコード */
}

/*コンタクトフォーム ボタン調整*/

button, html input[type="button"], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background: #000;
    color: #fff;
    padding: 3px 20px;
}

.mw_wp_form p,.mw_wp_form div{
	line-height: 3em !important;
	font-size:13px !important;
	font-family:sans-serif!important;
	clear:both;
}


/*ヘッダーシャドウを非表示*/
.header {
box-shadow: 0 3px 6px rgb(0 0 0 / 0%)!important;
}

/*レスポンシブ改行調整*/
.unbr{display:inline-block!important;}
@media screen and (min-width:768px){.sp_br br{display:none!important;}.sp_nobr br{display:block!important;}}
@media screen and (max-width:767px){.sp_br br{display:block!important;}.sp_nobr br{display:none!important;}}
@media screen and (min-width:768px){.pc_br{display:block;}.sp_br{display:none;}}
@media screen and (max-width:767px){.pc_br{display:none;}.sp_br{display:block;}}




/*トップページ投稿スライド調整
---------------------------------------------------------------------------------------------------*/

.compact-theme.wp-posts-carousel .owl-controls {
    display: none!important;
}


.compact-theme.wp-posts-carousel .wp-posts-carousel-image{
	    font-size: 15px!important;
        text-align:center!important;
        color:#333!important;
	letter-spacing:1px!important;
	line-height:15px!important;

	
}

h3:not(.st-css-no2) a{
	    font-size: 15px!important;
        text-align:center!important;
        color:#333!important;
		letter-spacing:1px!important;
	　line-height:15px!important;
		font-family: 'Noto Sans JP', sans-serif!important;
	font-weight:400!important;
	
}
.compact-theme.wp-posts-carousel .wp-posts-carousel-container{
	border:none!important;
	
}

.owl-carousel .owl-item{
		line-height:15px!important;

}

/*投稿ページ調整*/

.fab-btn extended-fab main-c{
	display:none!important;
}

.sns-btn {
    margin: 0 auto;
    text-align: center;
	display:none!important;
}
#respond{display:none;}

/*top-particle.js*/
#particles-js{
        width:80%;
        height:500px;
    }
    @media screen and (max-width:1024px){
       #particles-js{
        width:100%;
        height:200px;
        margin-top:-20%;
    } 
    }
    @media screen and (max-width:599px){
        #particles-js{
        width:100%;
        height:300px;
        margin-top:-40%;
    }
}		
/*section phirosophy circle*/
    .philosophyPoints{
        width:100%;
        height:400px;
        position: relative;
        font-family: "Noto Sans JP" , Sans-Serif;
    }
    .circle{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        border-radius: 200px;
        border-width: 2px;
        border-color: #4d4d4d;
        
    }
    #c1{
        position: absolute;
        top:-55%;
        left:6%;
        width:250px;
        height:250px;
        border-style: dashed ;
    }
    #c2{
        position: absolute;
        top:-7%;
        right: 0;
        height: 250px;
        width:250px;
        height:250px;
        border-style: solid ;
    }
    #c3{
        position: absolute;
        bottom: 20%;
        left:5%;
        width:200px;
        height:200px;
        border-style: solid ;
    }
    .circleTxt{
        height:100%;
        position: relative;
    }
    .circle h5{
        position: absolute;
        top:35%;
        left:50%;
        transform: translateY(-50%)
        translateX(-50%);
        display: block;
        line-height: 1.2em;
        font-weight: 400;
        font-size: 20px;
        color:#666;
    }
    .circle h6{
        position: absolute;
        top:50%;
        left:50%;
        transform: translateY(-50%)
        translateX(-50%);
        display: block;
        font-weight: 400;
        font-size: 14px;
        color:#808080;
    }
@media screen and (max-width:1024px){
    .philosophyPoints{
        margin: 0 auto;
        width:510px;
        height: 300px
    }
    #c1{
        width:200px;
        height: 200px;
        top:-25%;
        left: 15%
    }
    #c2{
        width:200px;
        height: 200px;
        top:20%;
        right:5%;
    }
    #c3{
        width:150px;
        height: 150px;
        left:10%;
        bottom: 0;
    }
    .circle h5{
        font-size: 14px;
    }
    .circle h6{
        font-size: 12px;
        line-height: 1em
    }
}
@media screen and (max-width:599px){
    .philosophyPoints{
        margin: 0 auto;
        width:260px;
        height: 250px
    }
    #c1{
        width:150px;
        height: 150px;
        top:-12%;
        left: -5%
    }
    #c2{
        width:150px;
        height: 150px;
        top:30%;
        right:-5%;
    }
    #c3{
        width:120px;
        height: 120px;
        left:0;
        bottom: 0;
    }
     .circle h5{
        top:25%;
    }
    .circle h6{
        top:38%;
    }
}