@charset "utf-8";

html{font-size: 100%}
body{font-size: 14px ; font-weight: 600}

.text{ opacity:0}
h2.h2 , .midashi{ font-weight: 600; text-align: center ; margin-bottom: 30px; font-size: clamp(2.375rem, 2.272rem + 0.51vw, 2.625rem)}/*38-42 320-1100*/
h2.h2 span{padding-bottom: 20px; font-weight: 700; display: inline-block; border-bottom: 6px solid #000}

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

背景
--------------------------------------------------------------------*/	
.bg {
  animation:slide 17s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #ffeded 50%, #deffed 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position: absolute;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:10s;
}
.bg3 {
  animation-duration:11s;
}
.contentc {

}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


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

フェードイン
--------------------------------------------------------------------*/	
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-5-22 16:42:14
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}




.focus-in-expand {
	-webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}






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

slid
--------------------------------------------------------------------*/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;transform: translateY(30px) rotateY(0deg);
    }
    50% {
        opacity: 1;transform: translateY(0) rotateY(360deg);
    }
    100% {
        opacity: 1;transform: translateY(0) rotateY(720deg);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;transform: translateY(30px) rotateY(0deg);
    }
    50% {
        opacity: 1;transform: translateY(0) rotateY(360deg);
    }    
    100% {
        opacity: 1;transform: translateY(0) rotateY(720deg);
    }
}
.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
	animation-duration: 5s;
}


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

slid
--------------------------------------------------------------------*/
.slid{ position:relative; padding-top:60px}
.slid h1{ display:none}
.slid .h1t{margin: -100px 0 0 5%; width:95%; font-size:clamp(1.125rem, 0.407rem + 3.59vw, 2.875rem)}/*18-46*/
.slid .h1t .te01 span{background: #fff; padding: 3px 20px; margin-bottom: 10px; display: inline-block}
.slid .h1t .te01:nth-child(3){margin-bottom: 20px}

.slid .aper{padding: 0; text-align: left}
.slid .aper span{display: inline-block; font-size: 11px; padding-left: 5px}
.slid .aper a{font-weight: 500; padding: 10px 30px 10px 20px; font-size: clamp(1.25rem, 1.147rem + 0.51vw, 1.5rem)}/*20-24*/

.aper { text-align: center ; padding: 30px 0 0px}
.aper a{margin: 10px 0 0 ; position: relative; display: inline-block; background:#41d799; color: #fff; 
padding: 14px 70px 10px; line-height: 1.2;  }
.aper a:hover{color: #fba7a7}
.aper a::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  width: 13px;    /* くの字を山なりに見た時、左側の長さ */
  height: 13px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 3px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 3px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}

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

.service
--------------------------------------------------------------------*/
.servicecont{ text-align: center; padding-top: 90px ;  display: block ;}
.servicecont .bethnk{ width: 80%; max-width: 667px}
.servicecont h2.mt-40{margin-top: -20px}
.service dd h3{display: block;font-weight: 700 ; line-height: 1.4 ;  margin: 20px 0 ; font-size:clamp(0.938rem, 0.861rem + 0.38vw, 1.125rem)}/*15-18*/
.service dd h3 span{font-size: 13px; display: block}
.service dd .new2{text-align: left; margin: 0 8%}
.service dd .new2 span{font-size: 17px; font-weight: 700}
.service dd .fuki{margin: 0px 4% 20px ;letter-spacing: normal; background: #e3ffef ; position: relative ;
font-weight: 800 ; text-align: center; padding: 20px 0px  ; font-size:clamp(1.5rem, 1.346rem + 0.77vw, 1.875rem)}/*24-30*/
.service dd .fuki:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e3ffef ;
}
.service dd .fuki img{width: 10%; position: absolute; right: -6%; top: -20px}
.service dd .fuki span{    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    margin-top: -10px;}


.service dd .menucont{border-top: 1px solid #41d799; margin: 0 8%}
.service dd .menucont a{ color:#000 ; padding: 10px 0; display: block ; text-align: left ; border-bottom:  1px solid #41d799; font-weight: 700 ; position: relative ; font-size:clamp(1rem, 0.897rem + 0.51vw, 1.25rem)}/*16-20*/
.service dd .menucont a p{display: inline-block ; vertical-align: middle;}
.service dd .menucont a span{display: block; font-size:clamp(0.75rem, 0.682rem + 0.34vw, 0.938rem) }/*12-15*/

.service dd .menucont img{width: 13px; vertical-align: middle; margin-right: 10px}
.service dd .aper{ margin:0 0 90px}
.service dd .aper a{margin-top: 0 ; padding: 14px 70px 10px}

.servicecont .service:nth-of-type(4) h3{ font-size:clamp(1.5rem, 1.244rem + 1.28vw, 2.125rem)}/*24-34*/
.servicecont .service:nth-of-type(4) h3 span{font-size: 11px; display: inline-block; vertical-align:top}
.servicecont .service:nth-of-type(4) dd .fuki,
.servicecont .service:nth-of-type(5) dd .fuki{margin: 20px 4% 20px; }

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

columBox
--------------------------------------------------------------------*/
.acc .contentc{padding: 80px 0}
.acc .contentc .aper{padding: 0}
.contb{min-height:340px; position:relative; width:100%; overflow:hidden}
.more__content {font-size: 12px ; text-align: left;
  position: relative;
  height: auto;
  max-height: 50px;
  overflow: hidden;
  transition: max-height 1s;
}
.more__content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: 1s;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.more__content.open:after {
  z-index: -1;
  opacity: 0;
}
.more__btn {
  display: block;
  margin: 0 auto;
  padding: 8px 40px;
  border: 0;
  color: #ffffff;
  background-color: #41d799;
  cursor: pointer;
}
.qabg button.en{position: relative;font-weight: bold; font-size: 13px; color: #fff; background:#41d799 ; border: none; padding: 10px 50px 7px; margin: 10px auto 0}




.columBox ul{display: flex; margin: 0 8%; flex-wrap: wrap; justify-content: space-between}
.columBox ul li{width: 47%; margin-bottom: 30px}
.columBox ul .cate{font-size: 11px}
.columBox ul a h3{color: #000; font-size: 13px; line-height: 1.6}
.columBox ul li { transition: 0.3s;}
.columBox ul li:hover{ box-shadow: 2px 2px 8px rgba(0,0,0,.2);}
.columBox .contact{padding-top: 10px}
.columBox .contact a{font-size: 14px}


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

case
--------------------------------------------------------------------*/
.case{padding:60px 20px 0 }
.case .part{ text-align: center}
.case .atte{max-width: 1100px; text-align: right; margin-bottom: 20px; font-size: 13px}

.case .midashi{margin-bottom: 5px; line-height: 1.3;}
.case li{width: 47%; margin-right: 6%; float: left; margin-bottom: 30px; line-height: 1.3em;}
.case li:nth-child(2n){ margin-right: 0}
.case li:nth-child(5) , .case li:last-child{margin-bottom: 0}
.case h3{ background:#41d799; text-align: center; color: #fff; font-size:12px; margin-bottom: 10px;
padding: 8px 5px;letter-spacing: -0.05em;line-height: 1.5; font-weight: bold}
.case .tit{margin-bottom: 10px;font-size: 11px; color: #000}
.case .suvcate{font-size: 10px; padding-bottom: 10px; border-bottom: 1px dashed #41d799; margin-bottom: 10px; color: #000;line-height: 1.3;}
.case .suvcate p{margin-bottom: 3px}
.case .suvcate span{font-size: 10px; color:#13ce75 }
.case .tag{background:#fff; font-size: 10px; padding: 5px; line-height: 1.5; }
.case .contact{top:15px}
.case .contact a{ font-size:14px; top:15px}

.case .aper{padding: 0}

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

.style
--------------------------------------------------------------------*/
.style{border: 1px solid #42d799; padding: 0 20px 20px; margin: 120px 40px 100px; text-align: center}
.style h2{margin-top: -20px; line-height: 1.2 ; margin-bottom: 0}
.style h2 .midashi{font-size: 3rem;}
.style h2 span{ display: inline-block; background: #fff; padding: 0 10px}
.style .img1 img{width:154px; margin-bottom: 20px }
.style li{ background: #e3ffef; font-size: 12px; padding: 10px; text-align: left; margin-bottom: 10px; line-height: 1.8;}
.style li:last-child{margin-bottom: 0}


 
.messBox{ font-size: 1.3rem; padding: 0px 30px; }
.messBox dl{ border-bottom:1px #c6c6c6 dashed; margin-bottom:10px; padding-bottom:10px; font-size:13px}
.messBox dt{ float:left; width:24%}
.messBox dd{ float:right; width:73%}
.messBox dl:last-of-type{ margin-bottom:20px;}
.messBox .aper{padding: 0}
.messBox .aper a{padding: 10px 70px 10px;}


.repflex{position: relative}
.repflex .repr img{ padding:0 0 20px 20% }

.repflex .repl{position: absolute; bottom:-20px; left: 5%;}
.repflex .repl .text01{letter-spacing: normal ; font-size: 10px}
.repflex .repl .text01 span{font-weight: 700 ; font-size:clamp(1rem, 0.821rem + 0.9vw, 1.438rem)}/*16-23*/
.repflex .repl .text01 i{font-size:15px}
.repflex .repl .text02{line-height: 1.2 ; margin: 10px 0 ; font-size:clamp(1.875rem, 1.362rem + 2.56vw, 3.125rem) }/*30-50*/
 
.career{margin:50px 8% 10px}
.career dt ul{margin:20px 0 30px}
.career dt li{ font-size: 11px; list-style: disc; margin-left: 20px; } 

.career dd{font-size: 12px; background:#fff0f0; padding: 20px 8% }
.career dd li{list-style: disc; margin-left: 20px; line-height: 1.2; margin-bottom: 5px } 
.career dd .text02{margin-bottom: 10px;}
.career dd .text03{padding-top: 10px ; font-weight: 800; font-size: 14px}
 
 
.historyBox{padding: 40px 30px 0; position: relative; font-size: 1.3rem; line-height: 1.8; max-width: 500px; margin: 0 auto}
.historyBox .tate{position: absolute; left: 30px; top: 30px; line-height: 1.8;}
.historyBox dd{ margin: 10px 0 20px ; font-size: 13px}

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

.top5

--------------------------------------------------------------------*/ 
.top5{ display: flex; justify-content: space-between; align-items: center; margin: 0 30px }
.top5 dt{width: 35%}
.top5 dd{width: 60%}

.lmes{padding:40px 0 70px; text-align:center; line-height: 2; font-size: 18px}

#profile{padding-top: 40px}


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

partnersBox

--------------------------------------------------------------------*/ 
.partnersBox{border: 1px solid #41d799; padding: 0 20px; margin: 110px 30px 0px; position: relative}
.partnersBox h3{position: absolute; width: 240px; background: #fff; top: -15px; left: 50%;
margin-left: -120px; font-size:1.5em; text-align: center}
.partnersBox ul{padding-top: 30px}
.partnersBox li{text-align: center; padding-bottom: 30px}
.partnersBox .name{font-size: 10px;line-height: 1.8; padding: 8px 0; }
.partnersBox .text01{text-align: left; font-size: 10px;line-height: 1.8;}
.partnersBox a{color: #000; display: block }
.partnersBox a:hover{opacity: 0.5;transition: 1s;}
.partnersBox a:hover img{opacity: 0.5;transition: 1s;}

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

.style .text01{ font-size:16px}
.style .right .text01{ font-size:18px}

.partnersBox .name,.partnersBox .text01{letter-spacing: normal;line-height: 1.5;}


}




@media screen and (max-width: 639px) {
.drawer-brand{    padding: 10px 20px 5px;}
.contentc .text02 span{display: block; margin-top: 15px}


.prof dl{ position:relative}	
.prof .date{ text-align:right; font-size:13px; margin:20px 20px 0; line-height: 1.7}
.prof .date span{ font-size:10px}



.future li .text02{line-height: 1.7;
    padding-bottom: 5px;}

.messtext{letter-spacing: normal}

.partnersBox li{float: left; width: 30%; margin-right:5% }
.partnersBox li:nth-child(3n){ margin-right: 0}

#company {
    padding-top: 100px; /* 調整したい高さ（固定ヘッダーの高さ） */
    margin-top: -100px; /* heightと同じ分のネガティブマージン */
}

.acc{margin-bottom: 60px;}
}



@media screen and (min-width: 640px) {
.kaino{display: none}
body{min-width: 1100px}

/*body{ background:url(../img/top/0.jpg) no-repeat center -80px}*/

	
.slid	{ padding-top:10px; min-width:1100px}
.slid ul{ width:70%; float:right}
.slid .h1t{    width:700px;
    left: 5%; 
    margin: 0;
    position: absolute;
    bottom: 5%;
    top: auto; }
.slid .h1t .te01 span{line-height: 1 ; padding-left: 0 ; padding: 1px 20px 7px 0; margin-bottom: 20px}
.slid .aper a{ padding: 10px 40px 10px 30px;}



.service dl{ margin-bottom: 70px; display: flex; justify-content: space-between; align-items: center; padding-left: 5% ;  flex-direction: row-reverse}
.service dt{width: 50%}
.service dd{width: 45% ; text-align: left}
.service dd .aper{margin-bottom: 0}
.service dd h3{text-align: center; margin-top: 0; font-weight: 600 ; margin-left: 31px}
.service dd .fuki img{top: -30px}
.service dd .fuki{margin: 0px 0 20px 30px; text-align: left; text-align: center}
.servicecont .service:nth-of-type(4) dd .aper{margin-bottom: 0}
.service dd .menucont{margin: 0 0 0 30px}

.servicecont {padding-top: 50px;}
.servicecont .service:nth-of-type(2) dl , .servicecont .service:nth-of-type(4) dl{padding-right: 5%}
.servicecont .service:nth-of-type(2) dd .menucont , .servicecont .service:nth-of-type(4) dd .menucont{margin-left: 0px}
.servicecont .service:nth-of-type(2) dd h3 , .servicecont .service:nth-of-type(4) dd h3{margin-left: 0}
.servicecont .service:nth-of-type(2) dl , .servicecont .service:nth-of-type(4) dl{ display: flex; flex-direction:row}

.columBox ul{width: 1100px; margin: 0 auto; justify-content: flex-start}
.columBox ul li{width:230px; margin-bottom: 0px; margin-right: 60px }
.columBox ul li:last-child{margin-right: 0}
.columBox .contact{margin-top: 60px}
.columBox .contact a {
    font-size: 2.4rem;
}

.mess{ line-height: 2; margin-top: 80px}
.mess .contentc{padding-top: 50px}
.contb { min-height: 380px;}
.jabox .mess .text01{-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;font-family: "Roboto Slab", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
	 font-size:16px; text-align:left; width:60px; position:absolute; top:-20px; left:50%;
	 z-index:99; height:100px; margin-left:-30px}
.mess ul{width: 1010px; margin:20px auto 0; flex-wrap: nowrap;}
.mess li{font-size: 16px; width: 220px; height: 220px; background: url(../img/top/en.png) no-repeat center; background-size: 220px 220px; padding: 0; margin: 0 0 0 -15px;}
.mess li:last-child {margin: 0 0 0 -15px;}
.mess li:nth-child(2n) {margin-left: -15px;}
.mess .contb { min-height: 360px;}



.contentc .text02{ font-size:16px;  width: 650px; margin: 12px auto 60px; line-height: 2.5em; padding-bottom:0; text-align: center;    padding: 20px 0px 30px;}
.contentc .text02 i,.contentc .text02 span{display: block}

.contentc .text03{ text-align:right; font-size:16px;width: 650px; margin:10px auto 20px}
	
.midashi{ font-size:50px; letter-spacing:5px; margin-bottom:50px}	


.style {
    padding: 0 50px 30px;
    margin: 140px auto 100px;
    width: 1100px;
}
.style ul{display: flex; justify-content: space-between; flex-wrap: wrap; align-items:stretch}
.style li{font-size: 14px; width:310px ; margin-bottom: 20px; padding: 20px;}
.style li:last-child { margin-bottom: 20px;}


.case{ padding: 0px 20px 0; margin: 130px 0 150px; }
.case .midashi { margin-bottom: 10px;}
.case ul{width: 1100px; margin: 0 auto}
.case li{width:330px; float: left; margin-right: 55px; margin-bottom: 50px}
.case li:nth-child(2n){ margin-right: 55px !important}
.case li:nth-child(3n){ margin-right: 0px !important}
.case li:nth-child(3),.case li:nth-child(4),.case li:nth-child(6){margin-bottom: 0}
.case h3{ font-size: 13px;padding: 12px 5px; letter-spacing: normal;margin-bottom: 15px;}
.case .suvcate{font-size: 12px;line-height: 1.5;}
.case .suvcate span{font-size: 1.1rem}
.case .tit{font-size: 13px;line-height: 1.8;}
.case .tag{font-size: 11px; padding: 10px; line-height: 1.8;}

.case .contact a {font-size:20px;  padding: 18px 40px 12px; top: 0 }
.case .contact{padding-top: 30px}


.prof .probox{ 
background-image:url("../img/top/mebg.jpg"), url("../img/top/messbg.jpg") ;
background-repeat:  repeat-x , repeat-y; 
background-position: center top, center top;
position: relative}

.prof .probox .dt{ float:left; width:55%}
.prof .probox .messBox{ position:relative; float:right; width:42%; line-height: 1.8 }
.jabox .namebox .text01{-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl; position:absolute; right:0 }

.messBox{background: none; padding: 150px 5% 40px 30px;}

.prof .date{ 
    text-align: right;
    width: 280px;
    font-size: 14px;
    margin-top: 50px;
}

.promidashi .midashi{line-height: 1}
.repflex .repl .text01 i{font-size: 28px}


.repflex{width: 1000px; margin:50px auto 0; display: flex; justify-content: space-between; flex-flow: row-reverse;
background: url("../img/top/be.png") no-repeat left top; background-size:296px ; padding: 0 100px}
.repflex .repr{ width:434px }
.repflex .repl{ width:600px ; bottom: 0; left: 100px; }
.repflex .repl .text01 {top: 10px;  left: 0;font-size: 14px;}
.repflex .repl .text02 {top: 40px; left: 0; font-size: 50px; font-weight: normal; line-height: 1;}
.repflex .repr img { padding: 0;}

.career dl{ margin: 50px auto 10px; width: 800px; display: flex; justify-content: space-between}
.career dt{width: 400px}
.career dd{width: 356px ; padding: 20px}

.historyBox { padding: 40px 0px 0; max-width: 800px;}
.historyBox ul{width: 750px; margin-left: 50px}
.historyBox .tate {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    letter-spacing: 3px;
}

.historyBox li dt{ float: left; width: 270px}
.historyBox li dd{ float: right; width: 440px}

.historyBox li:nth-child(even) dd{ float: left; width: 360px}
.historyBox li:nth-child(even) dt{ float: right; width: 345px}

.historyBox li:nth-child(2) dd{ padding-top: 25px}
.historyBox li:nth-child(3) dl{margin: 30px 0}
.historyBox li:last-child{margin-bottom: 30px}

.top5{margin: 0 auto 80px; width: 530px;}
.top5 dt {width: 116px;}
.top5 dd {width: 384px; font-size: 16px;}

.lmes{ font-size:25px;line-height: 2em;    padding: 80px 0 0px; width:1100px; margin:0 auto}


.acc{margin-bottom: 60px;}

#profile{padding-top: 0}
.partnersBox{width: 1100px; margin: 150px auto 20px; padding:0 50px }
.partnersBox li{width: 212px; margin-right: 50px;    float: left;}
.partnersBox li:nth-child(4n){margin-right: 0}
.partnersBox li:last-child{padding-bottom: 50px}
.partnersBox h3 {width: 400px;
    margin-left: -200px;
    font-size: 40px;
    text-align: center;
    letter-spacing: 5px;
}
.partnersBox ul {
    padding-top: 50px;
}
.partnersBox .name {
    font-size: 13px;}
	.partnersBox .text01{font-size: 12px;}
	



	}