@charset "utf-8";



/* Common
------------------------------------------------------------- */

#wrapper {
	position: relative;
	width: 100%;
}

#contents_box {
	width: 100%;
	margin: 0;
	padding: 60px 0 0 0;
	position: relative;
}

.contents_inner_box, .contents_narrow_box {
	width: 100%;
	padding: 40px 20px;
	line-height: 2;
}

.contents_inner_box + .contents_inner_box,
.contents_inner_box + hr + .contents_inner_box {
	padding-top: 5px;
}


#contents_box::after,
.contents_inner_box::after,
.contents_narrow_box::after {
	content:"";
	display:block;
	clear:both;
}

.wrapper_gray {
	width: 100%;
	background-color: #f0f0f0;
}

.wrapper_blue {
	width: 100%;
	background-color: #e2eff9;
}

.wrapper_green {
	width: 100%;
	background-color: #e4f4ee;
}

.wrapper_beige {
	width: 100%;
	background-color: #f9f5ed;
}






/* PageTop Button
------------------------------------------------------------- */

p.btn_pagetop {
	display: none;
	font-size: 0;
	width: 0;
	height: 0;
}



/* PageTitle
------------------------------------------------------------- */

.pagetitle_box {
	min-height: 50px;
	padding: 10px 20px;
	margin-bottom: 0;
	background-color: #e4f4ee;
	background: linear-gradient(45deg,#c9e2ed 0%, #e6f2f2 50%, #d9f2e8 100%);
	position: relative;
	overflow-x: hidden;
}

.pagetitle_box .page_title {
	width: 100%;
	height: auto;
	padding: 0 10px;
	text-align: center;
	line-height: 1.3;
	white-space: nowrap;
	font-size: 2.6rem;
	font-weight: 350;
	letter-spacing: 0.05em;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.16);
	z-index: 10;
}

.pagetitle_box .page_title::before {
	display: block;
	width: fit-content;
	height: 1em;
	text-align: center;
	line-height: 1;
	font-size: 1.8em;
	font-weight: 100;
	letter-spacing: -0.05em;
	text-shadow: none;
	white-space: nowrap;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0.6;
	translate: -50% -0.5em;
	z-index: -1;
}


/* English Title Setting */

.page_title.en_about::before {
	content: "ORGANIZATION OVERVIEW";
}

.page_title.en_support::before {
	content: "CONVENTION HOLDING SUPPORT";
}

.page_title.en_news::before {
	content: "NEWS";
}

.page_title.en_sanjonews::before {
	content: "SUPPORTING MEMBER INFORMATION";
	transform: scaleX(0.85);
}

.page_title.en_calendar::before {
	content: "CONVENTION CALENDAR";
}

.page_title.en_facility::before {
	content: "FACILITIES";
}

.page_title.en_facility_conv::before {
	content: "CONVENTION FACILITIES";
}

.page_title.en_facility_accom::before {
	content: "ACCOMMODATION FACILITIES";
}

.page_title.en_achieve::before {
	content: "PREVIOUS EVENTS";
}

.page_title.en_voice::before {
	content: "ORGANIZER'S VOICE";
}

.page_title.en_supporte::before {
	content: "SUPPORTING MEMBER";
}

.page_title.en_access_info::before {
	content: "ACCESS INFORMATION";
}

.page_title.en_access_link::before {
	content: "TRANSPORTATION LINK COLLECTION";
	transform: scaleX(0.85);
}

.page_title.en_contact::before {
	content: "CONTACT US";
}

.page_title.en_miceplus::before {
	content: "YAMAGATA IRODORI GUIDE MICE+";
	transform: scaleX(0.85);
}

.page_title.en_download::before {
	content: "DOWNLOAD";
}

.page_title.en_link::before {
	content: "LINK COLLECTION";
}

.page_title.en_privacy::before {
	content: "PRIVACY POLICY";
}

.page_title.en_touristlink::before {
	content: "TOURIST LINKS COLLECTION";
}

.page_title.en_whatscv::before {
	content: "WHAT'S CONVENTION";
}

.page_title.en_whatsmice::before {
	content: "WHAT'S MICE";
}

.page_title.en_proposal::before {
	content: "INTERNATIONAL CONVENTION PROPOSAL";
	transform: scaleX(0.85);
}

.page_title.en_hakyu::before {
	content: "ECONOMIC RIPPLE EFFECT";
}

.page_title.en_benri::before {
	content: "USEFUL TOOLS FOR ORGANIZERS";
}

.page_title.en_benri_photo::before {
	content: "TOURISM PRODUCT PHOTO DOWNLOAD";
	transform: scaleX(0.85);
}

.page_title.en_roundup::before {
	content: "VENUE INFORMATION";
}

.page_title.en_present::before {
	content: "SPECIAL PRODUCTS PRESENT";
}


/* Breadcrumb Navigation
------------------------------------------------------------- */

.bread_navi {
	width: calc(100% + 20px);
	margin: 0 -20px 50px auto;
	display: none;
}

.bread_navi p {
	font-size: 1.4rem;
	color: #666;
	padding: 0 20px 2px 0;
	border-bottom: 1px dashed #fff;
	width: fit-content;
	margin-left: auto;
	line-height: 1.2;
}

.bread_navi p a, .bread_navi p span {
	display: inline-block;
	width: fit-content;
	white-space: nowrap;
	overflow: hidden;
}

.bread_navi p a:last-child, .bread_navi p span:last-child {
	display: inline-block;
	width: fit-content;
	white-space: nowrap;
	max-width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;
}


.bread_navi p a::after, .bread_navi p span::after {
	content: "＞";
	display: inline-block;
	font-size: 0.6em;
	padding: 0 6px;
	vertical-align: 0.2em;
	color: #808080;
	background-color: transparent;
}

.bread_navi p a:last-child:after, .bread_navi p span:last-child:after {
	display: none;
}



/* Anchor Menu
------------------------------------------------------------- */

.anchor_menu_box {
	width: 100%;
	margin: 20px auto -1px 0;
	border-bottom: 1px solid #d5d5d5;
}

.contents_inner_box .anchor_menu_box {
	margin: 30px auto;
}

.anchor_menu_box ul {
	width: fit-content;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 0 20px;
	list-style-type: none;
	list-style-position: outside;
	font-size: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.anchor_menu_box ul li {
	display: inline-block;
	margin: 0 20px 10px 0;
}

.anchor_menu_box ul li a::after {
	content: "▼";
	display: inline-block;
	font-size: 0.6em;
	margin-left: 3px;
	vertical-align: 0.2em;
}

.anchor_menu_box ul li a:hover,
.anchor_menu_box ul li a:active {
	text-decoration: none;
	border-bottom: 1px solid #0061aa;
}



/* Reader
------------------------------------------------------------- */

.reader_box {
	width: 100%;
	max-width: 1280px;
	margin: 20px auto;
	padding: 0 20px;
}

.pagetitle_box + .reader_box,
.pagetitle_box + hr + .reader_box,
.anchor_menu_box + .reader_box,
.anchor_menu_box + hr + .reader_box {
	margin-top: 40px;
}

.reader_box p {
	font-size: 1.6rem;
	font-weight: 350;
	line-height: 2;
}

.reader_box p.reader_title {
	font-size: 1.3em;
	font-weight: 500;
	margin-bottom: 10px;
}



/* Contents Titles
------------------------------------------------------------- */

.section_title {
	width: fit-content;
	margin: 0 0 30px -20px;
	padding: 0 0 2px 20px;
	line-height: 1.4;
	font-size: 2.8rem;
	font-weight: 350;
	text-align: left;
	border-bottom: 1px solid #808080;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.16);
	position: relative;
}

.section_title > span.en {
	display: block;
	width: fit-content;
	white-space: nowrap;
	font-size: 1.6rem;
	color: #808080;
	text-shadow: none;
	padding-top: 7px;
}

.section_title:has(span.en) {
	height: 1.5em;
	margin-bottom: 40px;
}

.article_title {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 8px 15px;
	line-height: 1.6;
	font-size: 2.2rem;
	font-weight: 400;
	text-align: left;
	color: #fff;
	background-color: #006865;
	background: linear-gradient(45deg,#067d9b 0%, #36c6c1 50%, #069b69 100%);
/*	box-shadow: 3px 3px 0 rgba(0,0,0,0.16);	*/
}

.article_title.mono {
	background: none;
	background-color: #666;
}

.column_title {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 2px;
	line-height: 1.6;
	font-size: 2rem;
	font-weight: 600;
	text-align: left;
	border-bottom: 5px solid #77d7b7;
}

.column_title::before {
	content: "";
	display: block;
	width: 20%;
	height: 5px;
	position: absolute;
	left: 0;
	bottom: -5px;
	background-color: #0a7ad0;
}

.sub_title {
	width: fit-content;
	margin: 40px 0 15px 0;
	padding: 0 15px 0 30px;
	line-height: 2.2em;
	font-size: 1.8rem;
	font-weight: 500;
	text-align: left;
	background-color: #bbebdb;
	white-space: nowrap;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.16);
}

.sub_title::before {
	content: "";
	display: block;
	width: 15px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #0a7ad0;
}

.mini_title {
	width: fit-content;
	margin: 30px 0 15px 0;
	padding: 8px 20px;
	line-height: 1.4;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: left;
	color: #fff;
	background-color: #666;
	border-radius: 30px;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.16);
}


/* Numberling Title */

.num_title {
	margin: 60px 0 30px 0;
	padding: 6px 10px 6px 60px;
	line-height: 1.8;
	font-weight: 500;
	font-size: 1.8rem;
	background-color: #bbebdb;
	position: relative;
}

.num_title span.num {
	display: inline-block;
	height: 100%;
	width: 50px;
	padding-top: 10px;
	text-align: center;
	line-height: 1;
	font-size: 2.4rem;
	font-weight: 700;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	background-color: #0068b6;
}


.section_title::after,
.article_title::after,
.column_title::after {
	content:"";
	display:block;
	clear:both;
	float: none;
}

.section_title:nth-child(n+4),
.article_title:nth-child(n+4) {
	margin-top: 60px;
}

.column_title:nth-child(n+4),
.sub_title:nth-child(n+4) {
	margin-top: 40px;
}

.mini_title:nth-child(n+4) {
	margin-top: 40px;
}



/* Text Button
------------------------------------------------------------- */

.btn_center {
	width: 100%;
	text-align: center;
}

.btn_left {
	width: 100%;
	text-align: left;
}

.btn_right {
	width: 100%;
	text-align: right;
}

a.btn_txt {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 0 auto 20px auto;
	padding: 15px 50px 15px 10px;
	line-height: 1.4;
	color: #151515;
	background-color: #f0f0f0;
	font-weight: 400;
	font-size: 1.6rem;
	text-decoration: none;
	text-align: center;
	position: relative;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

a.btn_txt::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -14px;
	background-image: url(../img/arrow_next.svg);
	background-position: center left;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.3s;
}

a.btn_txt:hover,
a.btn_txt:active {
	background-color: #f5f5f5;
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

a.btn_txt:hover::after,
a.btn_txt:active::after {
	width: 40px;
	height: 40px;
	right: 0;
	margin-top: -20px;
	animation: shake-arrow 0.3s 2 ease-in-out;
}

@keyframes shake-arrow {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(15px);
	}
}

a.btn_txt.btn_leftarrow {
	padding: 15px 10px 15px 25px;
}

a.btn_txt.btn_leftarrow::after {
	right: auto;
	left: 20px;
	background-image: url(../img/arrow_prev.svg);
	background-position: center right;
}

a.btn_txt.btn_leftarrow:hover::after,
a.btn_txt.btn_leftarrow:active::after {
	right: auto;
	left: 0;
	animation: shake-leftarrow 0.3s 2 ease-in-out;
}

@keyframes shake-leftarrow {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-15px);
	}
}

a.btn_txt.btn_noarrow {
	padding: 15px 10px;
}

a.btn_txt.btn_noarrow::after {
	display: none;
}

a.btn_txt.btn_white {
	background-color: #fff;
}

a.btn_txt.btn_blue {
	background-color: #e2eff9;
}

a.btn_txt.btn_blue:hover, a.btn_txt.btn_blue:active {
	background-color: #ecf6fd;
}

a.btn_txt.btn_green {
	background-color: #e4f4ee;
}

a.btn_txt.btn_green:hover, a.btn_txt.btn_green:active {
	background-color: #f0fbf6;
}



/* GoogleMap Button
------------------------------------------------------------- */

p.btn_googlemap {
	display: inline-block;
	margin-left: 5px;
	vertical-align: 2px;
	height: 24px;
}

p.btn_googlemap a {
	color: #333;
	text-decoration: none;
	height: 100%;
	line-height: 22px;
	font-size: 1.4rem;
	display: block;
	padding: 0 8px 0 22px;
	position: relative;
	letter-spacing: 0.03em;
	border: 1px solid #fff;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	background-color: #e5e5e5;
/*	background: linear-gradient(to bottom, #f5f5f5, #c4c4c4);	*/
}

p.btn_googlemap a:hover {
	box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
	background-color: #efefef;
/*	background: linear-gradient(to bottom, #fafafa, #d0d0d0);	*/
	transform: translateY(1px);
}

p.btn_googlemap a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -9px;
	background-image: url(../img/icon_googlemap.png);
	background-size: contain;
}



/* Contact
------------------------------------------------------------- */

p.contact_add {
	padding: 0 0 0 20px;
	font-size: 1.8rem;
}

p.contact_add .s4 {
	font-size: 2.8rem;
}



/* Details Search
------------------------------------------------------------- */

.result_info {
	padding: 10px 0;
	margin: 0 0 40px 0;
	text-align: left;
	border-bottom: 1px dashed #d5d5d5;
}

.detail_search_box {
	margin: 0 auto 20px auto;
	padding: 0;
	width: 100%;
}

.wrapper_gray .detail_search_box,
.wrapper_beige .detail_search_box,
.wrapper_blue .detail_search_box,
.wrapper_green .detail_search_box {
	margin: 0 auto;
}

.detail_search_box > .detail_search_title {
	margin: 0;
	padding: 6px 15px;
	line-height: 1.8;
	font-size: 1.8rem;
	font-weight: 500;
	color: #fff;
	background-color: #0061aa;
	position: relative;
}

.detail_search_box > .detail_search_title.shutter_trigger {
	cursor: pointer;
}

.detail_search_box > .detail_search_title.shutter_trigger::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 3px;
	background-color: #fff;
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -11px;
	z-index: 2;
}

.detail_search_box > .detail_search_title.shutter_trigger::after {
	content: "━";
	display: inline-block;
	font-size: 16px;
	line-height: 16px;
	color: #0061aa;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -7.5px;
	z-index: 3;
}

.detail_search_box > .detail_search_title.shutter_trigger.open::after {
	content: "╋";
}

.detail_search_cont {
	background-color: #f0f0f0;
	padding: 20px;
	display: block;
}

.wrapper_gray .detail_search_cont,
.wrapper_beige .detail_search_cont,
.wrapper_blue .detail_search_cont,
.wrapper_green .detail_search_cont {
	background-color: transparent;
	padding: 0;
}

.detail_search_cont dl {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}

.detail_search_cont dl > div {
	width: 100%;
	background-color: #fff;
	border-radius: 4px;
	margin-bottom: 20px;
	padding: 20px 18px 20px 20px;
}

.detail_search_cont dl dt {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 0 0 5px 0;
	padding: 0;
}

.detail_search_cont dl dd {
	font-size: 1.4rem;
	margin: 0;
	padding: 3px 0 0 0;
}

.detail_search_cont dl dd label {
	display: inline-block;
	line-height: 1.4;
	margin: 0 5px 15px 10px;
}

/* Yamagata Area */

.detail_search_cont dl dd .city_yamagata_selector {
	position: relative;
}

.detail_search_cont dl dd .city_yamagata_selector > span {
	display: inline-block;
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 1.5rem;
	line-height: 1.5;
	white-space: nowrap;
}

.detail_search_cont dl dd .city_yamagata_selector > div {
	margin-left: 1.5em;
	padding: 0 15px 0 10px;
	position: relative;
}

.detail_search_cont dl dd .city_yamagata_selector > div::before,
.detail_search_cont dl dd .city_yamagata_selector > div::after {
	content: "";
	display: block;
	width: 8px;
	height: calc(100% - 0.9em);
	border: 1px solid #666;
	position: absolute;
	top: 0;
}

.detail_search_cont dl dd .city_yamagata_selector > div::before {
	left: 0.5em;
	border-right: 0;
}

.detail_search_cont dl dd .city_yamagata_selector > div::after {
	right: 1em;
	border-left: 0;
}


/* Submit */

.detail_search_submit {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.detail_search_submit input[type="reset"],
.detail_search_submit input[type="submit"] {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 10px auto;
	padding: 0 10px;
	line-height: 50px;
	color: #151515;
	background-color: #fff;
	font-weight: 350;
	font-size: 1.6rem;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	position: relative;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.detail_search_submit input[type="reset"]:hover,
.detail_search_submit input[type="submit"]:hover {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}



/* Search Floating Tab
------------------------------------------------------------- */

.search_tab_box {
	display: block;
	width: 36px;
	height: 56px;
	margin: 0 0 -56px auto;
	padding-top: 20px;
	position: sticky;
	top: 60px;
	z-index: 100;
	opacity: 1;
	transition: 0.3s all;
}

.search_tab_box:hover {
	width: 40px;
	opacity: 1;
}

.search_tab_box:hover .search_tab a {
	background-color: #3882ba;
}

.search_tab_box.off {
	width: 0;
	opacity: 0;
	overflow: hidden;
}

.search_tab_box .search_tab {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.search_tab_box .search_tab a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px 0 0 6px;
	color: #fff;
	background-color: #0061aa;
	text-decoration: none;
	position: relative;
	background-image: url(../img/icon_search.png);
	background-size: 24px 24px;
	background-position: 7px 5px;
	background-repeat: no-repeat;
	box-shadow: 0 2px 2px rgba(0,0,0,0.16);
	transition: 0.3s background-color;
}

.search_tab_box .search_tab a span {
	display: none;
	width: 1em;
	height: fit-content;
	font-size: 1.6rem;
	line-height: 1;
	position: absolute;
	left: 10px;
	bottom: 10px;
}



/* Contact CTA
------------------------------------------------------------- */

.contact_cta_box {
	padding: 40px 20px;
}

.contact_cta_box .cta_title {
	margin-bottom: 20px;
}

.contact_cta_box .cta_title h3 {
	text-align: left;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1;
	color: #151515;
	position: relative;
	height: 1em;
	margin-bottom: 30px;
}

.contact_cta_box .cta_title h3 span {
	display: inline-block;
	width: fit-content;
	padding: 0 10px 0 0;
	background-color: #e4f4ee;
	position: relative;
	z-index: 10;
}

.contact_cta_box .cta_title h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: #151515;
	position: absolute;
	left: 0;
	bottom: 0.5em;
	z-index: 1;
}

.contact_cta_box .mini_title {
	margin: 0 auto 20px auto;
	width: calc(100% - 40px);
	max-width: 580px;
	text-align: center;
}

.contact_cta_box .cta_column {
	margin: 0 auto;
	padding: 20px 10px;
	max-width: 360px;
	text-align: center;
	border-bottom: 1px solid #fff;
}

.contact_cta_box .cta_column.cta_form {
	border-bottom: 0;
}

.contact_cta_box .cta_column p {
	line-height: 1.5;
	white-space: nowrap;
}

.contact_cta_box .cta_column p a {
	color: #151515;
	text-decoration: none;
}

.contact_cta_box .cta_column p a:hover,
.contact_cta_box .cta_column p a:active {
	text-decoration: none;
}


.contact_cta_box .cta_column p.cta_column_title {
	text-align: center;
	width: fit-content;
	padding: 0 12px;
	margin: 0 auto;
	line-height: 2em;
	background-color: #fff;
	border-radius: 1em;
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 20px;
}

.contact_cta_box .cta_column p.cta_column_title br {
	display: none;
}

.contact_cta_box .cta_column p.tel,
.contact_cta_box .cta_column p.fax {
	font-size: 2.6rem;
}

.contact_cta_box .cta_column p.email {
	font-size: 2.2rem;
}

.contact_cta_box .cta_column p.form {
	font-size: 1.4rem;
}

.contact_cta_box .cta_column .contact_cta_icon {
	width: 50%;
	max-width: 160px;
	margin: 0 auto 10px auto;
}

.contact_cta_box .cta_column p.tel a:hover, .contact_cta_box .cta_column p.tel a:active,
.contact_cta_box .cta_column p.fax a:hover, .contact_cta_box .cta_column p.fax a:active,
.contact_cta_box .cta_column p.email a:hover, .contact_cta_box .cta_column p.email a:active {
	text-decoration: underline;
}