﻿/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Sarpanch:wght@400;500;600;700;800;900&family=Sawarabi+Gothic&display=swap');
#pc_nav ul li a, #intro .intro_title, #contents1 .con1_title span, #contents2 .con2_title, #contents3 .con3_title, #top_cms .cms_title, #top_cms .cms_sub_title span, .top_cms_box .more_box .more div, .footer_nav li a, footer .footer_txt, footer .footer_h1, footer #copyright, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .pager li a  {font-family: 'Sawarabi Gothic', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;}
.en, .more a span, #page_top a, #top_cms .cms_sub_title, .contact_bt a, .tel_bt a{
    font-family: 'Sarpanch', sans-serif;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #478de6;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1, .hvr_txt_color1:hover{color: #478de6;}
.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6}
.txt_color3, .hvr_txt_color3:hover{color: #f6aa3c;}
.txt_color4, .hvr_txt_color4:hover{color: #ccc;}

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #478de6;}
.bg_color2, .hvr_bg_color2:hover{background-color: #f3f8fa;}
.bg_color3, .hvr_bg_color3:hover{background-color: #f6aa3c;}
.bg_color4, .hvr_bg_color4:hover{background-color: #ccc;}
.bg_color5{background-color: #ecf1f3;}

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #478de6;}
.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}
.border_color3, .hvr_border_color3:hover{border-color: #f6aa3c;}
.border_color4, .hvr_border_color4:hover{border-color: #ccc;}

#wrap{
    overflow: hidden;
}
#sp_nav .nav_bg {
    background: linear-gradient(90deg,#478de6,#68caef)!important;
}

/* header */
#header #logo a {
    padding: 15px;
    width: 200px;
}
#header.headtrans #logo a {
    padding: 25px;
    width: 230px;
}

/* top ----------------*/

/* main img */
#main_img .main_txt_wrap {
    right: auto;
    left: 0;
    bottom: auto;
    top: 50%;
    transform: translate(0,-50%);
}
#main_img .main_txt_wrap .main_txt {
    font-size: 60px;
}
.loopSlider_wrap{
    transform: rotate(35deg);
    margin-top: -150vh;
    justify-content: flex-start;
    align-items: flex-start;
}
.loopSlider {
    width: auto;
    height: 100%;
    animation: slide1 80s -40s linear infinite;
}
.loopSlider img, .loopSlider2 img {
    padding-bottom: 30px;
}
.loopSlider:last-child {
    width: auto;
    height: 100%;
    animation: slide2 80s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200%);
  }
}
.loopSlider2 {
    width: auto;
    height: 100%;
    animation: slide3 80s linear infinite;
}
.loopSlider2:last-child {
    width: auto;
    height: 100%;
    animation: slide4 80s -40s linear infinite;
}
@keyframes slide3 {
  0% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes slide4 {
  0% {
    transform: translateY(-200%);
  }
  to {
    transform: translateY(0);
  }
}

/* main */
#main_img .main_bg, #contents1 .con1_bg {background: none;}
#main_img {
    background: linear-gradient(90deg,#478de6,#68caef);
}

/* intro */
.intro_wrap{
    background-image: url('./Dup/img/bg_mark.png');
    background-repeat: no-repeat;
    background-position: bottom left -10%;
    background-size: 47%;
}
.intro_top{
    font-size: 120px;
    z-index: 0;
}
#intro .intro_item{
    z-index: 2;
}
#intro .intro_title{
    margin-top: -50px;
    z-index: 2;
}
#con .box{
    background-color: #f3f8fa;
    padding: 40px;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px, rgb(0 0 0 / 7%) 0px 2px 2px, rgb(0 0 0 / 7%) 0px 4px 4px, rgb(0 0 0 / 7%) 0px 8px 8px, rgb(0 0 0 / 7%) 0px 16px 16px;
}
.con_btn a{
    border-radius: 50px;
}
.con_btn a:hover{
    background-color: #478de6;
    color: #fff;
}
.animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s;
}
.animate.show {
  opacity: 1;
  transform: translateY(0px);
}
.animate.show:nth-of-type(1) {
  transition-delay: 0.3s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.6s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.9s;
}
.animate.show:nth-of-type(4) {
  transition-delay: 1.2s;
}
.animate.show:nth-of-type(5) {
  transition-delay: 1.5s;
}

/* contents */
#contents1 .con1_bg, #contents2 .con2_box, #contents3 .con3_bg, #contents3 .con3_box {
    background: linear-gradient(90deg,#478de6,#68caef);
}
#contents3 .con3_bg {
    top: 0;
    left: 0;
}

/* topcms */


/* footer */
#logo2{
    width: 300px;
}


/* under page */
#page_title .page_title_bg {
    opacity: 0.25;
}

/* cms1 */

/* cms2 */
.btn_container a{padding: 8px 30px;}

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#loader img{width: 150px;}
#header #logo a {width: 250px;}
.loopSlider_wrap {margin-top: -43vh;}
#main_img .main_txt_wrap .main_txt {font-size: 50px;}
.intro_top {font-size: 70px;}
#contents3 .con3_img1 {height: 60vw;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header #logo a {
    width: 150px;
    padding: 15px 0;
}
#header #logo a img {width: 80%!important;}
.loopSlider_wrap {margin-top: -25vh;}
.loopSlider img, .loopSlider2 img {padding-bottom: 10px;}
#main_img .main_txt_wrap .main_txt {font-size: 26px;}
.intro_top {font-size: 41px;}
#intro .intro_title {margin-top: -30px;}

}





