@charset "UTF-8";

/*------------------------------------------------------------------------------------
          
UNIQ / CROSS-TALK / 同期座談会
									
------------------------------------------------------------------------------------*/

#crossTalkContents {
	position: relative;
	z-index: 10;
}


/*------------------------------------------------------ MEMBERS */

.members {
	width: 100%;
	background-color: rgba(0,30,63,.2);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	padding: 80px 20px 120px;
}

/*------- IE11 */

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .members { background-color: rgba(0,30,63,.95);}
}

.members .membersHead {
	font-size: 1.8rem;
    line-height: 1.1;
    letter-spacing: 1rem;
    text-indent: 1rem;
    text-align: center;
    color: #1cc0e2;
}

.members .membersInner {
	padding: 0 7.5%;
	margin-top: 45px;
}

.members .membersInner .membersList {
}

.members .membersInner .membersList li + li {
	border-top: 1px solid rgba(230,233,236,.2);
    margin-top: 60px;
    padding-top: 60px;
}

.members .membersInner .membersList li .membersImg {
    width: 100%;
    margin: 0 auto;
	position: relative;
}

.members .membersInner .membersList li .membersImg figure {
	width: 75%;
	margin: 0 auto;
}

.members .membersInner .membersList li .membersImg figure img {
	display: block;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.members .membersInner .membersList li .membersImg figure figcaption {
	display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: .1rem;
    color: #fff;
    position: absolute;
    top: -1.1rem;
    left: 0;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

.members .membersInner .membersList li .membersTxt {
    margin-top: 20px;
}

.members .membersInner .membersList li .membersTxt .name {
	font-size: 2.2rem;
    line-height: 1.5;
    color: #fff;
}

.members .membersInner .membersList li .membersTxt .career {
	line-height: 1.5;
    color: #fff;
    margin-top: 10px;
}

.members .membersInner .membersList li .membersTxt .detail {
	line-height: 1.8;
    color: #fff;
    opacity: .8;
	margin-top: 20px;
}


/*------------------------------------------------------ SECTION */

#crossTalk .section {
	padding-top: 0;
    margin-top: 0;
	background-color: #104195;
}

#crossTalk .section .sectionInner {
}

#crossTalk .section .sectionInner .sectionTxt {
	width: calc(100% - 20px);
    padding: 45px 7.5%;
    background-color: #1cc0e2;
    margin: -40px 0 0;
    position: relative;
    z-index: 10;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead {
	text-align: center;
	padding-left: 20px;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.en {
    display: inline-block;
	font-size: 2.6rem;
    letter-spacing: .5rem;
    border-bottom: 1px solid #001e3f;
    margin-bottom: 30px;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.jp {
    display: block;
	font-size: 1.8rem;
    width: 100%;
    text-align: left;
}


/*CHAT*/

.chat {
    width: 100%;
    padding: 40px 20px 30vw;
}

.chat .chatInner {
	width: 100%;
    display: flex;
	justify-content: space-between;
}

.chat .chatInner + .chatInner {
	margin-top: 40px;
}

.chat .chatInner:nth-child(2n+1) {
	flex-direction: row-reverse;
}

.chat .chatInner .chatTxt {
    width: calc(100% - 85px);
    background-color: #e6e9ec;
    padding: 7.5vw;
    position: relative;
    box-shadow: 0 5px 10px rgba(17,27,49,.5);
	border-radius: 10px;
	transform: translate(0,15px);
	opacity: 0;
	transition: all 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

.chat .chatInner.in .chatTxt {
	transform: translate(0,0);
	opacity: 1;
}

.chat .chatInner:nth-child(2n+1) .chatTxt:after {
	content: "";
    display: block;
    width: 20px;
    height: 15px;
    background: url(../../../images/crosstalk/fukidashi-1.svg) center center / 20px 15px no-repeat;
    position: absolute;
    top: 20px;
    left: -15px;
}

.chat .chatInner:nth-child(2n) .chatTxt:after {
	content: "";
    display: block;
    width: 20px;
    height: 15px;
    background: url(../../../images/crosstalk/fukidashi-2.svg) center center / 20px 15px no-repeat;
    position: absolute;
    top: 20px;
    right: -15px;
}

.chat .chatInner .chatTxt dt {
}

.chat .chatInner .chatTxt dd {
	line-height: 1.8;
	margin-top: 8px;
}

.chat .chatInner .chatImg {
	width: 60px;
}

.chat .chatInner .chatImg img {
	display: block;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
	transform: scale(0);
	transition: all 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

.chat .chatInner.in .chatImg img {
	transform: scale(1);
}


/*------------------------------------------------------ LINK-BOX */

#crossTalk .linkBox .linkBoxInner ul li a .linkBoxTitle p span.en > span {
    font-size: 80%;
}


/*------------------------------------------------------ SLIDE */

#crossTalk .slide {
	width: 100%;
	height: 100vw;
	background: url(../../../images/crosstalk/slide1-sp.jpg) center center / cover no-repeat;
	animation: slideSP 4000ms steps(1) infinite;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

@keyframes slideSP {
	0%,100% { background: url(../../../images/crosstalk/slide1-sp.jpg) center center / cover no-repeat; }
	16.6% { background: url(../../../images/crosstalk/slide2-sp.jpg) center center / cover no-repeat; }
	33.2% { background: url(../../../images/crosstalk/slide3-sp.jpg) center center / cover no-repeat; }
	49.8% { background: url(../../../images/crosstalk/slide4-sp.jpg) center center / cover no-repeat; }
	66.4% { background: url(../../../images/crosstalk/slide5-sp.jpg) center center / cover no-repeat; }
	83% { background: url(../../../images/crosstalk/slide6-sp.jpg) center center / cover no-repeat; }
}

#crossTalk .slide:after {
	content: "";
    display: block;
    width: 110%;
    height: 110%;
    background: url(../../../images/common/dots-3-3-100.png);
    background-repeat: repeat;
    background-size: 3px 3px;
    position: absolute;
    top: -5%;
    left: -5%;
    z-index: 5;
}




/*------------------------------------------------------------------------------------

以下 TAB 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 500px) {

/*------------------------------------------------------ MEMBERS */

.members {
    padding: 80px 20px;
}

.members .membersInner {
    margin-top: 60px;
}

.members .membersInner .membersList li {
	display: flex;
	justify-content: space-between;
}

.members .membersInner .membersList li:nth-child(2n) {
    flex-direction: row-reverse;
}

.members .membersInner .membersList li .membersImg {
    width: 33.3333%;
	margin: 0;
	padding: 0 0 0 30px;
}

.members .membersInner .membersList li:nth-child(2n) .membersImg {
	padding: 0 30px 0 0;
}

.members .membersInner .membersList li .membersImg figure {
    width: 100%;
}

.members .membersInner .membersList li:nth-child(2n) .membersImg figure figcaption {
    left: auto;
    right: 0;
    transform: rotate(90deg) translate(100%, 100%);
    transform-origin: bottom right;
}

.members .membersInner .membersList li .membersTxt {
	width: calc(66.6666% - 7.5vw);
	margin-top: 0;
}


/*------------------------------------------------------ SECTION */

#crossTalk .section .sectionInner .sectionTxt {
    width: calc(100% - 20px - 7.5%);
    padding: 45px 7.5%;
    background-color: #1cc0e2;
    margin: 0;
    position: relative;
    z-index: 10;
}

#crossTalk .section .sectionInner .sectionTxt {
	padding: 90px 7.5%;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead {
    display: flex;
    align-items: center;
    text-align: left;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.en {
    width: 50px;
    display: block;
    letter-spacing: .5rem;
    border-bottom: none;
    margin-bottom: 0;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.jp {
    width: calc(100% - 50px);
    padding-left: 35px;
    border-left: 1px solid #001e3f;
}


/*CHAT*/

.chat {
    width: 100%;
    padding: 0 20px 15vw;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

.chat .chatInner {
	padding: 0 7.5vw;
}

.chat .chatInner .chatImg {
    width: 100px;
}

.chat .chatInner .chatTxt {
    width: calc(100% - 150px);
	left: 20px;
}

.chat .chatInner:nth-child(2n+1) .chatTxt {
	left: -20px;
}

/*------------------------------------------------------ SLIDE */

#crossTalk .slide {
	width: 100%;
	height: 41.6666vw;
	background: url(../../../images/crosstalk/slide1-pc.jpg) center center / cover no-repeat;
	animation: slidePC 4000ms steps(1) infinite;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

@keyframes slidePC {
	0%,100% { background: url(../../../images/crosstalk/slide1-pc.jpg) center center / cover no-repeat; }
	16.6% { background: url(../../../images/crosstalk/slide2-pc.jpg) center center / cover no-repeat; }
	33.2% { background: url(../../../images/crosstalk/slide3-pc.jpg) center center / cover no-repeat; }
	49.8% { background: url(../../../images/crosstalk/slide4-pc.jpg) center center / cover no-repeat; }
	66.4% { background: url(../../../images/crosstalk/slide5-pc.jpg) center center / cover no-repeat; }
	83% { background: url(../../../images/crosstalk/slide6-pc.jpg) center center / cover no-repeat; }
	
}


}


/*------------------------------------------------------------------------------------

以下 PC 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 900px) {

/*------------------------------------------------------ MEMBERS */

.members {
    padding: 120px 0;
}

.members .membersHead {
	font-size: 2.4rem;
    letter-spacing: 3.2rem;
    text-indent: 3.2rem;
}

.members .membersInner {
	padding: 0;
}

.members .membersInner .membersList {
	width: 800px;
	margin: 0 auto;
}

.members .membersInner .membersList li {
	align-items: center;
}

.members .membersInner .membersList li + li {
    border-top: none;
    margin-top: 60px;
    padding-top: 0;
}

.members .membersInner .membersList li .membersImg {
    width: 200px;
    margin: 0;
    padding: 0;
}

.members .membersInner .membersList li:nth-child(2n) .membersImg {
    padding: 0;
}

.members .membersInner .membersList li .membersTxt {
    width: 540px;
}

.members .membersInner .membersList li .membersTxt .name {
    font-size: 2.6rem;
}

.members .membersInner .membersList li .membersTxt .detail {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(230,233,236,.2);
}

.members .membersInner .membersList li .membersImg figure figcaption {
    font-size: 1.2rem;
	top: -1.2rem;
    transform: rotate(90deg) translate(0,300%);
}

.members .membersInner .membersList li:nth-child(2n) .membersImg figure figcaption {
    top: -1.2rem;
    transform: rotate(90deg) translate(100%, -200%);
}


/*------------------------------------------------------ SECTION */

#crossTalk .section .sectionInner {
	background: linear-gradient(-90deg, #104195 0%, #104195 50%, #1cc0e2 50%, #1cc0e2 100%);
}

#crossTalk .section .sectionInner .sectionTxt {
    width: 900px;
    padding: 120px 50px;
    margin: 0 auto;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead {
	padding: 0;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.en {
    width: 80px;
    font-size: 3.6rem;
}

#crossTalk .section .sectionInner .sectionTxt .sectionHead span.jp {
    width: calc(100% - 80px);
	font-size: 2.6rem;
    padding-left: 40px;
}


/*CHAT*/

.chat {
    width: 800px;
    padding: 0 0 10vw;
    margin: -40px auto 0;
}

.chat .chatInner {
    padding: 0;
}

.chat .chatInner .chatTxt {
    width: 600px;
    left: 60px;
	padding: 50px;
}

.chat .chatInner:nth-child(2n+1) .chatTxt {
    left: -60px;
}


/*------------------------------------------------------ LINK-BOX */

#crossTalk .linkBox .linkBoxInner {
	width: 100%;
	overflow: hidden;
	background-color: #001e3f;
}

#slide {
	display: block;
	width: 100%;	
}

#slide li {
    width: 33.3333%;
}

#slide li a {
	cursor:grab;
}

#slide li a:active {
	cursor:grabbing;
}

/*------------------------------------------------------ SLIDE-GUIDE */

#crossTalk #slideGuide {
    height: 450px;
	top: auto;
    bottom: 0;
}


}