@charset "UTF-8";
/*bg*/
/* MV
---------------------------------------------------*/
#mv {
    position: relative;
    width: 100%;
    margin-bottom: 72px;
    background-image: url('../images/top/dowell_bg.svg');
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
	z-index: 0;
}
#mv .inner {
    width: 100%;
}
#mv .inner .mv-text {
    width: 572px;
    margin-left: 80px;
    padding: 246px 0 334px 0;
}
#mv .inner .mv-text h1 {
    font-family: "STIX Two Text", serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 0.01em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #064738;
}
#mv .inner .mv-text h1:nth-child(2) {
    text-align: right;
}

/*  768px  */
@media screen and (max-width: 768px) {
    #mv {
        margin-top: 22.48vw;
        width: 100%;
        margin-bottom: 18.432vw;
        background-image: url('../images/top/dowell_bg_sp.svg');
    }
    #mv .inner .mv-text {
        width: 93.92vw;
        margin: 0 auto;
        padding: 17.92vw 0 84.48vw;
    }
    #mv .inner .mv-text h1 {
        font-size: 23vw;
        text-align: center;
    }
    #mv .inner .mv-text h1:nth-child(2) {
        text-align: center;
    }
}
/*Philosophy
---------------------------------------------------*/
#Philosophy {
    width: 100%;
    padding: 120px 120px 80px;
}
#Philosophy .inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}
#Philosophy .inner .sub-inner {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 87px 190px 116px 130px;
    background-color: #FFFFFF99;
    box-shadow: 0px 2px 8px 0px #00000033;
    padding: 40px;
}
#Philosophy .inner .sub-inner h3 {
    position: absolute;
    top: -27px;
    left: -110px;
    font-family: "IBM Plex Sans JP", serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 1.45em;
    letter-spacing: 0.06em;
    color: #06473833;
}
#Philosophy .inner .sub-inner p {
    font-family: "IBM Plex Sans JP", serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.89em;
    letter-spacing: 6%;
    text-align: justify;    
    color: #064738;
    margin-top: 30px;
}
#Philosophy .inner .sub-inner p:first-child {
    margin-top: 0;
}
#Philosophy .inner .sub-inner .text-logo {
    position: absolute;
    width: 572px;
    bottom: -166px;
    right: -190px;
}
#Philosophy .inner .sub-inner .text-logo h1 {
    font-family: "STIX Two Text", serif;
    font-weight: 700;
    font-size: 120px;
    line-height: 1em;
    letter-spacing: 1%;
    color: #06473833;
    text-align: left;
}
#Philosophy .inner .sub-inner .text-logo h1:last-child {
    text-align: right !important;
}
/*  768px  */
@media screen and (max-width: 768px) {
    #Philosophy {
        padding: 30.72vw 3.84vw 58.88vw;
    }
    #Philosophy .inner {
        max-width: 92.16vw;
        margin: 0 auto;
    }
    #Philosophy .inner .sub-inner {
        max-width: 92.16vw;
        margin: 41.728vw 0 38.4vw;
        box-shadow: 0px 0.5vw 2vw 0px #00000033;
        padding: 15.36vw 4.09vw;
    }
    #Philosophy .inner .sub-inner h3 {
        position: absolute;
        top: -26.36vw;
        left: 0;
        font-size: 8.96vw;
        letter-spacing: 0.06em;
        color: #06473833;
    }
    #Philosophy .inner .sub-inner p {
        font-family: "IBM Plex Sans JP", serif;
        font-size: 4.864vw;
        line-height: 1.89em;
        letter-spacing: 0.06em;
        text-align: justify;    
        color: #064738;
        margin-top: 7.68vw;
    }
    #Philosophy .inner .sub-inner .text-logo {
        width: 98.56vw;
        bottom: -38.4vw;
        left: 0;
    }
    #Philosophy .inner .sub-inner .text-logo h1 {
        font-family: "STIX Two Text", serif;
        font-weight: 700;
        font-size: 23.04vw;
        line-height: 1.1em;    
        text-align: left;
    }
    
}
/*Our_service
---------------------------------------------------*/
#Service {
    width: 100%;
    border-top: 20px solid #064738;
    padding: 120px;
    background-color: #FFFFFF;
}
#Service .inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}
#Service .inner ul {
    width: 100%;
}
#Service .inner ul li {
    width: 46.15%;
    margin-top: 80px;
}
#Service .inner ul li:first-child {
    margin-top: 20px;
}
#Service .inner ul li img {
    width: 100%;
    box-shadow: 0 2px 8px 0 #00000033;
}
#Service .inner ul li:nth-child(2){
    margin-left: 7.6%;
}
#Service .inner ul li h4 {
    font-family: "IBM Plex Sans JP", serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.6em;
    letter-spacing: 0.06em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #064738;
    margin: 20px 0;
}
#Service .inner ul li p {
    font-family: "IBM Plex Sans JP", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.1em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1E1E1E;
}
@media screen and (max-width: 768px) {
    #Service {
        border-top: 5.12vw solid #064738;
        padding: 30.72vw 5.12vw 40.96vw;
    }
    #Service .inner {
        max-width: 92.16vw;
    }
    #Service .inner ul {
        width: 100%;
    }
    #Service .inner ul li {
        width: 100%;
        margin-top: 20.48vw;
    }
    #Service .inner ul li:first-child {
        margin-top: 20.48vw;
    }
    #Service .inner ul li img {
        box-shadow: 0 0.512vw 2.048vw 0 #00000033;
    }
    #Service .inner ul li:nth-child(2){
        margin-left: 0;
    }
    #Service .inner ul li h4 {
        font-size: 6.4vw;
        margin: 5.12vw 0;
    }
    #Service .inner ul li p {
        font-size: 3.584vw;
        letter-spacing: 0.003em;
    }
}

/* COMPANY
---------------------------------------------------*/
#company {
    width: 100%;
    padding: 180px 120px 220px;
}
#company .inner {
    width: 100%;
    max-width: 1040px;
    margin:  0 auto;
}

#company .inner .profile {
    margin-top: 80px;
    position: relative;
}
#company .inner dl {
    width: 73.07%;
    padding: 16px 20px;
    border-bottom: 2px solid #06473833;
}
#company .inner dl dt {
    width: 21.05%;
    font-family: "IBM Plex Sans JP", serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 2.1em;
    letter-spacing: 0.03em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1E1E1E;
}
#company .inner dl dd {
    font-family: "IBM Plex Sans JP", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.1em;
    letter-spacing: 0.03em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1E1E1E;
    margin-left: 10px;
}
#company .inner dl dd p {
    margin-top: 10px;
}
#company .inner dl dd p:first-child {
    margin-top: 0 !important;
}
#company .inner .img {
    width: 23.07%;
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 40px;
}
/*  768px  */
@media screen and (max-width: 768px) {
    #company {
        padding: 30.72vw 3.84vw;
    }
    #company .inner {
        width: 100%;
        max-width: 92.16vw;
    }
    #company .inner .title,
    #company .inner .sub_title {
        text-align: center !important;
    }
    #company .inner .profile {
        margin-top: 20.48vw;
        position: relative;
    }
    #company .inner dl {
        width: 100%;
        padding: 4.096vw 5.12vw;
        border-bottom: 0.512vw solid #06473833;
    }
    #company .inner dl dt {
        width: 100%;
        font-size: 3.584vw;
    }
    #company .inner dl dd {
        width: 100%;
        font-size: 3.584vw;
        margin-left: 0;
        margin-top: 2.56vw;
    }
    #company .inner dl dd p {
        margin-top: 2.56vw;
    }

}

/* CONTACT
---------------------------------------------------*/
#contact {
    width: 100%;
    padding: 120px 120px 220px;
    background-color: #FFFFFF;
}
#contact .inner {
    width: 100%;
    max-width: 1040px;
    margin:  0 auto;
}
#contact .inner .top {
    text-align: center !important;
    padding-bottom: 50px;
}
#contact .inner .top .title,
#contact .inner .top .sub_title {
    text-align: center !important;
}
#contact .inner .top p {
    font-family: "IBM Plex Sans JP", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.89em;
    letter-spacing: 0.06em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #9D9D9D;
    margin-top: 20px;
    margin-bottom: 10px;
}
#contact .inner .top small {
    font-family: "IBM Plex Sans JP", serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 2.1em;
    letter-spacing: 0.03em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #9D9D9D;
}
#contact .inner ul {
    width: 92.45%;
    margin: 0 auto;
}
#contact .inner ul li {
    width: 50%;
    position: relative;
    height: 360px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}
#contact .inner ul li:first-child {
    background-image: url('../images/top/img_contact_01.svg');
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
    z-index: 0;
}
#contact .inner ul li:nth-child(2) {
    background-image: url('../images/top/img_contact_02.svg');
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
}
#contact .inner ul li a {
    position: relative;
    z-index: 1; 
    display: block;
    height: 100%;
}
#contact .inner ul li a p {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "IBM Plex Sans JP", serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.6em;
    letter-spacing: 0.06em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FFFFFF;
}
#contact .inner ul li::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #06473833;
    transition: top 0.3s ease;
    z-index: 0;
}
#contact .inner ul li:hover::after {
    top: 0;
}

/*  768px  */
@media screen and (max-width: 768px) {
    #contact {
        padding: 20.48vw 0 40.96vw;
    }
    #contact .inner {
        max-width: 99.84vw;
    }
    #contact .inner .top {
        padding-bottom: 10.24vw;
    }

    #contact .inner .top p {
        font-size: 4.864vw;
        margin-top: 2.56vw;
        margin-bottom: 2.56vw;
    }
    #contact .inner .top small {
        font-size: 3.584vw;
    }
    #contact .inner ul {
        width: 100%;
    }
    #contact .inner ul li {
        width: 100%;
    }
    #contact .inner ul li a p {  
        font-size: 6.4vw;
    }
}
/* CNT
---------------------------------------------------*/
#cnt a {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 72px;
    height: 72px;
    background-color: #FFFFFF99;
    box-shadow: 0px 2px 8px 0px #00000033;
    border-radius: 50%;
    background-image: url('../images/icon/icon_arrow_up.svg');
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	content: '';
}

#cnt a:hover {
    background-color: #fff;
    background-image: url('../images/icon/icon_arrow_up_green.svg');
}