@charset "UTF-8";
/* ----------------------------------------------
スライダーイメージ
------------------------------------------------*/
#container.lower_page #topImage div.image_area {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url(../image/topImage.jpg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../image/topImage.jpg);
}

/* ----------------------------------------------

PC設定

------------------------------------------------*/
@media all and (min-width: 768px) {
  #container.lower_page #contents .philosophy > section {
    margin-bottom: calc(160px * 0.8);
  }
  #container.lower_page #contents .philosophy > section.section01 .bg {
    background: url(../image/bg.svg) center/150% no-repeat, -webkit-gradient(linear, left top, right top, color-stop(50%, #307ac3), to(#b7d9f9));
    background: url(../image/bg.svg) center/150% no-repeat, linear-gradient(to right, #307ac3 50%, #b7d9f9 100%);
    padding: 90px 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper {
    max-width: 1000px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 2rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title {
    padding: calc(2rem * 1.5) 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span {
    font-size: calc(16px * 1.25);
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span .big_en {
    font-style: italic;
    font-size: calc(16px * 2.875);
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -10%;
    left: 10%;
    width: 80px;
    height: 1px;
    background-color: #0068b6;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    background-color: #000;
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: rotate(90deg) translate(-15px, -15px);
            transform: rotate(90deg) translate(-15px, -15px);
    width: 50px;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2) {
    text-indent: 2em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -10%;
    right: 10%;
    width: 80px;
    height: 1px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    background-color: #ff0000;
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotate(90deg) translate(15px, 15px);
            transform: rotate(90deg) translate(15px, 15px);
    width: 50px;
  }
}

@media all and (min-width: 768px) and (max-width: 1100px) {
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span .big_en {
    font-style: italic;
    font-size: calc(16px * 2);
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    left: 5%;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2) {
    text-indent: 2em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    right: 5%;
  }
}

@media all and (min-width: 768px) {
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section {
    position: relative;
    padding: 2rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 70%;
    height: 1.5px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section h3 {
    font-size: calc(16px * 1.5);
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.8em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section p span {
    display: block;
    font-size: calc(16px * 1.25);
    text-align: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul li {
    font-size: calc(16px * 1.25);
    width: 70%;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg {
    background-color: #99cdff;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .image_area {
    background-color: #efefef;
    padding: 1rem 0 calc(2rem * 1.5);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
            clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area {
    padding: 1rem 0 2rem;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .en {
    font-size: calc(16px * 4.25);
    width: 50%;
    text-align: center;
    font-style: italic;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .ja {
    font-size: calc(16px * 2.8);
    width: 50%;
    text-align: center;
  }
}

/* ----------------------------------------------

pad設定

------------------------------------------------*/
@media all and (min-width: 520px) and (max-width: 768px) {
  #container.lower_page #contents .philosophy > section {
    margin-bottom: calc(110px * 0.8);
  }
  #container.lower_page #contents .philosophy > section.section01 .bg {
    background: url(../image/bg.svg) center/150% no-repeat, -webkit-gradient(linear, left top, right top, color-stop(50%, #307ac3), to(#b7d9f9));
    background: url(../image/bg.svg) center/150% no-repeat, linear-gradient(to right, #307ac3 50%, #b7d9f9 100%);
    padding: 70px 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper {
    max-width: 1000px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1.5rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title {
    padding: calc(1.5rem * 1.5) 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span {
    font-size: calc(14.4px * 1.25);
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span .big_en {
    font-style: italic;
    font-size: calc(14.4px * 2.875);
    display: block;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -10%;
    left: 1%;
    width: 80px;
    height: 1px;
    background-color: #0068b6;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    background-color: #000;
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: rotate(90deg) translate(-15px, -15px);
            transform: rotate(90deg) translate(-15px, -15px);
    width: 50px;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2) {
    text-indent: 0em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -10%;
    right: 1%;
    width: 80px;
    height: 1px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    background-color: #ff0000;
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotate(90deg) translate(15px, 15px);
            transform: rotate(90deg) translate(15px, 15px);
    width: 50px;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section {
    position: relative;
    padding: 1.5rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 70%;
    height: 1.5px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section h3 {
    font-size: calc(14.4px * 1.5);
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.8em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section p span {
    display: block;
    font-size: calc(14.4px * 1.25);
    text-align: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul li {
    font-size: calc(14.4px * 1.25);
    width: 90%;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg {
    background-color: #99cdff;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .image_area {
    background-color: #efefef;
    padding: 1rem 0 calc(1.5rem * 3);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
            clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .image_area figure {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area {
    padding: 1rem 0 1.5rem;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .en {
    font-size: calc(14.4px * 4.25);
    width: 100%;
    text-align: center;
    font-style: italic;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .ja {
    font-size: calc(14.4px * 2.8);
    width: 100%;
    text-align: center;
  }
}

/* ----------------------------------------------

sp設定

------------------------------------------------*/
@media all and (max-width: 520px) {
  #container.lower_page #contents .philosophy > section {
    margin-bottom: calc(80px * 0.8);
  }
  #container.lower_page #contents .philosophy > section.section01 h2 > span {
    -webkit-transform: translateX(70%);
            transform: translateX(70%);
  }
  #container.lower_page #contents .philosophy > section.section01 .bg {
    background: url(../image/bg.svg) center/150% no-repeat, -webkit-gradient(linear, left top, right top, color-stop(50%, #307ac3), to(#b7d9f9));
    background: url(../image/bg.svg) center/150% no-repeat, linear-gradient(to right, #307ac3 50%, #b7d9f9 100%);
    padding: 45px 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper {
    max-width: 1000px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title {
    padding: calc(1rem * 1.5) 0 3rem;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span {
    font-size: calc(12.8px * 1.25);
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span .big_en {
    font-style: italic;
    font-size: calc(12.8px * 2.875);
    display: block;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span .big_en .sp_br {
    display: block;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -10%;
    left: 1%;
    width: 80px;
    height: 1px;
    background-color: #0068b6;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(1)::after {
    background-color: #000;
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: rotate(90deg) translate(-15px, -15px);
            transform: rotate(90deg) translate(-15px, -15px);
    width: 50px;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2) {
    text-indent: 0em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::before, #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -10%;
    right: 1%;
    width: 80px;
    height: 1px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper .title > span:nth-of-type(2)::after {
    background-color: #ff0000;
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: rotate(90deg) translate(15px, 15px);
            transform: rotate(90deg) translate(15px, 15px);
    width: 50px;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section {
    position: relative;
    padding: 1rem 0;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 70%;
    height: 1.5px;
    background-color: #000;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section h3 {
    font-size: calc(12.8px * 1.5);
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.8em;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section p span {
    display: block;
    font-size: calc(12.8px * 1.25);
    text-align: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #container.lower_page #contents .philosophy > section.section01 .bg .wrapper section ul li {
    font-size: calc(12.8px * 1.25);
    width: 90%;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg {
    background-color: #99cdff;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .image_area {
    background-color: #efefef;
    padding: 1rem 0 calc(1rem * 3);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
            clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .image_area figure {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area {
    padding: 1rem 0 1rem;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .en {
    font-size: calc(12.8px * 3.5);
    width: 100%;
    text-align: center;
    font-style: italic;
  }
  #container.lower_page #contents .philosophy > section.section02 .bg .text_area p .ja {
    font-size: calc(12.8px * 2.4);
    width: 100%;
    text-align: center;
  }
}