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

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: "EB Garamond", serif;}
.mincho {font-family: 'Noto Serif JP', serif;}
.smincho {font-family: "Shippori Mincho", serif;}

.bgWH {background-color: #FFF;}
.bgGR {background-color: #4A8308;}
.txtWH {color: #FFF;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

main {min-height: 2000px;}
#header {position: relative; width: 100%; padding: 0 40px;}
#header h1 {padding: 10px;}
.logo {width: 260px;}
#header .logo a {padding: 20px 0px; background: #FFF; display: block;}
.menu:hover > a {background: #E1F4C4;}
.child_menu > li > a:hover {background: #FFF;}
.child_menu {width: 100%; left: 0; color: #222; background: #E1F4C4;}
.menu:hover .child_menu {visibility: visible;}
.child_menu a:hover {color: #222; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
#hanburger {display: none;}
.menu_button {width: 55px; height: 55px; position: fixed; top: 0; right: 0; background: #25B19E; z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 34px; transform: rotate(45deg); top: 27px; right: 11px;}
#hanburger:checked ~ .span3 {width: 34px; transform: rotate(-45deg); top: 27px; right: 11px;}
.global_menu {visibility: hidden; width: 66%; height: 100%; position: fixed; top: 0; left: 0; color: #222; overflow-y: scroll; text-align: center; background: #FFF; display: flex; align-items: flex-end;}
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 22px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.global_menu a:hover {background: #B9E278;}
.menu { font-size: 16px; font-weight: 700; line-height: 40px; font-weight: bold; white-space: nowrap; display: inline-block;}
.menu .pd {display: none;}
.menu:last-child {margin-right: 0px;}
.child_menu > li > a {padding: 10px 20px; text-align: left;}
#hanburger,.spOnly {display: none;}
@media screen and (min-width: 896px) {
  .menu_button {display: none;}
  .global_menu {position: inherit; padding: 0; color: #fff; visibility: visible; overflow-y: visible; height: auto; width: auto;}
  .menu:hover > a {background: #B9E278;}
  .child_menu {width: 100%; position: absolute; top: 0; left: 0; padding: 10px; color: #222; background: #B9E278; visibility: hidden; opacity: 0; transition: .5s top, .5s opacity; z-index: 10;}
  .menu:hover .child_menu {visibility: visible; top: 109px; opacity: 1;}
  .child_menu > li {display: inline-block;}
  .child_menu > li > ul > li a {padding: 10px; position: relative; padding: 10px;}
}
@media screen and (max-width: 896px) {
  #header{padding: 10px 15px;}
  #header .spOnly {display: block;}
  span.span1,span.span2,span.span3 {width: 29px; height: 1px; background-color: #FFF; position: absolute; right: 13px; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 17px;}
  .span2 {top: 27px;}
  .span3 {top: 37px;}
  .menu {display: block;}
  .menu > a {padding: 10px 15px; text-align: left; border-bottom: 1px solid #CCC;}
  .menu > a span {margin-right: 10px; width: 30px!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10;}
  .global_menu a {border-top-left-radius: 0; border-top-right-radius: 0;}
  .child_menu > li > a,.child_menu > li > ul > li a {padding: 10px 15px; color: #222; text-align: left; border-bottom: 1px dotted #999;}
  .child_menu > li > ul > li a {padding: 15px 20px 15px 35px; position: relative;}
  .child_menu > li > ul > li:last-child a {border-bottom: 1px solid #CCC;}
  .child_menu > li > ul > li a::before {border-top: solid 1px #222; content: ''; left: 20px; position: absolute; top: 50%; width: 10px;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; background: rgba(255,255,255,.8); /*position: fixed;*/ top: 0; z-index: 5; width: 100%;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  #hanburger:checked ~ * .child_menu {max-height: 0; overflow-y: hidden; visibility: hidden; text-align: left;}
  .menu .child_menu {border-top: 1px solid #DDD; position: relative; opacity: 1; top: 0; margin-left: auto; left: auto; width: auto;}
  .child_menu li {display: block;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important;}
  #header .logo a{padding: 0;}
  #header .logo{width: 200px;}
  /*
  .angletoggle:before {content: "\f107";}
  #nav input[type="checkbox"]:checked ~ * .angletoggle:before {content: "\f106";}
  */
}

footer {padding: 0 0; background: linear-gradient(90deg,#679734 0%, #344C1A 100%); color: #fff;}
footer #fnavi ul {letter-spacing: -.4em; margin: 0 0 5px;}
footer #fnavi ul > li {margin: 0 20px 10px; letter-spacing: normal; display: inline-block; position:relative;}
footer #fnavi ul > li a:hover {text-decoration: underline;}
footer #fnavi ul > li::after {content: ""; display: inline-block; width: 1px; height: 20px; background-color: #999999; position: absolute; top: 0; right: -20px;}
footer #fnavi ul > li:first-child {margin: 0 20px 10px 0;}
footer #fnavi ul > li:last-child {margin: 0 0 10px 20px;}
footer #fnavi ul > li:last-child::after {background-color: #FFF; width: 0; right: 0;}

footer ul{display: flex; gap: 0 40px;}
footer ul li a{color: #fff;}
.footCopy {text-align: right;}
.footCopy small {font-size: 14px;}
#ftNavi {display: none;}
@media screen and (max-width: 950px) {
  footer .logo {width: 300px;}
}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 50px; }
  footer #fnavi {width: 100%;}
  footer ul{gap: 0 20px;}
  footer .logo {width: 100%;}
	#ftNavi {display: block; background: #4A8308; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 50%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #5CA20B; border-right: 1px solid #3C6C04;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}
@media screen and (max-width: 530px) {
  footer #fnavi ul > li,footer #fnavi ul > li:last-child {margin: 0 10px 10px 10px;}
  footer #fnavi ul > li:first-child {margin: 0 0 10px 0; display: block;}
  footer #fnavi ul > li::after {right: -10px;}
  footer #fnavi ul > li:first-child::after {background-color: #FFF; width: 0; right: 0;}
}

.w1300 {width: 100%; max-width: 1332px; padding-left: 0; padding-right: 0;}
.w1500 {width: 100%; max-width: 1520px; padding-left: 0; padding-right: 0;}
.container {width: 100%; max-width: 1212px; padding-left: 0; padding-right: 0;}
.containers {width: calc(100% - 40px); max-width: 888px; padding-left: 0; padding-right: 0;}
.mlr,.container,.containers {margin-left: auto; margin-right: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.w300 {max-width: 300px; width: 100%;}
.w100 {width: 100%;}
.w50 {width: 50%;}
.w46 {width: calc(46% - 50px);}
.w54 {width: calc(54% - 50px);}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .mlr5 {margin-left: 0; margin-right: 0;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
  .w46 {width: calc(46% - 30px);}
  .w54 {width: calc(54% - 30px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  .box4 {width: calc(50% - 7.5px); margin-left: 0; margin-right: 0;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFF;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; line-height: 1.7; text-align: center; border: 1px solid #CCCCCC;}
table.tblGR th {width: 25%; background: #4A8308; color: #FFF;}
table.tblGR2 th {width: 280px; background: #4A8308; color: #FFF;}
table.tblGR2 td {text-align: left; width: calc(100% - 250px);}
@media screen and (max-width: 568px) {
  table.tblGR th,table.tblGR td {padding: 10px 5px;}
  table.tblGR2 th,table.tblGR2 td {width: 100%; display: block;}
  table.tblGR2 td {border-top: none;}
}


#top01 .mainVisual{position: relative; width: 100%; display: flex; justify-content: flex-end;}
#top01 .mainVisual .img{width: calc(100% - 254px); z-index: 0; }
/* #top01 .mainVisual .img{object-fit: contain; height: 100%;} */
#top01 .mainVisual .text{position: absolute; z-index: 1; top: 50%; left: 100px; transform: translateY(-120px);}
#top01 .mainVisual .text .bgWH{letter-spacing: 2px;}
#top01 .mainVisual .text .bgGrad{background: linear-gradient(90deg,rgba(103, 151, 52, 1) 0%, rgba(52, 76, 26, 1) 100%); width: fit-content;}
#top02 .business_img .img{max-width: 600px; width: 50%;}
#top02 #businessSlider{min-height: max-content;}
#top02 .businessSlider_unit{padding-left: 20px; padding-right: 20px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#top02 .businessSlider_unit .inner{position: relative;}
#top02 .businessSlider_unit .inner::before{position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 60%; background: linear-gradient(0deg,rgba(256, 256, 256, 1) 0%,rgba(256, 256, 256, .66) 50%, rgba(256, 256, 256, 0) 100%);}
#top02 .businessSlider_unit.--casting .inner{background-image: url(../img/top/02-04.webp); color: white;}
#top02 .businessSlider_unit.--insurance .inner{background-image: url(../img/top/02-05.webp);}
#top02 .businessSlider_unit.--estate .inner{background-image: url(../img/top/02-02.webp);}
#top02 .businessSlider_unit.--consulting .inner{background-image: url(../img/top/02-06.webp);}
#top02 .businessSlider_unit.--animation .inner{background-image: url(../img/top/02-03.webp); color: white;}
#top02 .businessSlider_unit .wrap{padding: 40px; aspect-ratio: 1/1;}
#top02 .businessSlider_unit .inner{aspect-ratio: 1/1; position: relative; padding: 40px 30px 20px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#top02 .businessSlider_unit .txt50.EN{position: absolute;top: 0; transform: translateY(-50%); left: -20px;}
#top02 .businessSlider_unit .textWrap{height: -webkit-fill-available; position: relative;}
#top02 .businessSlider_unit .textWrap .txt16.txt400{position: absolute; bottom: 0; color: #222;}
#top02 .slick-prev, #top02 .slick-next{width: 60px; height: 60px; z-index: 1;}
#top02 .slick-next{right: 0;}
#top02 .slick-prev{left: 0;}
#top02 .slick-next:before,#top02 .slick-prev:before{content: ""!important; display: block; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 1; z-index: 999;}
#top02 .slick-next:before{background-image: url(../img/cmn/icon_sliderArrow_right.svg);}
#top02 .slick-prev:before{background-image: url(../img/cmn/icon_sliderArrow_left.svg);}
.slick-slide {transition: padding-top 0.3s ease-in-out;}

#top03{background-image: url(../img/top/03-01.webp); position: relative; z-index: 0; background-position: center right; background-size: cover;}
/* #top03{background: linear-gradient(0deg,#679734 0%, #344C1A 100%); position: relative; z-index: 0;} */
/* #top03::before{content: ""; background-image: url(../img/top/03-01.webp); background-position: top right; background-size: cover; height: 100%; width: 40%; position: absolute; right: 0; top: 0; z-index: -1; background-repeat: no-repeat;} */
#top03 .txt30.txt700.txtWH{position: relative;}
#top03 .txt30.txt700.txtWH::before{position: absolute; content: ""; background-color: white; height: 4px; width: 100px; bottom: 0; left: 0; border-radius: 2px;}
#top03 .squirrelList li{padding-left: 30px; position: relative;}
#top03 .squirrelList li::before{position: absolute; background-image: url(../img/cmn/icon_squirrelList.svg); width: 20px; height: 24px; content: ""; left: 0; top: 4px; background-size: contain;}


#top04 h2{position: relative;}
#top04 h2::before{position: absolute; content: ""; height: 4px; width: 100px; background-color: #679734; border-radius: 2px; bottom: 0; left: 0;}
#top04 .overviewTable{position: relative;}
#top04 .overviewTable .unit{font-size: 18px; display: flex;}
#top04 .overviewTable .title{width: 220px; padding-bottom: 20px; border-bottom: 1px solid #679734;}
#top04 .overviewTable .text{width: calc(100% - 220px); padding-bottom: 20px; border-bottom: 1px solid #999999; line-height: 1.5;}
#top04 .col2.img img{object-fit: cover; height: 100%;}


@media screen and (min-width: 1301px) {
  #top01 .mainVisual .img{height: calc(100vh - 120px);}
  #top01 .mainVisual .img img{max-height: calc(100vh - 150px); height: auto; width: 100%; max-width: 100%; object-fit: contain; object-position: right bottom; display: block;}

}
@media screen and (max-width: 1300px) {
  #top02 .businessSlider_unit .txt50.EN{font-size: 40px;}
  #top02 .businessSlider_unit .wrap{padding: 30px;}
  #top02 .businessSlider_unit .inner{padding: 30px 15px 10px;}
  #top02 .businessSlider_unit .txt30.txt700{font-size: 20px;}
}
@media screen and (max-width: 1024px) {
  #top02 .businessSlider_unit .txt50.EN{font-size: 30px;}
  #top02 .businessSlider_unit .wrap{padding: 30px;}
  #top02 .businessSlider_unit .inner{padding: 30px 15px 10px;}
  #top02 .businessSlider_unit .txt30.txt700{font-size: 20px;}
  #top02 .business_img{margin-bottom: 40px;}
}


@media screen and (max-width: 896px) {
  #top03 .squirrelList li{padding-left: 24px;}
  #top03 .squirrelList li::before{width: 15px; height: 18px;}
  #top04 .overviewTable .title{width: 160px;}
  #top04 .overviewTable .text{width: calc(100% - 160px);}
  #top04 .col2.img {display: none;}
  #top04 .col4 {width: calc(100% - 30px);}

}
@media screen and (max-width: 568px) {
  #top01 .mainVisual .text{transform: translateY(-62%); left: 20px;}
  #top01 .mainVisual .img{width: calc(100% - 80px);}
  #top02 .business_img .img{width: 70%;}
  #top02 .businessSlider_unit{padding-left: 10px; padding-right: 10px;}
  #top02 .slick-prev, #top02 .slick-next{width: 30px; height: 30px;}
  #top02 .slick-next:before,#top02 .slick-prev:before{width: 30px; height: 30px;}
  #top04 .overviewTable .unit{font-size: 16px;}
}


/* アニメーション
.text-reveal {display: inline-block; overflow: hidden; position: relative;}
.text-reveal::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; transform: translateX(-100%); animation: reveal 1.5s ease-out forwards;}
.text-reveal.delay-1 {animation-delay: 0.3s;}
.text-reveal.delay-2 {animation-delay: 0.6s;}
.text-reveal.delay-3 {animation-delay: 0.9s;}
@keyframes reveal {
  0% {    transform: translateX(-100%); }
  100% {    transform: translateX(100%); }
}

.char-reveal {display: inline-block; opacity: 0; animation: fadeInChar 0.1s ease-out forwards;}
@keyframes fadeInChar {
  to {    opacity: 1; }
}
 */