/* color */
.txt_color_nomal{color: #000000;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #0068b7} /* メインカラー */
.txt_color2{color: #eff95c} /* サブカラー */
.txt_color3{color: #e22e4b} /* アクセントカラー1 */
.txt_color4{color: #ffffff} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #0068b7} /* メインカラー */
.bg_color2{background-color: #eff95c} /* サブカラー */
.bg_color3{background-color: #e22e4b} /* アクセントカラー1 */
.bg_color4{background-color: #ffffff} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #0068b7}
.border_color2{border-color: #e22e4b}
.border_color3{border-color: #e22e4b}
.border_color4{border-color: #ffffff}


/* hover ---------------------------------------------------------------------------------------------*/
.hvr_txt_color_nomal:hover{color: #000000;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #0068b7} /* メインカラー */
.hvr_txt_color2:hover{color: #eff95c} /* サブカラー */
.hvr_txt_color3:hover{color: #e22e4b} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #ffffff} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #0068b7} /* メインカラー */
.hvr_bg_color2:hover{background-color: #eff95c} /* サブカラー */
.hvr_bg_color3:hover{background-color: #e22e4b} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ffffff} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #0068b7}
.hvr_border_color2:hover{border-color: #eff95c}
.hvr_border_color3:hover{border-color: #e22e4b}
.hvr_border_color4:hover{border-color: #ffffff}

h2, h4, #intro_box h3, .top_cms_title h3, #main_nav .txt_white, .cate_title, #cms_6-c h3, #page07 h3, #page_title h3, #menu_wrap .title1, #page10 .box h3 {
    font-family: 'Noto Serif JP', serif !important;
}
.linkStyle {
    color: #0068b7;
}
#main_img {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    box-sizing: border-box;
    padding-bottom: 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#video {
    width: 100%;
    position: absolute;
}
.video {
    width: 110%!important;
}
h1 img {
    width: 130px;
}
#intro_box {
    background-color: rgba(0,0,0,0);
}
#intro {
    background: -moz-linear-gradient(top, #91c2f7, rgba(0,0,0,0));
    background: -webkit-linear-gradient(top, #91c2f7, rgba(0,0,0,0));
    background: linear-gradient(to bottom, #91c2f7 -2%, rgba(0,0,0,0) 15%);
}
main {
    background: -moz-linear-gradient(bottom, #91c2f7, #ffffff);
    background: -webkit-linear-gradient(bottom, #91c2f7, #ffffff);
    background: linear-gradient(to top, #91c2f7 0%, #ffffff 3%);
}

#top_cms .top_cms_box .more a::after, #contents_links .box_wrap .box a div span::after {
    background-color: #e22e4b;
}
#intro #intro_box #intro_txt {
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0068b7;
}
#intro #intro_box #intro_txt:before {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/left.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
}
#intro #intro_box #intro_txt:after {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/right.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
}
#intro .en_font {
    color: #0068b7;
}
.tel_box {
    max-width: 450px;
}
#contents_links .bg_black {
    background-color: #0068b7;
}
.index_main, #main_wrap {
    background-attachment: fixed;
    background-image: url(./Dup/img/back.jpg);
    background-size: cover;
}

#page_title > div p {
    bottom: 25px;
}
.jisen {
    top: 90%;
    left: 20%;
    width: 112px;
    animation-name: fadeup;
    animation-duration: 1s;
    animation-delay: 3s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
}
@keyframes fadeup {
from {
    opacity: 0;
    transform: translateX(-50px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
#loader::after, .sm-slider::after, #page_title::before, #menu_wrap::after, #tel_contact, #page10 .box a::after, #main_img h2::before {
    background: rgb(0, 104, 183);
    background: -moz-linear-gradient(left, rgb(0, 104, 183) 0%, rgb(3, 173, 183) 100%);
    background: -webkit-linear-gradient(left, rgb(0, 104, 183) 0%,rgb(3, 173, 183) 100%);
    background: linear-gradient(to right, rgb(0, 104, 183) 0%,rgb(3, 173, 183) 100%) !important;
}
#cms_5-c .box_txt1::before {
    top: 5px;
}
#contents::before {
    opacity: 0.3;
}
.banner {
    right: 0px;
    bottom: 65px;
    width: 87px;
    z-index: 5;
}
.yoyaku {
    right: 0px;
    bottom: 250px;
    width: 87px;
    z-index: 5;
}
.yoyaku2 {
    right: 0px;
    bottom: 250px;
    width: 87px;
    z-index: 5;
}
.banner2 {
    right: 0;
    width: 87px;
    z-index: 5;
    bottom: 65px;
}
.banner, .yoyaku, .banner2, .yoyaku2 {
  opacity: 0;
  transition: all 0.65s;
}
.banner.isActive, .yoyaku.isActive, .banner2.isActive, .yoyaku2.isActive {
  opacity: 1;
  transition: all 0.65s;
}
.banner:hover, .banner2:hover, .yoyaku:hover {
    opacity: 0.7;
}
/* ---------- 1439px ---------- */
@media screen and (max-width: 1438px){
    #video {
    width: 100%;
    position: absolute;
    height: 100%;
    background-size: cover;
}
}
/* ---------- 1349px ---------- */
@media screen and (max-width: 1348px){
    .video {
    width: auto !important;
    height: 110%;
    }
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #video {
    top: 0;
}

#main_img::after {
    height: 50%;
}
#main_img h2 {
    top: -27%;
}
.index_main {
    margin-top: -67%;
}
.cms_2-a .grid_6 {
    width: 100%!important;
}
#loader img {
    display: block;
    width: 170px;
    z-index: 2;
}
.item1 {
    width: 75% !important;
}
.item2 {
    width: 90% !important;
}
#cms_5-c .box_txt1::before {
    top: 4px;
}
.video {
    width: 120% !important;
    height: 50%;
    margin-left: -50px;
}
.banner2 {
    right: 0;
    width: 80px;
    bottom: 55px;
}
.banner {
    right: 0px;
    bottom: 55px;
    width: 80px;
    z-index: 5;
}
.yoyaku {
    right: 0px;
    bottom: 223px;
    width: 80px;
    z-index: 5;
}
.yoyaku2 {
    right: 0px;
    bottom: 223px;
    width: 80px;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
/*    #main_img::after {
    height: 31.4%;
}
#main_img h2 {
    top: -255px;
}
.index_main {
    margin-top: -135%;
}*/
/*#main_img {
    width: 100%;
    height: 50vh;
    min-height: 500px;
    box-sizing: border-box;
    padding-bottom: 0px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 40vh;
}
#video {
    width: 100%;
    position: absolute;
    height: 100vh;
    background-size: cover;
}
.video {
    width: 100% !important;
    height: 38%;
}*/
#main_img::after {
    height: 100%;
}
#video {
    width: 100%;
    position: absolute;
    height: 75vh;
    background-size: cover;
}
#main_img {
    padding-top: 33vh;
}
#main_img h2 {
    top: 1%;
}
.index_main {
    margin-top: -145%;
}
h1 img {
    width: 70px;
}
.jisen {
    top: 86%;
    left: 29%;
    width: 50px;
}

#intro #intro_box #intro_txt:before {
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
}
#intro #intro_box #intro_txt:after {
    width: 80px;
    height: 80px;
    bottom: 0;
    right: 0;
}
#contents h3 {
    font-size: 26px;
}
#footer_box h2 {
    padding: 0 10px;
}
#loader img {
    width: 110px;
}
.mail_box .font_10up_sp {
    font-size: -webkit-calc(1rem + 3px);
    font-size: calc(1rem + 3px);
}
.tel_box .pd_10px {
    padding: 10px 0;
}
.item1 {
    width: 100% !important;
}
.item2 {
    width: 100% !important;
}
#cms_5-c .box_txt1::before {
    top: 8px;
}

#intro h3 {
    padding-top: 100px;
}
.index_main {
    margin-top: -132%;
    z-index: 4;
}
#intro h3 {
    padding-top: 45px;
}
.banner2 {
    right: 0;
    width: 63px;
    bottom: 51px;
}
.banner {
    right: 0;
    width: 63px;
    bottom: 51px;
}
.yoyaku {
    right: 0;
    width: 63px;
    bottom: 182px;
}
.yoyaku2 {
    right: 0;
    width: 63px;
    bottom: 182px;
}
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
    #video {
    width: 100%;
    height: 100%;
    position: relative;
    top: -100px;
}
#main_img h2 {
    top: 50% !important;
}

}