@charset "utf-8";
/*========= ローディング画面のためのCSS =================*/
@media screen and (max-width:960px) {
    #splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
}

/* heading =================================*/
@media screen and (max-width:768px) {
    #menu h2,
    #blog h2{font-size: 3rem;}
}

/* area inner =============================*/
@media screen and (max-width:1024px) {
    .inner{padding:30px;}
}

/* header =================================*/
@media screen and (max-width:1155px) {
    .header-area{position: fixed; left:0%; top:30%; transform: translate(-0%,-30%); z-index: 2; color: #ffffff; text-align: left;}
}

@media screen and (max-width:1024px) {
    .header-area{position: fixed; left:0%; right: 0%; top:20%; transform: translate(-0%,-20%); z-index: 2; color: #ffffff; text-align: center;}
    .header-area h1{font-size:4rem;}
    .header-area p{font-size:1.3rem; whitewhite-space:normal;}
    .header-area p br{display: block;}
}

/* lead ===================================*/
@media screen and (max-width:1300px) {
    #lead .lead-area h2 span{display: block;}
    #lead .lead-area h2{line-height:2;}
    #lead .lead-area p{line-height: 2.3;}
}

@media screen and (max-width:1125px) {
    #lead{padding-top:80px;}
    #lead .lead-img{width:38%;
    /*min-height: 580px;*/
    background: url("../img/lead-1024.jpg") top;
    background-size: contain;
    background-repeat: no-repeat;
    }
    #lead .lead-area{width:62%;}
    #lead .lead-area p{text-align: left;}
    #lead .lead-area p br{display: none;}
}

@media screen and (max-width:768px) {
    #lead{flex-direction: column-reverse;}
    #lead .lead-img{width:100%; margin: 0 0 40px 0; padding: 0 0.5%;
    min-height: 200px;
    background: url("../img/lead.jpg") no-repeat center;
    background-size: cover;
    }
    #lead .lead-area{width:100%; margin: 0 0 80px 0; padding: 0 0.5%; text-align: center;}
    #lead .lead-btn{width:100%; top: 0px; text-align: center;}
    #lead .lead-area h2{line-height: 2.2;}
    #lead .lead-area p{line-height: 2;}  
    #lead .btn04{padding: 10px 30px; width:280px;}
}

@media screen and (max-width:500px) {
    #lead .lead-area h2{line-height: 1.8;}
}

@media screen and (max-width:350px) {
    #lead .lead-area h2{line-height: 1.6;}
    #lead .lead-area p {line-height: 1.8;}
}

/* news ===================================*/
@media screen and (max-width:1024px) {
    #news .news-area{flex-direction: column;}
    #news .news-area p{border-bottom:dashed 1px #ffffff; margin: 0 auto 18px; padding:0;}
    #news .news-area_left{width:100%; margin: 0; padding: 0 2%;}
    #news .news-area_right{width:100%; margin: 0; padding: 0 2%;}
}

@media screen and (max-width:768px) {
    #menu .btn04{padding: 10px 30px; width:280px;}

}

/* blog ===================================*/
@media screen and (max-width:1300px) {
    .blog-area article:nth-of-type(1){width:40%;}
    .blog-area .blog-block{width:58%;}
    .blog-area .blog-block article:nth-of-type(1){width:48%;}
    .blog-area .blog-block article:nth-of-type(2){width:48%;}
    .blog-area .blog-block article:nth-of-type(3){width:48%;}
    .blog-area .blog-block article:nth-of-type(4){width:48%;}
    .blog-area .blog-block article:nth-of-type(5){display: none;}
    .blog-area .blog-block article:nth-of-type(6){display: none;}
    .blog-area .blog-block article:nth-of-type(7){display: none;}
}

@media screen and (max-width:820px) {
    .blog-area article:nth-of-type(1){width:50%; margin:0 auto 3vh auto;}
    .blog-area article:nth-of-type(1) img{width:100%; height:32vh; /*height:auto;*/} 
    .blog-area .blog-block article:nth-of-type(1){margin: 0 0 3vh 0;}
    .blog-area .blog-block article:nth-of-type(1) img{width:auto; height:32vh;}
    .blog-area .blog-block{width:100%;}

}
@media screen and (max-width:768px){
    .blog-area .blog-block article:nth-of-type(n+1){animation-delay: .5s;}
    .blog-area article:nth-of-type(1){width:100%;}
}
@media screen and (max-width:450px){
    .blog-area h3{font-size:0.8rem;}
    .blog-area p{display: none; margin: 0 0 8px 0;}
    .blog-area img,
    .blog-area .blog-block article:nth-of-type(1) img{width:auto; height:18vh; /*height:auto;*/}
    .blog-area figure p{font-size: 1rem;}
}

/* contact ===================================*/
@media screen and (max-width:1190px) {
    #contact .contact-img{width:35%;}
    #contact .contact-area{width:63%;}
}

@media screen and (max-width:768px) {
    #contact .contact-img{width:48%;}
    #contact .contact-area{width:48%;}
}

@media screen and (max-width:600px) {
    #contact .contact-img,
    #contact .contact-area{width:100%;}
    #contact .contact-img{margin:0 0 50px 0;}
}


/* footer ===================================*/
@media screen and (max-width:1190px) {
    #footer dl dd{font-size: 1.3rem;}

}
@media screen and (max-width:900px) {
    #footer dl{margin: 33px 0 48px;}
    #footer dl,
    #footer .footer-list,
    #footer small{width:100%; text-align: center;}

}

@media screen and (max-width:768px) {
    #footer dl dd{font-size: 1.5rem;}
}

/*========= モーダル表示のためのCSS ===============*/
@media screen and (max-width:768px) {
    .modaalinfolist br{display: block;}
}


/*==========================================
 footer_fixedarea PC Tbios Off
 side_fixedarea PC Tbios On
===========================================*/
@media screen and (min-width:768px){
    /* footer_fixedarea PC Tbios OFF =============*/
    #footer_fixedarea {display: none;}

    /* side_fixedarea PC Tbios ON ============*/
    #side_fixedarea{position: fixed; right: 0; top:200px;}
    #side_fixedarea ul{ list-style: none;}
    #side_fixedarea ul li{ margin:3px auto; border-top-left-radius: 8px; border-bottom-left-radius: 8px}
    #side_fixedarea ul li a{
    -webkit-writing-mode: vertical-rl; /* chrome safari */
    -ms-writing-mode: tb-rl; /* IE **/
    /*縦書き設定*/
    writing-mode: vertical-rl;
    color:#333333;
    text-decoration: none;
    padding: 8px 0 0;
    }
    /*
    #side_fixedarea ul li a::before{content: ""; display: inline-block; width: 20px; height: 20px; background:url("../img/contact.jpg"); background-repeat: no-repeat; background-size: contain;}
    */
    #side_fixedarea .coeur{background-color: #eab8d3; border: solid 1px #cccccc; padding: 0;}
    #side_fixedarea .glossy{background-color: #f69573; border: solid 1px #cccccc; padding: 0;}
}

@media screen and (max-width:768px){
/*=======================================
9-1-2 ===================================*/
/*スクロールダウン全体の場所*/
.scrolldown2{
/*描画位置※位置は適宜調整してください*/
position:fixed; bottom:80px; left:50%; z-index: 2;}

    /* footer_fixedarea PC Tbios ON =============*/
    #footer_fixedarea {position: fixed; /* 固定 */
    bottom: 0; /* 一番下に表示 */
    width: 100vw; z-index: 888;
    margin:0 auto; padding:0;
    text-align: center;
    color: #ffffff;
    border-top:1px solid #ffffff;
    vertical-align:baseline;
    letter-spacing: 0.01em;}
    #footer_fixedarea .eria {float: left; width: 50%; margin:0 auto 0; padding:0; text-align:center;}
    #footer_fixedarea .eria img{width:138px; height:auto;}
    #footer_fixedarea .eria:nth-of-type(1){width:50%; padding:2px 0; background-color: #eab8d3; border-right:1px solid #ffffff;}
    #footer_fixedarea .eria:nth-of-type(2){width:50%; padding:2px 0; background-color: #f69573;}
    #footer_fixedarea p{color:#333333; margin:0 auto 0; line-height:1.0;}
    #footer_fixedarea p span{display: block;}
    #footer_fixedarea i{color:#ffffff; font-size:1.5em;}
    /*#footer_fixedarea img{height: 2em; width:auto;}*/
    #footer_fixedarea a:link,
    #footer_fixedarea a:visited {color: #ffffff; text-decoration: none;}
    #footer_fixedarea a:hover,
    #footer_fixedarea a:active {color: #888888; text-decoration: none;}
    /* side_fixedarea PC Tbios OFF ============*/
    #side_fixedarea{display: none;}
}


/*==========================================
 menu design partsCSS
===========================================*/
@media screen and (max-width:600px) {
/**-- share-contact ------------------------------------------------------**/
    .share-contact li{float: none; margin:1% auto; padding:0; width: 100%;}
}