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


body {
	min-width: 0px;
}


@media screen and (max-width: 1600px) {
    /* basefont */
    :root {
  --base-font-size: 1.0vw;
}
}

/* contents-top */

.contents-top {
	width: 100%;
	position: relative;
}

.contents-top img {
	width: 100%;
	height: auto;
}

.contents-top .box-img img {
  transition:.5s all;
}

.contents-top .box-img {
  overflow: hidden;
    position: relative;
}

.service01:hover img {
  transform:scale(1.2,1.2);
  transition:.5s all;
}

/* link01 */

.link01 {
    padding-top: 5vw;
}

.link01 a {
    font-family: var(--subtitle-font);
font-weight: var(--base-font-weight);
    font-size: 1.5vw;
line-height: 1.2;
    font-style: italic;
    display: inline-block;
    position: relative;
    padding: 0.7vw 0px;
    padding-right: 8.8vw;
}

.link01 a::before {
    content: "";
	position: absolute;
right: 0px;
top: 0px;
	background-image: url("../../images/common/link-arrow01.svg");
background-position: right top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 8vw;
	height: 2.6vw;
    transition: .5s;
}

.link01 a:hover::before {
    margin-right: -0.7vw;
}


.contents-top-wrap {
	width: 100%;
    position: relative;
    z-index: 1;
}


/* main-img-top */

.main-img-top {
	position: fixed;
left: 0px;
top: 0px;
    z-index: 0;
    width: 100%;
    transition: 2s;
}

.hidden-img {
    z-index: 99;
}

.main-img-top .box-inner {
	width: 100%;
    height: 100vh;
	position: relative;
    transition: 2s ease;
    filter: blur(50px);
    opacity: 0;
}

.hidden-img .box-inner {
    filter: blur(0px);
    opacity: 1;
}

.main-img-top .box-img img {
	width: 100%;
	height: 100vh;
}

.animation_img {
  transition: 1.5s ease;
	transition-delay: 1s;
    filter: blur(20px);
}

.animation_img.effect2 {
	filter: blur(0px);
}

.main-img-top .box-text {
	position: absolute;
left: 0px;
    bottom: 7.4vw;
    width: 100%;
    padding-left: 3%;
}

.main-img-top .box-text h2 {
	width: 52%;
}

.main-img-top .box-text img {
	transition: 1.5s ease;
    transform:scale(0.5,0.5);
    transform-origin: bottom left;
    filter: blur(10px);
    opacity: 0;
}

.hidden-img .box-text img {
    transform:scale(1,1);
    filter: blur(0px);
    opacity: 1;
}

/* contents01 */

.contents01 {
	width: 100%;
    background-image: url("../../images/top/back01.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
    padding: 150vh 0px 7.4vw;
}

.contents01 .box-inner {
    display: flex;
  justify-content: flex-start;
    align-items: center;
flex-wrap: wrap;
}

.contents01 .box-title {
    text-align: center;
    width: 48%;
}

.contents01 .box-detail {
    flex: 1;
}

.contents01 h2 img {
    width: 10vw;
}

.contents01 h3 {
    margin-bottom: 5vw;
     mix-blend-mode: multiply;
}

.contents01 h3 img {
    width: 43vw;
}

@media screen and (min-width: 1601px) {
    
.contents01 h2 img {
    max-width: 145px;
}
    
.contents01 h3 img {
    max-width: 620px;
}

}



/* contents02 */

.contents02 {
	width: 100%;
   padding: 7.4vw 0px;
}

.contents02 .box-inner {
	width: 100%;
    position: relative;
}

.contents02 .box-img {
	width: 100%;
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
}

.contents02 .box-img .box {
    width: 46.5%;
}

.contents02 .box-detail {
	position: absolute;
right: 0px;
bottom: 0px;
    width: 45%;
}


.contents02 h2 {
    flex: 1;
    text-align: center;
    padding-top: 3vw;
}

.contents02 h2 img {
     width: 35%;
}

.contents02 p {
    letter-spacing: 0em;
    position: relative;
}

.contents02 p::before {
   content: "";
	position: absolute;
left: 0px;
top: 0px;
	background-image: url("../../images/top/text04.svg");
background-position: left top;
background-repeat: no-repeat;
	background-size: 100% auto;
	width: 100%;
	height: 14.3vw;
    margin-top: -14.3vw;
    mix-blend-mode: multiply;
}

@media screen and (min-width: 1601px) {
    
.contents02 p::before {
    max-width: 730px;
	height: 250px;
    margin-top: -250px;
}

}


/* contents03 */

.contents03 {
	width: 100%;
    padding: 7.4vw 0px;
    background-image: url("../../images/top/back02.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

.contents03 .box-inner {
	width: 100%;
    display: flex;
  justify-content: flex-start;
flex-wrap: wrap;
    align-items: center;
}

.contents03 .box-title {
	width: 47%;
    text-align: center;
}

.contents03 .box-detail {
	width: 48%;
    position: relative;
    padding-right: 7%;
}

.contents03 .box-detail::before {
	content: "";
	position: absolute;
right: 0px;
top: 0px;
	background-image: url("../../images/top/text08.svg");
background-position: right top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 8vw;
	height: 90%;
}

.contents03 h2 img {
     width: 30%;
}

.contents03 h3 {
    margin-bottom: 5vw;
}

.contents03 p {
    background-color: rgba(0,0,0,0.7);
    padding: 1.8vw;
    padding-right: 0px;
    color: #FFF;
    letter-spacing: 0em;
}

@media screen and (min-width: 1601px) {
    
.contents03 h2 img {
    max-width: 240px;
}

}



/* contents04 */

.contents04 {
	width: 100%;
    padding: 7.4vw 0px;
    background-image: url("../../images/top/img03a.jpg");
background-position: right top;
background-repeat: no-repeat;
background-size: 65% auto;
    position: relative;
}

.contents04::before {
	content: "";
	position: absolute;
left: 0px;
bottom: 0px;
	background-image: url("../../images/top/img03b.jpg");
background-position: left bottom;
background-repeat: no-repeat;
	background-size: 100% auto;
	width: 22%;
	height: 20vw;
}

.contents04 .box-inner {
	width: 90%;
}

.contents04 .box-title {
	width: 45%;
}

.contents04 .box-detail {
	padding-left: 26%;
}

.contents04 h3 {
    padding: 3vw 0px 2.2vw;
    font-family: var(--title-font);
font-weight: var(--base-font-weight0);
    font-size: 2.9vw;
line-height: 1.5;
}

@media screen and (min-width: 1601px) {
    
.contents04 h2 img {
    max-width: 660px;
}
    
    .contents04 h3 {
font-size: 48px;
}

}


/* contents05 */

.contents05 {
	width: 100%;
    padding: 7.4vw 0px;
    background-image: url("../../images/top/back03.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

.contents05 .box-inner {
	width: 100%;
    display: flex;
  justify-content: flex-start;
flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse;
}

.contents05 .box-title {
	width: 47%;
    text-align: center;
}

.contents05 .box-detail {
	width: 48%;
    position: relative;
    padding-right: 7%;
}

.contents05 .box-detail::before {
	content: "";
	position: absolute;
right: 0px;
top: 0px;
	background-image: url("../../images/top/text11.svg");
background-position: right top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 8vw;
	height: 90%;
}

.contents05 .box-text {
   position: relative;
}

.contents05 .box-text::before {
    content: "";
	position: absolute;
left: 0px;
top: 0px;
	display: block;
	width: 100%;
	height: 100%;
    background : rgba(0, 113, 187, 0.6);
    mix-blend-mode: multiply;
}


.contents05 h2 img {
     width: 65%;
}

@media screen and (min-width: 1601px) {
    
    .contents05 h2 img {
max-width: 520px;
}

}

.contents05 h3 {
    margin-bottom: 5vw;
}

.contents05 p {
    padding: 1.8vw;
    padding-right: 0px;
    color: #FFF;
    letter-spacing: 0em;
    position: relative;
}


/* contents06 */

.contents06 {
	width: 100%;
    padding: 7.4vw 0px 5.5vw;
}

.contents06 .box-title {
	width: 90%;
}

.contents06 .box-detail {
	display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse;
    background-image: url("../../images/top/back04.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

.contents06 .box-img {
    width: 55%;
    position: relative;
}

.contents06 .box-img::after {
    content: "";
	position: absolute;
right: 4%;
bottom: 2vw;
	background-image: url("../../images/top/name.svg");
background-position: right bottom;
background-repeat: no-repeat;
	background-size: 100% auto;
	width: 46%;
	height: 4vw;
}

.contents06 .box-text {
    flex: 1;
    text-align: center;
}

.contents06 h2 {
	width: 40%;
}

.contents06 h3 {
    padding: 2vw 0px 2.5vw;
    font-family: var(--title-font);
font-weight: var(--base-font-weight0);
    font-size: 3.3vw;
line-height: 1.2;
}

@media screen and (min-width: 1601px) {
    
    .contents06 h2 img {
height: 70px;
width: auto;
}

.contents06 h3 {
    font-size: 47px;
}
}

.contents06 p {
   display: inline-block;
    text-align: left;
}



.sp-view {
	display: none;
}