/* グローバルスタイル */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

:root {
  --main-color: #4C71AA;
}

/* ヘッダー */
header {
    background-color: var(--main-color);
    color: #fff;
    padding:20px;
}

.header_wrap{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    column-gap: 20px;
    max-width: 1330px;
    margin: auto;
}


.title_logo{
    margin: auto;
    width: 200px;
}

header hgroup{
    margin: auto;
}

header h1{
    line-height: 3rem;
    font-size: 2.8rem;
}

.information{
    margin: auto;
    height: auto;
    transition: transform .6s ease; /* ゆっくり変化させる */
}


.information:hover {
  transform: scale(1.1); /* 拡大 */
}


.information img{
   margin: auto;
    width: 100px;
}


.information p{
    line-height: 1.1rem;
    margin-top: 5px;
    font-weight: 600;
    text-align: center;
}

.information a:link, a:visited, a:hover, a:active {
  color:white;
}


/* メイン */
main {
    padding: 0 20px;
    max-width: 1330px;
    min-width: 340px;
    margin: auto;
}

main h1{
    color: var(--main-color);
    text-align: center;
    font-size: 2.3rem;
    letter-spacing: 0.1rem;
    margin: 1rem 0px;
}

/* サービスセクション */
.services {
  /* グリッドコンテナ */
  display: grid;
  /* 最小300px、最大1frの列を繰り返しつくる */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* 余白 */
    grid-column-gap: 30px;
    grid-row-gap: 60px;
    margin-top: 60px;
}

/* 各サービス */
.service {
  grid-template-rows: subgrid;
  grid-row: span 2;
  border: solid 2px var(--main-color);
  border-radius: 10px;
 text-align: justify;

}

.item_title{
    display: grid;
    position: relative; /* 子要素に対して相対的な位置づけ */
    background-color: var(--main-color);
}

.item_title h2{
    margin: 10px 0 10px 10px;
    color: #fff;
}


.item_title img{
    height: 100px;
    position: absolute; /* 絶対的な位置づけ */
    bottom: 0;
    right: 0; /* 右端に配置 */
    z-index: 1; /* レイヤーを上に重ねる */
}

.item_desc{
    padding: 0 10px;
}

/* 株式会社アクオス */
.etc{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    position: relative;
}

.bg_img_l {
    background-image: url("././img/item01.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 80%;
}

.aquos{
    border: solid 5px var(--main-color);
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
    background-image:url("././img/drink-girl.svg");
    background-repeat: no-repeat;
    background-position: bottom right 20px;
    background-size: 80px;
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 1fr;
}

.aquos_info{
    color: var(--main-color);
    font-size: 1.3rem;
    font-weight: 600;
    text-align: justify;
    height: auto;
    display: grid;
    place-items:center;
    
}

.aquos_qr{
    width: 90%;
    margin: auto;
    transition: transform .6s ease; /* ゆっくり変化させる */
}

.aquos_qr:hover{
  transform: scale(1.1); /* 拡大 */
}

.aquos_link{
    display: flex;
}

.aquos_link img{
    width: 10%;
    align-self: flex-start ;
    margin-top: 40px;
}

.aquos_link p{
    font-size: 1rem;
    padding-left: 5px;
    margin-top: 20px;
    line-height: 1.2rem;
}

.bg_img_r {
    background-image: url("././img/item02.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 80%;
}


/* フッター */
footer {
    background-color: var(--main-color);
    color: #fff;
    padding: 20px;
}

.footer_wrap{
    display: grid;
    grid-template-columns:  1fr 2fr 1fr;
    gap:20px;
    max-width: 1330px;
    margin: auto;
}

.footer_1{
    display: grid;
    text-align: center;
}

.footer_1 .benriya{
    font-size: 1.5rem;
    align-self: flex-end;
}

.footer_1 .benriya span{
    font-size: 2rem;
    font-weight: 900;
}

.footer_1 .jusho{
    font-size: 0.8rem;
}

.footer_2{
    align-items: center;
 }

.footer_2 img{
    max-width: 700px;
    margin: auto;
 }


.footer_3{
    display: grid;
    grid-template-columns:  1fr 2.6fr;
    gap:15px;
}

.footer_3 img{
    max-width: 100%;
 }


.kobutu{
    align-self: flex-end;
}

.footer_4{
    grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
    text-align: center;
}

/* メディアクエリ（999px以下） */
@media (max-width: 999px) {
    
/* ヘッダー */
.header_wrap{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 20px;
}
    
header hgroup h1{
    line-height: 2.1rem;
    font-size: 2rem;
}
    
header hgroup p{
        font-size: 0.9rem;
    }
    
/* 株式会社アクオス */
.etc{
    display: grid;
    grid-template-columns: 1fr;
}

.bg_img_l {
    display: none;
}

.aquos{
    margin: 5%;
}

.aquos_info{
    font-size: 1.2rem;    
}

.bg_img_r {
    display: none;
}


/* フッター */


.footer_wrap{
    display: grid;
    grid-template-columns:  1fr 1.5fr;
}

.footer_2 img{
    width: 90%;
 }

.footer_3{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  text-align: center;
 padding: 0 20%;
}


.footer_4{
    grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
    text-align: center;
}

}


/* メディアクエリ（669px以下） */
@media (max-width: 669px) {
    /* ヘッダー */
.header_wrap{
    display: grid;
    grid-template-columns:1fr;
    gap: 50px;
    text-align: center;
}
    
/* 各サービス */



.item_title h2{
    margin: 10px 0 10px 20px;
}

.item_desc{
    padding: 20px;
}


/* 株式会社アクオス */


.aquos{
    background-image:none;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap:10px;
}

.aquos_info{
    display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start:1;
  grid-row-end: 2;    
}

.aquos_qr{
 display: grid;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:2;
  grid-row-end: 3;    
}


.aquos_link{
    display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:2;
  grid-row-end: 3;    
}

.aquos_link img{
    width: 15%;
    margin: auto;
}

.aquos_link p{
    font-size: 1rem;
    padding-left:10px;
    line-height: 1.5rem;
    margin: auto
}


/* フッター */
    .footer_wrap{
        display: grid;
        grid-template-columns: 1fr;
    }

    .footer_1{
        display: grid;
    grid-column-start: 1;
    grid-column-end: 2;
grid-row-start:1;
grid-row-end: 2;   
 
    }
    .footer_2 {
        display: grid;
            grid-column-start: 1;
    grid-column-end: 2;
        grid-row-start:2;
grid-row-end: 3; 
     }

    .footer_2 img{
        width: 90%;
     }

    .footer_3{
        display: grid;
            grid-column-start: 1;
    grid-column-end: 2;
        grid-row-start:3;
grid-row-end: 4; 
    }


    .footer_4{
        display: grid;
            grid-column-start: 1;
    grid-column-end: 2;
        grid-row-start:4;
grid-row-end: 5; 
    }
    
}