@charset "utf-8";
/* =======================================================
* common
* ======================================================= */
html {
    font-size: 62.5%;
}

body {
	background-repeat: no-repeat;
    box-sizing: border-box;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.5rem;
	letter-spacing: 0.1rem;
	line-height: 1.64;
}

* {
    padding: 0;
    margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    opacity: 0.6;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =======================================================
* original
* ======================================================= */
#wapper {
    overflow: hidden;
    position: relative;
}

.flex-block {
    display: flex;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

[class^="sec-"] {
    padding: 8rem 0;
}

.container {
	max-width: 960px;
    margin: 0 auto;
}

h2 {
	font-family: '游明朝','Yu Mincho';
	font-size: 4rem;
	text-align: center;
	padding-bottom: 6rem;
}

.inner-description {
	font-size: 1.8rem;
	text-align: center;
    padding-bottom: 6rem;
}

.btn a {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 70px;
    line-height: 70px;
    border: 1px solid #60BCE9;
    box-sizing: border-box;
    color: #60BCE9;
    cursor: pointer;
    font-size: 1.8rem;
    text-align: center;
    padding: 0;
    margin: 6rem auto 0;
}

.btn-blu a {
    background: #60BCE9;
    border: 1px solid #60BCE9;
    color: #FFF;
}

/* =======================================================
* index
* ======================================================= */
/* header */
#header {
    position: relative;
}

#header h1 {
    position: absolute;
    top: 5%;
    left: 5%;
}

.header-container {
    display: flex;
    width: 100%;
    height: 485px;
    position: relative;
    object-fit: cover;
}

.header-container::after {
    width: 100%;
    height: 100%;
    background-color: rgba(4,41,57,0.4);
    position: absolute;
    content: '';
    left: 0;
    top: 0;
}

.header-container img {
    width: 50%;
    object-fit: cover;
}

#header p {
    color: #FFF;
    font-family: '游明朝','Yu Mincho';
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* 選ばれる理由 */
.sec-reason {
	background: #FFF;
}

.sec-reason .inner-contents {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 6rem;
    column-gap: 6rem;
}

.card-circle {
	width: 400px;
	height: 400px;
	display: flex;
	border: 1px solid #60BCE9;
	border-radius: 50%;
    box-shadow: 6px 6px 6px 0 rgba(11,152,222,0.25);
}

.card-circle .inner h3 {
	color: #30A8E9;
	font-size: 3.6rem;
	font-weight: 600;
	text-align: center;
	padding: 5rem 0 2rem;
}

.card-circle .inner p {
    font-size: 2rem;
	padding: 0 4rem;
}

.card-circle .inner span {
	font-size: 1.6rem;
}

/* 製品 */
.sec-products {
    background-image: url("asset/img/products_01.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-products .inner-description {
    font-size: 3rem;
    font-weight: 500;
}

/* サービス */
.sec-service {
    background-image: url("asset/img/service_01.jpg");
    background-color: rgba(255,255,255,0.4);
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 6rem;
}

.service-container {
    max-width: 960px;
    background: linear-gradient(rgba(255,255,255,0),rgba(169,229,255,0.5));
    margin: 0 auto;
}

.service-container ul {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	row-gap: 3rem;
    column-gap: 3rem;
    padding-bottom: 8rem;
}

.service-container li {
    width: 230px;
    background: #FFF;
    box-shadow: 6px 6px 6px 0 rgba(0, 0, 0, 0.25);
    padding: 3rem 1.5rem 6rem;
}

.service-container img,
.service-container h3 {
    display: block;
    text-align: center;
    margin: 0 auto;
}

.service-container h3 {
    color: #60BCE9;
    font-weight: 500;
    padding: 1.2rem 0;
}

/* 事例 */
.sec-case {
    background: linear-gradient(#F9FCFF, #E9FAFF);
}

.case-head {
    position: relative;
}

.case-head:nth-of-type(3) {
    flex-direction: row-reverse;
}

.case-image {
    position: relative;
}

.case-image::after {
    width: 150%;
    height: 100%;
    background: linear-gradient(to right, rgb(255,255,255,0), rgb(245,251,255,1));
    position: absolute;
    content: '';
    left: 0;
    top: 0;
}

.case-head:nth-of-type(3) .case-image::after {
    background: linear-gradient(to right, rgb(239,250,255,1), rgb(255,255,255,0));
    left: -51%;
}

.case-head img {
    width: 150%;
    height: 400px;
    object-fit: cover;
}

.case-head:nth-of-type(3) img {
    position: relative;
    right: -25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.case-description {
    max-width: 760px;
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.case-head:nth-of-type(3) .case-description {
    left: 40%;
}

.case-description h3 {
    font-size: 1.8rem;
    font-weight: 400;
    padding-bottom: 3rem;
}

.case-description p {
    font-size: 2.4rem;
    font-weight: 500;
}

.case-inner {
    max-width: 960px;
    background: #FFF;
    box-shadow: 6px 6px 6px 0 rgba(11,152,222,0.25);
    padding: 3rem 4rem;
    margin: 6rem auto;
}

.case-inner .flex-block {
    gap: 4rem;
}

.case-inner h4 {
    border-bottom: 1px solid #60BCE9;
    color: #60BCE9;
    font-size: 2.4rem;
    font-weight: 500;
}

.case-inner ul {
    padding-bottom: 3rem;
}

.case-inner li h5 {
    max-width: 245px;
    background: #60BCE9;
    box-sizing: border-box;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    padding: 0.9rem;
    margin-top: 1.8rem;
}

.case-inner li p {
    padding-top: 1.2rem;
}

.case-inner img {
    max-width: fit-content;
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* footer */
#footer {
    background: #E9FAFF;
    font-size: 1.2rem;
    padding: 2rem 0;
}

.footer-container {
    padding: 3rem 4rem;
}

.footer-inner li {
    padding-left: 2rem;
}

/* =======================================================
* max-width: 768px;
* ======================================================= */
@media screen and (max-width: 768px) {
    body {
        font-size: 1.4rem;
    }

    .inner-description {
        font-size: 1.6rem;
    }
    
    .header-container {
        height: 300px;
    }

    #header h1 {
        top: -1%;
        left: 4%;
    }
    
    #header h1 img {
        width: 80px;
    }
    
    #header p {
        width: 100%;
        font-size: 2.4rem;
    }
    
    [class^="sec-"] {
        padding: 8rem 2rem;
    }
    
    h2 {
        font-size: 2.4rem;
    }
    
    .card-circle {
        width: 370px;
        height: 370px;
        align-items: center;
    }
    
    .card-circle .inner h3 {
        font-size: 2.2rem;
        padding: 0 0 1rem;
    }
    
    .card-circle .inner p {
        font-size: 1.6rem;
    }
    
    .sec-products .inner-description {
        font-size: 1.6rem;
    }

    .sec-products .flex-between {
        flex-wrap: wrap;
    }

    .sec-products .flex-between img {
        width: 45%;
    }

    .sec-products .flex-between img:nth-of-type(2) {
        width: 80%;
        margin:  auto;
    }

    .sec-products .flex-between img:nth-of-type(1) {
        order: 2;
    }

    .sec-products .flex-between img:nth-of-type(3) {
        order: 3;
    }

    .service-container ul {
        row-gap: 1.5rem;
        column-gap: 1.5rem;
        padding-bottom: 4rem;
    }
    
    .service-container li {
        width: calc(50% - 4.5rem);
    }
    
    .case-image::after,
    .case-head:nth-of-type(3) .case-image::after {
        background: rgb(255, 255, 255, 0.8);
    }
    
    .case-head:nth-of-type(3) .case-image::after {
        left: -50%;
    }
    
    .case-description,
    .case-head:nth-of-type(3) .case-description {
        left: 0;
        transform: translate(0%, -50%);
        padding: 0 2rem;
    }
    
    .case-description h3 {
        font-size: 1.5rem;
    }
    
    .case-description p {
        font-size: 2rem;
    }
    
    .case-inner {
        padding: 3rem;
        margin: 3rem auto;
    }
    
    .case-inner .flex-block {
        display: block;
    }

    .footer-container {
        display: block;
        padding: 0;
    }
    
    .footer-inner ul {
        justify-content: center;
    }
    
    .footer-inner li {
        padding: 0 1rem 2rem 1rem;
    }
    
    .footer-container p {
        text-align: center;
    }
}

/* =======================================================
* max-width: 400px;
* ======================================================= */
@media screen and (max-width: 768px) {
    .card-circle {
        width: 330px;
        height: 330px;
    }
}