@charset "UTF-8";
/* 文字コードの指定 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/* 定数 */
:root {
    /*----------------------------------------------
    kurumaya box 定数
    ----------------------------------------------*/
    --col-gap: 1rem;
    --row-gap: 1rem;
    --padding: 1rem;
    --item-background-color: white;

}
/*-------------------------------------------------------------------------------- 
    くるまやさん(kurumaya)
--------------------------------------------------------------------------------*/
main{
    width:100%;
    background-color:  var(--base-color);
    font-size: var(--font-size-m);
}
.kurumaya_title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    /* margin: 2rem 0; */
}

.kurumaya_title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    background-color: var(--main-color1);
    padding: 1rem;
}

.kurumaya_title1{
    font-size: var(--font-size-3l);
    color: var(--accent-color3);
    text-shadow: .2rem .2rem .2rem rgba(0, 0, 0, 1);
    width: 7em;
}

.kurumaya_title2 img {
    width: 50rem;
}

.inpage_link{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
}

.inpage_link ul{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    height: 100%;
}
.inpage_link ul li{
    display: flex;
    justify-content: center;
    align-items: center;
    align-items:flex-start;
    margin: .5rem;
    background-color: var(--main-color);
    background-color: var(--accent-color3);
    border-radius: .5rem;
    width: 25%;
}
.inpage_link ul li a{
    font-size: var(--font-size-l);
    color: white;
    font-weight: 700;
    text-shadow: .2rem .2rem .2rem gray;
}

.kurumaya_appeal{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-l);
    font-weight: 800;
    color: var(--main-color1);
}

.kurumaya_appeal ul li{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dividing_line{
    margin: 1rem 0;
    height: 5rem;
    background-color: var(--main-color2);
    transform: skewX(-30deg);
}

.query_points{
    display: flex;
    justify-content: center;;
    font-size: var(--font-size-l);
    font-weight: 700;
    width: 100%;
}

.kurumaya_selling_points_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    color: var(--main-color1);
    width: 90%;
}

.kurumayasan_selling_title{
    margin-top: 5rem;
    padding: 2rem 0;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-l);
    font-weight: 800;
    background-color: black;
    color:var(--accent-color3);
    text-shadow: .1rem .1rem .1rem gray;
}

.kurumayasan_selling_title span:nth-child(1){
    font-size: var(--font-size-3l);
    padding: 0 1rem;
}
.kurumayasan_selling_title span:nth-child(2){
    color: var(--white);
}
.kurumayasan_selling_title span:nth-child(3){
    font-size: var(--font-size-3l);
    padding: 0 1rem;
}


.kurumaya_selling_points_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    width: 100%;
    margin: 2rem 0;
}
.kurumaya_selling_points{
    width: 100%;
    font-size: var(--font-size-l);
    font-weight: 700;
    color: black;
    width: 80%;

    text-shadow: .3rem .3rem .3rem rgba(0, 0, 0, .5);
    text-shadow: .1rem .1rem .1rem rgba(0, 0, 0, .5);
    text-shadow: .1rem .1rem .1rem rgba(128, 128, 128, .5); 
    text-decoration: underline dotted black; 
}

.kurumaya_selling_points_result{
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: var(--font-size-l);
    font-weight: 700;
    color: var(--main-color1);
    text-align: center;
    width: 80%;

}

.kurumaya_selling_points_it{
    font-size: var(--font-size-l);
    color:var(--accent-color3);
}

.kurumaya_img{
    height: 8rem;
    margin: 1rem;
}

.kurumaya_img img{
    height: 120%;
    padding: 1rem;
    background-color: var(--main-color1);
}

/*-------------------------------------------------
    問合せリンク  
-------------------------------------------------*/
.contact_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.contact_title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 3rem;
    text-align: center;
}

.contact_title1,
.contact_title2{
    font-weight: 800;
    font-size: var(--font-size-l);
    line-height: var(--font-size-l);
}

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

.contact_web,
.contact_tel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    height: 4rem;
    line-height: 4rem;
    width: 26rem;
    font-weight: 400;
    background-color: var(--main-color1);
    box-shadow: .4rem .4rem .4rem 0 #000000;
    text-shadow: .4rem .4rem .2rem rgba(0, 0, 0, 1);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    margin: 1rem;
}

.contact_tel:hover,
.contact_web:hover {
    background-color: var(--accent-color2);
    text-decoration: none;
}

.contact_web img,
.contact_tel img{
    height: var(--font-size-2l);
    width: auto;
    margin: 1rem;
}

.contact_web a,
.contact_tel a{
    font-weight: 800;
    color:var(--base-color);
}

/*-------------------------------------------------
    システム構成図  
-------------------------------------------------*/
.kurumayasan_system_diagram_title{
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-2l);
    font-weight: 800;
    background-color:var(--accent-color3);
    color:var(--white);
    text-shadow: .3rem .3rem .3rem rgba(128, 128, 128, .5);
}

.kurumayasan_system_diagram{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.system_diagram_image{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

.kurumayasan_system_diagram img {
    width: 80%;
    border: .1rem solid gray;
}
/*-------------------------------------------------
    ブランド連携と方法
-------------------------------------------------*/
.brand_cooperation{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    width: 100%;
}

.brand_cooperation_title{
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-2l);
    font-weight: 800;
    background-color:var(--accent-color3);
    color:var(--white);
    text-shadow: .3rem .3rem .3rem rgba(128, 128, 128, .5);
}
.brand_cooperation_title2{
    font-size: var(--font-size-h4);
    font-weight: 800;
    text-shadow: .3rem .3rem .3rem rgba(128, 128, 128, .5);
}
.brand_cooperation_title3{
    font-size: var(--font-size-h4);
    font-weight: 800;
    color: var(--accent-color2);
    text-shadow: .3rem .3rem .3rem rgba(128, 128, 128, .5);
}

.brand_cooperation_wrap{
    width: 100%;
}

.brand_cooperation_contents:first-child{
    font-weight: 800;
}

.brand_cooperation_contents{
    width: 100%;
}

.brand_cooperation_item_wrap{
    width: 100%;
}

.brand_cooperation_item{
    display: flex;
    flex-direction: row;
    border-right: .1rem solid black;
    border-left: .1rem solid black;
    border-bottom: .1rem solid black;
    font-weight: 700;
}

.brand_cooperation_item:first-child{
    flex-direction: row;
    border-top: .1rem solid black;
    background-color: var(--main-color2);
    font-weight: 800;
}

.brand_cooperation_item .release_wrap{
    display: flex;
    flex-direction: row;
}

.brand_cooperation_item .group,
.brand_cooperation_item .release,
.brand_cooperation_item .method{
    padding: 1rem;
}

.brand_cooperation_item .group,
.brand_cooperation_item .release{
    border-right: .1rem solid black;
}


.brand_cooperation_item .group{
    width: calc(100% - 12rem - 12rem);
}

.brand_cooperation_item .release{
    display: flex;
    align-items: center;
    width: 12rem;
    text-align: center;
}

.brand_cooperation_item .method{
    display: flex;
    align-items: center;
    width: 12rem;
    text-align: center;
}

/*-------------------------------------------------
    くるまやさんサンプル画面
-------------------------------------------------*/
.kurumaya_sample {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kurumaya_sample_title{
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-2l);
    font-weight: 800;
    background-color:var(--accent-color3);
    color:var(--white);
    text-shadow: .3rem .3rem .3rem rgba(128, 128, 128, .5);
}

.kurumaya_sample_wrap {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
    row-gap:  var(--row-gap);
    column-gap:  var(--col-gap);
}

.kurumaya_sample_item{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items:flex-start;
    align-items:stretch;
    background-color: var(--item-background-color);
    box-sizing: border-box;
    position: relative;
    row-gap:  var(--row-gap);
    column-gap:  var(--col-gap);
    width: 100%;
}

.kurumaya_sample_item:nth-child(2n){
    flex-direction: row-reverse;
}

.kurumaya_sample_wrap .item_img {
    display: block;
    width: calc(100% / 2);
    height: auto;
    box-sizing: border-box;
    border: .1rem solid rgba(128, 128, 128, .5);
}

.kurumaya_sample_wrap .item_img img {
    width: 100%;
    height: auto;
    aspect-ratio: 760 / 470;
    object-fit: cover;
    box-sizing: border-box;
}

.kurumaya_sample_wrap .item_contents {
    display:flex;
    flex-direction: column;
    justify-content: center;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% / 2);
    box-sizing: border-box;
    border: .1rem solid rgba(128, 128, 128, .5);
}

.kurumaya_sample h3{
    color: var(--main-color1);
    font-size: var(--font-size-h3);
    font-weight: 800;
    line-height: var(--font-size-h3);
    text-decoration: underline;
    box-sizing: border-box;
    padding: 1rem;
}

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

.kurumaya_sample_wrap .item_text{
    font-size: var(--font-size-m);
    line-height: 1.5;
    max-height: calc((var(--font-size-m) * 10 * 1.5 + 7rem));
    padding: var(--padding);
    box-sizing: border-box;
    padding:1rem;
    overflow-y: hidden;
    min-width: 100%;
    display: flex;
    justify-content: flex-start;
}

.contact_link{
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom: 10rem;
}

/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300px以下のPC端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px) {
    /*-------------------------------------------------------------------------------- 
        くるまやさん(kurumaya)
    --------------------------------------------------------------------------------*/
    .kurumaya_title {
        flex-direction: column;
    }
    .kurumaya_title2 img {
        margin: 0 auto;
    }
    .dividing_line{
        height: 4rem;
    }
    .kurumaya_selling_points_wrap{
        width: 100%;
    }
    .kurumaya_selling_points_result{
        align-items: center;
    }
    .kurumaya_img{
        height: 5rem;
    }
    .kurumaya_img img{
        width: 100%;
        margin: 0 auto;
    }

    /*-------------------------------------------------
        問合せリンク  
    -------------------------------------------------*/
    /*-------------------------------------------------
        システム構成図  
    -------------------------------------------------*/
    .kurumayasan_system_diagram img {
        width: 100%;
    }
    /*-------------------------------------------------
        ブランド連携と方法
    -------------------------------------------------*/
    .brand_cooperation{
        width: 100%;
    }
    /*-------------------------------------------------
        くるまやさんサンプル画面
    -------------------------------------------------*/
}

/* --------------------------------------------------
	ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px) {
    /*-------------------------------------------------------------------------------- 
        くるまやさん(kurumaya)
    --------------------------------------------------------------------------------*/
    .kurumaya_title2 img {
        width: 100%; 
    }

    /*-------------------------------------------------
        問合せリンク  
    -------------------------------------------------*/

    .contact_title{
        margin-top: 2rem;
    }
    .contact_web,
    .contact_tel{
        border-radius: 2rem;
        height: 4rem;
        line-height: 4rem;
        margin: 0 .5rem;
    }

    /*-------------------------------------------------
        システム構成図  
    -------------------------------------------------*/
    /*-------------------------------------------------
        ブランド連携と方法
    -------------------------------------------------*/
    /*-------------------------------------------------
        くるまやさんサンプル画面
    -------------------------------------------------*/
    .kurumaya_sample_item{
        flex-direction: column;
    }

    .kurumaya_sample_item:nth-child(2n){
        flex-direction: column;
    }

    .kurumaya_sample_wrap .item_img {
        width: 100%;
    }

    .kurumaya_sample_wrap .item_img img {
        width: 100%;
    }

    .kurumaya_sample_wrap .item_contents {
        width: 100%;
    }
}
/* --------------------------------------------------
    ここから 480rem以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 480px) {
    .inpage_link{
        display: none;
    }
    /*-------------------------------------------------------------------------------- 
        くるまやさん(kurumaya)
    --------------------------------------------------------------------------------*/
    .kurumaya_title_wrap {
        margin: 2rem 0;
    }
    .kurumaya_title2 img {
        width: 100%; 
    }

    .kurumaya_appeal{
        font-size: var(--font-size-l);
    }

    .dividing_line{
        height: 2rem;
    }

    .query_points{
        font-size: var(--font-size-l);
    }

    .kurumaya_selling_points_wrap{
        width: 100%;
    }
    .kurumaya_selling_points_result{
        align-items: center;
        font-size: var(--font-size-l);
    }
    .kurumaya_img{
        height: 5rem;
    }

    .kurumaya_img img{
        width: 100%;
        margin: 0 auto;
    }

    /*-------------------------------------------------
        問合せリンク  
    -------------------------------------------------*/
    .contact_title{
        margin-top: 1rem;
    }

    .contact_title1,
    .contact_title2{
        font-size: var(--font-size-l);
    }

    .contact_web,
    .contact_tel{
        border-radius: 1.5rem;
        height: 3rem;
        line-height: 3rem;
        margin: 0 .5rem;
    }
    .contact_web img,
    .contact_tel img{
        font-size: var(--font-size-l);
    }

    .contact_web a,
    .contact_tel a{
        font-size: var(--font-size-m);
    }

    /*-------------------------------------------------
        システム構成図  
    -------------------------------------------------*/
    /*-------------------------------------------------
        ブランド連携と方法
    -------------------------------------------------*/
    .brand_cooperation_item{
        flex-direction: column;
        border-right: .1rem solid black;
        border-left: .1rem solid black;
        border-bottom: .1rem solid black;
    }

    .brand_cooperation_item:first-child{
        flex-direction: column;
    }
    .brand_cooperation_item .release_wrap{
        border-top:  .1rem solid black;
    }

    .brand_cooperation_item .group,
    .brand_cooperation_item .release,
    .brand_cooperation_item .method{
        border:none;
        width: 100%;
    }
    .brand_cooperation_item .release{
        border-right:  .1rem solid black;
    }
    /*-------------------------------------------------
        くるまやさんサンプル画面
    -------------------------------------------------*/
    .kurumaya_sample_item{
        flex-direction: column;
    }

    .kurumaya_sample_item:nth-child(2n){
        flex-direction: column;
    }

    .kurumaya_sample_wrap .item_img {
        width: 100%;
    }

    .kurumaya_sample_wrap .item_img img {
        width: 100%;
    }

    .kurumaya_sample_wrap .item_contents {
        width: 100%;
    }
}