@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メイン
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* -------------------------------------------------------------------------------------------------
   * セクショニング
/* ---------------------------------------------------------------------------------------------- */

#main {}

#main-contents {}

#main-contents div.body {
  max-width: 1080px;
  padding:0 20px;
  margin: 0 auto;
  overflow: hidden;
}

#main-contents .column ~ .column {
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {

 #main-contents div.body {
   max-width: 100%;
   padding:0 20px;
   margin: 0 auto;
   overflow: hidden;
   }
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

#main-contents > .section {
  padding-top: 30px;
  padding-bottom: 30px;
}

#main-contents div.body {
  max-width: 100%;
  padding:0 20px;
  margin: 0 auto;
  overflow: hidden;
}

#main-contents .column ~ .column {
  margin-top: 20px;
}

}

/* ****************************************************************************************************
   * ビジュアル
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * ボディ
/* ------------------------------------------------------------------------------------------------- */

body.layout-lower
.visual {
  background: url("../../_images/company/visual.png") no-repeat;
  background-size: cover;
  background-position: bottom;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
}


/* ****************************************************************************************************
   * 会社概要
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.company {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
}

#philosophy,
#outline,
#history,
#office,
#companies {
  padding-top: 0;
}


/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

.company .title-1 {
  color: var(--c-orange);
  font-size: 3.4rem;
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .company .title-1 {
    color: var(--c-orange);
    font-size: 2.4rem;
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * リスト
/* ------------------------------------------------------------------------------------------------- */

.company .item {
  position: relative;
  padding: 50px;
  border-radius: 30px;
}
.company .item ~ .item {
  margin-top: 50px;
}

.company .item:nth-child(1){
  background: #ffeeee;
}
.company .item:nth-child(2) {
  background: #fff0e1;
}
.company .item:nth-child(3) {
  background: #fdf6d7;
}
.company .item:nth-child(4) {
  background: #fffcd2;
}
#companies .item {
  background: #edf7db;
}


.company .item .detail {
  width: 60%;
  margin-right: 5%;
}
.company .item .images {
  width: 35%;
}

.company .item:nth-child(1) .detail .title-2 {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: var(--c-pink);
}

.company .item:nth-child(2) .detail .title-2 {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: var(--c-orange);
}
.company .item:nth-child(3) .detail .title-2 {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: #fab000;
}
.company .item:nth-child(4) .detail .title-2 {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: #fac300;
}
#companies .item .detail .title-2 {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: #8ed01d;
}


.company .item .detail .meta {
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #333;
}
.company .item .detail .meta .address-item {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.company .item:nth-child(1) .detail .meta .address-item dt {
  width: 17%;
  font-weight: bold;
  color: var(--c-pink);
}
.company .item:nth-child(2) .detail .meta .address-item dt {
  width: 17%;
  font-weight: bold;
  color: var(--c-orange);
}
.company .item:nth-child(3) .detail .meta .address-item dt {
  width: 17%;
  font-weight: bold;
  color: #fab000;
}
.company .item:nth-child(4) .detail .meta .address-item dt {
  width: 17%;
  font-weight: bold;
  color: #fac300;
}
#companies .item .detail .meta .address-item dt {
  width: 17%;
  font-weight: bold;
  color: #8ed01d;
}


.company .item .detail .meta .address-item dd {
  width: 80%;
  margin: 0;
}
.company .item .detail ul li ~ li {
  margin: 0;
}


/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:960px) {
  /*ブラウザの幅が736px以下の時*/
  .company .item {
    position: relative;
    padding: 20px;
    border-radius: 30px;
  }
  .company .item ~ .item {
    margin-top: 30px;
  }
  
  .company .item .detail {
    width: 100%;
    margin-right: 0;
  }
  .company .item .images {
    width: 100%;
    margin-top: 1em;
  }
  
  .company .item .detail .title-2,
  #companies .item .detail .title-2 {
    font-size: 2.2rem !important;
    line-height: 1.4;
    font-weight: bold;
  }
  
  .company .item .detail .meta {
    padding-bottom: 0;
  }
  .company .item .detail .meta .address-item dt,
  #companies .item .detail .meta .address-item dt {
    width: 100% !important;
    font-weight: bold;
  }
  
  .company .item .detail .meta .address-item dd {
    width: 100%;
    margin-bottom: 1em;
  }
}