/* variable - 変数定義 */
:root {
    --container-primary: 1920px;
    --title-font-size: 3rem;
    --sub-title-font-size: 5rem;
    --detail-font-size: 2rem;
}
@media (width < 768px) {
    :root {
        --container-primary: 100%;
        --title-font-size: 1.2rem;
        --sub-title-font-size: 1.8rem;
        --detail-font-size: 1.1rem;
    }
}


.p-home-layout__inner {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 47.9375em ) {
    .p-home-layout__inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
@media print, screen and (min-width: 48em ) {
    .p-home-layout__inner {
      max-width: 1400px;
      margin-right: auto;
      margin-left: auto;
      padding-top: 116px;
      padding-bottom: 120px;
    }
}
@media print, screen and (min-width: 64em ) {
    .p-home-layout__inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
    }
}
.p-home-layout__inner div {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.85;	  
}

.vission-mission__component,
.value__component{
    position:relative;
}
.vission-mission__bg_cover,
.value__bg_cover{
    position:relative;
    z-index:1;
    background-color: rgba(0,0,0,0.1);
}
.vission-mission__bg,
.value__bg{
    background-color: rgba(0,0,0,0.1);
    position:absolute;
    z-index:-1;
    width: 100%;
    height: 100%;
}
.vission-mission__bg_img,
.value__bg_img{
    position:absolute;
    z-index:-2;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 100%;
}
.value__bg_img{
    object-position: 50% 50%;
}
.vission-mission__content_wrapper,
.value__content_wrapper{
    max-width: var(--container-primary);
    margin: auto;    
    padding: 5rem;
}
.vission-mission__content,
.value__content{
    padding: 5rem;
    background-color: rgba(0,0,0,0.6);
    margin: auto;
    color:white;
}
.value__content{
    background-color: rgba(0,0,0,0.0);
}
.vision-component__wrapper,
.value-component__wrapper{
    max-width: var(--container-primary);
    margin:auto;
}
.vision-component__inner,
.mission-component__inner,
.value-component__inner{
    text-align: center;
}
.value-component__inner{
    padding: 5rem;
    background-color: rgba(0,0,0,0.6);
}
.vision-component__title,
.mission-component__title,
.value-component__title{
    font-size: var(--title-font-size);
    font-weight: bolder;
    margin-top: 5rem;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}
.mission-component__title{
    margin-top: 10rem;
}
.value-component__title{
    text-align: right;
    margin-top: 0rem;
}
.vision-component__sub_title,
.mission-component__sub_title,
.value-component__sub_title{
    font-size: var(--sub-title-font-size);
    font-weight: bolder;
}
.value-component__sub_title{
    text-align: left;
}
.value-component__lists:not(:first-of-type) .value-component__sub_title{
    margin-top: 5rem;
}
.value-component__detail{
    padding-left: 5rem;
    text-align: left;
    font-weight: bold;
    font-size: var(--detail-font-size);
}
.value-component__detail > p{
    margin-bottom: 1rem;
}

@media screen and (max-width:768px){
    .vission-mission__content_wrapper,
    .value__content_wrapper,
    .value__content{
        padding: 0.5rem;
    }
    .vission-mission__content,
    .value-component__inner{
        padding: 1rem;
    }
    .value-component__detail{
        padding-left: 0rem;
        font-size: var(--detail-font-size);
    }
    .vision-component__title,
    .mission-component__title,
    .value-component__title{
        margin-top: 2rem;
    }
    .value-component__lists:not(:first-of-type) .value-component__sub_title{
        margin-top: 2rem;
    }
    
}