/* ------------- my css ------------- */
@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Shippori+Mincho&display=swap');


/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #7bc0d6; 
    --color2: #e3edf2; 
    --color3: #3874a5; 
    --color4: #caf9ff; 
    --black: #151a1e; 
    --jp: "Shippori Mincho","游明朝", "Yu Mincho",serif;
    --en:"Ephesis", "游ゴシック体",cursive;
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*自動リンク設定*/
.linkStyle{
    color:var(--color3);
}
.linkStyle:hover{
	opacity:0.7
}

/*font*/



h2,.en{
    font-family: var(--en);
}
h3,.jp,#header,#scroll,h2.blog_title{
    font-family: var(--jp);
}
/*------------- loading -------------*/
    #loading #loading_text .progressbar-text {
        font-family: var(--jp);
    }
#loading .kvArea .img_box img {
    max-width: 200px;
}
@media screen and (max-width: 667px){
#loading .kvArea .img_box img {
    max-width: 150px;
}
}


/*------------- FV -------------*/


.main_txt{
    bottom: 10%;
}

.item4_img {
    width: 70%;
    max-width: 650px;
    top: 2%;
    left: 0;
    opacity: 0.8;
       mix-blend-mode: screen;
}


.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: rgba(255,255,255,0.6);
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt{
    font-size: 50px;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 10px 5px 40px;
	position: relative;
	z-index: 2;
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background: linear-gradient(90deg, rgba(56,116,165,0.8), rgba(221,221,135,0.8));
    color: #fff;
}

.passing .passing-txt2{
    font-size: 50px;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 10px 5px 40px;
	position: relative;
	z-index: 2;
}
.passing.move .passing-txt2 {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background: linear-gradient(90deg, rgba(56,116,165,0.8), rgba(221,221,135,0.8));
    color: #fff;
}

.passing .passing-txt2 {
    font-size: 32px;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	padding: 5px 25px 5px 40px;
	position: relative;
	z-index: 2;
}

.passing.move .passing-txt2 {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background: linear-gradient(90deg, rgba(56,116,165,0.8), rgba(221,221,135,0.8));
    color: #fff;
}

@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}


@media screen and (max-width: 768px){
}

@media screen and (max-width: 667px){
    .item4_img {
    top: 7%;

}

    .passing .passing-txt {
    font-size: 22px;
    padding: 5px 5px 5px 20px;
    }
    
    .passing .passing-txt2 {
    font-size: 16px;
    padding: 5px 5px 5px 20px;
    }
}

/*------------- TOP -------------*/

.top_title .slash:before, .top_title .slash:after{
    display: none;
}
main.blur {
    background: rgba(250, 250, 250, 0.9);
}
#contents .con_title {
    font-size: clamp(18px, 1.6vw, 40px);
}
#intro .intro_photo h2 {
    font-size: 170px;
    left: -30px;
}

#intro .rotate_txt span {
    line-height: 0.35;
}
.top_title h2 {
    font-size: 120px;
}

.more_item .text {
    color: #fff;
}

.more .bg_color3{
    background: linear-gradient(45deg, rgba(56,116,165,0.9), rgba(221,221,135,0.9));
}

.more .bg_color3:hover{
   opacity: 0.8;
}
@media screen and (max-width: 768px) {
    #intro .intro_right {
            width: 100%;
        }
    #intro .pd_5per_tb {
        padding-left: 10%;
        padding-right: 10%;

}
}
@media screen and (max-width: 667px) {
.top_title h2 {
    font-size: 70px;
}
#contents .con_title {
    font-size: 22px;
}
}
/*ペンキアニメーション*/
.item1_img {
    bottom: -8%;
    right: -25%;
    width: 81%;
    z-index: 3;
}
.item2_img {
    bottom: -10%;
    left: -25%;
    width: 70%;
    z-index: 3;
}
.item3_img {
    bottom: -14%;
    right: -25%;
    width: 68%;
    z-index: 3;
}
 
.paint-anim{
	transform: translateX(-100px);
	transition: transform 2s ease, opacity 0.8s;
	transition-property: opacity,transform;
	opacity: 0;
}

.paint-anim.start{transform: translateX(0);opacity: 1;}

.paint-anim-r{
	transform: translateX(100px);
	transition: transform 2s ease, opacity 0.8s;
	transition-property: opacity,transform;
	opacity: 0;
}

.paint-anim-r.start{transform: translateX(-50px);opacity: 1;}


/*------------- header -------------*/
#logo .width_300-max{
    max-width: 120px;
    padding: 10px 5px;
}

@media screen and (max-width: 768px) {
#logo .width_300-max{
    max-width: 100px;
}
}
/*------------- ハンバーガー -------------*/

.menu-trigger, .close-trigger {
    top: 65% !important;
}

#nav_menu .overlay-nav .bottom .bg_black{
    background-color: var(--color3);
}
#nav_menu .overlay-nav .bottom .bg_black:hover{
    background-color: var(--color1);
}

.sp_tel .bg_black{
    background-color: var(--color3);
}

/*------------- footer -------------*/

#footer_info .map{
    display: none;
}

#footer_info {
    padding-top: 50px;
    padding-bottom: 50px;
}

footer #footer_info{
    background-color:  #93adbc;
}

#footer_nav_wrap li a:hover{
    color: var(--color3);
}
#footer_nav li a::after {
    background: var(--color3);
}

#logo2 .width_300-max{
    max-width: 200px;
}
.info_btn_wrap .bg_black{
    background-color: var(--color3);
}
.info_btn_wrap .bg_black:hover{
    background-color: var(--color1);
}

#copyright.bg_color1{
    background-color: var(--color3);
}
@media screen and (max-width: 768px) {
#logo2 .width_300-max {
    width: 150px;
}
}
@media screen and (max-width: 667px) {
#footer_info .info_txt{
    padding: 10%;
}
#footer_info {
    padding-top: 20px;
    padding-bottom: 20px;
}

}
/*------------- 下層ページ -------------*/
#page_title .en {
    color: var(--color1);
    font-size: 50px;
}
#page_title .en span {
    line-height: 0.4;
}
#page_title .jp:before {
    background-color: var(--color1);
}

@media screen and (max-width: 768px) {
    #page_title .en {
    font-size: 30px;
    top: 90px;
}
    #page_title_img {
        height: 250px;
    }
    
}
@media screen and (max-width: 667px) {
    #page_title_img {
        height: 150px;
    }
    
    #page_title_img .scroll{
        display: none;
    }
    #page_title .en {
    font-size: 30px;
    top: 55px;
}
}
/* 一日の流れ ---------------------------------------------------------------------------------------------*/
.flow_type4 .box_txt2 {
        padding-left: 20px;
}

/* fix_bnr ---------------------------------------------------------------------------------------------*/
.fix_banner{
    display: none !important;
}

#fix_bnr {
    bottom: 10px;
    right: 0;
    left: 0;
    z-index: 10;
    width: 70%;
    max-width: 320px;
    transition: 0.5s;
    opacity: 0;
    margin: auto;
}

#fix_bnr.scroll{
    opacity: 1;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr{
    max-width: 400px;
}
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 77% !important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
    opacity: 0;
}
}

.vibrate-realistic, #fix_bnr a:hover img {
  animation: realisticVibrate 2s infinite;
  display: inline-block;
}

/* fix_bnr end ---------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    .pagetop {
        right: 10px;
        bottom: 20px !important;
    }
    
}
    
    @media screen and (max-width: 667px) {
    #sp_nav .sp_nav_inner .l-menu ul li {
         padding: 0;
    }
}