/* 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: #4fcaff;} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #3ca7ef;} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #4fcaff;} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: #f2f2f2;} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: #3ca7ef;} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #4fcaff;}
.border_color2, .hvr_border_color2:hover{border-color: #f2f2f2;}
.border_color3, .hvr_border_color3:hover{border-color: #3ca7ef;}
.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}

#wrap{
    overflow: hidden;
    opacity: 0;
}

/* header */
h1 img {
    max-width: 230px;
}
#sc_menu .logo img {
    max-width: 200px;
}

/* top ----------------*/
/* main img */
#main_img {
    max-height: 90vh;
    overflow: hidden;
    z-index: -1;
}
#main_img .main_img {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-bottom: calc(100%*430/1000);
    width: 100%!important;
}
#main_img #catch {
    width: 40%;
    height: 100%;
    background: none;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    z-index: 2;
}
#main_img #catch::before {
    content: "";
    background-color: rgba(80,184,255,0.75);
    width: calc(100% + 200px);
    height: calc(100% + 300px);
    position: absolute;
    top: -200px;
    left: -150px;
    z-index: -2;
    transform: rotate(10deg);
}
/*#main_img #catch::after {*/
/*    content: "";*/
/*    background-image: url('./Dup/img/logo_icon.png');*/
/*    background-position: center center;*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*    width: 500px;*/
/*    height: 500px;*/
/*    position: absolute;*/
/*    top: 20%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    z-index: -1;*/
/*    opacity: 0.6;*/
/*}*/
#main_img #catch .catch_wrap {
    padding: 50px;
    left: 2.5%;
    bottom: 5%;
}
#main_img #catch h2 {
    top: 0;
    left: 3%;
    border: none;
    font-size: 55px;
    line-height: 1.5;
}
#main_img #catch h2 span {
    padding: 0;
}

/* main */

/* intro */
#intro {
    background-image: url(../Dup/img/hougan.png);
    background-position: left top;
    background-repeat: repeat;
    background-size: 100px;
    position: relative;
}
#intro:before {
    content: "";
    background: url(Dup/img/moji_ani_1.png) repeat-x;
    background-position: 0 50%;
    background-size: 110%;
    display: block;
    width: 100%;
    height: 170px;
    position: absolute;
    top: 0;
    left: 0;
    animation: bgroop 30s linear infinite;
    opacity: 0.6;
}
@keyframes bgroop{
    0% { background-position: 0 50%;}
  100% { background-position: 1100% 50%;}
}
#intro .box_wrap{
    z-index: 1;
    position: relative;
}

/* contents */
#intro .box_wrap .box {
    width: 100%;
    margin-bottom: 100px;
}
#intro .box_wrap .box2 {
    flex-direction: row-reverse;
}
#intro .box_wrap .box > div {
    margin-left: 0;
    transform: translateX(-30px);
}
#intro .box_wrap .box2 > div {
    transform: translateX(30px);
}

/*contents_links*/
#contents_links .square_box a {
    background-color: rgba(80,184,255,0.6);
}
#contents_links .square_box a:hover {
    background-color: rgba(80,184,255,0.3);
}
#contents::before, #contents .contents_txt{
    background-color: rgba(26,115,232,0.5);
}

/* topcms */


/* footer */



/* under page */
#page_title::after {
    background-color: rgba(80,184,255,0.5);
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main_img {
        overflow: initial;
        z-index: 1;
    }
    #main_img .main_img {
        padding-bottom: calc(150%*430/1000);
    }
    #main_img #catch {
        position: absolute;
        width: 100%;
        height: auto;
        background-color: rgba(80,184,255,0.75);
        padding: 30px;
        bottom: -50%;
    }
    #main_img #catch::before{
        display: none;
    }
    #main_img #catch .catch_wrap {
        padding: 0;
        left: 0;
        bottom: 0;
    }
    #main_img #catch h2 {
        font-size: 51px;
    }
    #intro {
        padding-top: 250px;
    }
    #intro:before {
        background-size: 115%;
        width: 140%;
        animation: bgroop 30s linear infinite;
        top: 200px;
    }
    #intro .box_wrap .box{
        width: 100%!important;
        margin-bottom: 0;
    }
    #contents .d_flex > div {
        padding: 0;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    h1 a {
        padding: 15px 0px;
    }
    #main_img #catch {
        padding: 20px;
        bottom: -110%;
    }
    #main_img #catch h2 {
        font-size: 25px;
        transform: translateY(-15px);
    }
    #intro .box_wrap .box{
        margin-bottom: 50px;
    }
    #intro .box_wrap .box > div {
        transform: none;
    }
    #contents .contents_txt > div {
        padding: 20px;
    }
    
}

/*20220823公開後修正*/
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#contents_links .square_box a h4 {padding: 5px;font-size: 16px;}
}