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

.sp-only{display: none !important ;}
@media only screen and (max-width: 480px) {
.sp-only{display: inline !important;}
.pc-only{display: none !important ;}
}
.br-tab {
	display: none;
}

  .br-pc { display:block; }
  .br-sp { display:none; }

@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-tab { display:block; }
}
@media screen and (max-width: 480px){	
  .br-tab { display:none; }
  .br-sp { display:block; }
}



.post_content{
    margin: 0 !important;
}

.cb_contents.last{
    padding-bottom: 0 !important;
}

#main_contents {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 80px !important;
}

.pc #header.animate,
#page_header .catch.animate{
    -webkit-animation: opacityAnimation 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 1.0s !important;
    animation: opacityAnimation 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 1.0s !important;
}

#page_header{
    height: 32vw !important;
}

.page-id-66 #page_header,
.page-id-72 #page_header,
.page-id-70 #page_header{
    height: 16vw !important;
}

.single #page_header,
.archive #page_header{
    height: 100px !important;
}

#index_slider .caption{
    width: 100% !important;
}

#index_slider .catch,
#page_header_catch .catch{
    line-height: 1.6 !important;
    font-weight: 600 !important;
}

#index_slider .item1 .catch{
    font-size: 48px !important;
}

#main_contents{
    padding: 0 !important;
}

#article {
    position: relative;
    width: 1024px;
    margin: 35px auto;
}

#mobile_menu a:hover, #drawer_menu .close_button:hover, #mobile_menu .child_menu_button:hover{
    background: #000 !important;
}

.pc #global_menu > ul > li > a.glink span{
    font-size: 14px !important;
}

.gt_white_content a{
    color: #000 !important;
}

.gt_white_content a:hover{
    background-color: #f4f4f4 !important;
}

#mobile_menu a.glink span{
    font-size: 13px !important;
}

#mobile_menu .gt_languages a{
    background-color: #fff;
    padding: 8px !important;
}

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

#article {
    width: 90%;
}
    
}

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

#index_slider .item1 .catch{
    font-size: 32px !important;
}
    
}

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

#index_slider .item1 .catch{
    font-size: 6vw !important;
}

#page_header{
    height: 60vw !important;
}

.page-id-66 #page_header,
.page-id-72 #page_header,
.page-id-70 #page_header{
    height: 40vw !important;
}




    
}


/*==================================================
全体コンテンツエリア
================================================== */

.contents-area{
    width: 1024px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative;
}

.sec{
	padding-top: 80px;
}

.bg-w{
	background: #fff;
}

.sec-grey{
	background: #e9e9e9;
}


.contents-sec{
	width: 1060px;
	vertical-align: top;
}

.page-contents{
	margin-top: 85px;
}

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

.contents-area{
    width: 90%; 
}

.sec{
	padding-top: 70px;
}
	
}


@media only screen and (max-width: 768px) {
    
.sec{
	padding-top: 50px;
}

.page-contents{
	margin-top: 70px;
}


	
}

@media (max-width: 480px) {

.sec{
	padding-top: 35px;
}
	


.contents-area{
    width: 90%; 
}
  
}


/*==================================================
タイトル
================================================== */

.title-contents{
    display: block;
	font-size: 38px !important;
	line-height: 1.8 !important;
	position: relative;
	margin-bottom: 50px !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
}

.title-contents span{
    display: block;
    margin: 0 auto 10px;
    border-top: 1px solid #000;
    width: 80px;
    height: 1px;
}

.title-contents small{
	display: block;
	font-size: 50%;
	font-weight: normal;
}

@media only screen and (max-width: 768px) {
	
.title-contents{
	font-size: 21px;
	margin-bottom: 35px !important;
}

	
}


@media only screen and (max-width: 480px) {
	
.title-contents{
	font-size: 6.4vw;
    line-height: 1.2 !important;
}

.title-contents span{
    margin: 10px auto;
    width: 56px;
}


	
}

/*==================================================
fade
================================================== */


/* jQuaryスクロールCSS */
.fade-in, .fade-load {
  opacity: 0;
  transition-duration: 1400ms;
  transition-property: opacity, transform;
}

.fade-in-late{
    transition-duration: 2200ms;
}

.fade-in-up {
  transform: translate(0, 30px);
}

.fade-in-down {
  transform: translate(0, -30px);
}

.fade-in-left {
  transform: translate(-30px, 0);
}

.fade-in-right {
  transform: translate(30px, 0);
}

.nijimi{
    opacity: 0;
    filter: blur(10px);
  transition-duration: 1400ms;
}

.nijimi-in{
    opacity: 1;
    filter: blur(0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
    filter: blur(0);
}

.scroll-in.fade-nijimi{
    filter: blur(0);
}



.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



.fadein {
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s ease;
}

.fadein.scrollin {
    opacity: 1;
    transform: translateY(0);
}

.ul-3cols li:first-child{}
.ul-3cols li:nth-child(2){transition-delay: 200ms;}
.ul-3cols li:last-child{transition-delay: 400ms;}

@media only screen and (max-width: 480px) {
    
.ul-3cols li:first-child{}
.ul-3cols li:nth-child(2){transition-delay: 0;}
.ul-3cols li:last-child{transition-delay: 0;}    
    
}


/*==================================================
btn
================================================== */

.btn {
    background: #000;
    color: #fff !important;
    display: inline-block;
    min-width: 250px;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.btn:hover{
    background: #666;
}

.btn.btn-line{
    background: #06c755;
}
.btn.btn-line:hover{
    background: #58ca87;
}

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

.btn {
    min-width: 220px;
    height: 52px;
    line-height: 52px;
}
    
}

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

.btn {
    min-width: 50%;
    height: 54px;
    line-height: 54px;
}
    
}




/*==================================================
header
================================================== */

#header_logo img{
    width: 280px;
    height: auto;
}

#header_logo{
    left: 30px;
}

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

#header_logo img{
    width: auto;
    height: 50px;
}

#header_logo{
    left: 20px;
}
    
}

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

#header_logo img{
    width: auto;
    height: 42px;
}

#header_logo{
    left: 10px;
}
    
}


/*==================================================
top-service
================================================== */

#top-service{
    padding: 35px;
}

#service-contents{
    position: relative;
    margin-top: -10px;
}

#service-contents article{
    position: relative;
    margin-bottom: 150px;
}

@media only screen and (min-width: 1700px) {

#service-contents article{
    margin-bottom: 300px;
}
    
}

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

#service-contents article{
    margin-bottom: 50px;
}
    
}

.txt-service{
    width: 75%;
    background: #f5f5f5;
    padding: 75px;
    line-height: 2.2;
    box-sizing: border-box;
    min-height: 500px;
}

.txt-service a.btn{
    margin-top: 25px;
}

.pic-right .txt-service{
    margin-left: 25%;
    padding: 75px 75px 75px 30%;
}

.txt-service h4{
    display: block;
    font-size: 32px;
    margin-bottom: 50px;
    font-weight: 600;
    width: 60%;
    line-height: 1.7;
}

.pic-right .txt-service h4{
    width: 100%;
}

.txt-service p{
    width: 60%;
    margin: 0;
}

.pic-right .txt-service p{
    width: 90%;
}

.img-service{
    width: 45%;
    position: absolute;
    z-index: 10;
    top: 100px;
    right: 0;
}

.pic-right .img-service{
    top: 100px;
    right: inherit;
    left: 0;
}

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

.txt-service{
    padding: 50px;
    line-height: 2.0;
}

.txt-service h4{
    margin-bottom: 20px;
    width: 70%;
}

.pic-right .txt-service{
    margin-left: 25%;
    padding: 50px 75px 50px 25%;
}

.pic-right .txt-service h4{
    width: 100%;
}

.txt-service p{
    width: 70%;
    margin: 0;
}

.pic-right .txt-service p{
    width: 100%;
}
    
}

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

#top-service{
    padding: 25px;
}

.txt-service{
    padding: 50px;
    line-height: 2.0;
}

.txt-service h4{
    font-size: 25px;
}

.pic-right .txt-service{
    margin-left: 25%;
    padding: 50px 75px 50px 25%;
}


.img-service{
    top: 70px;
}

.pic-right .img-service{
    top: 70px;
}
    
}

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

#top-service{
    padding: 20px;
}

#service-contents article{
    margin-bottom: 120px;
}

.txt-service{
    width: 95%;
    padding: 25px 20px 170px;
    line-height: 1.8;
    min-height: auto;
    box-sizing: border-box;
}

.pic-right .txt-service{
    margin-left: 5%;
    padding: 25px 20px 170px;
}

.txt-service h4{
    font-size: 5vw;
    margin-bottom: 10px;
    width: 100%;
    line-height: 1.6;
}

.pic-right .txt-service h4{
    width: 100%;
}

.txt-service p{
    width: 100%;
}

.pic-right .txt-service p{
    width: 100%;
}

.img-service{
    width: 90%;
    top: inherit;
    right: 0;
    bottom: -70px;
}

.pic-right .img-service{
    top: inherit;
    right: inherit;
    left: 0;
    bottom: -70px;
}
    
}


/*==================================================
cta
================================================== */

#cta{
    background: #d9e3f0;
    padding: 25px 0;
}

#cta img{
    vertical-align: bottom;
}

/*==================================================
access-map
================================================== */

#access-map{
    margin-top: 100px;
}

#access-map iframe{
    width: 100%;
    height: 320px;
    vertical-align: bottom;
}

/*==================================================
message
================================================== */

#message{
    border-bottom: 1px solid #000;
    padding-bottom: 80px;
}

.box-message{
    position: relative;
}

.img-president{
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
}

.txt-message{
    margin-left: 40%;
    line-height: 2.0;
}

.txt-message p{
    line-height: 2.0 !important;
}

.txt-message h3{
    display: block;
    margin-bottom: 35px;
    font-size: 24px;
    line-height: 1.8 !important;
}

.name-president{
    text-align: right;
}

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

#message{
    padding-bottom: 50px;
}

.img-president{
    position: relative;
    top: inherit;
    left: inherit;
    width: 50%;
    display: block;
    margin: 0 auto 10px;
}

.txt-message{
    margin-left: 0;
    line-height: 1.8;
    width: 90%;
    margin: 0 auto;
}

.txt-message p{
    line-height: 1.8 !important;
}

.txt-message h3{
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.6 !important;
}
    
}

/*==================================================
outline
================================================== */

.table{
    width: 100% !important;
}

.table tr{
    border-top: 1px solid #ddd !important;
}
.table tr:last-child{
    border-bottom: 1px solid #ddd !important;
}

.table th{
    border: none !important;
    background:none !important;
    padding: 20px 10px !important;
    text-align: left !important;
    width: 16% !important;
    vertical-align: middle !important;
}

.table td{
    border: none !important;
    background:none !important;
    padding: 20px 10px !important;
    text-align: left !important;
}

.btn-area{
    text-align: center;
    padding: 20px 0;
}

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

.table th{
    width: 20% !important;
}
}

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

.table th{
    display: block;
    width: 100% !important;
    padding: 15px 0 0 !important;
}

.table td{
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 15px 10px !important;
}
    
}

/*==================================================
single
================================================== */

#single_category,.meta_top{
    display: none !important;
}

#post_title_area{
    margin-bottom: 20px !important;
}

.post_content h2{
    background-color: #f4f4f4 !important;
    padding: 20px 15px !important;
    margin: 50px 0 25px !important;
}

.post_content h2.title-contents{
    background-color: transparent !important;
}

.post_content h3{
    border-left: 6px solid #276896 !important;
    padding: 5px 0 5px 15px !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

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

.post_content h2{
    padding: 12px 10px !important;
    margin: 30px 0 15px !important;
}

.post_content h3{
    border-left: 4px solid #276896 !important;
    padding: 5px 0 5px 10px !important;
    font-size: 17px !important;
    margin-bottom: 15px !important;
}
    
    .post_content p{
        line-height: 2.0 !important;
    }
    
}


/*==================================================
online
================================================== */

#online-btn{
    padding-bottom: 50px;
}

#online-btn .btn-area a{
    margin: 0 15px;
    min-width: 320px;
}

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

#online-btn .btn-area a{
    min-width: 42%;
}

    
}

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

#online-btn .btn-area a{
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto 15px;
}

    
}


/*==================================================
sns-footer
================================================== */

#sns-footer{
    text-align: center;
    padding-top: 20px;
    background-color: #fff;
}

a.icn-sns{
    font-size: 26px;
    margin: 0 10px;
}

td a.icn-sns{
    margin: 0 20px 0 0;
}

a.a-fb{
    color: #1877f2
}

a.a-line{
    color: #06c755
}