﻿/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img2,#contents .con_img{position: relative;}
/*リピートあり*/
#main_img #catch .copy,#main_img2 .copy,#contents .con_img:before{
content: "";
display: block;
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
}

#main_img #catch .copy{
    background-image: url(./Dup/img/catch.png);
    width: 43vw;
    height: 20vw;
}
#main_img2 .copy{
    background-image: url(./Dup/img/catch2.png);
    width: 50vw;
    height: 18vw;
    top:47%;
	right: 5%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

#contents .con_img:before{
    background-image: url(./Dup/img/con3.png);
    width: clamp(450px,41vw,700px);
    height: clamp(422px,38vw,657px);
    top: 36%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
/*--------------------------------
全体
--------------------------------*/
.loader.logo{width: 400px;}
h1 img{max-width: 400px;}
#sc_menu .logo img{max-width: clamp(220px,24vw,300px);}
footer #footer #footer_txt .logo{
    width: 100%;
    max-width: 400px;
}
footer::after{background-color: rgba(155,155,155,0.8);}
.fix_banner{
width: 400px;
position: fixed;
bottom: 8px;
right: 80px;
z-index: 5;
}
/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 300px;
bottom: 20px;
right: auto;
left: 47%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
}
/*--------------------------------
TOP
--------------------------------*/
#main_img,#main_img2{height: 41.5vw;}
#main_img #catch{width: 35%;}
#main_img #catch p{
    padding-top: 22vw;
    padding-left: 5vw;
}
#intro .box_wrap .box{
    width: 31.333%!important;
    margin-right: 3%;
}
#intro .box_wrap .box:last-of-type{margin-right: 0;}

#contents{background-position: left center;}
#contents .d_flex > div{padding: 5%;}
#contents .contents_txt > div{padding: 0;}

.check_box li{position: relative;padding-left: 30px;}
.check_box li:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/* Font Awesome */
.check_box li:before{
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 900;
color: #2d418c;
position: absolute;
top: 0;
left: 0;
}

/* TOP お知らせ */
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}
/*--------------------------------
下層
--------------------------------*/
.page6 #sub_menu{background-color: #c35a96;}
.page6 .cate_list{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

.page6 .cate_list li{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: left;
}
.page6 .cate_list a.txt_color1{
    color: #ffffff;
    background-color:#c35a96;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    border-radius: 30px;
}
.page6 .cate_list li a::before{display: none;}

.page6 .cate_title{
    border: 3px solid #c35a96;
    border-radius: 30px;
    padding: 2px 25px;
}
#page10 ul li:nth-of-type(2) a{line-height: 1.2;}

@media  screen and (max-width: 1400px){
    #main_img #catch{width: 45%;}
    #main_img #catch p{padding-left: 0;}
}
@media  screen and (max-width: 1200px){
    #main_img #catch{
        width: 50%;
        left: 0;
    }
    #contents .con_img:before{
        width: 45vw;
        height: 42vw;
        top: 50%;
    }
}
@media  screen and (max-width: 1000px){
    #main_img,#main_img2{
        height: 60vw;
        position: relative;
    }
    #main_img:before{
    content: "";
    display: block;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    }
    #main_img:before{
        background-image: url(./Dup/img/bg3.png);
        width: 100%;
        height: 60vw;
        top: 0;
        left: 0;
        z-index: 3;
    }
    #main_img2 .copy{
        width: 55vw;
        height: 20vw;
        top: 50%;
        right: 2%;
    }
}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
    h1{width: 47%;}
    footer #footer #footer_txt .logo{width: 100%;}
    #main_img > .copy{
    content: "";
    display: block;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    }
    #main_img:before{
        background-image: url(./Dup/img/bg3.png);
        width: 100%;
        height: 60vw;
        top: 0;
        left: 0;
        z-index: 3;
    }
    #main_img > .copy{
        background-image: url(./Dup/img/catch.png);
        width: 59vw;
        height: 27vw;
        top: 20%;
        left: 5%;
        z-index: 3;
    }
    #main_img #catch{display: none;}
    #main_img #catch p{padding: 0;}
    #catch_sp{
        margin-top: -6vw;
        z-index: 3;
        position: relative;
    }
    #intro .box_wrap .box{
        width: 100%!important;
        margin-right: 0%;
    }
    #intro .box_wrap .box > div{margin-left: 5%;}
    #contents{margin-top: 65vw;}
    #contents .d_flex > div.con_img{padding: 0;}
    #contents .con_img:before {
        width: 70vw;
        height: 65vw;
        top: 0;
        -ms-transform: translate(-50%, -70vw);
        -webkit-transform: translate(-50%, -70vw);
        transform: translate(-50%, -70vw);
    }
    #contents_links .square_box a h4{
        padding: 15px 10px;
        font-size: 18px;
    }
}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
    .loader.logo{width: 250px;}
    h1{width: 65%;}
    #intro{padding-bottom: 20px;}
    #intro .box_wrap .box > div{margin-left: 5%;}
    #contents_links{padding-top: 0;}
    #contents_links .square_box:first-of-type{background-position: center top -105px;}
    #contents{margin-top: 75vw;}
    #contents .con_img:before {
        -ms-transform: translate(-50%, -70vw);
        -webkit-transform: translate(-50%, -70vw);
        transform: translate(-50%, -70vw);
    }
    #page_title div.pd_t-100px {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .page6 .cate_title{
        border: 2px solid #c35a96;
    }
    #page10 ul li:nth-of-type(2) a{line-height: 2;}
    #page10 ul li:nth-of-type(2) .title{line-height: 1.2;}
}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #2d418c;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #ffffff;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #b4b4b4;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #f2f2f2;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #2d418c;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #ffffff;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #b4b4b4;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #f2f2f2;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #2d418c;}
.border_color2,.hvr_border_color2:hover{border-color: #ffffff;}
.border_color3,.hvr_border_color3:hover{border-color: #b4b4b4;}
.border_color4,.hvr_border_color4:hover{border-color: #f2f2f2;}

.page6 .txt_color1,.page6 .txt_color3,.page6 .hvr_txt_color1:hover,.page6 .hvr_txt_color3:hover{color: #c35a96;}
.page6 .border_color1,.page6 .hvr_border_color1:hover{border-color: #c35a96;}
.page6 .cate_list_title{color: #b4b4b4;border-color: #b4b4b4;}


@media  screen and (max-width: 1080px){
    .page6 .cate_list{padding-right: 0;padding-left: 0;}
    .page6 .cate_list li{
        width: 100%;
        margin-right:0;
        padding: 0;
        text-align: left;
    }
}


/*現場修正　2024/07/11*/
#page_title.custom_0711::after{
        background-color: rgba(0, 0, 0, 0.0);
}
footer.custom_0711::after {
    background-color: rgb(155 155 155 / 20%);
}
h2.custom_0711, p.custom_0711{
    text-shadow: #4d4d4d 1px 0 9px;
}
 a.custom_0711, h3.custom_0711{
     text-shadow: #878787 1px 0 9px;
 }
.border_so2.custom_0711 {
    box-shadow:  #878787 1px 0 9px;;
}