@charset "utf-8";

/* CLT quakeproof.css - Replicating reference site design, font sizes, and layouts */
#clt-quakeproof-page {
    font-family: 'Noto Sans JP', sans-serif !important;
    background-color: #000;
    color: #F0F0F0;
    padding-bottom: 60px;
    line-height: 1.63;
    font-size: 0.8em;
}

#clt-quakeproof-page h1, #clt-quakeproof-page h2, #clt-quakeproof-page h3, #clt-quakeproof-page h4, #clt-quakeproof-page p { margin: 0; padding: 0 !important; font-weight: normal; background: none !important; border: none !important; letter-spacing: normal; line-height: 1.6; }
#clt-quakeproof-page h2::before, #clt-quakeproof-page h2::after, #clt-quakeproof-page h3::before, #clt-quakeproof-page h3::after, #clt-quakeproof-page h4::before, #clt-quakeproof-page h4::after { display: none !important; content: none !important; }

#clt-quakeproof-page a {
    color: #F0F0F0;
    text-decoration: none;
    transition: all 0.2s linear;
}
#clt-quakeproof-page a:hover { opacity: 0.8; }

#clt-quakeproof-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

#clt-quakeproof-page ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#clt-quakeproof-page .title { margin: 0; font-size: 2.5em; display: inline-block; line-height: 1.4; font-weight: bold; }
#clt-quakeproof-page .title-top .title, #clt-quakeproof-page .title-btm .title { font-size: 2.05em; line-height: 1.4; }
#clt-quakeproof-page .sub-title { margin: 0; font-size: 1em; display: block; }
#clt-quakeproof-page .cap-title { margin: 36px 0; font-size: 1.5em; display: block; line-height: 1.4; font-weight: normal; }
#clt-quakeproof-page .txt-001, #clt-quakeproof-page .txt-002, #clt-quakeproof-page .txt-003, #clt-quakeproof-page .txt-004 { display: inline; width: auto; }

#clt-quakeproof-page p { font-size: 1.25em; line-height: 2.1em; }

/* PC/SP Bricks */
#clt-quakeproof-page .sp-br { display: none; }
#clt-quakeproof-page .pc-br { display: inline; }

/* Local Nav Fixes for Dark Background */
#clt-quakeproof-page .clt-local-nav { margin-bottom: 40px; }
#clt-quakeproof-page .clt-local-nav a { color: #fff; }
#clt-quakeproof-page .clt-local-nav li.current a, #clt-quakeproof-page .clt-local-nav a:hover { color: #000; }

/* Desktop Layout */
@media screen and (min-width: 768px) {
    /* Section 001 */
    #clt-quakeproof-page .section-001 { position: relative; height: 100%; object-fit: cover; }
    #clt-quakeproof-page .section-001 h1 { width: 30%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; display:flex; justify-content:center; }
    #clt-quakeproof-page .section-001 h1 picture { width: 100%; }
    #clt-quakeproof-page .section-001 .base { position: relative; margin: 0 auto; width: 100%; }

    /* Section 002 */
    #clt-quakeproof-page .section-002 .inner { width: 100%; max-width: 1180px; margin: 80px auto; position: relative; }
    #clt-quakeproof-page .section-002 .inner h2 { text-align: center; }
    #clt-quakeproof-page .section-002 .inner p { margin: 50px auto; }
    #clt-quakeproof-page .section-002 .inner > picture > .img-001 { margin: 50px auto; }
    #clt-quakeproof-page .section-002 .block-box { position: relative; min-height: 430px; margin-top: 80px; }
    #clt-quakeproof-page .section-002 .block-box h3 { font-size: 1.5em; text-align: left; margin-bottom: 30px; line-height:1.5;}
    #clt-quakeproof-page .section-002 .block-box h3 .txt-001 { font-size: 1.5em; margin-bottom: 10px; }
    #clt-quakeproof-page .section-002 .block-box .img-002 { position: absolute; width: 35%; right: 0; top: 0; }
    #clt-quakeproof-page .section-002 .block-box .txt-box { width: 57%; padding-top: 3%; float: left; text-align: left; }

    /* Section 003 */
    #clt-quakeproof-page .section-003 { position: relative; height: 100%; object-fit: cover; }
    #clt-quakeproof-page .section-003 .base { position: relative; margin: 0 auto; width: 100%; }
    #clt-quakeproof-page .section-003 .base .img-001 { width:100%; }
    #clt-quakeproof-page .section-003 .top { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
    #clt-quakeproof-page .section-003 .inner { width: 100%; max-width: 1180px; margin: 30px auto; }
    
    #clt-quakeproof-page .section-003 h3.title-top { margin-top: 80px; font-size: 1.45em; text-align: center; }
    #clt-quakeproof-page .section-003 .block-box-001 { margin: 80px auto 30px; position: relative; min-height: 300px; display:flex; justify-content:space-between;}
    #clt-quakeproof-page .section-003 .block-box-001 .img-002 { position: absolute; width: 45%; left: 0; top: 0; }
    #clt-quakeproof-page .section-003 .block-box-001 .txt-box { width: 50%; float: right; margin-left:50%; }
    
    #clt-quakeproof-page .section-003 h3.title-btm { margin: 100px auto 0px; font-size: 1.45em; text-align: center; }
    #clt-quakeproof-page .section-003 .block-box-002 { margin: 50px auto; text-align:center; }
    #clt-quakeproof-page .section-003 .block-box-002 h4 { font-size: 1.2em; text-align:center; margin-bottom:20px;}
    #clt-quakeproof-page .section-003 .slide-box { margin: 50px auto; text-align:center;}
    #clt-quakeproof-page .section-003 .slide-box img { max-width: 100%; margin:0 auto; }
    #clt-quakeproof-page .section-003 .movie-box { width: 80%; margin: 100px auto; position: relative; padding-top: 45%; border-radius: 20px; overflow: hidden; }
    #clt-quakeproof-page .section-003 .movie-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    /* Section 004 */
    #clt-quakeproof-page .section-004 { position: relative; }
    #clt-quakeproof-page .section-004 .base { position: relative; margin: 0 auto; width: 100%; }
    #clt-quakeproof-page .section-004 .top { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
    #clt-quakeproof-page .section-004 .inner { width: 100%; max-width: 1180px; margin: 30px auto; position: relative; }
    
    #clt-quakeproof-page .section-004 h3.title-top { margin-top: 80px; font-size: 1.45em; text-align: left; }
    #clt-quakeproof-page .section-004 .block-box-001 { margin: 60px auto 30px; position: relative; min-height: 400px; display:block;}
    #clt-quakeproof-page .section-004 .block-box-001 .img-002 { position: absolute; width: 45%; right: 0; top: 0; }
    #clt-quakeproof-page .section-004 .block-box-001 .txt-box { width: 50%; float: left; padding-top:20px; }
    #clt-quakeproof-page .section-004 .block-box-001 .txt-box h4 { font-size: 1.2em; margin-bottom: 20px; line-height: 1.5;}

    #clt-quakeproof-page .section-004 .block-box-002 { margin: 100px auto; position: relative; height: 400px; display: block; }
    #clt-quakeproof-page .section-004 .block-box-002 .img-003 { position: absolute; width: 47%; left: 0; top: 0; }
    #clt-quakeproof-page .section-004 .block-box-002 .txt-box { width: 45%; float: right; padding-top:20px; }
    
    #clt-quakeproof-page .section-004 h3.title-btm { margin-top: 80px; font-size: 1.45em; text-align: left; }
    #clt-quakeproof-page .section-004 .block-box-003 { margin: 60px auto 30px; position: relative; min-height: 600px; }
    #clt-quakeproof-page .section-004 .block-box-003 .img-002 { position: absolute; width: 48%; right: 0; top: 0; }
    #clt-quakeproof-page .section-004 .block-box-003 .txt-box { width: 45%; float: left; padding-top:20px; }
    #clt-quakeproof-page .section-004 .block-box-003 .txt-box h4 { font-size: 1.2em; margin-bottom: 20px; line-height: 1.5; }

    /* Section 005 */
    #clt-quakeproof-page .section-005 { position: relative; }
    #clt-quakeproof-page .section-005 .base { position: relative; margin: 0 auto; width: 100%; }
    #clt-quakeproof-page .section-005 .top { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }
    #clt-quakeproof-page .section-005 .inner { width: 100%; max-width: 1180px; margin: 30px auto; position: relative; }
    
    #clt-quakeproof-page .section-005 h3.title-top { margin-top: 80px; font-size: 1.45em; text-align: center; }
    #clt-quakeproof-page .section-005 .block-box-001 { margin: 60px auto 30px; text-align:center;}
    #clt-quakeproof-page .section-005 .block-box-001 .slide-box { margin-bottom: 40px; }
    #clt-quakeproof-page .section-005 .block-box-001 p { max-width:800px; margin: 0 auto 30px; text-align:left;}

    #clt-quakeproof-page .section-005 .block-box-002 { margin: 100px auto; position: relative; min-height: 500px; }
    #clt-quakeproof-page .section-005 .block-box-002 h3 { margin-bottom:40px; text-align:left; font-size:1.45em;}
    #clt-quakeproof-page .section-005 .block-box-002 .img-003 { position: absolute; width: 45%; right: 0; top: 0; }
    #clt-quakeproof-page .section-005 .block-box-002 .txt-box { width: 50%; float: left; text-align:left; }

    /* Section 006 */
    #clt-quakeproof-page .section-006 { background: #141414; margin-top: 200px; text-align: center; padding-bottom: 100px; border-radius:20px; }
    #clt-quakeproof-page .section-006 .img-001 { margin: -100px auto 0; width: 90%; max-width: 1062px; position:relative; }
    #clt-quakeproof-page .section-006 .inner { width: 100%; max-width: 1180px; margin: 50px auto 0; padding:0 20px;}
    #clt-quakeproof-page .section-006 h2 { text-align: center; margin-top: 50px; margin-bottom:30px;}
    #clt-quakeproof-page .section-006 ul { display: flex; flex-wrap: wrap; margin: 80px 0; justify-content:space-between;}
    #clt-quakeproof-page .section-006 ul li { width: 31%; text-align: left; }
    #clt-quakeproof-page .section-006 .movie-box { width: 100%; padding-top: 56.25%; position: relative; margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
    #clt-quakeproof-page .section-006 .movie-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    #clt-quakeproof-page .section-006 .txt-box h3 { font-size: 1.2em; margin-bottom:10px; margin-top:20px; line-height:1.5;}
    #clt-quakeproof-page .section-006 .txt-box p { font-size: 1em; line-height: 1.5; color:#aaa;}
}

@media screen and (max-width: 1180px) {
    #clt-quakeproof-page .section-002 .inner,
    #clt-quakeproof-page .section-003 .inner,
    #clt-quakeproof-page .section-004 .inner,
    #clt-quakeproof-page .section-005 .inner,
    #clt-quakeproof-page .section-006 .inner { width: 92%; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 1024px) {
    #clt-quakeproof-page .title { font-size: 1.8em; }
    #clt-quakeproof-page .cap-title { font-size: 1.4em; }
    #clt-quakeproof-page p { font-size: 1.2em; line-height: 2em; }
    
    #clt-quakeproof-page .section-002 .block-box { height:auto; display:flex; flex-direction:column; padding:0 20px;}
    #clt-quakeproof-page .section-002 .block-box .img-002 { position:static; width:100%; margin-bottom:30px; }
    #clt-quakeproof-page .section-002 .block-box .txt-box { width:100%; }

    #clt-quakeproof-page .section-003 .block-box-001,
    #clt-quakeproof-page .section-004 .block-box-001,
    #clt-quakeproof-page .section-004 .block-box-002,
    #clt-quakeproof-page .section-004 .block-box-003,
    #clt-quakeproof-page .section-005 .block-box-002 {
        height:auto !important; display:flex; flex-direction:column; padding:0 20px; margin-top:20px !important; margin-bottom:40px !important;
    }
    #clt-quakeproof-page .section-003 .block-box-001 .img-002,
    #clt-quakeproof-page .section-004 .block-box-001 .img-002,
    #clt-quakeproof-page .section-004 .block-box-002 .img-003,
    #clt-quakeproof-page .section-004 .block-box-003 .img-002,
    #clt-quakeproof-page .section-005 .block-box-002 .img-003 {
        position:static !important; width:100% !important; margin-bottom:30px !important; margin-left:0 !important;
    }
    #clt-quakeproof-page .section-003 .block-box-001 .txt-box,
    #clt-quakeproof-page .section-004 .block-box-001 .txt-box,
    #clt-quakeproof-page .section-004 .block-box-002 .txt-box,
    #clt-quakeproof-page .section-004 .block-box-003 .txt-box,
    #clt-quakeproof-page .section-005 .block-box-002 .txt-box {
        width:100% !important; margin-left:0 !important; padding-top:0 !important;
    }
    #clt-quakeproof-page .section-006 ul li { width:48%; }
}

@media screen and (max-width: 767px) {
    #clt-quakeproof-page .title { font-size: 1.3em; line-height: 1.6; display: block; }
    #clt-quakeproof-page .title-top .title, #clt-quakeproof-page .title-btm .title { font-size: 1.3em; }
    #clt-quakeproof-page .cap-title { font-size: 1.25em; line-height: 1.5; }
    #clt-quakeproof-page p { font-size: 1.25em; line-height: 2.0em; text-align: justify; }

    #clt-quakeproof-page .sp-br { display: inline; }
    #clt-quakeproof-page .pc-br { display: none; }
    
    #clt-quakeproof-page .section-001 h1 { width: 80%; max-width: 350px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; display:flex; justify-content:center; z-index: 2;}
    #clt-quakeproof-page .section-001 h1 picture { width: 100%; }
    
    #clt-quakeproof-page .section-002 .inner,
    #clt-quakeproof-page .section-003 .inner,
    #clt-quakeproof-page .section-004 .inner,
    #clt-quakeproof-page .section-005 .inner { width: 86%; max-width: 400px; margin: 50px auto; padding:0; }
    
    #clt-quakeproof-page .section-003 .top,
    #clt-quakeproof-page .section-004 .top,
    #clt-quakeproof-page .section-005 .top { text-align: center; width: 86%; max-width: 400px; margin: 30px auto; position: static; transform: none; }
    
    #clt-quakeproof-page .section-002 .inner .img-001 { max-width:100%; }
    
    #clt-quakeproof-page .section-006 ul { flex-direction:column; }
    #clt-quakeproof-page .section-006 ul li { width:100%; margin-bottom:40px;}
    
    #clt-quakeproof-page h3.title-top, #clt-quakeproof-page h3.title-btm { text-align:center !important; margin:40px 0 !important;}
}

/* Gray Notice Texts */
#clt-quakeproof-page .notice { font-size: 0.85em; color: #888; display: block; margin-top: 20px; }
