@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap");


#main * {
    box-sizing: border-box;
    font-family: 'Noto Serif JP', serif; /*"Noto Sans JP"*/
}
#main #breadcrumbs *{font-family: initial;}

/**/
.first_visual{background-image: url(../img/first_visual.jpg);width: 100%; background-size: cover; background-position: center center;height: 600px;}
.first_wrap {background-color: #fff;position: relative;top:-80px;max-width: 980px;width: 100%; margin: auto;padding: 60px 60px 40px;}
.first_wrap h1{text-align: center;}
.first_wrap h1 img{width: 200px;vertical-align: bottom;}
.first_wrap h2{text-align: center;margin: 40px 0;font-size: 36px;}
.first_wrap h2 span{display: inline-block;}
.first_wrap > div{text-align: center;line-height: 1.8em;}
.first_wrap > div p span{display: inline-block;}

.wrap_box{display: flex;align-items:flex-end;margin-bottom: 100px;}
.wrap_r{justify-content: right;}
.wrap_box > p{position: relative;z-index: -1;}
.wrap_box > p img{ max-width: 100%;height: auto;}
.wrap_box > p span{position: absolute;bottom: 20px;right: 20px;background-color: #fff;padding: 5px 10px;font-size: 12px;border-radius: 20px;}
.wrap_l > p span{left: 20px;right: auto;}
.wrap_box > div{z-index: 2;background-color: #fff;max-width: 500px;}
.wrap_l > div, .wrap_r > p{order: 2;}
.wrap_r > div, .wrap_l > p{order: 1;}
.wrap_l > div{margin-left: -140px;padding-left: 40px;}
.wrap_r > div{margin-right: -140px;padding-right: 40px;}
.wrap_box h3{font-size: 24px;font-weight: bold;}
.design_wrap section:nth-child(1) h3::before{content: "1";}
.design_wrap section:nth-child(2) h3::before{content: "2";}
.design_wrap section:nth-child(3) h3::before{content: "3";}
.design_wrap section:nth-child(4) h3::before{content: "4";}
.design_wrap section:nth-child(5) h3::before{content: "5";}
.design_wrap section:nth-child(6) h3::before{content: "6";}
.wrap_box h3::before{font-size: 54px;margin-right: 20px;}
.wrap_box h3 span{display: inline-block;font-weight: bold;}
.wrap_box a{display: block;width: 300px;padding: 10px;text-align: center;border: 1px solid #000;position: relative;margin-top: 20px;transition: .4s;}
.wrap_box a::after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    right: 25px;
    margin: 5px 0;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    transform: rotate(45deg);
}
.wrap_box a:hover{opacity: .6;}

#design_style{width: 96%;margin: auto;}
#design_style h3{font-size: 24px;font-weight: bold;text-align: center;margin-bottom: 40px;}
#design_style h3::before{content: "7";font-size: 54px;text-align: center;display: block;margin-bottom: -10px;}
.design_style_wrap{display: flex;justify-content: space-around;flex-wrap: wrap;}
.design_style_wrap a{display: block;width: 371px;margin-bottom: 40px;position: relative;transition: .4s;}
.design_style_wrap a:hover{opacity: .6;}
.design_style_wrap a img{max-width: 100%;vertical-align: bottom;}
.design_style_wrap .flex_none{visibility: visible;height: 0;}
#design_style h4{font-size: 18px;margin: 0.8em 0 0 0;}
#design_style h5{background-color: #fff;padding: 3px 8px;font-size: 12px;position: absolute;top:5px;left: 5px;}
#design_style span{display: block;text-align: right;font-size: 12px;position: relative;padding-right: 15px;}
#design_style span::after{
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    right: 0;
    margin: 5px 0;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    transform: rotate(45deg);
}

/* -------------- @media -------------- */
@media screen and (max-width: 780px) {
    .design_style_wrap a{width: 48%;}
}

@media screen and (max-width: 690px) {
    .first_wrap{padding: 40px 0;position: static;}
    .first_visual{height: 500px;}
    .wrap_box{flex-wrap: wrap;justify-content: center;padding: 0 4%;}
    .wrap_box > p{width: 100%;margin: auto;}
    .wrap_box > div{width: 100%;margin:0 auto 0;padding-left: 0;padding-right:0;padding-top: 0;}
    .wrap_r > p{order: 1;}
    .wrap_box a{margin: 40px auto 0;}
}


@media screen and (max-width: 425px) {
    .first_visual{height: 400px;}
    .first_wrap h2{font-size: 30px;}
    .wrap_box h3{line-height: 1.2em;margin: 1.4em 0;text-align: center;}
    .wrap_box h3::before{display: block;text-align: center;margin: 20px 0 20px;}
    #design_style h3{font-size: 18px;}
    #design_style h5{top:5px;left: 5px;padding: 2px 8px;}
}