/* ----------------------------------------------------------------------
about
---------------------------------------------------------------------- */


#header_slider_wrap{
    display: none;
}

#page_contents .post_content {
    max-width: none;
    margin: 0 auto;
    padding: 0 0px;
    overflow: hidden;
}

#page_header,#bread_crumb{
    display: none !important;
}
#page_home{
    padding-top: 4vw;
    background-image: url(../img/home/back.png);
    height: 100%;
    background-size: cover;
    padding-bottom: 4vw;
}
#page_contents{
    padding-bottom: 0px;
}


.contents{
    font-size: clamp(20px, 1.5vw, 45px);
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:800px) {
#page_home{
    padding-bottom: 30px;
}
.contents {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
}
}

#title {
    margin-bottom: 2vw;
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
#title img {
    width: 55%;
}
.contents_subtitle {
    color: #2A4F99;
    font-size: clamp(20px, 1.5vw, 45px);
    font-weight: 600;
    margin-bottom: 2vw;
    letter-spacing: 0.2em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.catch {
    color: #2A4F99;
    font-size: clamp(16px, 2vw, 42px);
    font-weight: 700;
    padding-right: 5%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4em;
}
.catch_line {
    border-image: linear-gradient(to right, #68b7e7, #5c99e8) 1;
    width: 55%;
    margin-left: 0;
    margin-right: auto;
    border-bottom: 4px solid;
    padding-bottom: 10px;
    margin-bottom: 2.5vw;
    position: absolute;
    display: inline-block;
    left: 0px;
}

@media screen and (max-width:800px) {
  .catch_line {
    width: 100%;
}  
 }   
    
.col_02{
    display: flex;
    justify-content: space-between;
}

.link_bot a{
    color: #FFFFFF;
    background: linear-gradient(to right, #68b7e7, #5c99e8);
    font-size: clamp(16px, 1.6vw, 30px);
    border-radius: 2vw;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    transition: 0.3s;
    position: relative;
    letter-spacing: 0.1em;
    display: block;
    width: 10em;
    margin-bottom: 0.5em;
}
.link_bot a::after {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    border-radius: 3px;
}
.title  {
    font-size: clamp(35px, 3.5vw, 90px);
    font-weight: 700;
    margin-bottom: 1.5vw;
    letter-spacing: 0.05em;
    color: #2A4F99;
}
.sub_title {
    color: #2A4F99;
    font-size: clamp(20px, 2vw, 45px);
    font-weight: 600;
    margin-bottom: 2vw;
    letter-spacing: 0.2em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* ----------------------------------------------------------------------
messege
---------------------------------------------------------------------- */
#message{
    position: relative;
    padding-top: 100px;
    margin-bottom: 10vw;
}
#message .ill_01 img{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20%;
    height: auto;
    z-index: 2;
}
#message .mes_p {
    color: #2A4F99;
    font-size: clamp(15px, 1.1vw, 23px);
    font-weight: 700;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;
    margin-top: 3vw;
    line-height: 1.8;
}
#message .txt_area{
    width: 58%;
}
#message .img_area{
    width: 38%;
}
#message .img_area img{
    width: 100%;
    height: auto;
}
#message .img_area .sign{
    width: 60%;
    height: auto;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

@media screen and (max-width:800px) {
    #message .img_area .sign{
    width: 100%;
}
   }
#message .blue_back{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #e5f3fb;
    border-radius: 5vw;
    padding-top: 2em;
    padding-right: 3em;
    padding-bottom: 2em;
    padding-left: 3em;
    margin-top: 2vw;
    max-width: 1400px;
}

	

#message .blue_back .col_02{}

#message .blue_back>.col_02>div:nth-child(1) {
    border-right: 2px solid #5eb0e5;
    width: 50%;
    padding-right: 2%;
    margin-right: 2%;
    margin-top: 0.5em;
}
#message .blue_back>.col_02>div:nth-child(1) .txt_ind{
    font-size: 90%;
    line-height: 1.4em;
    text-indent: -5em;
    margin-left: 5em;
	margin-top: 0.5em;
    display: block;
}


#message .blue_back .col_02>div:nth-child(2) {
    width: 50%;
}
#message .blue_back .col_02>div>div {
    display: flex;
    justify-content: space-between;
}
#message .blue_back .col_02 div div .txt_area{
    width: 65%;
}

#message .blue_back .col_02 div div .txt_area p{
    line-height: 1.5em;
    
}

#message .blue_back .col_02 div div .txt_area .title{
    color: #2A4F99;
    font-size: clamp(20px, 1.8vw, 45px);
    font-weight: 600;
    margin-bottom: 1vw;
    display: flex;
    
}

#message .blue_back .col_02 div div .txt_area .title .link_bot a {
    font-size: clamp(16px, 1.1vw, 30px);
    padding-left: 1em;
    padding-right: 2.1em;
    padding-top: 0.3em;
    padding-bottom: 0.4em;
    width: auto;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    transition: 0.3s;
}

#message .blue_back .col_02 div div .txt_area .title .link_bot a:hover {
    opacity: 0.5;
}

#message .blue_back .col_02 div div .img_area{
    width: 30%;}

#message .blue_back .col_02 div div .img_area img{
    width: 100%;
    height: auto;
	margin-bottom: 0.5em;
}

@media screen and (max-width:800px) {
  #message{
    padding-top: 30px;
}  
#title {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    width: 100%;
}
    
#title img {
    width: 100%;
}
#message .col_02{
    display: inherit;
}  
#message .txt_area {
        width: 100%;
}
   #message .mes_p {
    line-height: 2;
        margin-top: 49px;
} 
  #message .img_area {
    width: 70%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom:40px;
}  
    

#message .blue_back{
    width: calc(100% - 40px);
    padding-right:20px;
    padding-left:20px;
}
#message .blue_back>.col_02>div:nth-child(1) {
    border-right:none;
    width: 100%;
    padding-right: 0;
    margin-right:0;
    border-bottom: 2px solid #5eb0e5;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
    
   #message .blue_back>.col_02>div:nth-child(2) {
    width: 100%;
} 
    
    
#message .blue_back .col_02>div {
        display: block;
}
 
#message .blue_back>.col_02 div div .txt_area{
    width: 100%;
}   
    #message .blue_back>.col_02 div div  .img_area {
    width: 50%;
        margin-bottom: 0px;
}
#message .blue_back>.col_02 div div .txt_area p{
    margin-bottom: 15px;;
    
}
    #message .blue_back>.col_02 div div .txt_area .title {
    display: inherit;
}
    #message .link_bot a {
    margin-left: 0 !important;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: center;
}
	#message .blue_back .col_02>div>div {
        display: block;
}
    
    }
/* ----------------------------------------------------------------------
PHILOSOPHY
---------------------------------------------------------------------- */
#philosophy{
    background-image: url(../img/home/item_01.png);
    background-repeat: no-repeat;
    background-position: left bottom 30%;
    background-size: 25% auto;
    padding-bottom: 5vw;
}

#philosophy div .title{}

#philosophy div .sub_title {
    margin-left: 0px;
}

#philosophy .back {
    background-image: url(../img/about/back01.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    position: relative;
    width: 80%;
    height: 70vw;
    padding-bottom: 5vw;
    margin-right: auto;
    margin-left: auto;
}

#philosophy .about_box{
    position: absolute;
}
#philosophy .about_box .ser_title {
    font-size: clamp(30px, 5vw, 80px);
    font-weight: 700;
    margin-bottom: 2vw;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    transform: scale(0.7, 1);
    transform-origin: top left;
    display: block;
    width: 100%;
}
#philosophy .about_box .ser_subtitle {
    font-size: clamp(17px, 1.7vw, 80px);
    margin-bottom: 2.5vw;
    color: #FFFFFF;
    display: block;
    width: 100%;
    font-weight: 600;
}


#philosophy .about_box p{
    font-size: clamp(14px, 1.5vw, 40px);
    margin-bottom: 1vw;
    color: #FFFFFF;
    line-height: 1.8em;
    display: block;
    width: 100%;
    letter-spacing: 0.2em;
    font-weight: 600;
}
#philosophy .back>div:nth-child(1) {
    top: 12%;
    left: 14%;
}

#philosophy .back div:nth-child(1) .ser_title{
    padding-left:0.5em;
}
#philosophy .back div:nth-child(1) .ser_subtitle {
    text-align: right;
    padding-right: 1em;
}
#philosophy .back div:nth-child(1)  p{
    text-align: center;
}


#philosophy .back div:nth-child(2) {
    top: 12vw;
    right: 7vw;
}

#philosophy .back div:nth-child(2) .ser_title{
    padding-left:0.5em;
}
#philosophy .back div:nth-child(2) .ser_subtitle {
    text-align: right;
    padding-right: 1em;
}
#philosophy .back div:nth-child(2)  p{
    text-align: center;
}



#philosophy .back div:nth-child(3) {
    top: 39vw;
    left: 27vw;
}
#philosophy .back div:nth-child(3) .ser_title{
    text-align: center;
}
#philosophy .back div:nth-child(3) .ser_subtitle {
    text-align: right;
    padding-right: 3em;
}
#philosophy .back div:nth-child(3)  p{
    text-align: center;
}


#philosophy .gobeyond{
    background-image: url(../img/about/back_item01.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 80%;
    padding-top: 8vw;
    padding-bottom: 4vw;
    text-align: center;
}
#philosophy div img{
    width: 70%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:800px) {
  #philosophy .back {
        background-size: 520px;
        height: 500px;
        padding-bottom: 5vw;
        background-position-x: -82px;
        width: 100%;
        margin-top: 15px;
    }
#philosophy div .title{
    margin-bottom: 10px;
    }
 #philosophy .about_box p {
    font-size: clamp(14px, 1.8vw, 40px);
    line-height: 1.4em;
}
#philosophy .back>div:nth-child(1) {
        top: 47px;
        left: 5px;
}


#philosophy .back div:nth-child(2) {
        top: 71px;
        right: 2px;
}


#philosophy .back div:nth-child(3) {
        top: 252px;
        left: 40px;
}
  #philosophy div img {
    width: 90%;
}  
  }  

/* ----------------------------------------------------------------------
history
---------------------------------------------------------------------- */
#history{
    background-image: url(../img/about/back02.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

#history .title{}

#history .sub_title{
    margin-left: 0px;
}

#history .white_back{
    background-color: #FFFFFF;
    border-radius: 2vw;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-bottom: 3vw;
    padding-left: 2vw;
}

#history table{
    font-size: clamp(14px, 1.2vw, 24px);
    color: #2A4F99;
    width: auto;
    line-height: 1.8em;
    border-left-style: none;
    border-top-style: none;
    border-bottom-style: none;
}

#history th{
    text-align: left;
    border-right: 3px solid #6E90D5;
    padding-right: 1.5em;
    border-bottom-style: none;
    background-color: #FFFFFF;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: 600;
}

#history td{
    padding-left: 1.5em;
    border-bottom-style: none;
    border-right-style: none; 
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: 600;
}



@media screen and (max-width:800px) {
#history{
    padding-top: 30px;
    padding-bottom: 30px;
}

#history .sub_title{
    margin-bottom: 15px;
}
  #history .white_back {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}  
    
    
#history th{
    border-right: 2px solid #6E90D5;
    padding-right: 0.5em;
    width: 7.5em;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
}

#history td{
    padding-left: 0.5em;
    padding-bottom: 1em;
    padding-top: 0px;
    padding-right: 0px;
}
}