﻿header {
    background-color: rgb(205,219,249,0.6);
}

/*■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img {
    height: 100vh;
    padding-top: 0;
}

.fv_r {
    bottom: 0;
    right: 0;
    height: 94%;
}

.fv_r img {
    width: auto;
    height: 100%;
}

.fv_l {
    top: -11%;
    left: -2%;
    width: 31%;
}

.fv_l img {
    width: 100%;
    height: auto;
}

.fv_b {
    bottom: -11%;
    width: 47%;
}

.fv_b img {
    width: 100%;
    height: auto;
}

.copy {;
    top: 50%;
    left: 6%;
    width: 35%;
    transform: translateY(-50%);
}

.copy img {
    width: 100%;
    height: auto;
}

.fadein{
    transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein.start{
    transform: translateY(0);
    opacity: 1;
}

.copy.fadein{
    transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.copy.fadein.start{
    transform: translateY(-50%);
    opacity: 1;
}

.con_title .border {
    background-color: #f1e419;
}

.more a:hover {
    opacity: 0.7;
}

#info_title_box {
    padding-top: 70px;
    padding-bottom: 10px;
}

#info {
    padding-top: 20px;
}

#info .info_txt {
    width: 46%;
}

#contents .con_box .con_item1, #contents .con_box .con_item2 {
    width: 200px;
}

/*--animation--*/
.txt_anim6 span{
	display: inline-block;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
	opacity: 0;
}
.txt_anim6 span.start{
	-webkit-animation-name: slide-bs;
	animation-name: slide-bs;
	opacity: 1;
}
@keyframes slide-bs{
	0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
	100%{-webkit-transform: translateY(0);transform: translateY(0);}
}

/* タブレット */
@media screen and (max-width: 768px){
    #info .info_txt {
        width: 48%;
    }
    
    header #header #header_menu li a {
    padding-left: 10px;
    padding-right: 10px;
    }

    .fv_r {
        bottom: -5%;
        right: 4%;
        height: 61%;
    }
    
    .fv_l {
        top: 18%;
        left: -2%;
        width: 22%;
        z-index: 2;
    }
    
    .fv_b {
        bottom: 0%;
        width: 23%;
    }
    
    .copy {
        top: 32%;
        left: 50%;
        width: 66%;
    }

    .copy.fadein {
        transform: translateX(-50%) translateY(20px);
}
    
    .copy.fadein.start {
        transform: translateX(-50%) translateY(-50%);
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img {
        height: 90vh;
    }

    .fv_r {
        bottom: -2%;
        right: -1%;
        height: 56%;
    }

    .fv_l {
        top: 20%;
        left: -2%;
        width: 20%;
    }


    .fv_b {
        bottom: 1%;
        width: 24%;
    }


    .copy {;
        top: 33%;
        left: 50%;
        width: 75%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .copy.fadein {
        transform: translateX(-50%) translateY(20px);
}    

    .copy.fadein.start {
        transform: translateX(-50%) translateY(-50%);
    }
    
    
    .blog_wrap {
        padding-bottom: 20px;
    }
    
    .con_txt {
        padding: 30px 0 20px 0;
    }
    
    .con_txt_wrap {
        padding: 30px;
    }
    
    .con_no {
        margin-bottom: 5px;
    }
    
    .con_title {
        margin-bottom: 10px;
        letter-spacing: -0.05em;
    }
    
    #top_cms .top_cms_box {
        width: 80%;
        margin-bottom: 50px;
    }
    
    #info .info_txt {
        width: 82%;
    }
    
}



/*■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.youtube_box{
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
margin-bottom: 50px;
}

.youtube_box iframe {
    width: 100%;
    height: 100%;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #page_title h2 span {
        font-size: 25px;
    }
    
    .youtube_box {
        width: 100%;
    }
    
    #cms_2-g .cate_title {
        line-height: 1.2;
    }
}


/*■■footer■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#foot_banner {
    width: auto;
}
#foot_banner a {
    padding: 21px 70px 21px 70px;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #foot_banner a {
        padding: 18px 24px 18px 24px;
    }
}

    #logo2.logo {
        width: 210px;
    }
}