@charset "utf-8";
.alternate {
 font-family: "alternate-gothic-no-3-d", sans-serif;
 letter-spacing: 0;
}


.line {
 font-family: 'LINE Seed Sans JP', sans-serif;
 letter-spacing: 0;
 font-weight: bold;
}


.drawer_menu {
 display: none;
}


body {
 font-size: 16px;
 font-family: "roboto", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
 font-feature-settings: "palt";
 color: #333;
 position: relative;
 letter-spacing: 0;
}

a {
 transition: 0.3s;
 text-decoration: underline;
 font-weight: 600;
}

a:hover {
 opacity: .5;
}



p {
 margin-top: 20px;
 line-height: 1.8;
 letter-spacing: 0;
}


p.ex {
 margin-top: 0;
}

p.ex2 {
 margin-top: 30px;
}

p.ex3 {
 margin-top: 10px;
}


.center {
 text-align: center;
}


img {
 max-width: 100%;
}


.green {
 color: #009155;
}

.blue {
 color: #3455c8;
}

.red {
 color: #ff1a41;
}

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



.fixed-bnr {
 width: 350px;
 position: fixed;
 bottom: 20px;
 left: 0;
 padding: 0px;
 color: white;
 border-radius: 10px;
 opacity: 0;
 /* 初期状態は非表示 */
 transition: opacity 0.3s ease;
 z-index: 9;
}


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


.fixed-btn {
 display: block;
 width: 230px;
 height: 230px;
 position: relative;
 text-decoration: none;
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 9;
}


.fixed-btn .plane {
 position: absolute;
 left: 0;
 right: 0;
 top: 60px;
 margin: auto;
 width: 120px;
 transition: transform 0.3s ease-out;
 /* 変化を滑らかに */
}

.fixed-btn:hover {
 opacity: 1;
}



.fixed-btn:hover .plane {
 transform: scale(1.2);
}


.fixed-btn .title {
 text-align: center;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 35px;
 margin: auto;
 color: #fff;
 font-size: 20px;
}


.fixed-btn .back {
 position: absolute;
 width: 300px;
 top: 0;
 left: 0;
}

.fixed-btn .txt {
 position: absolute;
 width: 228px;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 1;
}











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

header {}


.nav {
 padding: 10px 20px;
 display: flex;
 align-items: center;
 position:relative; z-index:1000;
}


.nav .logo {
 height: 60px;
 margin-right: auto;
}

.nav ul {
 display: flex;
 align-items: center;
}

.nav li {
 margin-left: 50px;
}

.nav li:last-child {
 margin-left: 30px;
}


.nav a {
 text-decoration: none;
 color: black;
}

.nav a:hover {
 opacity: 1;
}



.nav span {
 display: block;
 margin-top: 5px;
 margin-left: 1px;
 font-size: 13px;
 font-weight: 400;
 color: #777;
}

.nav .title {
 font-size: 16px;
}


.icon-external {
 height: 14px;
 padding-bottom: 3px;
 padding-left: 3px;
}



.btn-contact {
 height: 90px;
}


.btn-contact {
 display: block;
 width: 60px;
 height: 60px;
 position: relative;
 text-decoration: none;
 z-index: 9999;
 background: linear-gradient(to right, #fed829, #ffc302);
 border-radius: 30px;
}

.btn-contact:hover .plane {
 transform: scale(1.3);
}


.btn-contact .plane {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 width: 40px;
 transition: transform 0.3s;
}








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

.main-visual {
 background-image: url(/common/upload/files/img/yellow-back-3.jpg);
 background-size: 100%;
 background-position: center;
 position: relative;
 animation: zoom-in 18s ease-out forwards;
 overflow: hidden;
}

@keyframes zoom-in {
 0% {
  background-size: 180%;
 }

 100% {
  background-size: 100%;
 }
}


.big-copy-1 {
 position: absolute;
 left: 0;
 right: 0;
 margin: auto;
}



.big-copy-2 {
 position: absolute;
 bottom: -1px;
}



.big-copy-3 {
 display: none;
}

.big-copy-4 {
 display: none;
}


.big-copy-5 {
 display: none;
}



.main-visual .wrap {
 margin: 0 auto;
 max-width: 1400px;
 position: relative;
}


.main-visual .content {
 height: 750px;
 margin: 0 auto;
 position: relative;
}



.main-visual.under .content {
 height: 150px;
 position: relative;
}



.main-visual.under .tree-under {
 position: absolute;
 height: 150px;
 left: -38%;
 right: 0;
 margin: auto;
}


.main-visual.under img.title-under {
 position: absolute;
 height: 150px;
 left: 0;
 right: 0;
 margin: auto;
}


.main-visual.under img.slogan-under {
 position: absolute;
 height: 130px;
 bottom: 10px;
 left: 0;
 right: -550px;
 margin: auto;
}




.main-visual .tree {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 78%
}

.main-visual .slogan {
 display: block;
 position: absolute;
 width: 28%;
 left: 0;
 top: 32%;
 bottom: 0;
 margin: auto;
 z-index: 2;
}

.main-visual .slogan p {
 font-weight: bold;
 font-size: 22px;
 color: #000;
 line-height: 1.5;
}

.main-visual .slogan .inner {
 position: relative;

}

.main-visual .slogan .fukidashi {
 width: 140px;
 position: absolute;
 top: -30px;
 right: -20px;
 transition: transform 0.3s ease;
 /* 拡大を滑らかに */
}

.main-visual .slogan .fukidashi:hover {
 animation: shake 0.8s ease-in-out infinite, zoom-in 0.5s forwards;
 transform: scale(1.05);
}


.service-list {
 width: 350px;
 height: 260px;
 position: absolute;
 right: 0;
 top: 15%;
 bottom: 0;
 margin: auto;
}








.btn {
 display: inline-block;
 color: #000;
 text-decoration: none;
 font-size: 11px;
 font-weight: 400;
 border: 1px solid #000;
 padding: 3px 10px;
 border-radius: 5px;
}


.btn-wrap {
 display: flex;
 justify-content: center;
 text-align: center;
 margin: 0 auto;
 margin-top: 40px;
}

.btn-wrap .btn:not(:last-child) {
 margin-right: 20px;
}



.btn-basic {
 display: block;
 width: 250px !important;
 text-decoration: none;
 color: #000;
 font-weight: bold;
}

.btn-basic:hover {
 opacity: 1;
}



.btn-basic.ex {
 margin-left: 20px;
}


.btn-basic .inner {
 background: #fed829;
 padding: 20px 35px;
 border-radius: 10px;
 box-shadow: none;
 font-size: 16px;
 transition: 0.3s ease-out;
 text-align: center;
 /* 文字の中央揃え */
}

.btn-basic:hover .inner {
 font-size: 17px;
 /* ホバー時にフォントサイズを拡大 */
}




.btn i {
 padding-left: 5px;
}




.btn-color {
 width: auto;
 margin-bottom: 30px;
 text-decoration: none;
 color: #000;
 display: inline-block;
 font-weight: bold;
}


.btn-color:hover {
 opacity: 1;
}



.btn-color .inner {
 background: #fff;
 padding: 20px 35px;
 border-radius: 10px;
 box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.05);
 font-size: 20px;
}







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

.basic-wrap {
 width: 1100px;
 margin: 0 auto;
 padding: 90px 0;
}


.wide-wrap {
 width: 1400px;
 margin: 0 auto;
 padding: 90px 0;
}

.mid-wrap {
 width: 1200px;
 margin: 0 auto;
 padding: 90px 0;
}




.mid-wrap.ex {
 padding-top: 0;
}



.basic-wrap.ex {
 width: 100%;
 padding: 90px 0;
}

.basic-wrap.ex2 {
 width: 100%;
 padding: 0;
}

.basic-wrap.ex3 {
 margin: 0 auto;
 padding: 90px 0;
 padding-top: 30px;
}


.basic-wrap.ex4 {
 width: 100%;
 padding-top: 30px;
}


.basic-wrap.ex5 {
 padding-top: 0
}




.slim-wrap {
 width: 900px;
 margin: 0 auto;
 padding: 90px 0;
}



.mini-wrap {
 width: 600px;
 margin: 0 auto;
}


.mini-wrap.ex {
 padding-bottom: 90px;
}

.mini-wrap.ex2 {
 padding: 90px 0;
}

.mini-wrap.ex2 {
 width: 750px;
 padding: 90px 0;
}




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

.set-box {
 display: flex;
 align-items: stretch;
 width: 800px;
 margin: 0 auto;
}




.set-box p {
 padding-left: 60px;
 margin-left: 60px;
 border-left: 1px solid #ddd;
}


.service-img {
 width: 800px;
 margin: 0 auto;
 margin-bottom: 70px;
 display: block;
}


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






.title-0 {
 color: #000;
 font-size: 95px;
 font-weight: 500;
}


.title-1 {
 color: #000;
 font-size: 32px;
 font-weight: 600;
 letter-spacing: 0;
 line-height: 1.25;
}


.title-2 {
 color: #000;
 font-size: 18px;
 font-weight: 600;
 letter-spacing: 0;
 line-height: 1.5;
}


.title-3 {
 color: #000;
 font-size: 55px;
 font-weight: 500;
 letter-spacing: 0;
}


.title-3 i {
 display: block;
 font-size: 38px;
 margin-right: 5px;
 padding-bottom: 5px;
}

.title-4 {
 color: #000;
 font-size: 50px;
 font-weight: 600;
 letter-spacing: 0;
}

.title-4 span {
 font-size: 20px;
}




.title-5 {
 color: #000;
 font-size: 45px;
 font-weight: 600;
 letter-spacing: 0;
 margin-top: 30px;
 margin-bottom: 30px;
}

.title-6 {
 color: #000;
 font-size: 38px;
 font-weight: 600;
 letter-spacing: 0;
}


.title-7 {
 color: #000;
 font-size: 22px;
 font-weight: 600;
 letter-spacing: 0;
}





.border {
 height: 1px;
 width: 50px;
 background: #ddd;
 margin: 20px auto;
}



.title-set {
 color: #000;
}


.white {
 color: #fff;
}



.title-set.ex {
 display: flex;
 align-items: center;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 margin-bottom: 0;
}

.title-set.ex2 {
 text-align: center;
 margin-bottom: 45px;
}



.title-set span {
 font-size: 16px;
 display: block;
 margin-left: 10px;
}

.title-set.ex span {
 margin-left: 0;
 margin-top: 10px;
 font-size: 16px;
}


.hojosen {
 width: 1px;
 background: #ddd;
 height: 200px;
 margin-top: 10px;
 margin-left: 3px;
}



.gray {
 background: #f7f7f7;
 border-bottom: 1px solid #eee;
}

.gray-2 {
 background: #fbfbfb;
}


.yellow {
 background: #fddf00;
}



.features .content {
 display: flex;
 justify-content: center;
 align-items: flex-start;
}




.features .padding {
 display: flex;
 padding-left: 50px;
}




.content-box {
 width: 100%;
}


.content-box.ex {
 padding-left: 0px;
 width: 100%;
}


.content-box.ex2 {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.content-box .item {
 display: flex;
 /*align-items: center;*/
 align-items:stretch;
 background: #fff;
 margin-bottom: 45px;
 position: relative;
 border-radius: 30px;
 border: 1px solid #eee;
}


.content-box .sub {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.content-box .item.ex {
 width: 49%;
 margin-bottom: 30px;
}



.content-box .item .tn {
 width: 52%;
 min-height: 350px;
 background-size: cover;
 background-position: 50%;
 border-radius: 30px 0 0 30px;
 background-color: #ddd;
}


.content-box .item.ex .tn {
 min-height: 175px;
}





.content-box .info {
 width: 48%;
 /*height: 350px;*/
 padding: 45px 60px;
 display: flex;
 flex-direction: column;
}


.content-box .info.ex {
 width: 48%;
 min-height: 175px;
 padding: 20px 30px;
 display: flex;
 flex-direction: column;
}


.content-box .info.service {
 height: auto;
}



.content-box .service a {
 text-decoration: none;
}


.content-box .info date {
 font-size: 13px;
 color: #666;
 font-weight: 300;
 margin-bottom: 10px;
}


.content-box .info i {
 margin-right: 5px;
}


.content-box .info p {
 line-height: 1.5;
 font-size: 14px;
}

.content-box .tag-box {
 margin-top: auto;
}





.content-box .info .list {
 border-top: 1px solid #ddd;
 padding-top: 20px;
}




.service-box {
 width: 100%;
 margin-top: 60px;
}


.service-box .item {
 display: flex;
 align-items: center;
 background: #fff;
 margin-bottom: 45px;
 position: relative;
 border-radius: 30px;
 border: 1px solid #eee;
}

.service-box .item:last-child {
 margin-bottom: 0;
}




.service-box .sub {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.service-box .item.ex {
 width: 49%;
 margin-bottom: 0;
}


.service-box .item.ex {
 width: 49%;
 margin-bottom: 30px;
}


.service-box .item .tn {
 width: 52%;
 height: 350px;
 background-size: cover;
 background-position: 50%;
 border-radius: 30px 0 0 30px;
}



.service-box .tn.one {
 background-image: url(../img/akogare-branding.jpg);
}


.service-box .tn.two {
 background-image: url(../img/yoko-dxuna.png);
}


.service-box .tn.three {
 background-image: url(../img/tn-marketing.jpg);
}



.service-box .info {
 width: 48%;
 height: 350px;
 display: flex;
 justify-content: center;
 align-items: center;

}


.service-box .info .inner {
 width: 450px;
 height: auto;
}




.service-box a {
 text-decoration: none;
}


.service-box .info i {
 margin-right: 2px;
}


.service-box .list {
 border-top: 1px solid #ddd;
 padding-top: 20px;
}


.service-box .list .wrap {
 display: flex;
}


.service-box .list a, .service-box .list span{
 display: block;
 margin-right: 10px;
 margin-top: 10px;
 font-weight: 600;
 font-size: 15px;
}


.service-box p {
 font-size: 14px;
 line-height: 1.5;
 color: #888;
}


.service-head {
 width: 700px;
 margin: 0 auto;
}

.service-head img {
 margin-bottom: 60px;
}





.service-detail {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.service-detail.ex {
 flex-direction: row-reverse;
}




.service-detail .box {
 width: 52%;
 background: #fff;
 padding: 50px 60px;
 border-radius: 20px;
}

.service-detail .box.ex {
 background: #f3f3f3;
}


.service-detail .title {
 text-align: center;
 font-size: 27px;
 letter-spacing: 0;
 font-weight: 600;
}

.service-detail .title i {
 margin-right: 5px;
}


.service-detail .overview {
 font-size: 21px;
 font-weight: 600;
 line-height: 1.5;
}


.service-detail .tn {
 height: 200px;
 background: #fafafa;
 margin-top: 30px;
}


.service-detail .tn.ex {
 background: #fff;
}



.service-detail .tn.one {
 background-image: url(../img/tn-branding-1.png);
 background-size: 70%;
 background-repeat: no-repeat;
 background-position: 50%;
}


.service-detail .tn.two {
 background-image: url(../img/tn-2.png);
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: 50%;
}


.service-detail .tn.three {
 background-image: url(../img/tn-3.jpg);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 30%;
}

.service-detail .tn.four {
 background-image: url(../img/tn-4.jpg);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 20%;
}



.service-detail .list {
 font-size: 14px;
}

.service-detail hr {
 color: #ddd;
 margin: 20px auto;
}


.service-detail .fukidashi-box {
 width: calc(48% - 40px);
}

.service-detail .fukidashi {
 background: #fff;
 padding: 20px 30px;
 border-radius: 20px;
 font-weight: 600;
 font-size: 17px;
 position: relative;
 margin-top: 20px;
 text-align: center;
}


.service-detail .fukidashi.ex {
 background: #f3f3f3;
}


.service-detail .fukidashi:nth-child(2n) {
 margin-left: 20px;
}


.service-detail .fukidashi-box .head {
 display: flex;
 align-items: center;
 justify-content: center;
}

.service-detail .fukidashi-box .head img {
 height: 150px;
 margin-left: 30px;
}


.service-detail .fukidashi-box .head img.ex {
 height: 80px;
}


.service-detail .fukidashi .arrow {
 width: 23px;
 position: absolute;
 left: -15px;
 bottom: 5px;
}

.service-detail .fukidashi .arrow.ex {
 width: 23px;
 position: absolute;
 left: inherit;
 right: -20px;
 bottom: 5px;
}



.case-box {
 margin: 0 auto;
 margin-top: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.case-box.ex {
 margin-top: 0;
}


.case-box.ex2 {
 margin-bottom: 60px;
}




.case-box .slash {
 width: 100px;
 margin-right: 50px;
}


.case-box .list {
 margin-left: 50px;
 display: flex;
 justify-content: space-between;
}

.case-box .list a {
 width: 220px;
 margin-right: 20px;
}

.case-box .list a span {
 letter-spacing: 0;
 font-size: 15px;
 display: block;
 margin-top: 5px;
}



.flow-box {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-top: 60px;
}

.flow-box .item {
 width: 31%;
 background: #fff;
 padding: 45px;
 padding-top: 60px;
 position: relative;
 border-radius: 20px;
}

.flow-box.ex .item {
 width: 31%;
 background: #f7f7f7;
 padding: 45px;
 padding-top: 60px;
 position: relative;
 border-radius: 20px;
}


.flow-box .item.ex {
 width: 48.5%;
 margin-bottom: 45px;
}

.flow-box .item.ex2 {
 width: 23%;
 margin-bottom: 45px;
}





.flow-box .title {
 text-align: center;
 font-weight: 600;
 font-size: 24px;
 letter-spacing: 0;
}



.flow-box i {
 color: #ff1a41;
 font-size: 35px;
 position: absolute;
 top: -15px;
 left: 50%;
 transform: translateX(-50%);
}



.schedule-box {
 width: 100%;
 margin: 0 auto;
}



.schedule-box .item {
 margin-top: 45px;
 padding-top: 60px;
 border-top: 1px solid #ddd;
}

.schedule-box .item:last-child {
 padding-bottom: 60px;
 border-bottom: 1px solid #ddd;
}



.schedule-box .head {
 display: flex;
 justify-content: center;
 font-size: 26px;
 font-weight: 600;
}





.schedule-box .head span {
 margin-left: 30px;
}

.schedule-box .head span span {
 font-size: 16px;
 margin-left: 0;
}




.schedule-box p {
 font-size: 15px;
 text-align: center;
 font-weight: bold
}


.total-box {
 border: 1px solid #ddd;
 padding: 45px;
 text-align: center;
 margin-top: 40px;
}

.total-box h3 {
 font-size: 20px;
 font-weight: 600;
}


.total-box .price {
 font-size: 40px;
 font-weight: 600;
}

.total-box .price span {
 font-size: 20px;
 font-weight: 600;
}




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

.vision {
 background:
  radial-gradient(circle at 70% 10%, rgba(255, 215, 0, 1), transparent 50%),
  radial-gradient(circle at 15% 25%, rgba(255, 223, 186, 1), transparent 50%),
  radial-gradient(circle at 40% 60%, rgba(190, 150, 255, 1), transparent 50%),
  radial-gradient(circle at 50% 75%, rgba(186, 215, 255, 1), transparent 50%),
  radial-gradient(circle at 85% 80%, rgba(100, 200, 200, 1), transparent 50%),
  radial-gradient(circle at 20% 50%, rgba(255, 235, 128, 1), transparent 50%),
  radial-gradient(circle at 75% 40%, rgba(186, 255, 201, 1), transparent 50%),
  radial-gradient(circle at 10% 70%, rgba(120, 180, 255, 1), transparent 50%),
  radial-gradient(circle at 30% 90%, rgba(255, 186, 233, 1), transparent 50%),
  radial-gradient(circle at 60% 20%, rgba(255, 200, 150, 1), transparent 50%),
  radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 15% 75%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 1), transparent 30%);
 position: relative;
 overflow: hidden;
 /* 子要素がはみ出さないようにする */
}



.vision.ex {
 position: relative;
 overflow: hidden;
 /* 子要素がはみ出さないようにする */
 background: url('../img/sample-office-3.jpg');
 /* 背景画像のパスを指定 */
 background-size: cover;
}



.vision.ex::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background:
  radial-gradient(circle at 70% 10%, rgba(255, 215, 0, 1), transparent 50%),
  radial-gradient(circle at 15% 25%, rgba(255, 223, 186, 1), transparent 50%),
  radial-gradient(circle at 40% 60%, rgba(190, 150, 255, 1), transparent 50%),
  radial-gradient(circle at 50% 75%, rgba(186, 215, 255, 1), transparent 50%),
  radial-gradient(circle at 85% 80%, rgba(100, 200, 200, 1), transparent 50%),
  radial-gradient(circle at 20% 50%, rgba(255, 235, 128, 1), transparent 50%),
  radial-gradient(circle at 75% 40%, rgba(186, 255, 201, 1), transparent 50%),
  radial-gradient(circle at 10% 70%, rgba(120, 180, 255, 1), transparent 50%),
  radial-gradient(circle at 30% 90%, rgba(255, 186, 233, 1), transparent 50%),
  radial-gradient(circle at 60% 20%, rgba(255, 200, 150, 1), transparent 50%),
  radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 15% 75%, rgba(255, 255, 255, 1), transparent 30%),
  radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 1), transparent 30%);
 background-size: 150% 150%;
 animation: gradientMove 5s infinite alternate ease-in-out;
 mix-blend-mode: overlay;
 /* グラデーションにのみ適用 */
 pointer-events: none;
 /* イベントを通さないようにする */
}

.txt-vison,
.logo {
 position: relative;
 z-index: 1;
 /* グラデーションの上に配置 */
}

@keyframes gradientMove {
 0% {
  background-position: 0% 0%;
 }

 25% {
  background-position: 100% 0%;
 }

 50% {
  background-position: 100% 100%;
 }

 75% {
  background-position: 0% 100%;
 }

 100% {
  background-position: 0% 0%;
 }
}




.vision .wrap {
 width: 1250px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.vision img {
 width: 50%;
}

.vision .info {
 width: 45%;
}





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


.company {
 background: #f7f7f7;
}


.company.ex {
 background: #fff;
}


.company-list {
 width: 1100px;
 margin: 0 auto;
 margin-top: 60px;
 margin-bottom: 30px;
 display: flex;
 justify-content: space-between;
}


.company-list .item {
 width: 31%;
 background: #fff;
 border-radius: 30px;
 border: 1px solid #eee;
}


.company-list .info {
 padding: 30px;
 padding-bottom: 45px;
}

.company-list img {
 border-radius: 30px 30px 0 0;
}


.company-list p {
 font-size: 15px;
 line-height: 1.5;
 margin-bottom: 15px;
}




.map iframe {
 width: 100%;
 filter: grayscale(100%);
}




footer {
 padding: 20px;
}

footer .nav {
 margin-bottom: 20px;
 margin-right: 0px;
 flex-direction: column;
 align-items: flex-start;
}

footer .nav ul {
 margin-top: 20px;
 flex-wrap: wrap;
}



footer .nav li {
 margin-left: 0;
 margin-right: 50px;
}


footer .nav li:last-child {
 margin-left: 0;
 margin-right: 0;
}


.copyright {
 font-size: 13px;
 display: block;
 margin-left: 20px;
}


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


.txt-vison {
 margin-top: 80px;
 margin-bottom: 40px;
}


.txt-vison p {
 margin-top: 30px;
 font-size: 18px;
 text-align: center;
 font-weight: 500;
}




.vision .title {
 font-size: 64px;
 line-height: 1;
 font-weight: 600;
 margin-top: 100px
}


.vision .logo {
 width: 150px;
 display: block;
 margin: 0 auto;
 margin-top: 60px;
}

.purpose-mission {}

.purpose .title {
 font-size: 60px;
 line-height: 1;
 font-weight: 600;
}


.mission {
 margin-top: 100px;
}

.mission .title {
 font-size: 30px;
 line-height: 1;
 font-weight: 600;
}

.mission p {
 margin-top: 30px;
}



.pankuzu {
 padding-top: 20px;
 padding-left: 20px;
 font-size: 15px;
}

.pankuzu a {
 color: #000;
}





.branding-tree {
 background-image: url(/common/upload/files/img/yellow-back-3.jpg);
 background-size: 100%;
 background-position: center;
 position: relative;
 animation: zoom-in 18s ease-out forwards;
 height: 580px;
 position: relative;
 z-index: -2;
}


@keyframes zoom-in {
 0% {
  background-size: 180%;
 }

 100% {
  background-size: 100%;
 }
}

.branding-tree .slogan {
 position: absolute;
 height: 540px;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 opacity: .5;
 z-index: -1;
}


.branding-tree .tree {
 height: 550px;
 margin-top: 30px;
}


.branding-tree .wrap {
 width: 1150px;
 margin: 0 auto;
 display: flex;
 align-items: center;

}


.branding-tree .info {
 width: 550px;
 margin-left: 50px;
}

.branding-tree .info p {
 font-weight: 400;
}

.branding-tree .title {
 font-size: 40px;
 line-height: 1.2;
 font-weight: 600;
}

.branding-tree .sub {
 display: block;
 font-size: 30px;
 line-height: 1.3;
 font-weight: 600;
 color: #ff1a41;
 margin-bottom: 10px;
}


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


.cms {
 width: 750px;
 margin: 0 auto;
 margin-bottom: 60px;
}

.cms img {
 border-radius: 20px;
}


.cms date {
 display: block;
 font-size: 14px;
 margin-bottom: 5px;
 color: #555;
}


.cms date i {
 margin-right: 3px;
}


.cms h1 {
 font-size: 36px;
 font-weight: 600;
 letter-spacing: 0;
 margin-bottom: 5px;
}

.cms h2 {
 font-size: 28px;
 font-weight: 600;
 letter-spacing: 0;
 margin-top: 45px;
}

.cms h3 {
 font-size: 20px;
 font-weight: 600;
 letter-spacing: 0;
 margin-top: 45px;
}

.cms .cont-box {
 width: 650px;
 margin: 0 auto;
 margin-top: 30px;
}


.cms p {
 font-size: 16px;
 margin-top: 30px;
}


.cont-box img {
 margin-top: 30px;
}


.cont-box .caption {
 font-size: 14px;
 display: block;
 margin-top: 5px;
 text-align: right;
 color: #888;
}

.cms b {
 font-weight: bold;
}


.cms .tn {
 margin-top: 30px;
}


.cms .overview {
 border: 1px solid #ddd;
 padding: 30px 40px;
 margin-top: 30px;
 margin-bottom: 120px;
}


.cms .overview .title {
 margin-top: 0;
}

.cms .overview p {
 margin-top: 10px;
}

.cms .item {
 margin-bottom: 120px;
}





.cms .cont-box {
 width: 550px;
 margin: 0 auto;
 margin-top: 30px;
}



.cms .cont-box img {
 margin-top: 30px;
}


.before-after-box {
 width: 100%;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 40px;
 margin-bottom: 40px
}


.before-after-box.ex {
 width: 50%;
}


.before-after-box img {
 max-width: 40%;
 height: auto;
 display: block;
 border-radius: 0;
}

.before-after-box img.ex {
 margin-right: 20px;
}


.before-after-box .arrow {
 width: 20%;
 text-align: center;
}




.before-after-box i {
 font-size: 60px;
}












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




.company-box {
 width: 800px;
 margin: 0 auto;
 table-layout: fixed;
 word-break: break-all;
 word-wrap: break-all;
 border-collapse: separate;
 border-spacing: 20px 0px;
 padding-bottom: 60px;
 line-height: 1.5;
}



.company-box th {
 border-bottom: solid 1px #313131;
 width: 30%;
 vertical-align: middle;
 text-align: center;
}

.company-box td {
 border-bottom: solid 1px #EAEAEA;
 padding: 40px 60px;
 vertical-align: middle;
}

.company-box td.ex {
 padding: 20px 30px;
 text-align: center;
}

.company-box td.ex2 {
 padding: 20px 0px;
}

.company-box td p {
 margin-bottom: 20px;
}











#wcfront_body form {
 width: 850px;
 margin: 0 auto;
 font-size: 16px;
 padding-bottom: 60px;
}

#wcfront_body form label {
 width: 100%;
 background: #ffe505;
 border: 1px solid #ffe505;
 text-align: center;
 height: 80px;
 font-weight: 500;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 45%;
 font-weight: 600;
 border-radius: 10px 0 0 10px;
}

#wcfront_body form .item {
 display: flex;
 align-items: center;
 margin: 0 auto;
 margin-bottom: 30px;
}

.item.message,
.item.radio {
 align-items: flex-start;
 height: auto;
}


#wcfront_body form input {
 width: 55%;
 line-height: 80px;
 background: #fff;
 padding: 0 20px;
 border-radius: 0 10px 10px 0;
}

#wcfront_body form textarea {
 width: 55%;
 height: 200px;
 padding: 10px;
 font-size: 15px;
 background: #fff;
 border-radius: 0 10px 10px 0;
}



#wcfront_body ::placeholder {
 font-size: 15px;
 color: #bbb;
}


.radio .inner {
 width: 55%;
 display: flex;
 flex-direction: column;
 padding: 30px;
 font-weight: 500;
 background: #fff;
 border-radius: 0 10px 10px 0;
}

.radio .inner {
 height: 240px;
}

.radio .inner.ex {
 height: 145px;
}

.radio span {
 margin-left: 5px;
}


.radio .inner.ex {
 flex-direction: row;
 flex-wrap: wrap;
}

.radio .inner div {
 display: flex;
 line-height: 2;
 align-items: center;
}


.radio .inner.ex div {
 margin-right: 20px;
}

.radio.label {
 height: 240px;
}

.radio.ex.label {
 height: 145px;
}



.message.label {
 height: 200px;
}



.check {
 width: 20px;
 margin-bottom: 3px;
}




.label-btn {
 display: block;
 width: 40px;
 height: 20px;
 line-height: 20px;
 background: #F95F00;
 color: #fff;
 font-size: 12px;
 border-radius: 3px;
 margin-left: 10px;
}

.label-btn.ex {
 background: #eee;
 color: #999;
}



#wcfront_body form button {
 text-align: center;
 display: block;
 margin: 0 auto;
 background: #ffe505;
 width: 300px;
 height: 60px;
 font-weight: 600;
 border-radius: 50px;
 cursor: pointer;
 border: 0px;
 margin-top: 50px;
 font-size: 18px;
}



.service-index {
 height: 600px;
 display: flex;
 align-items: center;
}

.service-index.ex {
 height: 250px;
}


.service-index a:hover {
 opacity: 1;
}




.bnr-wrap {
 margin: 0 auto;
 z-index: 1;
}


.bnr-wrap p {
 color: #fff;
}


.bnr-wrap .inner {
 width: 1300px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 margin-top: 60px;
 margin-bottom: 60px;
 z-index: 1;
}


.bnr-wrap .inner a {
 width: 32%;
}




.service-cont {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 60px auto;
 margin-bottom: 0;
}

.service-cont img {
 width: 480px;
}


.service-cont .info {
 width: 550px;
}



img.shaze {
 width: 300px;
}



#wcfront_body .box {
 width: 600px;
 margin: 0 auto;
 margin-top: 60px;
}

.greeting-box {
 width: 850px;
 display: flex;
 margin: 0 auto;
 margin-top: 90px;
 justify-content: space-between;
}


.greeting-box .info {
 width: 70%;
}

.greeting-box .info p:last-child {
 line-height: 1.2;
}


.greeting-box .img {
 width: 25%;
}


.client-list {
 display: flex;
 justify-content: space-between;
}

.client-list .item {
 width: 31%;
 font-size: 15px;
}


.client-list p {
 margin-top: 0;
 letter-spacing: 0;
}




.history-box {
 width: 650px;
 margin: 0 auto;
 border-collapse: collapse;
}

.history-box td {
 padding: 20px 10px;
 border-bottom: 1px solid #ddd;
}

.history-box td:first-child {
 width: 150px;
 /* 年代の幅を狭く */
 padding-right: 60px;
 white-space: nowrap;
 font-weight: bold;
 text-align: left;
}


.licence-box {
 margin: 0 auto;
 margin-top: 90px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.licence-box .item {
 width: 48%;
 display: flex;
 justify-content: space-between;
 background: #fff;
 padding: 40px 50px;
 border-radius: 20px;
 margin-bottom: 45px;

}


.licence-box .info {
 width: 60%;
}


.licence-box .img {
 width: 30%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.licence-box .img img {
 max-height: 80%;
}


.licence-box span {
 display: block;
 font-size: 13px;
 margin-top: 5px;
 color: #000;
}


.licence-box p {
 line-height: 1.5;
 color: #666;
 font-size: 15px;
}



.feature-box {
 display: flex;
 justify-content: space-between;
}


.feature-box .item {
 width: 22%;
}

.feature-box .tn {
 width: 200px;
 height: 200px;
 margin: 0 auto;
 background: #fff;
 border-radius: 20px;
 margin-bottom: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.feature-box .tn img {

 max-height: 150px;

}




.feature-cont {
 margin-bottom: 120px;
}

.feature-cont:last-child {
 margin-bottom: 0;
}




.feature-cont .item {
 width: 1000px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
}


.feature-cont .item.ex {
 flex-direction: row-reverse;
}




.feature-cont .tn {
 width: 400px;
 height: 250px;
}

.feature-cont .tn.one {
 background-image: url(../img/feature-7.jpg);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: 50%;
}


.feature-cont .tn.two {
 background-image: url(../img/feature-6.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: 50%;
}


.feature-cont .tn.three {
 background-image: url(../img/feature-8.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: 50%;
}


.feature-cont .tn.four {
 background-image: url(../img/feature-9.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: 50%;
}




.feature-cont .info {
 width: calc(100% - 460px);
}



img.table {
 margin-top: 60px;
}


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


.voice-box {
 display: flex;
 align-items: flex-end;
 margin-top: 80px;
}

.voice-box.ex {
 flex-direction: row-reverse;
}



.voice-box:last-child {
 margin-bottom: 0;
}


.voice-box .fukidashi {
 width: 600px;
 background: #fff;
 border-radius: 20px;
 padding: 30px;
 position: relative;
}

.voice-box .fukidashi .arrow {
 width: 40px;
 position: absolute;
 right: -30px;
 bottom: 75px;
}

.voice-box.ex .fukidashi .arrow {
 position: absolute;
 left: -30px;
 bottom: 75px;
}


.voice-box .icon {
 width: 160px;
 margin-left: 50px;

}

.voice-box.ex .icon {
 margin-left: 0;
 margin-right: 50px;

}


table.comparison {
 width: 100%;
 margin-top: 60px;
 border-collapse: collapse;
 font-family: sans-serif;
 table-layout: fixed;
}

table.comparison th,
table.comparison td {
 border: 1px solid #ccc;
 text-align: center;
 vertical-align: middle;
 padding: 12px 16px;
 font-weight: bold
}


table.comparison th {
 font-size: 15px;
}

/* ヘッダー色設定 */
table.comparison th.it {
 background-color: #29a9e1;
 color: #fff;
}

table.comparison th.yokozuna {
 background-color: #e4c762;
 color: #000;
}

/* 左上の空セル */
table.comparison th.empty-cell {
 background: none;
 border: none;
 color: transparent;
 padding: 0;
 width: 15%;
}

/* 一列目：狭めだけど読める範囲で最小幅 */
table.comparison td.label {
 font-weight: bold;
 background-color: #ddd;
 color: #000;
 width: 40%;
 word-break: break-word;
}

/* 2列目・3列目を広く（残りを均等配分） */
table.comparison th.it,
table.comparison th.yokozuna,
table.comparison td:not(.label) {
 width: 30%;
}



/* 2列目・3列目のデータ行背景を白に統一 */
table.comparison tbody td:not(.label) {
 background-color: #fff;
}












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



.teaser {
 height: 100vh;
 background: #fffbec;
 background-image: url(../img/teaser-back.jpg);
 background-size: cover;
 background-position: 50%;
 position: relative;

}


.teaser .inner {
 width: 1000px;
 height: 600px;
 position: absolute;
 right: 0;
 left: 0;
 top: 0;
 bottom: 0;
 margin: auto
}


.teaser .logo {
 display: block;
 margin: 0 auto;
 width: 100px;
}

.teaser .link {
 display: block;
 text-align: center;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 font-weight: 300;
 text-decoration: underline;
}










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

body#loading {
 height: 100vh;
 /* メインの黄色 */
}



.loading .logo {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 width: 450px;
}



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

.anm-text span {
 opacity: 0;
 display: inline-block;
}


body:not(.plx_off) .anm-fade_up,
body:not(.plx_off) .anm-fade_left,
body:not(.plx_off) .anm-fade_right,
body:not(.plx_off) .anm-fade_down,
body:not(.plx_off) .anm-fade_here {
 opacity: 0;
}

body:not(.plx_off) .animated {
 opacity: 1;
}

body:not(.plx_off) .anm-fade_up {
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

body:not(.plx_off) .anm-fade_left {
 transform: translateX(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

body:not(.plx_off) .anm-fade_right {
 transform: translateX(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

body:not(.plx_off) .anm-fade_down {
 transform: translateY(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

body:not(.plx_off) .anm-fade_here {
 transform: translate(0);
 transition: opacity 0.8s ease, transform 0.8s ease;
}


body:not(.plx_off) .animated.anm-fade_up,
body:not(.plx_off) .animated.anm-fade_left,
body:not(.plx_off) .animated.anm-fade_right,
body:not(.plx_off) .animated.anm-fade_down,
body:not(.plx_off) .anm-fade_here {
 transform: translateY(0);

}

body:not(.plx_off) .animated.anm-fade_left {
 transform: translateX(0);
}

body:not(.plx_off) .animated.anm-fade_right {
 transform: translateX(0);
}

body:not(.plx_off) .animated.anm-fade_down {
 transform: translateY(0);
}







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



.under-line {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line.ex {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line::after {
 position: absolute;
 bottom: -9px;
 left: 0;
 content: '';
 width: 100%;
 height: 2px;
 background: #000;
 transform: scale(0, 1);
 transform-origin: center top;
 transition: transform .2s;
}

.under-line.ex::after {
 background: #000;
}

.under-line:hover::after {
 transform: scale(1, 1);
}




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


#pageTop {
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 9999;
}

#pageTop a {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 padding: 0;
 width: 50px;
 height: 50px;
 background: #ffe505;
 color: #000;
 text-decoration: none;
 text-align: center;
 border-radius: 30px;
}

#pageTop i {
 font-size: 18px;
 font-weight: bold;
 margin-left: 3px;
}

#pageTop a:hover {
 text-decoration: none;
 opacity: 0.7;
}


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




/* 基本のスタイル */
.action-1 {
 position: relative;
 overflow: hidden;
 padding: 10px 20px;
 color: #000;
 /* 通常時の文字色 */
 border: 2px solid transparent;
 /* 初期の背景色 */
 font-size: 16px;
 cursor: pointer;
 transition: color 0.4s ease, background-color 0s;
 /* 文字色の変化と背景色の変化の設定 */
 z-index: 1;
 /* 文字を前面に */
}

.action-1::before {
 content: '';
 position: absolute;
 top: 0;
 left: 100%;
 /* 初期位置は右端 */
 width: 100%;
 height: 100%;
 background-color: #ff1a41;
 /* ホバー時の背景色 */
 transition: left 0.4s ease;
 /* 背景のアニメーション */
 z-index: -1;
 /* 背景を文字の後ろに配置 */
}

.action-1.blue::before {
 background-color: #3455c8;
}

.action-1.green::before {
 background-color: #009155;
}


.action-1.white::before {
 background-color: #fff;
}



.action-1:hover {
 color: #fff;
 /* ホバー時の文字色 */
}

.action-1.white:hover {
 color: #000;
 /* ホバー時の文字色 */
}



.action-1:hover::before {
 left: 0;
 /* 背景色が左から右へ */
}

.action-1:not(:hover)::before {
 left: -100%;
 /* マウスが外れると右から左へ */
}




.swiper {
 width: 100%;
 position: relative;
 overflow: hidden;
 margin-top: 60px;
}

.swiper.ex2 {
 margin-bottom: 60px;
}


.swiper-wrapper {
 transition-timing-function: linear;
}

.swiper-slide {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-right: 0;

}

.swiper-slide img {
 display: block;
 height: 50px;
 width: 100%;
 /* 高さを自動調整 */
 object-fit: contain;
 /* 縦横比を維持しながら、コンテナに合わせる */
}

.swiper-slide.ex img {
 height: auto;
 /* 高さを自動調整 */
 max-height: 135px;
 border: 1px solid #eee;
 width: auto;
 /* 幅も自動調整 */
 max-width: 100%;
 /* 最大幅をスライド内に収める */
 object-fit: contain;
 /* 縦横比を維持 */

}




@font-face {
 font-family: 'LINESeed';
 src: url('/common/upload/files/font/LINESeedJP_OTF_Rg.woff') format('woff');
 font-weight: 400;
 font-display:swap;
}

@font-face {
 font-family: 'LINESeed';
 src: url('/common/upload/files/font/LINESeedJP_OTF_Bd.woff') format('woff');
 font-weight: 700;
 font-display:swap;
}

@font-face {
 font-family: 'LINESeed';
 src: url('/common/upload/files/font/LINESeedJP_OTF_Eb.woff') format('woff');
 font-weight: 800;
 font-display:swap;
}

@font-face {
 font-family: 'LINESeed';
 src: url('/common/upload/files/font/LINESeedJP_OTF_Th.woff') format('woff');
 font-weight: 300;
 font-display:swap;
}

.line {
 font-family: 'LINESeed', sans-serif;
}

.line.bold {
 font-weight: 700;
}

.line.extra-bold {
 font-weight: 800;
}

.line.thin {
 font-weight: 300;
}





body .sp {
 display: none;
}

body .tab {
 display: none;
}

body .pc {
 display: block;
}