@charset "utf-8";
/* CSS Document */
.top02{
	position: relative;
}
.top02::before{
    content: "";
    width: 28vw;
    height: 28vw;
    background-image: url(../images/common/bg_logo@2x.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(6px) saturate(0.5);
    opacity: 0.1;
}
.top02_inner{
	position: relative;
	padding-top: 18vw;
	padding-left: 3.0em;
	margin-bottom: 15vh
}
.top02 h2{
	text-align: start;
	line-height: 2.2em;
	font-size:var(--fs-35);
	writing-mode: vertical-rl; 
	letter-spacing: 0.4em;
	white-space: nowrap;
	position: absolute;
	top:6vw;
	right: 5%;
}
/*改行部分*/
.top02_htx{
	padding-top: 6.0em;
}
.top02 .logo_text{
	width: clamp(40px,35vw,300px);
	margin-bottom: 5vw;
}
.top02 p{
	font-size: var(--fs-18);
	line-height: 2.0em;
	margin-bottom: 3.0em;
}

/*スライダーcss*/
/* コンテナー */
.container {
  max-width: 1920px;
  margin: 0 auto;
}

/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider .swiper-slide {
  height: 400px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}

/**/
.top03{
	text-align: center;
}
.top03_innner{
	border: solid 0.5px #5f5f5f;
	padding: 5.0em;
}
.top03_logo{
	width: clamp(30px, 13vw, 80px);
	height: auto;
	margin-bottom: 1.5em;
}
.top03 h2{
	margin-bottom: 5.0em;
}
.top03 h2 .logo_text{
	width: clamp(140px, 27vw, 350px);
	height:auto;
}
.top03 h2 span{
	font-size: var(--fs-35);
	padding-left: 0.5em;
}
.top03_contentbox{
	display: inline-block;
}
.top03 ul{
	display: grid;
	grid-template-columns: 1fr 8fr;
	column-gap: 2.0em;
	margin-bottom: 2.0em;
	font-size: var(--fs-23);
}

.top03 ul .item1{
		position: relative;
	justify-self:center;
	white-space: nowrap;
}
.top03 ul .item1::before{
	content: "";
	width: 5.5em;
	height: 0.5px;
	background-color: #5f5f5f;
	position: absolute;
	bottom:-0.3em;
	left: 50%;
	transform: translateX(-50%);
}
.top03 ul .item2{
	position: relative;
	justify-self:start; 
	padding-left: 1.2em;
}
.top03 ul .item2::before{
	content: "";
	width: clamp(230px, 50vw, 820px);
	height: 0.5px;
	background-color: #5f5f5f;
	position: absolute;
	bottom:-0.3em;
	left: 0;
}
/**/
.top04{
	text-align: center;
	position: relative;
}
.top04::before{
	content: "";
	width: 100%;
	height:100%;
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	background-image: url("../images/top/top_bg2@2x.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	opacity: 0.15;
	z-index: -10;
}
.top04 h2{
	font-size: var(--fs-40);
	margin-bottom: 3.0em;
	padding-top: 20vh;
}
.top04_inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap:10vh;
	padding-bottom: 30vh;
}
.top04_box{
	flex-basis: 28%;
	font-size: var(--fs-18);
}
.top04_box img{
	margin-bottom: 2.0em;
}
/*=========レスポンシブ=====================

=======SP対応・ブレイクポイント768px=========*/

@media (max-width: 1024px) {
.top02::before {
    width: 35vw;
    height: 35vw;
	}
.top02_inner {
    padding-left: 0;
}
.top02 p {
    font-size: var(--fs-16);
}
.top02 h2 {
    line-height: 2.1em;
    font-size: var(--fs-30);
    position: absolute;
    right: -5%;
}
/**/
.top03 ul {
    font-size: var(--fs-16);
}
}
@media (max-width: 768px) {
    .top02 h2 {
        line-height: 2.0em;
        font-size: var(--fs-35);
        position: absolute;
        right: -10%;	
}

.infinite-slider .swiper-slide {
    height: 220px !important;
    width: auto !important;
}
.top02_inner {
    margin-bottom: 10vh;
}
.container {
    margin: 0 auto 15vh;
	}
	/**/
.top03 ul .item2::before {
    width: clamp(230px, 64vw, 615px);
	}
.top03_innner {
    padding: 1.2em;
}
    .top03 ul {
        font-size: var(--fs-14);
	}

.top03 h2 {
    margin-bottom: 3em;
}
	/**/
.top04_box {
    flex-basis: 45%;
	font-size: var(--fs-16);
	}
/**/
.top04 h2 {
    font-size: var(--fs-30);
	}
.top04_inner {
    padding-bottom: 25vh;
}
}
@media (max-width: 500px) {
	    .top02::before {
        width: 45vw;
        height: 45vw;
			opacity: 0.2;
	}
	    .top02 h2 {
        font-size: 20px;
        position: absolute;
        right: 0;
    }
	    .top02 p {
        font-size: 12px;
    }
	/**/
	    .top03 h2 {
        margin-bottom: 1em;
    }
	.top03_logo {
    margin-bottom: 0.5em;
	}
	.top03 h2 span {
    font-size: var(--fs-23);
    padding-left: 0;
}
	.top03 ul .item2::before {
    width:100%;
	}
	.top03 ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: 1.0em;
    margin-bottom: 1.8em;
}
.top03 ul .item2 {
 padding-left: 0;
    justify-self: center;
	}
	    .top04_box {
        flex-basis: 48%;
        font-size: var(--fs-14);
    }
	
.top04_box img {
    margin-bottom: 0.5em;
}
}