@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('font/inter-v20-latin-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('font/inter-v20-latin-700.woff2') format('woff2');
    font-display: swap;
}

:root{
	--gray: #F3F3F3;
	--blue: #1264aa;
	--orange:#F29603;
	--panel-padding-left: 10vw;
}
*{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 16px;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
ul, li{
	list-style: none;
	padding: 0;
}
img{ max-width: 100%;}
section {  padding: 10vh 10vw;}
strong{ font-weight:700; }
footer{ background:#035C8C; }
.bgGrad{ background: linear-gradient(0deg, #015c8c, #39ACB6);}
.bgGray{ background:var(--gray); }
.bgBlue{ background:var(--blue); }
.bgWhi{ background:#fff; }
.clWhi{ color:#fff }
.clBlu{ color:var(--blue); }
.dispBlock{ display:block; }
.dispFlex{ display:flex; }
.dispFlexResp{ display:flex; }

.fw700{ font-weight: 700;}

.delay01{ transition-delay:0.1s!important; }
.delay03{ transition-delay:0.3s!important; }

h1{ 
	margin:0; 
	display: flex;
    align-items: center;
}
h2,h2>span{
	font-size: clamp(1.5rem, 0.786rem + 3.571vw, 3rem);
	font-weight: 700;
	margin: 0;
	&.anim{

		&.visible{

		}
	}
}
h3{
	font-size: clamp(1.25rem, 0.964rem + 1.429vw, 2.25rem);
	font-weight: 700;
}
p{ 
	margin:0; 
	line-height: 1.5;
}
a{ text-decoration:none; }


 
 
/*共通*/
.btn {
    display: flex;
    background: var(--gray);
    align-items: center;
    width: 300px;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 100px;
    font-size: clamp(1rem, 0.929rem + 0.357vw, 1.25rem);
    margin-top: 2rem;
    min-width: fit-content;

    & span{
		font-weight: 700;
		margin-right: 20px;
		transition: 0.3s;
	}

	& svg:not(.mailIcon,.outerLinkSvg) {
	    background: var(--blue);
	    border-radius: 100px;
	    padding: 7px;
	    transition: 0.5s cubic-bezier(0.38, -0.39, 0.19, 0.98);
	}
	& .outerLinkSvg{ width: 15px; }
	&:hover svg:not(.mailIcon) path{
		animation: arrow 0.4s cubic-bezier(0.29, 0.65, 0.62, 1) forwards;
		transition: 0.3s;
		color: #2c88d6;
	}
}
.btn:hover span,.telBtn:hover span{
	color: #459be3;
	transition: 0.3s;
}

@keyframes arrow{
	0%{
		transform:translateX(0px);
		opacity:1;
	}
	35%{
		transform:translateX(25px);
		opacity:1;
	}
	40%{
		transform:translateX(-25px);
		opacity:0;
	}
	41%{
		transform:translateX(-25px);
		opacity:1;
	}
	100%{
		transform:translateX(0px);
		opacity:1;
	}
}

.reveal {
	position: relative;
	display: inline-block;
	font-size: 3rem;
	font-weight: bold;
	color: transparent;
	overflow: hidden;
	transition: color 0s linear 0.8s;
}

.reveal::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #1264aa;
	z-index: 2;
}
.reveal.animated { color: var(--blue);}
.reveal.animated::before { animation: cover 0.8s ease forwards, uncover 0.8s ease forwards 0.8s;}

@keyframes cover {
	0%   { width: 0%; left: 0; }
	100% { width: 100%; left: 0; }
}

@keyframes uncover {
	0%   { width: 100%; left: 0; }
	100% { width: 0%; left: 100%; }
}

.slideIn{
    transition: transform 1s cubic-bezier(0.45, 0.73, 0.47, 1),opacity 0.5s cubic-bezier(0.85, 0.01, 0.47, 1);
    transform: translateY(30px);
    opacity: 0;
    &.visible{
	    transform: translateX(0px);
	    opacity: 1;
	}
}
.slideInWrap{
	overflow: hidden;
	width: -webkit-fill-available;
}

.innerWhiWrap{
	background: #fff;
    padding: 3rem;
    margin: 3rem 0;
    border-radius: 30px;
}
.badge{
	width: 30px;
	margin-left: 10px;
}
/*header*/
header{
    position: absolute;
    position: fixed;
    z-index: 100;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.1px solid #ffffffa6;
    backdrop-filter: blur(5px);
    transition: transform 0.4s ease;
    & ul{
		display:flex;
	    align-items: center;
		margin: 0;
		& li{
			padding: 0 0.5rem;
			& a{
				font-size: 15px;
				transition: 0.3s;
			}
		}
	}
	.brandlogo {content: url('img/osakagas-uk.png');}
	.groupLogo {content: url('img/daigas.png');}
	&.blueHeader{
		border-bottom: 0.1px solid #1a73e8;
		& a{ color: var(--blue); }
		& .hamburger span { background: var(--blue); }
		h1 .brandlogo { content: url('img/osakagas-uk-b.png'); }
		.groupLogo {content: url('img/daigas-b.png');}
	}
	& .hamburger.active span{ background: #fff; }
	&.hideHeader { transform: translateY(-100%); }
}

.brandlogo{ width:200px; }
.groupLogo{ 
	width:100px; 
	margin-top: 10px;
}

/*Eyecatch*/
.eyeCatchSection{
	height: 100vh;
	padding: 0;
	h2>span{
	    font-size: clamp(3.75rem, 2.25rem + 4vw, 4.25rem);
	    line-height: 1;
	    filter: drop-shadow(2px 2px 5px #00000070);
	}
}
.slider{
	position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    width: 100%;
}
.eyeCatchImg{ margin:0; }
.eyeCatchImg,.eyeCatchImg img {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
}
.eyeCatchSection h2{
    position: relative;
    top: 50%;
	left: 5vw;
    transform: translateY(-50%);
    width: fit-content;
    &  span:last-child{
    	line-height: 1.5;
    	margin-top: 0.5rem;
	    font-size: 16px;
	    font-weight: 400;
	    display: block;
	    width: fit-content;
	}
}
.horizontal-scroll {
  position: relative;
  overflow: hidden;
  /*height: 100vh;*/
}
/*intro*/
.introSection{
	position: relative;
	padding: 30vh 10vw;
	& h2{ margin-right: 2rem; }
}
.introImg{
	z-index: 5;
    position: relative;
    width: 90%;
    object-fit: cover;
    height: 300px;
    margin: 10vh -10vw 10vh auto;
    display: block;
    transform: translateX(100px);
    &>div {
	    border-top-left-radius: 150px;
	    border-bottom-left-radius: 150px;
	}
	& img{
		width: 100%;
	    object-fit: cover;
	    height: 300px;
	}
}
.circleSvg {
    position: absolute;
    left: 0;
    top: 0;

}
.circleDotSvg {
    position: absolute;
    right: 0;
    bottom: 0;
}
.cubeSvg{
    position: absolute;
    right: 0;
    bottom: 0;
}

/**/
.visionSection{
    border-top-left-radius: 200px;
    padding-top: 150px;
    margin-top: -200px;
    position: relative;
    transition:1s cubic-bezier(0.21, 0.11, 0.29, 0.96);
    transform:translateY(70px);

	& h2{ margin-bottom: 2rem; }
	&>.parallaxWrap{
		height: 350px;
		width: 100%;
		object-fit: cover;
		object-position: 50% 80%;
	    margin: 3rem 0;
	    &>div{
			height: 350px;
			border-radius: 30px;
		}
	}
	& .btn{
        margin: 3rem 0 0;
        border: 1px solid var(--blue);
        width: 200px;
	}
	&>div{
		& img { margin: 1rem 0 0; }
		& li{
			font-size: 14px;
			color: gray;
			& span{
				color:var(--orange);
				font-size: 14px;
			}
		}
	}
}


.visionSection,.linkSection{
    transition:1s cubic-bezier(0.21, 0.11, 0.29, 0.96);
    transform:translateY(70px);
	&.visible{ transform:translateY(0px); }
}

.driveSection{
    align-items: center;
    padding-top:15vh;
    padding-bottom:13vh;
    &>div:first-child{ margin-right: 2rem; }
}
.driveWrap{ min-width: 380px; }

.linkSection{
	border-top-right-radius: 200px;
	padding-top:15vh;
	& .linkExp{ margin: 2rem 0 3rem; }
	& .btn{
		position: relative;
		padding:0;
		display:block;
		&:first-child{ margin-bottom:6rem; }
		& .linkText{
			display: flex;
			align-items: center;
			position: absolute;
			right: 10%;
			bottom:10%;
			& span{
				font-size: clamp(1.25rem, 0.893rem + 1.786vw, 2.5rem);
				color: White;
			}
		}
		& img{
			width: 100%;
			border-radius:30px;
		}
	}
	&>div:first-child{ margin-bottom: 6rem; }

}

/*Policy*/
.linkWrap{
	& span{
		color:#000;
		font-weight: 700;
		transition: 0.3s;
		&:before {
		    content: '';
		    width: 12px;
		    height: 12px;
		    display: inline-block;
		    border-radius: 100px;
		    margin-right: 0.5rem;
		    background: var(--orange);
		}
	}
	& a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:hover span{ color: var(--orange); }
	}
	& svg{ width: 70px; }
	& div{ width: 100%; }
	& p {
	    color: #777777;
	    max-width: 90%;
	    font-size: 14px;
	    margin-top: 1rem;
	}
}
.social{
	margin-top: 2rem;
}

.innerWhiWrap>li:not(:last-child) {
    border-bottom: 1px solid #999999;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}


/*Portfolio*/
.revealImg {
  position: relative;
  overflow: hidden;
}

.revealImg img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s ease;
}

.revealImg.animated img { clip-path: inset(0 0 0 0);}
.portfolioH2Wrap{ padding:0vh 10vw 0vh;}
.portfolioH2Wrap.visible{  transform: translateY(30px); }
.orange {
    font-size: 14px;
    color: var(--orange);
}
.panelTag{
    background: var(--orange);
    border-radius: 100px;
    width: fit-content;
    padding: 0.3rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.portfolioSection{
	padding: 0;
	& h3{
		font-weight: 700;
		display: block;
		font-size: clamp(2rem, 1.714rem + 1.429vw, 3rem);
		margin:0.5rem 0;
	}
}
.panelText{
	padding:1vh 10vw;
	height:fit-content;
	& .subInfo{
		font-size: 20px;
		font-weight: 700;
        margin-right: 1rem;
	}
	& .infoWrap{ 
		align-items: center;
        margin-bottom: 1rem;
	}
	& img{
		width: 100%;
        border-radius: 24px;
	}
    & svg{ width: 18px; }
}

.panelPlace{
    align-items: center;
    &>p{
    	font-size: 14px;
	    font-style: italic;
	    font-family: serif;
	}
}
.horizontal-scroll {
	position: relative;
	overflow: hidden;
	
	& .inner {
		display: flex;
		width: 300vw;
		height: 100vh;
		will-change: transform;
	}
}
.panel {
	flex: none;
	width: 100vw;
	justify-content: center;
}
.LNGSection{
	padding-top:0;
	& .panel { width:100%; }
	& .panelText { padding: 0; }
	& .panelTag{ background: var(--blue); }
}
.curve {
	position: absolute;
	top: 0;
	left: 0;
	width: 300vw;
	height: 100vh;
	pointer-events: none;
	z-index: -1;
	will-change: transform;
	& path{
	    stroke-linecap: round;
	    stroke-dashoffset: 0 !important;
	}
}
.panelCircle{
    position: absolute;
    width: 500px;
    right: -25%;
}
.panelExp{
	margin-top: 1rem;
	& p{ font-size: 14px; }
}

/*Contact*/
.contactWrap{
	& .telMailWrap{ justify-content: space-around; }
	& a:first-child span{ color: #000;}
	& a:last-child span{ color: var(--blue);}
	& .btn{ margin: 0;	 }
	& h2 { margin-top: 15vh; }
}
.telBtn{
	    display: flex;
	    align-items: center;
	& span{
		font-size: clamp(1.25rem, 1.036rem + 1.071vw, 2rem);
		font-weight: 700;
		transition: 0.3s;
	}
}
.map-responsive {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 30%;
	overflow: hidden;
    border-radius: 30px;
    margin: 1rem 0;
    & iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

/*footer*/
footer{
	padding: 8vh 10vw 1vh;
	& a{
		line-height: 1.8;
		width: fit-content;
		transition: 0.3s;
		&:hover{
			color: #a8d5fb;
			transition: 0.3s;
		}
	}
	& li{ width: fit-content; }
}

.leftWrap{
	width:40%; 
	& a{
		font-size: 20px;
		width: fit-content;
	}
}
.centerWrap{ 
	width:20%; 
	margin-left: 10%;
}
.rightWrap{ width:20%; }
.address{
	font-size: 14px;
	margin: 0.7rem 0;
	width: 100%;
}
.copyRight,.copyRight>a,.copyRight>span{
	font-size: 12px;
	text-align: center;
	padding: 3rem 0 0;
}

.hamburger {
	display: none;
	right: 1rem;
	top: 0;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	z-index: 1001;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.hamburger span {
	display: block;
	width: 28px;
	height: 1px;
	margin: 3.5px 0;
	background: #fff;
	border-radius: 2px;
	transition: 0.4s;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.largeScr { display: none; }
.lgBr{ display:none; }
.portfolioH2{ 
	display:block; 
	padding: 10vh 10vw 0;
}
@media (min-width: 1200px) {
	.lgBr{ display:block; }
	.portfolioH2{ display:none; }
	.linkSection{ display: flex;}
    .linkSection h2 { font-size:36px; }
    .linkSection > div {
        width: 46%;
        padding-right: 4%;
    }

    .portfolioContainer {
        --before-transform: -100%;
	    &::before {
	        content: '';
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 20vw;
	        height: 100vh;
	        background: linear-gradient(0deg, #015c8c, #39ACB6);
	        z-index: 5;
	        transform: translateX(var(--before-transform));
	        border-top-right-radius: 200px;
	        border-bottom-right-radius: 200px;
	        filter: drop-shadow(2px 4px 5px #2e3a3b57);
	    }
	}

    .portfolioH2Wrap {
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        padding: 0;
		opacity: 1;
		& .reveal {
		    color: white;
		    &::before {display: none;}
		}
    }
    .panelText {
        padding-left: var(--panel-padding-left, 10vw);
        width: 65vw;
	}
}

.sp{ display:none; }
@media (max-width: 768px) {
	.sp{ display:block; }
	.hamburger { display: flex;}
	nav#global-nav {
		background: linear-gradient(0deg, #015c8c, #39ACB6);
		position: fixed;
		top: 0;
		right: 0;
		width: calc(100vw - 4rem);
		height: 100vh;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 80px 2rem 2rem 2rem;
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.45, 0.73, 0.47, 1);
		z-index: 1000;
		box-shadow: -2px 0 10px #0002;
		display: flex;
		&.open {
			transform: translateX(0);
			& li:not(:first-child,:last-child){
				border-bottom: 0.1px solid #ffffff59;
			}
		}
	}
	header{
		position:fixed;
		z-index:100;
		ul {
			flex-direction: column;
			width: 100%;
			padding: 0;
			& li {
				padding: 1.2rem 0;
				width: 100%;
				text-align: left;
			}
		}
		&.blueHeader{
			& a{ color: #fff; }
			.groupLogo {content: url('img/daigas.png');}
		}
	}
	.brandlogo{ width:150px; }
	.dispFlexResp{ display: block; }
	section {  padding: 10vh 20px;}
	.introSection{
	    padding-left: 30vh 20px;
	    & h2{ margin-bottom: 2rem;}
	    .introImg {
    	    width: inherit;
		    & img { height: 200px;}
		}
	}
	.visionSection{
	    border-top-left-radius: 80px;
	    & > .parallaxWrap {
            height: auto;
	        &>div { height: fit-content; }
	    }
	}
	.driveWrap{ margin-bottom: 2rem;}
	.driveSection{ padding-bottom: 0;}
	.panel{ height: inherit;}
	.panelText{
		padding:1vh 5vw;
		& .subInfo{
			font-size: 14px;
			font-weight: 400;
			margin-right: 0.5rem;
		}
	}
	.linkSection { border-top-right-radius: 80px;}
	.innerWhiWrap{ padding: 20px;}
	.btn{ width: inherit;}
	.contactWrap{
		& .innerWhiWrap{ padding: 15px;}
		& svg{ width: 24px;}

		& .btn{
            margin-top: 0.5rem;
            width: calc(100% - 30px);
            padding: 0.5rem 0.5rem 0.5rem 1rem;
            & span { margin-right: 10px;}
			& svg{ padding: 5px;}
		}
		& .telBtn {justify-content: center;}
	}
	main{ overflow-x: hidden;}
	footer{
		.leftWrap, .centerWrap,.rightWrap{ 
			width:100%;
			margin-left:0;
		}
	    .brandlogo { width: 100%;}
	}
	.map-responsive{ padding-bottom: 70%;}

	/* portfolio: vertical on mobile */
	.portfolioSection{ padding: 0; }
	.portfolioContainer{ position: relative; }
	.horizontal-scroll{ overflow: visible; height: auto; }
	.horizontal-scroll .inner{ display: block; width: auto; height: auto; transform: none !important; }
	.curve{ display: none; }
	.panel{ width: auto; padding: 0 0 6vh; }
	.panelText{ width: auto; }
}

@media (max-width: 340px) {
	.mailSvg{ display:none; }
}
.swiper-slide img {
  transition: transform 7s;
  transform: scale(1);
}
.swiper-slide.scaling img {
  transform: scale(1.03);
}