@charset "UTF-8";
/* CSS Document */

/* PC
---------------------------------------------------------------------- */
@media (min-width: 1001px) {

    .pc_none {
        display: none;
    }


/* pageheader
---------------------------------------------------------------------- */
    #pageheader {
        width: 100%;
        height: 550px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 0;
        /*margin-top: 133px;*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(42em / 16);
        letter-spacing: 0.25em;
        padding-left: 200px;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(16em / 42);
        letter-spacing: 0.23em; 
        margin-top: 20px;
    }
    #pageheader img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }


/* president
---------------------------------------------------------------------- */
    #president {
        background: #41527d;
        padding: 70px 0 100px;
        color: #FFF;
    }
    #president .ch3_4 {
        margin-bottom: 75px;
    }
    #president .presidentContent {
        justify-content: space-between;
    }
    #president .presidentContent .txt {
        width: 62.728%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #president .presidentContent .txt p {
        font-size: 20px;
        line-height: 2;
    }
    #president .presidentContent .txt .fm_ta {
        font-family: ta-oonishi, sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 28px;
        display: inline-block;
        margin-left: 1em;
    }
    #president .presidentContent .img {
        width: 31.819%
    }


/* mission
---------------------------------------------------------------------- */
    #mission {
        padding: 110px 0 0;
    }
    #mission .ch3_5 {
        text-align: center;
    }
    #mission .ch3_5 + p {
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 150px;
    }
    #mission .img {
        text-align: center;
    }
    #mission .img img {
    }


/* philosophy
---------------------------------------------------------------------- */
    #philosophy {
        padding: 125px 0 100px;
    }
    #philosophy .ch3_6{
        text-align: center;
        margin-bottom: 80px;
    }
    #philosophy .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -20px;
        bottom: -10px;
        z-index: 10;
    }
    #philosophy p {
        font-size: 33px;
        line-height: 2;
        letter-spacing: 2.48px;
        text-align: center;
        margin-bottom: 80px;
    }
    #philosophy .img {
        text-align: center;
    }
    #philosophy .img img {
        width: 80%;
    }


/* vision
---------------------------------------------------------------------- */
    #vision {
        padding: 100px 0 200px;
    }
    #vision .ch3_6{
        text-align: center;
        margin-bottom: 80px;
    }
    #vision .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -20px;
        bottom: -10px;
        z-index: 10;
    }
    #vision p {
        font-size: 33px;
        line-height: 2;
        letter-spacing: 2.48px;
        text-align: center;
        margin-bottom: 80px;
    }


/* guidelines
---------------------------------------------------------------------- */
    #guidelines {
        padding: 70px 0 130px;
        background: url("../images/bg_mission.jpg") center no-repeat;
        background-size: cover;
    }
    #guidelines .ch3_6{
        text-align: center;
        margin-bottom: 125px;
    }
    #guidelines .ch3_6{
        text-align: center;
        margin-bottom: 80px;
    }
    #guidelines .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -20px;
        bottom: -10px;
        z-index: 10;
    }
    #guidelines .iconList {
/*        padding: 0 2%;*/
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2%;
    }
    #guidelines .iconList li {
        background: #FFF;
        display: flex;
        flex-direction: column;
        width: 23.273%;
        min-height: 330px;
        padding: 1.5em 1em;
        margin-bottom: 40px;
    }
    #guidelines .iconList li .img {
        width: 50.78%;
/*        min-height: 150px;*/
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #guidelines .iconList li .img img {
        object-fit: contain;
    }
    #guidelines .iconList li .txt {
        text-align: center;
        color: #231815;
    }
    #guidelines .iconList li .txt h4 {
        font-size: 27px;
        margin-bottom: 20px;
        text-align: left;
    }
    #guidelines .iconList li .txt p {
        font-size: 17px;
    }

    .arrowlink1 {
        font-weight: 700;
        display: flex;
    flex-wrap: wrap;
        align-items: center;
        margin-top: 25px;
    }
    .arrowlink1:hover {
        opacity: 1;
    }
    .arrowlink1 span {
        display: block;
        width: 40px;
        height: 40px;
        margin-left: 15px;
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .arrowlink1 span img {
        width: 22px;
    }
    .arrowlink1 span .hover {
        display: none;
    }
    .arrowlink1:hover span {
        background-color: #3b4b72 ;
        border: 1px solid #3b4b72;

    }
    .arrowlink1:hover span img {
        width: 20px;
    }
    .arrowlink1:hover span .default {
        display: none;
    }
    .arrowlink1:hover span .hover {
        display: block;
    }


} /* End PC */


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


/* SP
---------------------------------------------------------------------- */
@media (max-width: 1000px) {

    .sp_none {
        display: none;
    }
    .matters img {
        width: 100%;
        height: auto;
    }

    #pageheader {
        width: 100%;
        height: calc(300 / 375 * 100vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 0;
        /*margin-top: calc(50 / 375 * 100vw);*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(32em / 16);
        letter-spacing: 0.25em;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(15em / 32);
        letter-spacing: 0.23em;
        margin-top: calc(20 / 375 * 100vw);
    }
    #pageheader img {
        width: 100%;
        height: calc(300 / 375 * 100vw);
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }



/* president
---------------------------------------------------------------------- */
    #president {
        background: #41527d;
        padding: 16vw 0;
        color: #FFF;
    }
    #president .ch3_4 {
        text-align: center;
        margin-bottom: 8vw;
    }
    #president .presidentContent {
        justify-content: space-between;
    }
    #president .presidentContent .txt {
        margin-bottom: 6vw;
    }
    #president .presidentContent .txt p {
        margin-bottom: 6vw;
        line-height: 2;
    }
    #president .presidentContent .txt p:last-of-type {
        margin-bottom: 0;
    }
    #president .presidentContent .txt .fm_ta {
        font-family: ta-oonishi, sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 5vw;
        display: inline-block;
        margin-left: 1em;
    }
    #president .presidentContent .img {
    }


/* mission
---------------------------------------------------------------------- */
    #mission {
        padding: 16vw 0;
    }
    #mission .ch3_5 {
        text-align: center;
    }
    #mission .ch3_5 + p {
        text-align: center;
        font-weight: bold;
        margin-bottom: 10vw;
    }
    #mission .img {
        text-align: center;
    }
    #mission .img img {
    }



/* philosophy
---------------------------------------------------------------------- */
    #philosophy {
        padding: 16vw 0;
    }
    #philosophy .ch3_6{
        text-align: center;
        margin-bottom: 8vw;
    }
    #philosophy .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -3vw;
        bottom: -2vw;
        z-index: 10;
    }
    #philosophy p {
/*        font-size: 33px;*/
        line-height: 2;
        letter-spacing: 0.2vw;
        text-align: center;
        margin-bottom: 8vw;
    }


/* vision
---------------------------------------------------------------------- */
    #vision {
        padding: 16vw 0;
    }
    #vision .ch3_6{
        text-align: center;
        margin-bottom: 8vw;
    }
    #vision .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -3vw;
        bottom: -2vw;
        z-index: 10;
    }
    #vision p {
/*        font-size: 33px;*/
        line-height: 2;
        letter-spacing: 2.48px;
        text-align: center;
        margin-bottom: 8vw;
    }


/* guidelines
---------------------------------------------------------------------- */
    #guidelines {
        padding: 16vw 0;
        background: url("../images/bg_mission.jpg") center no-repeat;
        background-size: cover;
    }
    #guidelines .midashiWrap {
        margin-bottom: 10vw;
    }
    #guidelines .ch3_6{
        text-align: center;
        margin-bottom: 12vw;
    }
    #guidelines .subch {
        transform: rotate(-15deg);
        position: absolute;
        right: -3vw;
        bottom: -2vw;
        z-index: 10;
    }
    #guidelines .iconList {
/*        padding: 0 2%;*/
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2%;
    }
    #guidelines .iconList li {
        background: #FFF;
        display: flex;
        flex-direction: column;
        width: 49%;
/*        min-height: 380px;*/
        padding: 2em 0.5em;
        margin-bottom: 2vw;
    }
    #guidelines .iconList li .img {
        width: 70%;
        height: 35vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #guidelines .iconList li .img img {
        object-fit: contain;
    }
    #guidelines .iconList li .txt {
        text-align: center;
        color: #231815;
    }
    #guidelines .iconList li .txt h4 {
        font-size: 4.5vw;
        text-align: left;
        margin-bottom: 2vw;
    }
    #guidelines .iconList li .txt p {
        font-size: 3.6vw;
        text-align: left;
    }


    .arrowlink1 {
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .arrowlink1:hover {
        opacity: 1;
    }
    .arrowlink1 span {
        display: block;
        width: calc(40 / 375 * 100vw);
        height: calc(40 / 375 * 100vw);
        margin-left: calc(15 / 375 * 100vw);
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrowlink1 span .hover {
        display: none;
    }
    .arrowlink1:hover span {
        background-color: #3b4b72 ;
        border: 1px solid #3b4b72;
    }
    .arrowlink1 span img {
        width: calc(20 / 375 * 100vw);
    }
    .arrowlink1:hover span .default {
        display: none;
    } 
    .arrowlink1:hover span .hover {
        display: block;
    }
}