@charset 'UTF-8';
/* mono tone */

/*====================================================================

index.css

=====================================================================*/
/*--------------------------------------------------------------------/
	main-view
/--------------------------------------------------------------------*/
.main-view
{
    position: relative;

    width: 100%;
}
.main-view .l-cont
{
    position: relative; 

    display: -ms-flexbox;
    display: flex;

    height: 100%;

    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.main-view__add
{
    position: absolute;
}
.main-view__add img
{
    display: block;

    height: 100%;
}
.main-view__tit img
{
    display: block;

    height: 100%;
    max-height: 667px; 
    margin: 0 auto;
}
.main-view__scroll
{
    position: absolute;
    bottom: 40px;
    bottom: 2.5rem;
    left: 50%;

    transform: translateX(-50%); 

    color: #fff;
}
.main-view__scroll a
{
    color: #fff;
}
.main-view__scroll span
{
    font-family: 'Oswald',sans-serif;
    font-size: 1em;
    font-weight: 100; 

    position: relative;
}
.main-view__scroll span:after
{
    position: absolute;
    z-index: 1;
    top: 20px;
    top: 1.25rem;
    left: 50%;

    display: block;

    width: 1px;

    content: '';
    animation: scrollLine 1s ease-out .5s forwards; 

    background: #fff;
}

@keyframes scrollLine
{
    0%
    {
        height: 0rem;
    }
    100%
    {
        height: 48px;
    }
}

/* common
----------------------------------------------------------------*/
/*--------------------------------------------------------------------/
	contents
/--------------------------------------------------------------------*/
.contents
{
    background: #fff;
}

/* cont-read
----------------------------------------------------------------*/
.cont-read
{
    padding-top: 80px;
    padding-top: 5rem;
    padding-bottom: 80px;
    padding-bottom: 5rem; 

    background: url(../img/common/bg_01.png);
}
.cont-read section:nth-of-type(1) .cont-read__tit:first-letter
{
    font-size: 1.5em;

    margin-right: 4.8px;
    margin-right: .3rem;

    color: #5da80c;
    border-bottom: 4px solid;
}
.cont-read section:nth-of-type(2) .cont-read__tit:first-letter
{
    font-size: 1.5em;

    margin-right: 4.8px;
    margin-right: .3rem;

    color: #f68b0d;
    border-bottom: 4px solid;
}
.cont-read__wrap
{
    background: url(../img/common/bg_01.png);
}
.cont-read__tit
{
    font-family: 'Noto Serif JP', serif;
    font-size: calc(1.25rem + 6 * (100vw - 320px) / 677); 
    font-weight: normal;
    line-height: 1;

    margin-bottom: 24px;
    margin-bottom: 1.5rem;
}

/* cont-business
----------------------------------------------------------------*/
.cont-business
{
    padding-top: 64px;
    padding-top: 4rem;
    padding-bottom: 80px;
    padding-bottom: 5rem; 

    background: url(../img/common/bg_02.png);
}

.cont-painting__tit
{
    font-family: 'Noto Serif JP', serif;
    font-size: calc(1.5rem + 8 * (100vw - 320px) / 920);

    margin-bottom: 48px;
    margin-bottom: 3rem; 

    text-align: center;

    color: #333;
}

.cont-painting__flex
{
    margin-bottom: 64px;
    margin-bottom: 4rem;
}

.cont-painting__box
{
    position: relative; 

    padding-bottom: 56px;
    padding-bottom: 3.5rem;
}
.cont-painting__box h4
{
    font-size: 1.25em;

    position: relative;

    margin-bottom: 12px;
    margin-bottom: .75rem; 
    padding-bottom: 12px;
    padding-bottom: .75rem;

    text-align: center;
}
.cont-painting__box h4:after
{
    position: absolute;
    bottom: 3px; 
    left: calc(50% - 1rem);

    display: block;

    width: 32px;
    width: 2rem;
    height: 3px;

    content: '';

    background: #7dc420;
}
.cont-painting__box figure
{
    margin-bottom: 8px;
    margin-bottom: .5rem; 

    border: 4px solid #fff;
}
.cont-painting__box .btn-wrap
{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
}

.cont-waterproof section h3
{
    font-size: 1.25em;

    position: relative;

    margin-bottom: 12px;
    margin-bottom: .75rem; 
    padding-bottom: 12px;
    padding-bottom: .75rem;

    text-align: center;
}
.cont-waterproof section h3:after
{
    position: absolute;
    bottom: 3px; 
    left: calc(50% - 1rem);

    display: block;

    width: 32px;
    width: 2rem;
    height: 3px;

    content: '';
}

.cont-waterproof section:first-child h3:after
{
    background: #1f86f0;
}

.cont-waterproof section:first-child .cont-waterproof__box
{
    background: url(../img/top/pic_03.jpg);
}

.cont-waterproof section:nth-of-type(2) h3:after
{
    background: #f68b0d;
}

.cont-waterproof section:nth-of-type(2) .cont-waterproof__box
{
    background: url(../img/top/pic_04.jpg);
}

.cont-waterproof__box
{
    padding: 20px;
    padding: 1.25rem;
}
.cont-waterproof__box .txt_wrap
{
    padding: 24px 6%;
    padding: 1.5rem 6%; 

    background: rgba(255, 255, 255, .7);
}

/* cont-results
----------------------------------------------------------------*/
.cont-results
{
    padding-top: 80px;
    padding-top: 5rem;
    padding-bottom: 80px;
    padding-bottom: 5rem; 

    background: url(../img/common/bg_01.png);
}
.cont-results__tit
{
    font-family: 'Noto Serif JP', serif;
    font-size: calc(1.5rem + 8 * (100vw - 320px) / 920);

    margin-bottom: 48px;
    margin-bottom: 3rem; 

    text-align: center;

    color: #333;
}
.cont-results__box figure
{
    overflow: hidden; 

    border: 4px solid #fff;
    box-shadow: 0 0 8px #ccc;
}
.cont-results__box figure img
{
    -o-object-fit: cover;
       object-fit: cover;
}
.cont-results__box h4
{
    font-size: 1.14em; 
    font-weight: normal;

    margin-top: 8px;
    margin-top: .5rem;

    text-align: center;

    color: #1d1d1d;
}

/* cont-feed
----------------------------------------------------------------*/
.cont-news
{
    padding-top: 80px;
    padding-top: 5rem;
    padding-bottom: 64px;
    padding-bottom: 4rem;
}
.cont-news h3
{
    font-family: 'Noto Serif JP', serif;
    font-size: calc(1.5rem + 6 * (100vw - 320px) / 920); 

    margin-bottom: calc(1.5rem + .6em);

    text-align: center;
}

.news-box
{
    padding-top: 20px;
    padding-top: 1.25rem;
    padding-bottom: 20px;
    padding-bottom: 1.25rem;

    border-top: dotted #999 1px;
}
.news-box:last-of-type
{
    border-bottom: dotted #999 1px;
}
.news-box figure a img
{
    margin: auto;
}
.news-box dt
{
    font-weight: 600;

    margin-bottom: 4.8px;
    margin-bottom: .3rem; 

    color: #043795;
}

.cont-blog
{
    padding-bottom: 96px;
    padding-bottom: 6rem;
}
.cont-blog h3
{
    font-family: 'Noto Serif JP', serif;
    font-size: calc(1.5rem + 6 * (100vw - 320px) / 920); 

    margin-bottom: calc(1.5rem + .6em);

    text-align: center;
}

.blog-box
{
    position: relative;
}
.blog-box a
{
    display: -ms-flexbox;
    display: flex;
        flex-direction: column-reverse;

    color: #1d1d1d; 

    -ms-flex-direction: column-reverse;
}
.blog-box a h4
{
    text-decoration: underline;
}
.blog-box a:hover h4
{
    text-decoration: none;
}
.blog-box h4
{
    font-weight: normal;
}
.blog-box figure
{
    margin-bottom: 8px;
    margin-bottom: .5rem;
}
.blog-box p
{
    font-weight: 600; 

    color: #043795;
}
@media print, screen and (min-width: 376px)
{
    /*====================================================================/
	/*------------------iPhone 以上----------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
}
@media print, screen and (min-width: 481px)
{
    /*====================================================================/
	/*------------------タブレットスタイル----------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .cont-read
    {
        background: url(../img/common/add_orange.png) bottom -16rem right calc(50% + 360px) no-repeat, url(../img/common/add_green.png) top -16rem left calc(50% + 360px) no-repeat, url(../img/common/bg_01.png);
    }
    .cont-painting__flex
    {
        display: -ms-flexbox;
        display: flex; 

        margin-bottom: 5rem;
    }
    .cont-painting__flex > *
    {
        width: 30%;
    }
    .cont-painting__flex > *:not(:nth-child(3))
    {
        margin-right: 5%;
    }
    .cont-results__flex
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .cont-results__flex > *
    {
        width: 32%;
    }
    .cont-results__box figure
    {
        height: 26vw;
    }
    .news-box
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .news-box figure
    {
        width: 160px;
    }
    .news-box dl
    {
        width: calc(100% - 160px - 2rem);
    }
    .news-box figure a img
    {
        max-height: 160px;
    }
    .cont-blog__flex
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .cont-blog__flex > *
    {
        width: 45%;
        margin-bottom: 1rem;
    }
    .cont-blog__flex > *:nth-of-type(odd)
    {
        margin-right: 5%;
    }
    .cont-blog__flex > *:nth-of-type(even)
    {
        margin-left: 5%;
    }
    .cont-blog__flex > *:nth-of-type(even):before
    {
        position: absolute;
        left: -11.11%;

        display: block;

        width: 1px;
        height: 100%;

        content: '';

        border-left: 1px dotted #999;
    }
}
@media print, screen and (min-width: 997px)
{
    /*====================================================================/
	/*-------------------小さいPCスタイル----------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .main-view
    {
        background: url(../img/top/h2-add.png) right calc(50% + 250px) top 20%/300px no-repeat, url(../img/top/h2-bg_pc.jpg) top center/cover no-repeat;
    }
    .cont-read
    {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .cont-read section:nth-of-type(1)
    {
        padding-right: 50%;

        background: url(../img/top/pic_01.jpg) center right no-repeat;
    }
    .cont-read section:nth-of-type(1) .cont-read__wrap
    {
        padding-top: 2rem; 
        padding-right: 3rem;
    }
    .cont-read section:nth-of-type(2)
    {
        padding-left: 50%;

        background: url(../img/top/pic_02.jpg) center left no-repeat;
    }
    .cont-read section:nth-of-type(2) .cont-read__wrap
    {
        padding-top: 3rem; 
        padding-left: 3rem;
    }
    .cont-read__wrap
    {
        font-size: 1.07em; 

        height: 320px;
    }
    .cont-read__tit
    {
        font-size: calc(1.25rem + 10 * (100vw - 980px) / 260);
    }
    .cont-business
    {
        padding-top: 5rem;
        padding-bottom: 7rem;
    }
    .cont-waterproof
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .cont-waterproof > *
    {
        width: 48%;
    }
    .cont-waterproof__box .txt_wrap
    {
        padding: 1.5rem 10%;
    }
    .cont-results
    {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .cont-results__box figure
    {
        height: calc((100vw - 200px) * .25); 

        border: 10px solid #fff;
    }
    .cont-news
    {
        padding-top: 7rem;
        padding-bottom: 6rem;
    }
    .cont-news h3
    {
        font-size: 1.88rem;
    }
    .cont-blog
    {
        padding-bottom: 8rem;
    }
    .cont-blog h3
    {
        font-size: 1.88rem;
    }
    .cont-blog__flex > *
    {
        width: 22%;
        margin-bottom: 0;
    }
    .cont-blog__flex > *:not(:first-child)
    {
        margin-left: 2%;
    }
    .cont-blog__flex > *:not(:first-child):before
    {
        position: absolute;
        left: -9%;

        display: block;

        width: 1px;
        height: 100%;

        content: '';

        border-left: 1px dotted #999;
    }
    .cont-blog__flex > *:not(:last-child)
    {
        margin-right: 2%;
    }
}
@media print, screen and (min-width: 1257px)
{
    /*====================================================================/
	/*-------------------PCスタイル-------------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .main-view
    {
        background: url(../img/top/h2-add.png) right calc(50% + 300px) top 20%/370px no-repeat, url(../img/top/h2-bg_pc.jpg) top center/cover no-repeat;
    }
    .main-view__add
    {
        top: 10%;
        right: calc(50% + 5rem);

        width: 35%;
        max-width: 370px;
        height: 60%;
        max-height: 540px;
    }
    .main-view__tit
    {
        height: 80%; 
        margin-right: -50px;
    }
    .cont-read__tit
    {
        font-size: 1.88rem; 

        margin-bottom: 2rem;
    }
    .cont-painting__tit
    {
        font-size: 1.88rem;
    }
    .cont-results__tit
    {
        font-size: 1.88rem;
    }
    .cont-results__box figure
    {
        height: 260px;
    }
}
@media print, screen and (min-width: 1920px)
{
    /*====================================================================/
	/*-------------------full PCスタイル-------------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .main-view
    {
        background: url(../img/top/h2-add.png) right calc(50% + 300px) top 20%/370px no-repeat, url(../img/top/h2-bg_pc.jpg) top left/cover no-repeat;
    }
}
@media screen and (max-width: 1256px)
{
    /*====================================================================/
	/*------------------PC以下---------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .main-view__add
    {
        display: none;
    }
    .main-view__tit
    {
        height: 70%; 
        margin-right: -7%;
    }
}
@media screen and (max-width: 996px)
{
    /*====================================================================/
	/*------------------スマホタブレット共通スタイル---------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .main-view
    {
        padding-top: 2.5rem;

        background: url(../img/top/h2-bg_sp.jpg) center center/cover no-repeat;
    }
    .cont-read section:nth-of-type(1)
    {
        margin-bottom: 4rem;
    }
    .cont-read section:nth-of-type(1) .cont-read__wrap
    {
        padding-right: 30%; 

        background: url(../img/top/pic_01.jpg) center right/26% no-repeat;
    }
    .cont-read section:nth-of-type(2) .cont-read__wrap
    {
        padding-right: 30%; 

        background: url(../img/top/pic_02.jpg) center right/26% no-repeat;
    }
}
@media screen and (max-width: 480px)
{
    /*====================================================================/
	/*------------------スマホのみスタイル----------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
    .cont-read section:nth-of-type(1) .cont-read__wrap
    {
        position: relative; 

        padding-right: 0;
        padding-bottom: calc(((100vw - 8%) * .64) + 1rem);

        background: none;
    }
    .cont-read section:nth-of-type(1) .cont-read__wrap:after
    {
        position: absolute;
        bottom: 0;

        display: block;

        width: 100%;
        height: calc((100vw - 8%) * .64);

        content: '';

        background: url(../img/top/pic_01.jpg) top center/cover no-repeat;
    }
    .cont-read section:nth-of-type(2) .cont-read__wrap
    {
        position: relative; 

        padding-right: 0;
        padding-bottom: calc(((100vw - 8%) * .64) + 1rem);

        background: none;
    }
    .cont-read section:nth-of-type(2) .cont-read__wrap:after
    {
        position: absolute;
        bottom: 0;

        display: block;

        width: 100%;
        height: calc((100vw - 8%) * .64);

        content: '';

        background: url(../img/top/pic_02.jpg) top center/cover no-repeat;
    }
    .cont-painting__box
    {
        margin-bottom: 3rem;
    }
    .cont-waterproof section:first-child
    {
        margin-bottom: 3rem;
    }
    .cont-results__box:not(:last-child)
    {
        margin-bottom: 3rem;
    }
    .cont-results__box figure
    {
        height: 72vw;
    }
    .news-box figure
    {
        margin-right: auto;
        margin-bottom: .5rem; 
        margin-left: auto;
    }
    .blog-box
    {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;

        border-bottom: 1px dotted #999;
    }
}
@media screen and (max-width: 375px)
{
    /*====================================================================/
	/*------------------iPhone 以下----------------
	/====================================================================*/
    html
    {
        width: 100%;
    }
}