/* color */
.txt_color_nomal{color: #1d1d1d;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #fbfbfb} /* メインカラー */
.txt_color2{color: #D8E9EA} /* サブカラー */
.txt_color3{color: #22af22} /* アクセントカラー1 */
.txt_color4{color: #ffffff} /* アクセントカラー2 */

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

/* border-color ※!important */
.border_color1{border-color: #22af22}
.border_color2{border-color: #D8E9EA}
.border_color3{border-color: #22af22}
.border_color4{border-color: #ffffff}


/* hover ---------------------------------------------------------------------------------------------*/
.hvr_txt_color_nomal:hover{color: #1d1d1d;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #fbfbfb} /* メインカラー */
.hvr_txt_color2:hover{color: #D8E9EA} /* サブカラー */
.hvr_txt_color3:hover{color: #22af22} /* アクセントカラー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: #fbfbfb} /* メインカラー */
.hvr_bg_color2:hover{background-color: #D8E9EA} /* サブカラー */
.hvr_bg_color3:hover{background-color: #22af22} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ffffff} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #fbfbfb}
.hvr_border_color2:hover{border-color: #D8E9EA}
.hvr_border_color3:hover{border-color: #22af22}
.hvr_border_color4:hover{border-color: #ffffff}

.flex_center-right {
    justify-content: center;
    align-items: center;
}
#video {
    width: 100%;
}
#main_img {
    overflow: hidden;
}
.cate_no {
    color: #31b9e3;
}
.linkStyle {
    color: #22af22;
}
.video {
    position: relative;
    top: -200px;
}
#main_img h2 {
    position: relative;
    z-index: 3;
    overflow: hidden;
    top: -120%;
    right: -26%;
}
#intro .txt_white, #contents h4 {
    color: #30b9e3;
}
#intro_txt p, #contents p {
    color: #222222;
}
#intro_txt h3 {
    font-size: 26px;
}
.ga_box {
    margin-bottom: 250px;
}
#intro_box {
  background-image: linear-gradient(-45deg, #fff 25%, #30b9e3 25%, #30b9e3 50%, #fff 50%, #fff 75%, #30b9e3 75%, #30b9e3);
  background-size: 12px 12px;
}
#intro h3 {
    color: #222222;
}
.intro1 {
    width: 40% !important;
    height: auto;
    top: 8% !important;
    left: 0% !important;
}
.intro2 {
    width: 35% !important;
    height: auto;
    top: 60% !important;
    left: 10% !important;
}
#menu_bt {
    background-color: #22af22;
}
.top_cms_title h3 {
    color: #22af22;
}
h1::after {
    border-color: rgb(34, 175, 34) transparent transparent transparent !important;
}
#contents::before {
    z-index: 2;
    background-image: url(./Dup/img/green.png);
    background-position: left top;
    background-size: 100% 100%;
    opacity: 0.5;
}
#contents h3 {
    color: #30b9e3;
    padding-right: 76px;
    text-align: right;
    font-size: 65px;
    margin-bottom: 150px;
}
#footer_bottom {
    background-color: #22af22;
}
#footer_box {
    color: #222222;
}
.tel .txt_white {
    color: #22af22;
}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
.intro1 {
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
.intro2 {
    animation-name: fuwafuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.9s;
}
@keyframes fuwafuwa {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}
#contents h4 {
    text-align: left;
}
#loader::after, .sm-slider::after, #main_img h2::before, #menu_wrap::after {
    background: rgb(58, 211, 214);
    background: -moz-linear-gradient(left, rgb(58, 211, 214) 0%, rgb(34, 175, 34) 100%);
    background: -webkit-linear-gradient(left, rgb(58, 211, 214) 0%,rgb(34, 175, 34) 100%);
    background: linear-gradient(to right, rgb(58, 211, 214) 0%,rgb(34, 175, 34) 100%) !important;
}
#intro #intro_box #intro_txt {
    border: 4px solid #30b9e3;
}
.cate_list .txt_color1 {
    color: #30b9e3;
}
#cms_5-a .cate_title {
    background-color: #22af22;
}
.tel_box .txt_color1 {
    color: #22af22;
}
#page09 .txt_color1 {
    color: #30b9e3;
}
#footer::after {
    background-color: #fdf5e6 !important;
}
.fa-chevron-left:before, .fa-chevron-right:before {
    display: none;
}

/* YouTube */
.yt{width: 800px;}
.video_cms{
	padding-bottom: 50.25%;
	height: 0;
}
.banner:hover {
    opacity: 0.6;
    animation-duration: 2s;
}
main {
    background-image: url(./Dup/img/haikei.png), url(./Dup/img/haikei2.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 50% auto, 50% auto;
    background-position: bottom left, top right;
}
.hvr_txt_white {
    color: #30b9e3;
}
.hvr_txt_white:hover {
    color: white;
}
.video {
    position: relative;
    top: 0px;
}
#main_img h2 {
    position: relative;
    z-index: 3;
    overflow: hidden;
    top: -100%;
    right: -20%;
}
#contents_links .box_wrap .box {
    background-color: #4c4c4c;
}
#page10 .box a > div p {
    opacity: 0.09;
}
/* ---------- 1280 ---------- */
@media screen and (max-width: 1280px){
.video {
    width: auto !important;
}
#main_img {
    width: 100%;
    height: 100vh;
    min-height: 700px;
    box-sizing: border-box;
    padding-bottom: 0px;
}
}
@media screen and (max-width: 1050px) {
#main_img {
    width: 100%;
    height: 70vh;
    min-height: 570px;
    box-sizing: border-box;
    padding-bottom: 0px;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* YouTube */
.yt{width: 100%;}
}
.video {
    width: 100% !important;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.video_cms {padding-bottom: 56.25%;}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main_img {
    width: 100%;
    height: 40vh;
    min-height: 440px;
}
    .ga_box {
    margin-bottom: 180px;
    margin-top: -60px;
    width: 90%!important;
}
#main_img::after {
    height: 100%;
}
.video {
    position: relative;
    top: -71px;
}
.intro2 {
    width: 50% !important;
    height: auto;
    top: 43% !important;
    left: 51% !important;
}
.intro1 {
    width: 49% !important;
    height: auto;
    top: 8% !important;
    left: -3% !important;
}
#main_img h2 {
    position: relative;
    z-index: 3;
    overflow: hidden;
    top: -58%;
    right: -11%;
    width: 84% !important;
}
#contents h3 {
    color: #30b9e3;
    padding-right: 214px;
    text-align: right;
    font-size: 55px;
    margin-bottom: 150px;
}
#contents::after {
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-position-x: -514px;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
    #main_img h2 {
    position: relative;
    z-index: 3;
    overflow: hidden;
    top: 0%;
    right: 0%;
}
#main_img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-bottom: 0;
    padding-top: 10vh;
}
#main_img::after {
    height: 68%;
}
#main_img h2 {
    margin-top: -80px;
    width: 100% !important;
}
.ga_box .grid_4 {
    width: 50%!important;
}
.ga_box {
    margin-bottom: 120px;
    margin-top: 0px;
    width: 90%!important;
}
#intro #intro_box #intro_txt {
    border: none;
}
.banner {
    width: 250px;
}

#footer_box .font_14 {
    width: 90%;
}
#contents h3 {
    color: #30b9e3;
    padding-right: 47px;
    text-align: right;
    font-size: 30px;
    margin-bottom: 62px;
}
#contents::after {
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-position-x: -839px;
}
#intro_txt h3 {
    font-size: 21px;
}
#contents .font_12_sp {
    font-size: 14px;
}
    /*#main_img::after {
    height: 29.5%;
}

#video {
    width: 100%;
    position: relative;
    top: -475px;
}
.video {
    position: relative;
    top: 8px;
}*/
}