@charset "utf-8";

/* 20240619 solution */

#solution-list .block {
	padding-block: calc(var(--m) * 7);
}
#solution-list .label {
	filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}



/* common */

.journal_reference{
	display: none!important;
}

@media screen and (min-width:481px){
	section.hero .tagline{
		--fs: calc(var(--base-fs) * 54);
		right: calc(var(--billboard-width) - 1.5vw);
	}
	section.general .subline::before{
		--size: min(2.25vw, 45px);
	}	section.general .subline{
		font-size: calc(var(--base-fs) * 27.5);
	}
	section.cta-large .title{
		font-size: calc(var(--base-fs) * 41);
	}
	.footer-cta a.nav-page-top{
		--bg: var(--black);
	    --hover-bg: var(--gray);
	    width: min(5.75vw, 120px);
	    padding: calc(var(--m) * 1.5) 0;
	    font-size: calc(var(--base-fs) * 17);
	    right:1.5vw;
	    gap: calc(var(--m) * 0.25);
	}
}

@media screen and (max-width:480px){
	ol{
		padding: 0 0 0 1.5em;
	}
	.header .header-nav > a.nav-about,
	.header .header-nav > a.nav-strength,
	.header .header-nav > a.nav-flow,
	.header .header-nav > a.nav-partners,
	.header .header-nav > a.nav-case{
		padding: calc(var(--m) * 1) 0;
	}
	section.hero::before{
		height: calc(100% + var(--header-height) + calc(var(--m) * 3.5));
	}
	section.hero .tagline{
		padding: calc(var(--m) * 2) 0 calc(var(--m) * 2) 10%;
	}
	section.hero .billboard{
		aspect-ratio: 7.5 / 5;
		margin: 0 0 calc(var(--m) * 3.5 - 1px) auto;
	}
	section.cta-short{
		padding: calc(var(--m) * 2) calc(var(--m) * 2);
	}
	section.cta-short::before{
		width: 17.5vw;
		top: 2.5vw;
	}
	section.cta-short .title{
		margin-bottom: 0;
	}
	section.cta-short a[class*="nav-"] img,
	section.cta-large a[class*="nav-"] img{
		width: auto;
	}
	section.general{
		padding-top: calc(var(--m) * 4);
	}
	section.general .subline::before{
		--size: 25px;
	}
	.footer-cta {
		padding: 0;
		gap: 0;
	}
	.footer-cta a.nav-page-top{
		width: 30%;
		font-size: calc(var(--base-fs) * 16);
	}
	.footer-cta .nav-partnership,
	.footer-cta .nav-contact{
		display: none!important;
	}
	.footer-nav{
		--gap: calc(var(--m) * 0.25);
	}
}


/* home */

#home-case a.nav-case,
#partnership-intro a.nav-case {
    --link: var(--black);
    --visited: var(--link);
    --bg: var(--white);
    --hover: var(--white);
    --hover-bg: var(--black);
    --arrow-width: 32px;
    --arrow-height: 10px;
    --border: var(--link);
    --border-weight: 1px;
    --hover-border: var(--hover);
    min-width: 11vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    box-sizing: border-box;
    padding: calc(var(--m) * 0.5) var(--m);
    box-shadow: inset 0 0 0 var(--border-weight) var(--border);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    gap: 0 calc(var(--m) * 0.75);
    font-size: var(--fs);
    font-weight: bold;
    white-space: nowrap;
    --color: var(--white);
    --bg: var(--black);
    --hover-bg: var(--rouge);
    --border: transparent;
    font-size: calc(var(--base-fs) * 18);
    margin-top: calc(var(--m) * 4);
    width: 20vw;
    padding: var(--m) calc(var(--m) * 2);
}

#home-case a.nav-case::after,
#partnership-intro a.nav-case::after {
    flex-shrink: 0;
    display: block;
    width: var(--arrow-width);
    height: var(--arrow-height);
    border-right: calc(var(--border-weight) * 1.3) solid var(--color);
    border-bottom: var(--border-weight) solid var(--color);
    transform: skewX(35deg);
}

@media screen and (min-width:481px){
	#home-about .container{
		--gap: calc(var(--m) * 5);
	}
	
	#home-about .movie{
		width: 55%;
		height: 100%;
	}
	
	#home-about .diagram .image{
		width: 67.5vw;
	}
	
	#home-case{
		position: relative;
	}
	
	#home-case::before{
		height: 95%;
	}
	
	#home-case img.image{
		width: 37.5vw;
		max-width: 600px;
		position: absolute;
		right: 9.5vw;
	}
}
@media screen and (max-width:480px){
	#home-billboard {
		min-height: 90vw;
	}
	#home-billboard::before{
		height: calc(100% + var(--header-height) + var(--m) * 9.25);
	}
	#home-billboard video.billboard{
		margin: calc(var(--m) * 4) 0 calc(var(--m) *  7.5) auto;
	}
	#home-billboard .subline{
		left:5vw;
		font-size: calc(var(--base-fs) * 16);
	}
	#home-about a.nav-partnership .heading{
		justify-content: flex-start;
		gap: calc(var(--m) * 1.5);
	}
	#home-about a.nav-partnership .icon{
		height: 14.5vw;
		width: auto;
	}
	#home-about a.nav-partnership p{
		padding: var(--m) calc(var(--m) * 1.5);
	}
	#home-case a.nav-case,
	#partnership-intro a.nav-case{
		width: 100%;
	}
	#home-case {
		padding-bottom: 0;
	}
	#home-case .image {
		margin-bottom: calc( var(--m) * 2 );
	}
}

/* about */

@media screen and (min-width:481px){
	#about-statement h2{
		letter-spacing: 0.1em;
	}
	
	#about-statement p{
		letter-spacing: 0.1em;
	}
	
	#about-statement p.lead_bold{
		font-weight: bold;
		letter-spacing: 0.12em;
	}
	
	#about-statement img.statement-copy{
		width: 10.5vw;
		max-width: 170px;
	}
	
	#about-diagram .title{
		font-size: calc(var(--base-fs) * 41);
	}
	
	#about-diagram img{
		max-width: 90%;
	}
}

/* strength */

@media screen and (min-width:481px){
	#strength-intro .block .title{
		font-size: calc(var(--base-fs) * 35);
	}
	
	#strength-intro p{
		text-align: justify;
		text-justify: inter-ideograph;
	}
}

/* flow */

#flow-price{
	--subline-bg: var(--sky);
}
section.general#flow-price .subline:first-letter,
section.general#flow-intro .subline:first-letter{
	color: #fff;
}

#flow-price h3{
	font-weight: bold;
	display: inline-block;
	background: var(--navy);
	color: #fff;
	position: relative;
	padding: 0.5rem 2rem;
	top:-2rem;
}

@media screen and (min-width:481px){	
	#flow-price .lead{
		margin-bottom: calc(var(--m) * 7.5);
	}
	
	#flow-price dl{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-wrap: wrap;
		margin: -1rem 0 1rem 0;
	}
	#shipper-case{
		margin-bottom: calc(var(--m) * 10);
	}
	#flow-price dt{
		width: 30%;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		padding: 1rem 0;
	}
	#flow-price dd{
		width: 70%;	
		margin: 0;
		border-bottom: 1px solid #ccc;
		padding: 1rem 0;
	 }
	
	#flow-price .note{
		font-size: 1.1rem;
	}
	
	#flow-intro .lead{
		margin-bottom: 0;
	}
}

@media screen and (max-width:480px){
	#flow-price{
		padding-bottom: 25vw;
	}
	#flow-price dt{
		font-weight: bold;
	}
	#flow-price dd{
		margin: 0;
		border-bottom: 1px solid #ccc;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}
}

/* case */

#case-list::before{
	background: linear-gradient(to right, var(--gradient-set));
	left:auto;
	right:0;
	height: 74%;
}

section.case{
	--gap: calc(var(--m) * 2);
}

section.case:not(:last-of-type){
	margin-bottom: calc(var(--m) * 1);
}

section.case:not(:first-of-type){
	margin-top: calc(var(--m) * 10);
}

.index-casestudy-tab,
.index-casestudy-outline{
	display: none;
}

.js-accordion-contents{
	display:none;
}

.index-casestudy-item {
    /*padding: 20px 15% 20px 5%;*/
    position: relative;
    border-bottom: 1px solid #d5d5d5;
}
.index-casestudy-item p:not(:last-child){
	margin-bottom: 0!important;
}
.index-casestudy-item .index-casestudy-body.js-accordion-contents{
	padding: 3rem 15% 3rem 5%;	
}
.index-casestudy-item .index-casestudy-body.js-accordion-contents p{
	font-size: calc(var(--base-fs) * 16);
	padding: 0 0 1rem 0;
	text-align: justify;
	text-justify: inter-ideograph;
}
.index-casestudy-item .index-casestudy-body.js-accordion-contents p:last-child{
	padding: 0 0 0 0;
}

.index-casestudy-item strong{
	font-weight: bold;
}

.index-casestudy-title {
    font-size: calc(var(--base-fs) * 22.5);
    font-weight: 700;
    cursor: pointer;

	padding: 20px 15% 20px 5%;
}
.index-casestudy-title.active {
	padding-bottom: 0;
}

.index-casestudy-arrow {
    display: block;
    width: 14px;
    height: 14px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -webkit-transform: translate(0, 50%) rotate(135deg);
    transform: translate(0, 50%) rotate(135deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.25,.46,.45,.94);
    transition: -webkit-transform .2s cubic-bezier(.25,.46,.45,.94);
    transition: transform .2s cubic-bezier(.25,.46,.45,.94);
    transition: transform .2s cubic-bezier(.25,.46,.45,.94), -webkit-transform .2s cubic-bezier(.25,.46,.45,.94);
    position: absolute;
    right: 35px;
    top: 20px;
}
.index-casestudy-title.active .index-casestudy-arrow {
    -webkit-transform: translate(0, 100%) rotate(-45deg);
    transform: translate(0, 100%) rotate(-45deg);
}

@media screen and (max-width:480px){
	.index-casestudy-item{
		padding: 20px 5% 20px 5%;
	}
	.index-casestudy-title{
		font-size: calc(var(--base-fs) * 20);
		padding-right: 15%;
	}
	.index-casestudy-arrow{
		width: 12px;
		height: 12px;
		right:5%;
		top:40px;
	}
}


/* archive */

@media screen and (min-width:481px){
	#archive-list .block.movie::before{
		height: 107.5%;
	}
}
@media screen and (max-width:480px){
	#archive-list .block.movie::before{
		height: 108.5%;
	}	
}