﻿/* ---------------------- color */
/* メインカラー */
.txt_color1{color: #F23D3D} 
.bg_color1{background-color: #F23D3D} 
.border_color1{border-color: #F23D3D}
.hvr_txt_color1:hover{color: #F23D3D} 
.hvr_bg_color1:hover{background-color: #F23D3D} 
.hvr_border_color1:hover{border-color: #F23D3D}

/* サブカラー */
.txt_color2{color: #F7F2F0} 
.bg_color2{background-color: #F7F2F0} 
.border_color2{border-color: #F7F2F0}
.hvr_txt_color2:hover{color: #F7F2F0} 
.hvr_bg_color2:hover{background-color: #F7F2F0} 
.hvr_border_color2:hover{border-color: #F7F2F0}

/* アクセントカラー */
.txt_color3{color: #857979} 
.bg_color3{background-color: #857979} 
.border_color3{border-color: #857979}
.hvr_txt_color3:hover{color: #857979} 
.hvr_bg_color3:hover{background-color: #857979} 
.hvr_border_color3:hover{border-color: #857979}

/* アクセントカラー2 */
.txt_color4{color: #D2CBC8} 
.bg_color4{background-color: #D2CBC8} 
.border_color4{border-color: #D2CBC8}
.hvr_txt_color4:hover{color: #D2CBC8} 
.hvr_bg_color4:hover{background-color: #D2CBC8} 
.hvr_border_color4:hover{border-color: #D2CBC8}

body,.txt_color_nomal{color: #403838;}

/* ---------------------- common */
body {
    font-family: 'Roboto','Noto Sans JP',"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.font_bar {
    font-family: 'Aldrich', 'Noto Sans JP',sans-serif;
}



/* --- automatic link --- */
.linkStyle{color: #F23D3D}

.linkStyle:hover{
    text-decoration: underline;
}

/* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */
footer{
    background-image: url(Dup/img/bg_concrete.jpg);
    background-size: 1400px;
    background-position: center;
}

/* -------------------------- top ------------------------- */
.custom_wrap{
    background-image: url("Dup/img/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top 10%;
}

#hero_logo {
    width: 150px;
    position: absolute;
    top: 25px;
    left: 25px;
}

#catchcopy {
    width: 30%;
    position: absolute;
    bottom: 280px;
    left: 85px;
}

#top_contact_link{
    box-sizing: border-box;
    position: absolute;
    bottom: 170px;
    left: 114px;
    background-color: #f23d3d;
    color: #fff;
    padding: 10px 20px;
    font-size: 28px;
    font-family: 'Aldrich', 'Noto Sans JP',sans-serif;
    transition: all ease 0.3s;
}

#top_contact_link:hover{
    bottom: 175px;
}
#scroll_visual {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
#scroll_icon {
    width: 50px;
    display: block;
    margin: 0 auto 10px;
    position: relative;
    animation: scroll_down 5s ease infinite;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
}

@keyframes scroll_down{
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

#scroll_visual span {
    display: block;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.intro_left,
#contents,
#top_cms {
    background-image: url(Dup/img/bg_concrete.jpg);
    background-size: 1400px;
    background-position: center;
}
.cms_title {
    border-color: #f23d3d;
    border-width: 3px;
}
#top_cms .cms_title span {
    background-color: transparent;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */
#cms_6-b .cate_title {
    background-color: #f23d3d;
}
.cms_6-b .box_txt1,
#cms_6-b .box_txt1 {
    background-color: #857979;
}
.cms_6-b .box_txt2 {
    background-color: rgba(255,255,255,0.5);
}
/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */

/* ---------------------- sitemap */


/* ----------------------------------------------------------------------------------------------------------------------------
IE
--------------------------------------------------------- */
@media all and (-ms-high-contrast: none){
/* ---------------------- common */

/* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
/* --- more --- */

/* -------------------------- sub ------------------------- */
.cate_list a {
    padding-top: 0px!important;
}
/* ---------------------- cms1 */

/* ---------------------- cms2 */



#cms_2-a .cate .cate_title {
    padding-top: 7px!important;
}

/* ---------------------- cms3 */

#cms_6-b .cate .cate_title {
    padding: 4px 5px 6px!important;
}

#cms_6-b .cate .box_txt1 {
    padding: 10px 10px 10px!important;
}

/* ---------------------- cms4 */
#cms_4-c .cate_title {
    padding-top: 10px!important;
}

/* ---------------------- cms5 */

/* ---------------------- info */
#page07 .info_title::before {
    top: 14px!important;
}

/* ---------------------- contact */

/* ---------------------- privacy policy */
#page09 a {
    padding-top: 0px!important;
    padding-bottom: 2px!important;
}

/* ---------------------- sitemap */


}

/* ---------------------------------------------------------------------------------------------------------------------------- 
タブレット　
--------------------------------------------------------- */
@media screen and (max-width: 768px){
/* ---------------------- common */
 .linkStyle{
    text-decoration: underline;
}
 
 /* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
#catchcopy {
    width: 50%;
    bottom: 31%;
    left: 30px;
}
#top_contact_link {
    bottom: calc(31% - 90px);
    left: 45px;
}
#top_contact_link:hover{
    bottom: calc(31% - 90px);
}
.cms_box:last-child {
    margin-bottom: 0;
    padding-bottom: 100px;
}
/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */

/* ---------------------- sitemap */

 
}

/* ----------------------------------------------------------------------------------------------------------------------------
スマホ　
--------------------------------------------------------- */
@media screen and (max-width: 667px){
/* ---------------------- common */
    
/* ---------------------- header */

/* ---------------------- nav */

/* ---------------------- footer */



/* -------------------------- top ------------------------- */
#hero_logo {
    width: 60px;
    top: 12px;
    left: 10px;
}
#catchcopy {
    width: 300px;
    bottom: 33%;
    left: 50%;
    transform: translateX(-50%);
}
#top_contact_link {
    bottom: calc(33% - 75px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    width: 80%;
    max-width: 300px;
    text-align: center;
}
#top_contact_link:hover{
    bottom: calc(33% - 75px);
}
#scroll_icon {
    width: 30px;
    margin: 0 auto 5px;
}
#scroll_visual span {
    font-size: 12px;
}
@keyframes scroll_down{
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

/* --- more --- */

/* -------------------------- sub ------------------------- */

/* ---------------------- cms1 */

/* ---------------------- cms2 */

/* ---------------------- cms3 */

/* ---------------------- cms4 */

/* ---------------------- cms5 */

/* ---------------------- info */

/* ---------------------- contact */

/* ---------------------- privacy policy */

/* ---------------------- sitemap */

	
}