@charset "utf-8";

/* -------------------------------------------------------------------
#tour
------------------------------------------------------------------- */
@keyframes scrolldown {
	
	0% { bottom: 30px;}
	50% { bottom: 10px;}
	100% { bottom: 30px;}
	
}


.sponly { display: none !important;}
body { margin: 0;font-family: 'Noto Sans JP', sans-serif; overflow-x: hidden;}
.breadcrumb {padding-top: 12px; padding-bottom: 12px; border-radius: 0; margin: 0; font-size: 14px;}
.breadcrumb {margin: 0 auto; padding-left: 20px; width: 100%; max-width: 940px;}
.breadcrumb li { display: inline-block; vertical-align: middle !important; color: #fff;}
.breadcrumb li+li:before { content: "> "; padding: 0 5px; color: #fff;}
.breadcrumb>.active { color: #fff;}
.breadcrumb a { color: #fff; font-weight: 500; text-decoration: none;}

#crosstalk { width: 100%; position: relative;}
#crosstalk .breadcrumb { position: absolute; top: 0; left: 0; z-index: 10;}
#crosstalk #mv { width: 100vw;     height: calc(100vh - 80px);}
#crosstalk #mv .mv_inner { position: relative; width: 100%; height: 100%; background: url("../../img/crosstalk/mv_img.png")no-repeat center/cover;}
#crosstalk #mv .mv_inner img { width: 100%; height: 100%;}
#crosstalk #mv .mv_inner .scroll_down { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: scrolldown 1.3s; animation-iteration-count: infinite;}

/*ページ共通*/
#crosstalk h1 { font-size: 80px; font-weight: bold; letter-spacing: 0.1em; font-family: roboto, sans-serif; margin: 0 auto 3px; }
#crosstalk h2 { font-size: 32px; font-weight: bold; letter-spacing: 0.04em; text-decoration: underline; margin: 0; margin: 38px auto 67px;}
#crosstalk h2 span { font-family: roboto, sans-serif;}
#crosstalk h3 { font-size: 20px; font-weight: bold; margin: 0; line-height: 1em;}
#crosstalk .top-img { width: 100%; height: auto;}
#crosstalk .top-img img { width: 100%; height: auto;}
#crosstalk .min { font-size: 14px; text-align: right; margin: 0; max-width: 1200px; width: 100%; text-align: right; margin: 8px auto 0;}
#crosstalk .txt { line-height: 2em; font-size: 16px; margin: 0; text-align: left;}
#crosstalk .wrapper .txt { line-height: 2.75em;}
#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;}
#crosstalk .wrapper { padding: 0 7.1%; margin: 143px auto 0; max-width: 1200px;}
#crosstalk .wrapper h2 { text-decoration: none; margin: 0; position: relative; margin-bottom: 120px; text-align: center;}
#crosstalk .wrapper h2 span { font-size: 50px; font-weight: bold;}
#crosstalk .wrapper h2::before { position: absolute; content: ''; width: 170px; height: 170px;  top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}


#crosstalk #sec01 { text-align: center;}
#crosstalk #sec01 .sec01_top-box{ background: #EAEEF1; padding: 53px 0 67px;}
#crosstalk #sec01 .sec01_top-img { width: 100%; height: auto;}
#crosstalk #sec01 .sec01_top-img img { width: 100%; height: auto;}
#crosstalk #sec01 .sec01_box { max-width: 1200px; margin: -140px auto 0; background: #F7B400; position: relative; z-index: 1; width: 88%;}
#crosstalk #sec01 .sec01_box-inner { display: flex; justify-content: space-between; padding:2.271% 8.53%;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-left { width: 41.33%;}
#crosstalk #sec01 .sec01_box-inner .txt { text-align: left;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-right { width: 41.33%;}
#crosstalk #sec01 .sec01_box-inner h2 { text-decoration: none; line-height: 1em; margin-bottom: 17.5px;}
#crosstalk #sec01 h2.top_txt { margin-bottom: 0;}
#crosstalk #sec01 .sec01_box-inner h3 { margin-bottom: 30px; line-height: 1.3em;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center { width: 15.33%; padding-top: 12%;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span { width: 140px; height: 4px; background: #FFE100; display: block; margin: 0 auto;}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span:nth-child(1) {transform: rotate(45deg);}
#crosstalk #sec01 .sec01_box-inner .sec01_box-center span:nth-child(2) {transform: rotate(-45deg); top: -4px; position: relative;}
#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: 80px;}
#crosstalk .btn-area { width: 65%; margin-left: auto;  text-align: right; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: flex-end;}
#crosstalk #sec05 .btn-area { width: 100%; margin-left: auto;}
#crosstalk .modal-content h2::before { content: none;}
#crosstalk .column_btn { position: relative; overflow: hidden; text-decoration: none; display: inline-block; border: 3px solid #000; padding: 10px 30px; text-align: center; outline: none; transition: ease .1s;background-color: #000; padding:1.5em 8.03em; background-image: url("../../img/crosstalk/btn_arrow_w.svg"); background-repeat: no-repeat; background-size: 10px; background-position: right 10% top 50%; font-weight: bold; margin-right: 20px; margin-bottom: 20px; line-height: 1.5em;}
#crosstalk #sec01 .column_btn.btn02 { margin-right: 0;}
#crosstalk .column_btn:last-child { margin-right: 0;}
#crosstalk .js-modal-close.column_btn { margin: 0 !important;}
#crosstalk .js-modal-close.column_btn:hover { cursor: pointer;}
#crosstalk .column_btn span { position: relative; z-index: 3; color:#fff; font-size: 16px;}
#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: 10px; 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%; overflow: scroll;}
.modal::-webkit-scrollbar { display: none;}
/* モーダル背景 */
.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%, -45%); /* はみ出た部分はスクロールさせる */ width: 100%;  max-width: 780px; background: #fff; padding: 120px 100px 40px; 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; padding: 0 35px; margin: 0; font-weight: bold;line-height: 2.08em; font-size: 24px;}
.modal-img { text-align: center; margin-bottom: 40px;}
#modal04 .modal-img { margin-bottom: 10px;}
.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 40px; text-align: left;font-size: 16px;}
#modal02 .modal-content p { margin: 0 0 34px;}
#modal05 .modal-content p { margin: 0 0 40px;}
#modal06 .modal-content p { margin: 0 0 20px;}
#modal07 .modal-content p { margin: 0 0 34px;}
#modal08 .modal-content p { margin: 0 0 47px;}
#modal09 .modal-content p { margin: 0 0 20px;}
#modal01 .modal-content { transform: translate(-50%, -37%);}
#modal01 .modal-bg { height: 125vh;}
#modal02 .modal-content { transform: translate(-50%, -27%);}
#modal02 .modal-bg { height: 160vh;}
#modal03 .modal-content { transform: translate(-50%, -27%);}
#modal03 .modal-bg { height: 160vh;}
#modal04 .modal-content { transform: translate(-50%, -29%);}
#modal04 .modal-bg { height: 154vh;}
#modal05 .modal-content { transform: translate(-50%, -45%);}
#modal05 .modal-bg { height: 100vh;}
#modal06 .modal-content { transform: translate(-50%, -30%);}
#modal06 .modal-bg { height: 145vh;}
#modal06 .modal-img { margin-bottom: 0px;}
#modal07 .modal-content { transform: translate(-50%, -31%);}
#modal07 .modal-bg { height: 145vh;}
#modal08 .modal-content { transform: translate(-50%, -37%);}
#modal08 .modal-bg { height: 120vh;}
#modal09 .modal-content { transform: translate(-50%, -25%);}
#modal09 .modal-bg { height: 170vh;}
.modal-min { font-size: 16px !important; text-align: left; margin: 10px auto 20px;}
.modal-content h2 { margin: 0 0 30px !important; line-height: 1.5em; text-decoration: none !important;}
.modal-content img { width: 100%;}
#modal01 .modal-img { width: 376px; margin: 0 auto 40px;}
#modal03 .modal-img { width: 506px; margin: 0 0 40px;}
.btn02 { margin-right: 0;}
	.modal-txt { font-size: 16px;}