@charset "utf-8";
/*
theme Name: UA_2025
Author: YUKIE MIYAUCHI
Description: original theme
version： 1.0.0
*/

/* reset */
a, img, div, p, ul, li, video {
    list-style: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    vertical-align: top;
    outline: none;
    border: none;
	box-sizing: border-box;
	-webkit-appearance:none;
}
/* base */
.txt-left {
	text-align: justify;
}
.txt-center {
    text-align: center;
}
.txt-right {
	text-align: right;
}
.font-bold {
	font-weight: 700;
	font-style: normal;
}
.font-black {
	font-weight: 900;
	font-style: normal;
}
.size10 {font-size: 10px;}
.size12 {font-size: 12px;}
.size14 {font-size: 14px;}
.size18 {font-size: 18px;}
.size21 {font-size: 21px;}
.size24 {font-size: 24px;}
.size32 {font-size: 32px;}
.size36 {font-size: 36px;}
.size40 {font-size: 40px;}
.size48 {font-size: 48px;}
.size60 {font-size: 60px;}
.size72 {font-size: 72px;}
.size96 {font-size: 96px;}
@media(min-width: 768px) {
	.sp-item {
		display: none;
	}
	.pc-item {
		display: block;
	}
}
@media(max-width: 1200px) {
	.size10 {font-size: 8px;}
.size12 {font-size: 10px;}
.size14 {font-size: 12px;}
.size18 {font-size: 16px;}
.size21 {font-size: 18px;}
.size24 {font-size: 21px;}
.size32 {font-size: 28px;}
.size36 {font-size: 32px;}
.size40 {font-size: 36px;}
.size48 {font-size: 42px;}
.size60 {font-size: 52px;}
.size72 {font-size: 62px;}
.size96 {font-size: 84px;}
}
@media(max-width: 767px) {
	.pc-item {
		display: none;
	}
	.sp-item {
		display: block;
	}
body, .size16 {font-size: 3.2vw;}
.size10 {font-size: 2.6vw;}
.size12 {font-size: 2.8vw;}
.size14 {font-size: 3.0vw;}
.size18 {font-size: 3.4vw;}
.size21 {font-size: 3.6vw;}
.size24 {font-size: 3.8vw;}
.size32 {font-size: 4vw;}
.size36 {font-size: 6vw;}
.size40 {font-size: 5vw;}
.size48 {font-size: 6vw;}
.size60 {font-size: 7vw;}
.size72 {font-size: 8vw;}
.size96 {font-size: 9vw;}
}
.tx-white { color: #fff; }
.tx-black { color: #000; }
.tx-pink {color: #F2AFFF;}
.bg-white {background-color: #fff}
.bg-gray {background-color: #EEEEEE}
.bg-harf {color: rgba(255,255,255,.3)}

section {
	box-sizing: border-box;
	overflow-x: clip;
}
.grid-box {
	display: grid;
    display: -webkit-grid;
		align-items: center;
    -webkit-align-items: center;
}
.full-box {
	width: 100%;
    height: 100vh;
}
.flex-box {
	display: flex;
	display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.rel-box { position: relative; }
.abs-box { position: absolute; }
.box-1200 { width: 1200px; max-width: 90%; margin: auto!important; }
.box-750 { width: 750px; max-width: 90%; margin: auto!important; }
.box-360 { width: 360px; max-width: 90%; margin: auto!important; }
.title-area {
	letter-spacing: 0.1em
}
.line-top {
    border-top: solid 1px;
	margin-top: 8em !important;
}
.header-scroll {
    border-bottom: solid 1px #eee;
}

/* FV */
#FV img {
	width: 100vw;
    height: 100vh;
    object-fit: cover;
	min-height: 52.25vw;
}
.catch {
	top: 10%;
    left: 10%;
}
.button-box {
    width: 300px;
    line-height: 3em;
    display: block;
    text-align: center;
	text-decoration: none;
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	-ms-transition: 1s ease;
	transition: 1s ease;
	margin-top: 3em;
}
a.button-box:hover {
	transform: scale(1.1)
}
div.button-box {opacity: 0.3}
article div.button-box {opacity: 1}
.line-box {
	border: solid 1px;
}
.black-box {
    position: relative;
}
.black-box:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(45, 88, 109, .6);
    mix-blend-mode: multiply;
}
.catch span {
    position: relative;
    padding: 0 20px;
    margin-right: 10px;
    color: #000;
    z-index: 1;
}
.catch span:before {
    content: '';
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
	width: 0%;
	-webkit-transition: 1s ease .5s;
	-moz-transition: 1s ease .5s;
	-o-transition: 1s ease .5s;
	-ms-transition: 1s ease .5s;
	transition: 1s ease .5s;
}
.catch.active span:before {
	width: 100%;
}

/* service */
.title-area.grid-box {
	grid-template-columns: auto 1fr;
    -webkit-grid-columns: auto 1fr;
    gap: 50px;
	padding-bottom: 3em;
}
.title-area h3 + p {
    margin-top: -2em;
}
.features-list {
  padding-left: 5%;
}
/* 各行（横帯） */
.features-item {
  padding: 1em 5%;
	min-height: 120px;
	overflow: hidden;
	-webkit-transition: 1s ease;
	transition: 1s ease;
}
.hover-box {
	height: 0;
	-webkit-transition: 1s ease;
	transition: 1s ease;
	opacity: 0
}
.active .hover-box {
	height: auto;
	opacity: 1;
	padding-bottom: 2em;
	
}
.features-item { scroll-margin-top: 100px; }
/* 背景グラデ（例）— 必要に応じて調整 */
.features-item:nth-child(1){ background: linear-gradient(90deg,#FFFFFF,#F4CB1E); }
.features-item:nth-child(2){ background: linear-gradient(90deg,#ffffff,#EA77AB); }
.features-item:nth-child(3){ background: linear-gradient(90deg,#ffffff,#E94743); }
.features-item:nth-child(4){ background: linear-gradient(90deg,#ffffff,#3228FF); }
.features-item:nth-child(5){ background: linear-gradient(90deg,#ffffff,#008654); }
.features-item:nth-child(6){ background: linear-gradient(90deg,#ffffff,#3B1E87); }
.features-item:nth-child(7){ background: linear-gradient(90deg,#ffffff,#CA2D2C); } /* 7枠目以降の予備 */

.features-head.big-title div:first-of-type {
    width: 400px;
    max-width: 80%;
}

/* タイトル（ロゴ相当） */
.features-logo {
	grid-template-columns: 300px 1fr;
    -webkit-grid-columns: 300px 1fr;
    gap: 30px;
    padding-left: 50px;
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	-ms-transition: 1s ease;
	transition: 1s ease;
	opacity: 1
}
.active .features-logo {
	opacity: 0
}
.features-logo:before {
    content: '+';
    position: absolute;
    left: 0;
    font-size: 400%;
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	-ms-transition: 1s ease;
	transition: 1s ease;
	transform: rotate(0)
}
.active .features-logo:before {
	transform: rotate(45deg)
}
.features-text { 
}
.features-text li:before {
    content: '';
	width: 21px;
	height: 15px;
	background: url("images/check.svg") no-repeat center;
	background-size: contain;
	display: inline-block;
    margin-right: 5px;
}
.features-item .hover-box > div {
    max-width: 80%;
}
/* スマホ：縦積み＋タップ展開を想定 */
@media (max-width: 768px) {
  .features-item { grid-template-columns: 1fr; }
  .features-item .features-body { padding-left: 0; }
}

/* slider */
#slider1, #slider2 {
	width: 600px;
	max-width: 100vw;
	margin: auto;
}
.slick-list {overflow: initial!important}
.c-blog-item {padding: 0 25px}
.c-blog-thumb {
	border: solid #eee; 
	margin-bottom: 20px;
	position: relative;
	width: 100%;
	padding-top: 60%;
}
.c-blog-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c-blog-tags li {
    display: inline-block;
    padding: 0 5px;
	position: relative;
}

.c-blog-tag {
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
    display: block;
}
article.post {
	padding: 0 10px;
}
article.post .rel-box {
	padding-top: 100%;
}
article.post .post-img, article.post .post-img:after, article.post .post-img img {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
article.post .post-img img {
	object-fit: cover;
}
article.post .post-img:after {
	content: '';
	background-color: rgba(0,0,0,.4);
	position: absolute;
}
article.post .post-text {
	left: 20px;
	right: 20px;
	bottom: 30px;
}
article.post .button-box {
	margin: 1em auto 0;
}
.solution-box img {
    width: 100%;
    object-fit: cover;
}
.solution-box li > a {
    width: 100%;
}
.solution-box .scale {
    width: 100%;
}
.solution-box > li {
    margin-bottom: 0;
}
.solution-box .abs-box {
    padding: 10%;
    z-index: 2;
}
.solution-icon:before {
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}
.solution-box a {
    text-decoration: none;
}
.solution-box .button-box {
    margin: 2em auto 0;
}
.icon-drama.solution-icon:before {
	background-image: url("images/dumero_maru.png");
}
.icon-glink.solution-icon:before {
	background-image: url("images/glink_maru.png");
}
.icon-brilidge.solution-icon:before {
	background-image: url("images/brilidge_maru.png");
}
.icon-wake.solution-icon:before {
	background-image: url("images/&wake_maru.png");
}
.icon-starlia.solution-icon:before {
	background-image: url("images/starlia_maru.png");
}
.icon-marcial.solution-icon:before {
	background-image: url("images/marcial_maru.png");
}
.icon-orkestra.solution-icon:before {
	background-image: url("images/orkestra_maru.png");
}
#company img {
    width: 100vw;
    height: 94vh;
	height: calc(100vh - 55px);
	min-height: 20vw;
    object-fit: cover;
}
.company-item p.tx-pink {
    line-height: 1em;
}
.company-textarea {
	grid-template-columns: auto 1fr;
    -webkit-grid-columns: auto 1fr;
    gap: 10%;
	padding: 10px;
	width: 100%;
    height: 100%;
    z-index: 1;
}
.company-title {
	padding-left: 5%;
}
.company-title * {
    line-height: 1em;
}
.company-items {
	grid-template-columns: 1fr 1fr;
    -webkit-grid-columns: 1fr 1fr;
    gap: 10px;
	height: 100%;
}
#strength {
    padding: 8em 0;
}
#strength h2 {
    margin-top: 0;
}
.company-items .line-box {
	height: 100%;
}
.strength-item {
    height: 100%;
    padding: 50px 30px;
}
.strength-item img {
    height: 120px;
    width: auto;
}
#blog, #news {
    padding-bottom: 8em;
}

@media (min-width: 800px) {
.solution-box.grid-box, .strength-items {
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-grid-columns: 1fr 1fr 1fr;
}
.solution-box img {
    height: 33vw;
	}
	.strength-items {
		gap: 20px;
	}
}
@media (max-width: 799px) {
.solution-box.grid-box {
    grid-template-columns: 1fr;
    -webkit-grid-columns: 1fr;
}
.solution-box img {
    height: 100vw;
}
}
@media (max-width: 1024px) {
	.header-scroll {
    border-bottom: solid 1px #eee;
    background-color: #fff;
}
	    .header {
        padding-bottom: 15px;
    }
	.colormenu1, .colormenu2, .colormenu3 {
    margin: 0!important;
	}
	.colormenu1 a, .colormenu2 a, .colormenu3 a {
    width: 100%;
    text-align: center;
    line-height: 3em;
}
}
@media (max-width: 748px) {
	.title-area.grid-box {
    grid-template-columns: 1fr;
    -webkit-grid-columns: auto 1fr;
    gap: 0;
}
	.features-logo {
    grid-template-columns: 1fr;
    -webkit-grid-columns: 1fr;
    gap: 0;
    padding-left: 2em;
}
	.features-logo:before {
    font-size: 200%;
	}
	.features-logo img {
    max-height: 60px;
}

	#FV img {
    height: 140vw;
}
.catch {
	top: intial;
	bottom: 10%;
}
	#company img {
    height: 140vw;
}
	.company-textarea {
    grid-template-columns: 1fr;
    -webkit-grid-columns: 1fr;
		gap: 20px;
	}
	.strength-items {
    gap: 20px;
}
}
/* anime */
.anime {
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	-ms-transition: 1s ease;
	transition: 1s ease;
	opacity: 0;
}
.anime-2nd {
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}
.anime-3rd {
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}
.up {transform: translateY(30px);}
.left {transform: translateX(-100px);}
.right {transform: translateX(100px);}
.scale {overflow: hidden;}
.scale img {
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	-ms-transition: 1s ease;
	transition: 1s ease;
	transform: scale(1.1)
}
.active {opacity: 1; transform: translate(0);}
.active img {transform: scale(1)}
section.cta-section {
    display: none;
}
footer.footer {
    border-top: solid 1px;
}