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



/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/

body,footer {
	color: #FFF;
	background: #43484d;
}

header {
	background: none;
}

@keyframes rotate-z {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes vWipeOnce {
  0% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
  40% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
  41% {
    transform: scaleY(0);
    transform-origin: top center; /* 基準点を切り替え */
  }
  100% {
    transform: scaleY(1);
    transform-origin: top center;
  }
}

@keyframes hWipeOnce {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  40% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  41% {
    transform: scaleX(0);
    transform-origin: left center; /* 基準点を切り替え */
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

#service01 {
	background: #293323;
}
#service02 {
	background: #3e362d;
}
#service02 div.box {
	background: #383128;
}
#service03 {
	background: #463343;
}
#service03 div.box {
	background: #3c2b3c;
}
#service04 {
	background: #111e31;
}
#service04 div.box {
	background: #071326;
}
#service05 {
	background: #421d16;
}
#service06 {
	background: #41381c;
}
#service06 div.box {
	background: #3a321a;
}
#service07 {
	background: #11373d;
}
#service07 div.box {
	background: #113136;
}
#service08 {
	background: #362331;
}



/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 749px){
	
	header div.h_inner nav.globalMenu ul.box_inner li a{
		color: #FFF;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a{
		border: 1px solid #FFF;
		border-radius: 25px;
		padding: 0.2em 1em;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a::before{
		content: "";
		background: #FFF!important;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a:hover{
		color: #000!important;
	}
	
	main {
		margin-top: -8.66vw;
		padding: 6.2vw 0 0;
	}
	
	section#service {
		position: relative;
		padding-bottom: 10%;
		z-index: 0;
	}
	
	section#service h2 {
		position: absolute;
		top: 4vw;
		left: 0;
		z-index: 3;
	}
	
	section#service::after {
		content: "";
		width: 108.8%;
		height: 158%;
		background: url("../images/service/service_bg_pc.svg") no-repeat;
		background-size: cover;
		position: absolute;
		z-index: 0;
		top: -50%;
		left: -4.4%;
	}
	
	section#service div.section_inner{
		width: 76.6%;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
	
	section#service div.section_inner div.circle_box{
		width: 64.6%;
		margin: 0 auto;
		position: relative;
		line-height: 0;
	}
	
	section#service div.section_inner div.circle_box div.circle{
		width: 100%;
		display: inline-block;
		animation: rotate-z 60s linear infinite;
	}
	
	section#service div.section_inner figure{
		width: 90%;
		position: absolute;
		top: 5%;
		left: 5%;
		z-index: 3;
	}
	
	.details {
		position: relative;
		z-index: 3;
	}
	
	.details dl {
		width: 93.8%;
		margin: 0 auto;
		position: relative;
	}
	
	.details dl dt{
		font-size: 2.7rem;
		font-size: clamp(1.35rem, 1.8vw, 2.7rem);
		font-weight: 400;
		padding: 1em 0 1em;
		position: relative;
		z-index: 2;
		cursor: pointer;
	}
	
	.details dl dt h3{
		font-size: 2.7rem;
		font-size: clamp(1.35rem, 1.8vw, 2.7rem);
		font-weight: 400;
		line-height: 1;
	}
	
	.details dl dt::before{
		content: "";
        width: 1px;
        height: 34px;
        background: #FFF;
        display: inline-block;
        position: absolute;
        top: calc(50% - 17px);
        right: 16px;
        z-index: 5;
        transform: scaleY(1);
		transform-origin: center center;
		transition: transform 0.5s cubic-bezier(.215,.61,.355,1);
	}
	
	.details dl dt.ac::before {
      transform: scaleY(0);
    }
	
	.details dl dt::after{
		content: "";
		width: 34px;
		height: 1px;
		background: #FFF;
		display: inline-block;
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		z-index: 5;
	}
	
	.details dl dt::before,
    .details dl dt::after {
		will-change: transform, transform-origin;
    }

    .details dl dt:not(.ac):hover::before {
      animation: vWipeOnce 1.2s cubic-bezier(.215,.61,.355,1) 1;
    }

    .details dl dt:not(.ac):hover::after {
		animation: hWipeOnce 0.9s cubic-bezier(.215,.61,.355,1) 1;
    }

    .details dl dt.ac::before,
    .details dl dt.ac::after {
		animation: none !important;
    }

    .details dl dt:not(:hover)::before,
    .details dl dt:not(:hover)::after {
		animation: none !important;
    }
	
	.details dl dd{
		width: 58.9%;
		font-size: 2.7rem;
        font-size: clamp(1.35rem, 1.8vw, 2.7rem);
		padding-bottom: 2.5em;
		margin-left: 32.6%;
		margin-top: -2.5em;
		position: relative;
		z-index: -1;
    }
	
	.details dl dt.ac + dd{
		position: relative;
    }
	
    .details dl dd > div{
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition:
        max-height .45s cubic-bezier(.215,.61,.355,1),
        opacity    .30s ease;
		will-change: max-height, opacity;
    }
	
	.details dl dd p{
		font-size: 1.7rem;
		font-size: clamp(0.85rem, 1.13vw, 1.7rem);
		line-height: 1.88;
	}
	
	.details dl dd div.box{
		border: 1px solid #FFF;
		padding: 2.4%;
		font-size: 1.6rem;
		font-size: clamp(0.8rem, 1.06vw, 1.6rem);
		line-height: 1.68;
		margin-top: 2.5%;
	}
	
	.details dl dd div.box h6{
		font-size: 1.6rem;
		font-size: clamp(0.8rem, 1.06vw, 1.6rem);
		font-weight: 400;
		margin-bottom: 0.5em;
	}
	
	.details dl dd div.box ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.details div.box ul li{
        display: inline-block;
		margin-right: 3.3%;
    }
	
	.details div.img_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		line-height: 0;
		margin-top: 5%;
	}
	
	.details div.img_box div{
		width: 48.7%;
	}
}


@media screen and (max-width: 1500px){
	.details dl dt::before{
		content: "";
        width: 1px;
        height: 1.25em;
        background: #FFF;
        display: inline-block;
        position: absolute;
        top: 30%;
        right: 1.1%;
        z-index: 5;
        transform: scaleY(1);
		transform-origin: center center;
		transition: transform 0.5s cubic-bezier(.215,.61,.355,1);
	}
	
	.details dl dt::after{
		content: "";
		width: 1.25em;
		height: 1px;
		background: #FFF;
		display: inline-block;
		position: absolute;
		top: 48%;
		right: 0;
		z-index: 5;
	}
	
	.details dl dd {
        margin-top: -4.5%;
    }
}



/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 748px){
	
	.hamburger span {
        background : #FFF;
    }
	
	main {
		margin-top: -18.4vw;
		padding: 53vw 0 0;
	}
	
	section#service {
		width: 100%;
		position: relative;
		padding-bottom: 23vw;
		z-index: 0;
	}
	
	section#service h2 {
		position: absolute;
		top: -26vw;
		left: 13%;
		z-index: 3;
	}
	
	section#service::after {
		content: "";
		width: 200%;
		height: 140%;
		background: url("../images/service/service_bg_sp.svg") no-repeat;
		background-size: cover;
		position: absolute;
		z-index: 0;
		top: -33%;
		left: -49.5%;
	}
	
	section#service div.section_inner{
		width: 112.4%;
		margin-left: -6.2%;
		position: relative;
		z-index: 1;
	}
	
	section#service div.section_inner div.circle_box{
		width: 100%;
		margin: 0 auto;
		position: relative;
		line-height: 0;
	}
	
	section#service div.section_inner div.circle_box div.circle{
		width: 100%;
		display: inline-block;
		animation: rotate-z 60s linear infinite;
	}
	
	section#service div.section_inner figure{
		width: 90%;
		position: absolute;
		top: 5%;
		left: 5%;
		z-index: 3;
	}
	
	.details {
		position: relative;
		z-index: 3;
	}
	
	.details dl {
		width: 93.8%;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	
	.details dl dt{
		font-size: 2.7rem;
		font-size: clamp(1.35rem, 1.8vw, 2.7rem);
		font-weight: 400;
		padding: 6vw 0 6vw;
		position: relative;
		z-index: 2;
		cursor: pointer;
	}
	
	.details dl dt h3{
		font-size: 1.75rem;
		font-size: clamp(1.680rem, calc(1.680rem + 0.467vw), 3.491rem);
		font-weight: 400;
	}
	
	.details dl dt::before{
		content: "";
        width: 1px;
        height: 6.4vw;
        background: #FFF;
        display: inline-block;
        position: absolute;
        top: 34%;
        right: 5%;
        z-index: 5;
        transform: scaleY(1);
		transform-origin: center center;
		transition: transform 0.5s cubic-bezier(.215,.61,.355,1);
	}
	
	.details dl dt.ac::before {
      transform: scaleY(0);
    }
	
	.details dl dt::after{
		content: "";
		width: 6.4vw;
		height: 1px;
		background: #FFF;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 2%;
		z-index: 5;
	}
	
	.details dl dt::before,
    .details dl dt::after {
		will-change: transform, transform-origin;
    }

    .details dl dt:not(.ac):hover::before {
      animation: vWipeOnce 1.2s cubic-bezier(.215,.61,.355,1) 1;
    }

    .details dl dt:not(.ac):hover::after {
		animation: hWipeOnce 0.9s cubic-bezier(.215,.61,.355,1) 1;
    }

    .details dl dt.ac::before,
    .details dl dt.ac::after {
		animation: none !important;
    }

    .details dl dt:not(:hover)::before,
    .details dl dt:not(:hover)::after {
		animation: none !important;
    }
	
	.details dl dd{
		width: 100%;
		margin-top: -6vw;
		padding-bottom: 6vw;
		position: relative;
		z-index: 1;
    }
	
	.details dl dt.ac dd{
		margin-top: 0!important;
    }
	
    .details dl dd > div{
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition:
        max-height .45s cubic-bezier(.215,.61,.355,1),
        opacity    .30s ease;
		will-change: max-height, opacity;
    }
	
	.details dl dd p{
		padding-top: 4vw;
		font-size: 1.3rem;
		font-size: clamp(1.248rem, calc(1.248rem + 0.347vw), 2.593rem);
		line-height: 1.88;
	}
	
	.details dl dd div.box{
		border: 1px solid #FFF;
		padding: 4% 2.4%;
		font-size: 1.25rem;
		font-size: clamp(1.200rem, calc(1.200rem + 0.333vw), 2.493rem);
		line-height: 1.68;
		margin-top: 5%;
	}
	
	.details dl dd div.box h6{
		font-size: 1.4rem;
		font-size: clamp(1.344rem, calc(1.344rem + 0.373vw), 2.793rem);
		font-weight: 400;
		margin-bottom: 0.5em;
	}
	
	.details dl dd div.box ul{
		display: block;
	}
	
	.details div.box ul li{
        display: block;
    }
	
	.details div.img_box {
		line-height: 0;
		margin-top: 8%;
	}
	
	.details div.img_box div + div{
		margin-top: 2.5%;
	}
	
}