@charset "UTF-8";

/* ********** CDN ********** */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');

/* ********** normalize ********** */
img{
vertical-align:top;
}
li {
list-style: none;
}

/* ********** base ********** */
html {
width:100%;
font-size:62.5%;
}
@media screen and (max-width: 1080px) {
html {
font-size:60.5%;
}
}
@media screen and (max-width: 810px) {
html {
font-size:54.6%;
}
}
body  {
color:#333;
font-family: 'Noto Sans JP', sans-serif;
margin: 0 auto;
padding: 0;
box-sizing:border-box;
-webkit-text-size-adjust: 100%;
}
a,p,li {
font-size:1.5rem;
}
a {
text-decoration:none;
transition: all .3s;
color: inherit;
}

/* ********** common ********** */
/* rayout */
.c-container {
width:100%;
margin:0 auto;
position: relative;
}
.c-wrap {
position: relative;
}
.c-column1,
.c-column2 {
display:flex;
flex-wrap:nowrap;
width:100%;
position: relative;
}
.c-column1 {
flex-direction:column;
}
.c-column2 {
justify-content:space-between;
align-items:flex-start;
}
.c-column2 > div:nth-of-type(1){
margin-left:0;
}
.c-column2 > div:nth-of-type(2){
margin-right:0;
}
.c-column2--panel,
.c-column3--panel {
display:flex;
flex-wrap:wrap;
width:100%;
}
.c-column2--panel .c-item {
display:flex;
flex-direction: column;
width:48%;
}
.c-column2--panel .c-item:nth-of-type(2n+1){
margin: 0 calc(50% - 48%) 0 0;
}
.c-column2--panel .c-item:nth-of-type(2n){
margin:0 0 0 calc(50% - 48%);
}
.c-column3--panel .c-item {
display:flex;
flex-direction: column;
width:31.5%;
}
.c-column3--panel .c-item:nth-of-type(3n+2) {
margin:0 calc((100% - (31.5% * 3)) / 2);
}
.c-column2--panel .c-item:nth-of-type(n+3),
.c-column3--panel .c-item:nth-of-type(n+4){
margin-top:60px;
}
/* img */
.c-photo {
width:100%;
height: auto;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.c-photo img {
margin:auto;
object-fit: cover;
width: 100%;
object-position: center;
}
/* btn */
.c-btn {
position:relative;
cursor:pointer;
text-align: center;
display:inline-block;
margin:0 auto;
}
.c-btn:before,
.c-btn:after{
position:absolute;
content:"";
top:0;
left:0;
transition: .3s ease;
width: 100%;
height: 100%;
border-radius: 40px;
}
.c-btn:before {
z-index: 1;
background: linear-gradient(108deg,rgba(230,130,65,1) 0%, rgba(201,227,106,1) 100%);
}
.c-btn:after {
background: linear-gradient(108deg, rgba(80,210,203,1) 0%, rgba(227,151,214,1) 100%); 
z-index: 0;
}
.c-btn__text {
text-decoration:none;
display: inline-block;
padding:18px 40px 18px 30px;
color:#fff;
font-size:1.8rem;
font-weight:bold;
position:relative;
transition: .3s ease;
z-index: 2;
}
.c-btn__text:after {
content:"";
margin-left:0;
display: inline-block;
width: 9px;
height: 9px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translate(5px ,-5px);
transition: .3s ease;
}
.c-btn:hover:before {
opacity:0;
}
.c-btn:hover .c-btn__text:after{
transform: rotate(45deg) translate(10px ,-10px);
}
/* list */
.c-rowlists {
position:relative;
display:flex;
width: 100%;
}
.c-rowlists__list {
display: flex;
align-items: center;
justify-content: center;
}
/* text */
.c-title--large {
font-size: 2.5rem;
font-weight: bold;
color: #333;
margin-bottom: 40px;
}
.c-title--large span {
font-size: 2rem;
display:block;
font-weight: normal;
}
.c-title--normal {
font-size: 8rem;
color: rgba(0, 188, 245,.5);
}
.c-title--small {
font-size: 2.5rem;
font-weight: bold;
position:relative;
padding:0 40px;
display: inline-block;
margin-top: 10px;
}
.c-title--small:before,
.c-title--small:after {
content:"";
background: rgba(0, 188, 245,1);
width:30px;
height:2px;
position:absolute;
top:50%;
}
.c-title--small:before {
left:0;
}
.c-title--small:after {
right:0
}
.c-text--large  {
font-size: 2.2rem;
font-weight:bold;
}
.c-text--normal  {
font-size: 1.5rem;
line-height: 1.8;
}
.c-text--bold {
font-size: 2.1rem;
font-weight: bold;
}
.c-text--small {
font-size: 1.3rem;
}
/* ********** parts ********** */
/* header */
header .c-column2 {
width: 92%;
position: fixed;
background: #fff;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 10px 26px 10px 20px;
align-items: center;
z-index: 99;
box-shadow: 0px 0px 15px -5px #777777;
height: 90px;
}
header .c-photo {
width: 256px;
}
header .c-rowlists {
justify-content: flex-end;
}
header .c-rowlists li {
display: flex;
align-items: center;
padding-left: 20px;
}
header .c-rowlists .c-btn {
margin:0;
}
header .c-rowlists .c-btn__text {
padding: 13px 30px 13px 18px;
font-size: 1.6rem;
}
header a {
font-size: 1.6rem;
transition:.3s;
}
header li:not(:last-of-type) a {
position:relative;
padding-right:20px;
}
header li:not(:last-of-type) a:after {
content: "";
position: relative;
width: 7px;
height: 7px;
right: -10px;
top: -3px;
transform: rotate(135deg);
border-top: 1.5px solid #000;
border-right: 1.5px solid #000;
transition: .3s;
display: inline-block;
}
header a:hover {
transition:.3s;
}
header a:hover img{
opacity:.7;
}
header li:not(:last-of-type) a:hover{
color:#00bcf5
}
header li:not(:last-of-type) a:hover:after{
border-top-color: #00bcf5;
border-right-color: #00bcf5;
transform: translateY(-30%) rotate(135deg);
}
@media screen and (max-width:1364px) {
header .c-rowlists li {
padding-left: 18px;
}
header a {
font-size: 1.5rem;
}
header .c-rowlists .c-btn__text {
padding: 13px 20px 13px 8px;
font-size: 1.5rem;
}
}
@media screen and (max-width:1240px) {
header .c-column2 {
width: 100%;
}
header .c-rowlists li {
padding-left: 16px;
}
header a {
font-size: 1.4rem;
}
header .c-rowlists .c-btn__text {
font-size: 1.4rem;
}
}
@media screen and (max-width:1116px) {
header .c-photo {
width: 192px;
}
header .c-rowlists li {
padding-left: 14px;
}
header a {
font-size: 1.25rem;
}
header .c-rowlists .c-btn__text {
font-size: 1.25rem;
}
}
@media screen and (max-width:992px) {
header .c-photo {
width: 128px;
}
header .c-rowlists li {
padding-left: 10px;
}
header li:not(:last-of-type) a {
padding-right: 10px;
}
header a {
font-size: 1.2rem;
}
header .c-rowlists .c-btn__text {
font-size: 1.2rem;
}
}
@media screen and (max-width:868px) {
header a {
font-size: 1.15rem;
}
header .c-rowlists .c-btn__text {
font-size: 1.15rem;
}
}
/* mainvisual */
.s-mainvisual {
background:url('../img/s-mainvisual_01.jpg') top right / cover no-repeat;
height:640px;
overflow:hidden;
}
.s-mainvisual .c-column1 {
display: flex;
align-items: flex-end;
justify-content: center;
}
.s-mainvisual .c-wrap {
width: 400px;
height: 400px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: rgb(0,188,245);
background: radial-gradient(circle, rgba(0,188,245,.2) 0%, rgba(255,255,255,.5) 69%); 
margin-top: 160px;
overflow:hidden;
}
.s-mainvisual .c-wrap__wrap {
display:block;
text-align:center;
}
.s-mainvisual .c-wrap:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background: radial-gradient(circle, rgba(0,188,245,.4) 0%, rgba(255,255,255,.8) 69%); 
animation: opacityloop 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes opacityloop {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/* ourthought */
.s-ourthoughts {
position: relative;
overflow: hidden;
}
.s-ourthoughts .c-sectiontitle {
text-align: left;
}
.s-ourthoughts .c-photo {
margin-top: 20px;
border-radius: 30px;
box-shadow: 0px 0px 25px -12px #999;
}
.s-ourthoughts .c-wrap { 
padding-right: 60px;
}
.s-ourthoughts .c-text--normal {
margin-top: 60px;
}
.s-ourthoughts .c-text--bold {
font-size: 1.7rem;
margin-top: 20px;
}  
.s-ourthoughts .c-btn {
margin-top: 40px;
}
.s-ourthoughts:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background:url('../img/s-ourthoughts_bg.png') center / cover no-repeat;
opacity:0;
transition:.5s ease-in;
}
.s-ourthoughts.js-active:before {
opacity:1;
}
/* aboutagency */
.s-aboutagency  {
background: rgb(251,255,216);
background: linear-gradient(108deg, rgba(251,255,216,1) 0%, rgba(214,255,247,1) 100%); 
}
.s-aboutagency .c-sectiontitle {
text-align: center;
}
.s-aboutagency .c-column1 > .c-text--normal {
margin-top: 60px;
text-align:center;
}
.s-aboutagency .c-photo {
margin-top: 60px;
width:80%;
}
.s-aboutagency__support {
background: #fff;
padding: 90px 60px 60px;
margin: 80px auto 0;
border-top:3px solid #9dd045;
}
.s-aboutagency__support .c-text--large {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
background: #9dd045;
padding: 5px 30px;
color: #fff;
font-size: 2.2rem;
border-radius: 20px;
}
.s-aboutagency__support .c-item {
padding: 30px;
border: 1px solid #9dd045;
position: relative;
box-shadow: 0px 0px 15px -6px #999;
}  
.s-aboutagency__support .c-text--bold {
text-align: center;
color: #80b02d;
}
.s-aboutagency__support .c-item .c-text--normal {
margin-top: 10px;
}
.s-aboutagency__support .c-item span {
position: absolute;
left: 5px;
top: -3.15rem;
color: rgba(157, 208, 69,.3);
font-size: 6.5rem;
line-height: 0.8;
font-weight: bold;
font-family: "Roboto Condensed", sans-serif;
}
/* mynavilogo */
.s-mynavilogo .c-sectiontitle {
text-align: right;
}
.s-mynavilogo .c-photo {
margin-top: 60px;
width: 50%;
}
.s-mynavilogo .c-photo:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background:url('../img/s-mynavilogo_02.png') center / cover no-repeat;; 
opacity:0;
}
.s-mynavilogo .c-photo:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background:url('../img/s-mynavilogo_02.png') center / cover no-repeat;; 
opacity:0;
transition:2s ease-in;
}
.s-mynavilogo .c-photo.js-active:before {
opacity:1;
}
.s-mynavilogo .c-column2--panel {
padding-top: 60px;
background:#fff;
position:relative;
}
.s-mynavilogo .c-item {
background: rgb(238,250,253);
background: linear-gradient(118deg, rgba(238,250,253,1) 0%, rgba(227,230,255,1) 100%); 
border-radius: 25px;
padding: 30px;
}
.s-mynavilogo .c-text--bold {
color: #03b0e4;
font-feature-settings: 'palt';
letter-spacing: .7px;
text-align: center;
} 
.s-mynavilogo .c-item .c-text--normal {
margin-top: 10px;
}
/* solutionlist */
.s-solutionlist {
background: rgb(168,223,240);
background: radial-gradient(circle, rgba(202,243,255,.4) 0%, rgba(168,223,240,.7)  100%); 
}
.s-solutionlist .c-sectiontitle {
text-align: center;
}
.s-solutionlist h3.c-title--normal {
color: rgba(0, 188, 245,.8);
}  
.s-solutionlist .c-column1 > .c-text--normal {
margin-top: 60px;
text-align:center;
}
.s-solutionlist .c-wrap {
margin-top: 60px;
}
.s-solutionlist table {
border-collapse: separate;
border-spacing: 3.5px;
}
.s-solutionlist table th,
.s-solutionlist table td {
padding:25px 15px;
font-size:1.5rem;
}
.s-solutionlist table th {
background: linear-gradient(135deg, rgba(0, 188, 245,.7) 0%, rgba(0, 188, 245,1) 100%);
color: #fff;
}  
.s-solutionlist table td {
background: #fff;
position:relative;
}
.s-solutionlist table td:first-of-type,
.s-solutionlist table td[rowspan] + td{
font-weight:bold;
color: #0c8ec4;
}
.s-solutionlist table th:first-of-type,
.s-solutionlist table td:first-of-type {
width:13%
}
.s-solutionlist table th:nth-of-type(2),
.s-solutionlist table td:nth-of-type(2) {
width:16%
}
.s-solutionlist table tr:first-of-type th:nth-of-type(3),
.s-solutionlist table tr:first-of-type th:nth-of-type(4) {
width:35.5%
}
.s-solutionlist table tr:first-of-type th:nth-of-type(4) {
padding:12.5px 15px;
}
.s-solutionlist table tr:nth-of-type(2) th,
.s-solutionlist table tr:nth-of-type(n+3) td:nth-of-type(n+4) {
width:7.1%;
font-size:1.3rem;
padding:12.5px 6px;
}
.s-solutionlist table td strong {
background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(246, 255, 0,.6) 60%);
}
.s-solutionlist .u-active {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background: linear-gradient(135deg, rgba(80,210,203,.7) 0%, #00bcf5 100%); 
border-radius:50%;
height:20px;
width:20px;
}
/* contact */
.s-contact {
background:url('../img/s-contact_bg.jpg') center / cover no-repeat;
}
.s-contact .c-text--normal {
text-align: center;
margin-bottom: 30px;
}
/* footer */
footer {
text-align: center;
}
/* ********** animation ********** */
.a-slidedown{
opacity:0;
animation: slidedown 1s ease-in forwards;
}
@keyframes slidedown {
0% {
transform: translate(-50%,-100px);
opacity:0;
}
100% {
transform: translate(-50%,0);
opacity:1;
}
}
.a-blurslide {
animation: blurslide 1s ease-in forwards;
}
@keyframes blurslide {
0% {
-ms-filter: blur(10px);
filter: blur(10px);
background-position:left top;
}
100% {
-ms-filter: blur(0);
filter: blur(0);
background-position:right top;
}
}
.a-blurfadein{
opacity:0;
}
.a-blurfadein.js-active {
opacity:0;
animation: blurfadein 1.8s ease-in forwards;
}
@keyframes blurfadein {
0% {
-ms-filter: blur(10px);
filter: blur(10px);
opacity:0;
}
100% {
-ms-filter: blur(0);
filter: blur(0);
opacity:1;
}
}
.a-floating-y01 {
animation: floating-y01 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y01 {
0% {
transform: translateY(-1%);
}
100% {
transform: translateY(1%);
}
}
.a-floating-y02 {
animation: floating-y02 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y02 {
0% {
transform: translateY(-1%);
}
100% {
transform: translateY(1%);
}
}
.a-slidefromright {
opacity:0;
}
.a-slidefromright.js-active {
animation: slidefromright 1s 1s ease-in forwards;
}
@keyframes slidefromright {
0% {
opacity:0;
transform: translateX(200px);
}
100% {
opacity:1;
transform: translateX(0);
}
}
.a-fadeinup {
opacity:0;
}
.a-fadeinup.js-active {
animation: fadeinup .8s 1s ease-in forwards;
}
@keyframes fadeinup {
0% {
opacity:0;
transform: translateY(10px);
}
100% {
opacity:1;
transform: translateY(0);
}
}
.a-fadein {
opacity:0;
}
.a-fadein.js-active {
animation: fadein 1.8s 1s ease-in forwards;
}
@keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
} 
/* ********** utility ********** */
/* PC/SP */
.u-pconly {
display:blcok;
}
.u-sponly {
display:none;
}
/* flexbox */
.u-fw80 {
width: 80%;
}
.u-fw70 {
width: 70%;
}
.u-fw60 {
width: 60%;
}
.u-fw50 {
width: 50%;
}
.u-fw40 {
width:40%;
}
.u-fw30 {
width:30%;
}
.u-fw20 {
width:20%;
}
/* width */
.u-w95 {
max-width: 1240px;
width:95%;
}
.u-w90 {
max-width: 1116px;
width:90%;
}
.u-w80 {
max-width: 992px;
width: 80%;
}
.u-w70 {
max-width: 868px;
width: 70%;
}
.u-w60 {
max-width: 744px;
width: 60%;
}
.u-w50 {
max-width: 620px;
width: 50%;
}
/* padding */
.u-ptb100 {
padding:100px 0;
}
.u-ptb60 {
padding:60px 0;
}

/* **************************************************************** */
/* ********************** スマートフォン対応 ************************* */
@media screen and (max-width:810px) {
/* ********** common ********** */ 
/* rayout */
.c-column2,
.c-column2--panel,
.c-column3--panel {
flex-direction: column;
}
.c-column2 .u-fw80,
.c-column2 .u-fw70,
.c-column2 .u-fw60,
.c-column2 .u-fw50,
.c-column2 .u-fw40,
.c-column2 .u-fw30,
.c-column2 .u-fw20{
width:100%;
margin-right: auto;
margin-left: auto;
padding-right: unset!important;
padding-left: unset!important;
}
.c-column2--panel .c-item{
width:100%;
margin:30px auto 0!important;
}
.c-column3--panel .c-item{
width:100%;
margin:50px auto 0!important;
}
.c-column2--panel .c-item:first-of-type,
.c-column3--panel .c-item:first-of-type {
margin:0 auto!important;
}
.c-column2 > div:nth-of-type(1) {
margin-left:auto;
}
.c-column2 > div:nth-of-type(2) {
margin-right:auto;
}
.c-column2 > .c-wrap {
order:0;
margin:20px auto 0;
padding-right: 0!important;
padding-left: 0!important;
}
.c-column1--panel .c-item > .c-wrap {
order:0;
margin:0 auto 20px;
}
/* ********** ユーティリティ ********** */
/* PC/SP */
.u-sponly {
display:block;
}
.u-pconly {
display:none;
}
/* width*/
.u-w95,
.u-w90,
.u-w80,
.u-w70,
.u-w60,
.u-w50 {
width:92%;
}
/* padding */
.u-ptb100 {
padding:60px 0;
}

/* ********** common ********** */
/* テキスト要素 */
.c-title--large {
font-size: 2.4rem;
margin-bottom: 20px;
}
.c-title--normal {
font-size: 4rem;
}
.c-title--small {
font-size: 2.2rem;
padding:0 0 0 40px;
}
.c-title--small:after {
content:none;
}
/* btn */
.c-btn {
width: auto;
display:block;
}
/* ********** parts ********** */
header .c-column2 {
width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding: 10px;
height: 60px;
flex-direction:row;
}
.l-header__bars {
width: 30px;
height: 60px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding-right:10px;
}
.l-header__bars span,
.l-header__bars span::before,
.l-header__bars span::after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 2px;
background-color: #333;
transition: 0.5s;
}
.l-header__bars span::before {
top: -10px;
}
.l-header__bars span::after {
bottom: -10px;
}
.l-header__bars.js-active span {
background-color: transparent;
}
.l-header__bars.js-active span::before {
top: 0;
transform: rotate(45deg);
}
.l-header__bars.js-active span::after {
bottom: 0;
transform: rotate(-45deg);
}
header .c-photo {
margin:0;
width:128px;
}
header .c-rowlists {
opacity:0;
pointer-events: none;
position: absolute;
top: 60px;
left: 0;
flex-direction: column;
justify-content: flex-start;
background: rgba(255,255,255,.95);
height: 100vh;
transition: 0.5s;
}
.l-header__bars.js-active + .c-rowlists {
opacity:1;
pointer-events: auto;
}
header .c-rowlists li  {
padding: 0 20px;
}
header li:not(:last-of-type) a{
font-size: 1.8rem;
padding:25px 0;
width:100%;
border-bottom: 1.5px solid;
border-image: linear-gradient(to right, rgba(80,210,203,1), rgba(227,151,214,1)) 1;
}
header li:last-of-type {
margin:25px 0;
}
header .c-rowlists .c-btn__text {
padding: 13px 40px 13px 32px;
font-size: 1.8rem;
}
.s-mainvisual {
background: url('../img/s-mainvisual_01.jpg') top left / cover no-repeat;
height: 420px;
overflow: visible;
}
.s-mainvisual .c-wrap {
width: 300px;
height: 300px;
margin-top: auto;
box-shadow: 0px 0px 25px -12px #999;
}
@keyframes opacityloop {
0% {
opacity:0.5;
}
100% {
opacity:1;
}
}
.s-mainvisual .c-column1 {
align-items: center;
justify-content: flex-end;
height: 480px;
}
.s-ourthoughts .c-text--normal {
margin-top: 40px;
}
.s-ourthoughts .c-photo {
margin-top: 40px;
}
.s-aboutagency .c-sectiontitle {
text-align: left;
}
.s-aboutagency .c-column1 > .c-text--normal {
margin-top: 40px;
text-align: left;
}
.s-aboutagency .c-photo {
margin-top: 30px;
width: 100%;
}
.s-aboutagency__support .c-text--large {
top: -20px;
font-size: 2rem;
}
.s-aboutagency__support {
padding: 80px 20px 40px;
margin: 60px auto 0;
}
.s-mynavilogo .c-sectiontitle {
text-align: left;
}
.s-mynavilogo .c-photo {
margin-top: 40px;
width: 100%;
}
.s-mynavilogo .c-column2--panel {
padding-top: 40px;
}
.s-solutionlist .c-sectiontitle {
text-align: left;
}
.s-solutionlist .c-column1 > .c-text--normal {
margin-top: 40px;
text-align: left;
}
.s-solutionlist .c-wrap {
margin-top: 10px;
overflow-x: scroll;
}
.s-solutionlist table {
white-space: nowrap;
}
.s-solutionlist .c-text--small {
margin-top: 40px;
}
.s-solutionlist table th,
.s-solutionlist table td {
padding:14px 7px;
}
.s-solutionlist table tr:first-of-type th:nth-of-type(4) {
padding:7px 7px;
}
.s-solutionlist table tr:nth-of-type(2) th,
.s-solutionlist table tr:nth-of-type(n+3) td:nth-of-type(n+4) {
padding:7px 4px;
}
.s-solutionlist .u-active {
height:15px;
width:15px;
}
/* ********** animation ********** */
@keyframes blurslide {
0% {
-ms-filter: blur(10px);
filter: blur(10px);
background-position:left top;
}
100% {
-ms-filter: blur(0);
filter: blur(0);
background-position:center top;
}
}
}