@charset "UTF-8";
/* 文字コードの指定 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");

/*-------------------------------------------------------------------------------- 
    会社概要(company)のスタイル
--------------------------------------------------------------------------------*/
main{
    width:100%;
    background-color:  var(--base-color);
    font-size: var(--font-size-m);
}

/*-------------------------------------------------
    当社のモットー(our motto)
-------------------------------------------------*/
.motto_title_wrap{
    display: flex;
    flex-direction: row;
}
.motto_content_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%; 
    padding: 5rem;
}

.motto_contents1{
    color: var(--main-color1);
    font-size: var(--font-size-l);
    font-weight: 700;
    text-shadow: .1rem .1rem .1rem var(--gray1);
}
.thanks{
    color: var(--accent-color2);
}

.story_contents{
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateY(150px);
}

.is_active {
    /*要素を表示させる*/
    opacity: 1;
    visibility: visible;
    /*元の位置に戻す*/
    transform: translateY(0);
}

/*-------------------------------------------------
    会社概要(Company Profile)
-------------------------------------------------*/
.profile_title_wrap{
    display: flex;
    flex-direction: row;
}

.profile_list{
    padding-top: 2rem;
}

.profile_item_row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: white;
    border-top:solid .1rem  var(--main-border-color);
}

.profile_item_row:last-child{
    border-bottom:solid .1rem  var(--main-border-color);
}

.profile_item_wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    border-right:solid .1rem  var(--main-border-color);
    border-left:solid .1rem  var(--main-border-color);
}

.profile_item_wrap .item_title{
    width: calc(var(--font-size-m) * 10);
    padding-left: 1rem;
    font-size: var(--font-size-m);
    font-weight: 800;
    border-left: .5rem solid  var(--main-color1);
}

.profile_item_wrap .item_contents{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: calc(100% - (var(--font-size-m) * 10));
    padding-left: 1rem;
    border-left:solid .1rem  var(--main-border-color);
}

.profile_item_wrap .item_contents ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
}

.profile_item_wrap .item_contents ul li{
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: var(--font-size-m);
    line-height: 1;
    padding-left: 1rem;
    text-align: left;
}

.comapany_img_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0;
}

.comapany_img_title{
    font-size: var(--font-size-3l);
    font-weight: 700;
}

.comapany_img_wrap img{
    width: 100%;
    height: auto;
}

/*-------------------------------------------------
    会社沿革(history)
-------------------------------------------------*/
.history_title_wrap{
    display: flex;
    flex-direction: row;
}

.history_list{
    padding-top: 2rem;
}

.history_item_row{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: white;
    border-top:solid .1rem  var(--main-border-color);
}

.history_item_row:last-child{
    border-bottom:solid .1rem  var(--main-border-color);
}

.history_item_wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    border-right:solid .1rem  var(--main-border-color);
    border-left:solid .1rem  var(--main-border-color);
}

.history_item_wrap .item_title{
    width: 10%;
    width: calc(var(--font-size-m) * 8);
    padding-left: 1rem;
    font-size: var(--font-size-m);
    font-weight: 800;
    border-left: .5rem solid  var(--main-color1);
}

.history_item_wrap .item_contents{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: calc(100% - (var(--font-size-m) * 8));
    padding-left: 1rem;
    border-left:solid .1rem  var(--main-border-color);
}

.history_item_wrap .item_contents ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
}

.history_item_wrap .item_contents ul li{
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: var(--font-size-m);
    line-height: 1;
    padding-left: 1rem;
    text-align: left;
}

/*---------------------------------------------------------
    地図情報(map)
-----------------------------------------------------------*/
.map_title_wrap{
    display: flex;
    flex-direction: row;
}

.google_map{
    width: 100%;
    height:100%;
    margin-top: 1rem;
}

.map_sub_title p{
    text-align: center; 
    font-weight: 800;
    font-size: var(--font-size-l);
}

.how_to_access p{
    width: 80%;
    margin: 0 auto;
    font-size: var(--font-size-l);
}

.google_map iframe{
    width: 100%;
    height:100%;
    border: .1rem solid var(--main-border-color);
    aspect-ratio: 16/9;
}

/*---------------------------------------------------------
    アクセス情報(acces map)
-----------------------------------------------------------*/
.access_info_title_wrap{
    display: flex;
    flex-direction: row;
}

/*---------------------------------------------------------
	map
-----------------------------------------------------------*/
#google_map {
    height: 50rem;
    width: 100%;
}

/*---------------------------------------------------------
	access map
-----------------------------------------------------------*/
.how_to_access{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    font-size: var(--font-size-m);
}

.access_map_wrap{
    display:flex;
    flex-direction:row;
    justify-content: center;
    font-size: var(--font-size-m);
    margin-top: 1rem;
}

.access_map_wrap img{
    width: 80%;
    height:auto;
    object-fit:cover;
    border: .1rem solid var(--main-border-color);
}

.story_contents{
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateY(150px);
}
.is_active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px) {
    /*-------------------------------------------------------------------------------- 
        会社概要(company)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        当社のモットー(our motto)
    -------------------------------------------------*/
    /*-------------------------------------------------
        会社概要(Company Profile)
    -------------------------------------------------*/
    /*-------------------------------------------------
        会社沿革(history)
    -------------------------------------------------*/
    /*---------------------------------------------------------
        地図情報(map)
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        アクセス情報(acces map)
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        map
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        access map
    -----------------------------------------------------------*/
}
/* --------------------------------------------------
	ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px) {
    /*-------------------------------------------------------------------------------- 
        会社概要(company)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        当社のモットー(our motto)
    -------------------------------------------------*/
    .motto_title_wrap .h2_title{
        width: 100%;
    }
    .motto_content_wrap{
        padding: 0;
    }
    /*-------------------------------------------------
        会社概要(Company Profile)
    -------------------------------------------------*/
    .profile_title_wrap .h2_title{
        width: 100%;
    }
    .profile_item_wrap .item_contents{
        width: 100%;
        border-left: .5rem solid  var(--main-color1);
    }
    .profile_item_wrap{
        flex-direction: column;
    }
    /*-------------------------------------------------
        会社沿革(history)
    -------------------------------------------------*/
    .history_title_wrap .h2_title{
        width: 100%;
    }
    .history_item_wrap .item_contents{
        width: 100%;
        border-left: .5rem solid  var(--main-color1);
    }
    .history_item_wrap{
        flex-direction: column;
    }
    /*---------------------------------------------------------
        地図情報(map)
    -----------------------------------------------------------*/
    .map_title_wrap .h2_title{
        width: 100%;
    }
    /*---------------------------------------------------------
        アクセス情報(acces map)
    -----------------------------------------------------------*/
    .access_info_title_wrap .h2_title{
        width: 100%;
    }
    /*---------------------------------------------------------
        map
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        access map
    -----------------------------------------------------------*/
}
/* --------------------------------------------------
    ここから 480px以下のモバイル端末環境設定
--------------------------------------- -------------- */
@media screen and (max-width:480px){
    /*-------------------------------------------------------------------------------- 
        会社概要(company)のスタイル
    --------------------------------------------------------------------------------*/
    /*-------------------------------------------------
        当社のモットー(our motto)
    -------------------------------------------------*/
    /*-------------------------------------------------
        会社概要(Company Profile)
    -------------------------------------------------*/
    /*-------------------------------------------------
        会社沿革(history)
    -------------------------------------------------*/
    /*---------------------------------------------------------
        地図情報(map)
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        アクセス情報(acces map)
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        map
    -----------------------------------------------------------*/
    /*---------------------------------------------------------
        access map
    -----------------------------------------------------------*/
}