@charset "utf-8";

@media screen and (max-width: 768px) {
	@keyframes scrolldown {
	
	0% { bottom: 36vw;}
	50% { bottom: 32vw;}
	100% { bottom: 36vw;}
	
}
/* -------------------------------------------------------------------
#crosstalk_vol02
------------------------------------------------------------------- */
	.pconly { display: none;}
	.sponly { display: block !important;}
	
#crosstalk .breadcrumb {display: none!important;}

#crosstalk { width: 100%; position: relative;}
#crosstalk #mv { width: 100vw; height: inherit;}
#crosstalk #mv .mv_inner { position: relative; width: 100%; height: inherit; background: none; /*background: url("../../img/crosstalk/mv_img_sp.png")no-repeat center/cover;*/}
	#crosstalk #mv .mv_inner .mv_img { width: 100vw; height: auto;}
	#crosstalk #mv .mv_inner .mv_img img { width: 100%; height: auto;}
#crosstalk #mv .mv_inner .scroll_down { width: 5.17vw; height:18.4vw;position: absolute; bottom: 26vw; left: 16%; transform: translateX(-50%); animation: scrolldown 1.3s; animation-iteration-count: infinite;}

/*ページ共通*/
#crosstalk h1 { font-size: 13.3vw; font-weight: bold; letter-spacing: 0.1em; font-family: roboto, sans-serif; margin: 0 auto 0.8vw; letter-spacing: 0.04em;}
#crosstalk h2 { font-size: 5.33vw; font-weight: bold; letter-spacing: 0.04em; text-decoration: underline; margin: 0; margin: 10.13vw auto 10.66vw;}
#crosstalk h2 span { font-family: roboto, sans-serif;}
#crosstalk h3 { font-size: 4.266vw; font-weight: bold; margin: 0; line-height: 1.625em;}
#crosstalk .top-img { width: 100%; height: 64vw; overflow: hidden;}
#crosstalk .top-img img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
#crosstalk .min { font-size: 3.73vw; text-align: right; margin: 0; width: 87.73vw; text-align: right; margin: 2.13vw auto 0;}
#crosstalk .txt { line-height: 2.5em; font-size: 4.266vw; margin: 0; text-align: left; width: 88vw; margin: 0 auto;}
#crosstalk .wrapper .txt { line-height: 2.5em;}
#crosstalk .wrapper .txt span.name{ font-weight: bold;}
#crosstalk .wrapper .txt span.blue{ color: #0057AA;}
#crosstalk .wrapper .txt span.red{ color: #E43C00;}
#crosstalk .wrapper .txt span.line { background: linear-gradient(transparent 30%, #FFEC00 30% 90%, transparent 90%); padding-bottom: 0.6%; font-weight: bold; letter-spacing: 0.04em;}
#crosstalk .wrapper { padding: 0; margin: 21.86vw auto 0;}
#crosstalk .wrapper h2 { font-size: 5.33vw; text-decoration: none; margin: 0; position: relative; margin-bottom: 15.46vw; text-align: center;}
#crosstalk .wrapper h2 span { font-size: 8.53vw; font-weight: bold;}
#crosstalk .wrapper h2::before { position: absolute; content: ''; width: 19.2vw; height: 19.2vw;  top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}


#crosstalk #sec01 { text-align: center;}
	#crosstalk #sec01 .sec01_top-box {padding: 19.46vw 0 13.06vw; background: #EAEEF1;}
#crosstalk #sec01 .sec01_top-img { width: 100%; height: 64vw; overflow: hidden;}
#crosstalk #sec01 .sec01_top-img img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
#crosstalk #sec01 .sec01_box { width:100%; margin: 0 auto; background: #F7B400; position: relative; z-index: 1;}
#crosstalk #sec01 .sec01_box-inner { display: block; padding: 9.86vw 0 10.6vw;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-left { width: 88vw; margin: 0 auto;}
#crosstalk #sec01 .sec01_box-inner .txt { text-align: left; width: 100%; font-size: 4.266vw;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-right { width: 88vw; margin: 0 auto;}
#crosstalk #sec01 .sec01_box-inner h2 { text-decoration: none; line-height: 1em; margin: 0 0 4.53vw; font-size: 7.46vw;}
#crosstalk #sec01 .sec01_box-inner h2 span { display: inline-block !important; font-size: 4.266vw; margin-left: 2vw;}
#crosstalk #sec01 .sec01_box-inner h3 { margin-bottom: 5.6vw; line-height: 1.3em; letter-spacing: 0.08em;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center { width: 30.14vw;height: 30.13vw; margin: 0 auto; padding: 0;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span { width: 21.3vw; height: 1.06vw; background: #FFE100; display: block; margin: 0 auto;    position: relative;
    top: 40%;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span:nth-child(1) {transform: rotate(45deg)translateY(-50%);}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span:nth-child(2) {transform: rotate(-45deg)translateY(-50%);top: 36%;}
#crosstalk #sec01 .sec01_wrapper.wrapper h2::before {background: #F7B400;}
#crosstalk #sec02 .sec02_wrapper.wrapper h2::before {background: #268FCF;}
#crosstalk #sec03 .sec03_wrapper.wrapper h2::before {background: #FFE100;}
#crosstalk #sec04 .sec04_wrapper.wrapper h2::before {background: #B7D100;}
#crosstalk #sec05 .sec05_wrapper.wrapper h2::before {background: #E3007F;}
#crosstalk #sec01,#sec02,#sec03,#sec04,#sec05 { margin-bottom: 16vw;}
#crosstalk .btn-area { width: 100%; margin-left: auto;  text-align: center; margin-top: 10.6vw; display: block;}
#crosstalk #sec05 .btn-area { width: 100%; margin-left: auto;}
#crosstalk .modal-content h2::before { content: none;}
#crosstalk .column_btn { font-size: 4.266vw; position: relative; overflow: hidden; text-decoration: none; display: inline-block; border: 0.8vw solid #000; text-align: center; outline: none; transition: ease .1s;background-color: #000; padding:0.85em 6.1em; background-image: url("../../img/crosstalk/btn_arrow_w.svg"); background-repeat: no-repeat; background-size: 2.66vw; background-position: right 10% top 50%; font-weight: bold;line-height: 1.5em; margin: 0 auto 5.33vw; }
#crosstalk #sec01 .column_btn.btn02 { margin-right: 0;}
#crosstalk .column_btn:last-child { margin: 0;}
#crosstalk .js-modal-close.column_btn { margin: 0 !important;}
#crosstalk .column_btn span { position: relative; z-index: 3; color:#fff; font-size: 4.266vw;}
#crosstalk .column_btn:hover { color:#000; }
#crosstalk .column_btn:hover span{  color:#000; color: #000!important;}
#crosstalk .column_btn:before { content: '';  position: absolute; top: 0; left: 0; z-index: 2; background:#fff; width: 100%;  height: 100%; transition: transform .2s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: left top; color: #000;background-image: url("../../img/crosstalk/btn_arrow_b.svg");background-repeat: no-repeat; background-size: 2.66vw; background-position: right 10% top 50%;}
#crosstalk .column_btn:hover:before{  transform-origin:left top; transform:scale(1, 1);}


/* モーダル全体(背景＋本体) */
.modal{ z-index: 13; display: none; position: fixed;  top: 0;  height: 100vh;  width: 100%;}
/* モーダル背景 */
.modal-bg{  position: absolute;  height: 100vh;  width: 100%;  background: rgba(0, 0, 0, 0.4);}
/* モーダル本体 */
.modal-content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  overflow: scroll; /* はみ出た部分はスクロールさせる */ width: 88vw; max-width: 780px; background: #fff; padding: 26.4vw 10.6vw 16vw; box-sizing: border-box; box-shadow: 0 0 30px rgb(0 0 0 / 30%); text-align: center;}
/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed { position: fixed; width: 100%; height: 100%; left: 0;}
.modal-label { background: #000; color: #fff; display: inline-block; position: absolute; top: 0; left: 0; text-align: center; margin: 0; font-weight: bold;line-height: 2.08em; font-size: 4.266vw; letter-spacing: 0.04em; padding: 0 7.24vw;}
.modal-content a {color: #268FCF; display: inline-block;}
.close_btn { position: absolute; top: 0; right: 0; width: 57px; line-height: 1.5em; height: 57px; font-size: 38px; text-decoration: none; color: #000 !important; display: inline-block; cursor: pointer;}
.modal-content p { line-height: 2.25em; margin: 0 0 8vw; text-align: left; font-size:  4.266vw;}
.modal-content h2 { margin: 0 0 8vw !important; line-height: 1.66em; text-decoration: none !important;  font-size: 6.4vw !important;}
.modal-content img { width: 100%;}
.modal-img { width: 100%; margin: 0 auto 10.66vw;}
#modal01 .modal-img { width: 100%;}
#modal03 .modal-img { width: 100%;}
	.modal-txt { font-size: 16px;}
	#modal06 .modal-content { padding: 26.4vw 0 16vw; }
	#modal06 .modal-content .modal-txt { padding: 0 10.6vw; }
	#modal06 .modal-content .modal-img { width: auto; padding: 0 10.6vw; }
	#modal07 .modal-content { padding: 26.4vw 0 16vw; }
	#modal07 .modal-content .modal-txt { padding: 0 10.6vw; }
	#modal07 .modal-content .modal-img { width: auto; padding: 0 10.6vw; }
	#modal08 .modal-content { padding: 26.4vw 0 16vw; }
	#modal08 .modal-content .modal-txt { padding: 0 10.6vw; }
	#modal08 .modal-content .modal-img { width: auto; padding: 0 10.6vw; }
	
#modal02 .modal-content { transform: translate(-50%, -16%);}
#modal02 .modal-bg { height: 270vh;}
#modal03 .modal-content { transform: translate(-50%, -19%);}
#modal03 .modal-bg { height: 225vh;}
#modal04 .modal-content { transform: translate(-50%, -18%);}
#modal04 .modal-bg { height: 242vh;}
#modal05 .modal-content { transform: translate(-50%, -31%);}
#modal05 .modal-bg { height: 150vh;}
#modal06 .modal-content { transform: translate(-50%, -37%);}
#modal06 .modal-bg { height: 160vh;}
#modal07 .modal-content { transform: translate(-50%, -36%);}
#modal07 .modal-bg { height: 134vh;}
#modal08 .modal-content { transform: translate(-50%, -38%);}
#modal08 .modal-bg { height: 128vh;}
#modal09 .modal-content { transform: translate(-50%, -20%);}
#modal09 .modal-bg { height: 230vh;}
.btn02 { margin-right: 0;}
	
.modal-min { font-size: 4.266vw !important; text-align: left; margin: 5.33vw auto 10.66vw; padding: 0 10.6vw;}
}