﻿/* all page */
/*fonts*/

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
/*.txt_color1, .hvr_txt_color1:hover{color: #160a0a}*/
/*.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6}*/
.txt_color3, .hvr_txt_color3:hover{color: #87ceeb;}
/*.txt_color4, .hvr_txt_color4:hover{color: #c9baa9}*/

/* background-color */
/*.bg_color1, .hvr_bg_color1:hover{background-color: #160a0a}*/
/*.bg_color2, .hvr_bg_color2:hover{background-color: #e6e6e6}*/
.bg_color3, .hvr_bg_color3:hover{background-color: #87ceeb;}
/*.bg_color4, .hvr_bg_color4:hover{background-color: #c9baa9}*/

/* border-color ※!important */
/*.border_color1, .hvr_border_color1:hover{border-color: #160a0a}*/
/*.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}*/
.border_color3, .hvr_border_color3:hover{border-color: #87ceeb;}
/*.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}*/


/* header */
.top_page #header {
    background: linear-gradient(to bottom, rgba(255, 255, 255,0.8) 0%, rgba(255, 255, 255,0.5) 50%, rgba(255, 255, 255,0.1) 80%, transparent 100%);
}
#header .logo, #header-change .logo{
    max-width: 100px;
}
#header .overlay.open .logo {
    max-width: 260px;
}

/* top ----------------*/

/* main img */
#main .main_catch {
    top: 50%;
    right: 8%;
    z-index: 2;
    width: 50%;
    max-width: 690px;
    /*mix-blend-mode: overlay;*/
    mix-blend-mode: exclusion;
    animation: slideIn2 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
    opacity: 0;
    animation-delay: 4s;
}
@keyframes slideIn2 {
  0% {
    transform: translateY(120px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
  }
  40%,100% {
    opacity: 1;
  }
}

/* main */

/* intro */


/* contents */
.con1 .box_title, .con2 .box_title, #contents3 .box .box_item h2 {
    position: relative;
}
.con1 .box_title::before, .con2 .box_title::before, #contents3 .box .box_item h2::before {
    content: "";
    background-color: #87ceeb;
    width: 50px;
    height: 1px;
    position: absolute;
    bottom: -5px;
    left: 0;
}

/* topcms */
#top_cms:before {
    background-color: #87CEEB;
}

/* footer */
.top_page footer .logo {
    max-width: 250px;
}


/* under page */
.all_page footer .logo {
    max-width: 200px;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */



/* ---------- 1023px ---------- */
@media screen and (max-width: 1023px){
.page_title h2 {
    font-size: calc(1rem + 37px);
}

}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){


}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header .logo {max-width: 65px;}
#header-change .logo {max-width: 80px;}
#main .main_catch {
    top: 50%;
    width: 60%;
    animation-delay: 3.2s;
    /*mix-blend-mode: screen;*/
}

#page_title:before {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 5%, #FFF 71%, #FFF 100%);
}
.page_title h2 {
    font-size: calc(1rem + 15px);
}

}


/*20241205*/
.top_page footer:before {background-color: rgba(17, 17, 17, 0.05);}
#page_title:before {
    background: linear-gradient(to bottom, rgba(255,255,255,0.45) 35%, #FFF 65%, #FFF 100%);
}



