/* =========================================================
   共通
========================================================= */
@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

p {
	line-height: 1.6;
	color: #333;
}

#go_hokkaido {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 auto;
	background-color: #F7F7F7;
	overflow: hidden;
	
}

.tb_footerGotoTopButton {
    z-index: 50 !important;
}

/* =========================================================
   mv
========================================================= */
.mv {
    margin: 0 auto;
    text-align: center;
    height: 360px;
	width: 100%;
	display: flex;
	justify-content: center;
    margin-bottom: 40px;
	overflow: hidden;
}


/* =========================================================
   hokkaido_area_map
========================================================= */
.hokkaido_area_map {
    width: auto;
    height: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
    background-image: url(/car/special/go_hokkaido/images/hokkaido_area_map_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.map {
	text-align: center;
    position: absolute;
    z-index: 20;
    top: -102px;
    left: 19%;
    right: 0;
    bottom: 0;
    margin: auto;
}

.about {
	position: absolute;
	z-index: 30;
	text-align: left;
	width: 300px;
	height: 287px;
	right: 68%;
}

.hokkaido_area_map_image {
	width:202px ;
	height: 43px;
}

.hokkaido_map {
	font-size:34px ;
	text-align: left;
	line-height: 50px;
	font-weight: bolder;
	border-bottom:#2F2F2F 1px solid;
	padding-bottom: 5px;

}

.area_text {
	margin-top: 5px;
	font-size: 16px;
	line-height: 30px;
}

.sapporo_link,.hakodate_link,.biei_link,.noboribetsu_link,.tokachi_link,.kushiro_link,.shiretoko_link,.car_icon,.yazirusi_icon {
	position: absolute;
	z-index: 30;
}


.sapporo_link,.hakodate_link,.biei_link,.noboribetsu_link,.tokachi_link,.kushiro_link,.shiretoko_link {
	display: inline-block;
	border-radius:50px; /* 画像の丸みを定義 */
	overflow: hidden; /* 丸みを画像に適用 */
    cursor: pointer;
  }


.sapporo_link:hover,.hakodate_link:hover,.biei_link:hover,.noboribetsu_link:hover,.tokachi_link:hover,.kushiro_link:hover,.shiretoko_link:hover {	
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* 丸みを保ったシャドウ */
 }
 
.sapporo_link {
    top: 38%;
    right: 57%;
    border: 1px solid #6DD3FF;
    color: #6DD3FF !important;
    font-size: 28px;
}

.hakodate_link {
    top: 70%;
    right: 71%;
    border: 1px solid #F8B913;
    color: #F8B913 !important;
    font-size: 28px;
}

.biei_link {
    top: 12%;
    left: 49%;
    border: 1px solid #5DB0FD;
    color: #5DB0FD !important;
    font-size: 28px;
}

.noboribetsu_link {
	bottom: 21%;
    left: 48%;
    border: 1px solid #FF9983;
    color: #FF9983 !important;
    font-size: 28px;
}

.tokachi_link {
	bottom: 30%;
    left: 55%;
    border: 1px solid #B1D849;
    color: #B1D849 !important;
    font-size: 28px;
}

.kushiro_link {
    bottom: 38%;
    left: 67%;
    border: 1px solid #5BCE9A;
    color: #5BCE9A !important;
    font-size: 28px;
}

.shiretoko_link {
    top: 21%;
    left: 57%;
    border: 1px solid #D091EB;
    color: #D091EB !important;
    font-size: 28px;
}

.car_icon {
    bottom: 10%;
    left: 68%;
}

.yazirusi_icon {
	bottom: 0;
}

.custom-button_en{
    font-size: 23px !important;
}

/* =========================================================
   #共通
========================================================= */

.area_box {
    width: 980px;
    margin: 0 auto;
    padding-top: 58px;
    position: relative;
    z-index: 20;
}

.background_img {
    position: absolute;
    z-index: 10;
    right: 0;
    margin-top: 4%;
}


.flex {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    left: 0%;
    padding-top: 24px;
}

.flex img {
    width: 125px;
    height: 125px;
}

.staffvoice_img {
    position: absolute;
    z-index: 40;
    top: 287px;
    left: 14%;
}

.flex02 {
    width: 440px;
    height: 180px;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    z-index: 30;
    top: 325px;
    left: 4%;
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 12px;
}

.flex02 img {
    position: absolute;
    z-index: 30;
    margin-top: 12px;
}

.staff_voice {
    padding-left: 109px;
    margin-right: 10px;
    padding-top: 22px;
    padding-right: 4px;
    position: absolute;
    z-index: 40;
}

.spot_img {
    position: absolute;
    z-index: 20;
    top: 250px;
    left: 44%;
}

/* =========================================================
   #siteFlow_wrapper（共通）
========================================================= */
.siteFlow_wrapper {
    width: 980px;
    margin: 0 auto;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 572px;
    padding-left: 50px;
}

.siteFlow_catagory {
    margin: 20px 0 0;
    text-align: center;
}

.siteFlow_subtitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 18px;
    display: inline-block;
    position: relative;
    padding-right: 16px;
}



.siteFlow_subtitle::before {
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -26px;
    top: 4px;
}
.siteFlow_subtitle::after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 21px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        right: -10px;
        top: 4px;
    }

.siteFlow_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin: 0;
    padding: 0;
}

.siteFlow_item {
    display: block;
    margin-bottom: 30px;
    margin-right: 14px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    text-align: end;
    background-color: #fff;
}
.more {
    font-size: 12px;
    margin-right: 5px;
    display: inline-flex;
    align-items: center; /* 矢印と文字を中央揃え */
    text-decoration: none;
    color: #000;
}

.more::after {
    content: "＞"; /* 矢印として「＞」を使用 */
    margin-left: 1px; /* テキストとの間に余白を設定 */
    font-size: 12px; /* 「＞」のサイズ */
}

.siteFlow_item a {
    display: block;
    text-decoration: none;
}

.siteFlow_card_image {
    width: 180px;
    height: auto;
    overflow: hidden;
}

.siteFlow_card {
    width: 180px;
    text-align: start;
}

.siteFlow_card_image img {
    width: 180px;
    height: 108px;
    object-fit: cover;
}

.siteFlow_card_text_wrapper {
    padding: 10px;
    min-height: 5em;
}

.siteFlow_card_area {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    height: 44px;
}

.siteFlow_card_area_tc {
    height: 60px;
}

.siteFlow_card_text {
    color: #333;
    font-size: 12px;
    margin-bottom: 0;
    height: 104px;
    display: -webkit-box; /* Flexboxの代替 */
    -webkit-box-orient: vertical; /* ボックスの方向を縦に指定 */
    -webkit-line-clamp: 3; /* 行数を指定 */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* テキストの溢れを省略 */
    line-height: 1.5; /* 行間を指定 */
    max-height: calc(1.5em * 3); /* 最大高さを指定 */
}

.custom-button {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: normal;
    background-color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 28px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    text-decoration: none; /* ホバー時も下線を消す */
}

.button-text {
    flex: 1; /* テキスト部分を広げる */
    text-align: center;
    margin: 0 10px; /* アイコンと文字の間隔を調整 */
}

.button-icon.left {
    width: 55px; /* アイコンの幅 */
    margin-right: auto;
}

.button-icon.right {
    width: 27px; /* アイコンの幅 */
    margin-left: auto;
}

a:visited {
    color: inherit;
}

/* =========================================================
   rc-service
========================================================= */
.rc-service {
    text-align: center;
    margin-top: 30px;
}
.rc-service_ttl {
    font-size: 34px;
    font-weight: bold;
    padding: 30px 0;
}
.rc-service_sub-ttl {
    font-size: 24px;
}
.underline {
    position: relative;
    z-index: 1;
}
.underline::before {
    content: "";
    position: absolute;
    background: #F8FE10;
    width: 473px;
    height: 6px;
    z-index: -1;
    top: 26px;
    right: 0;
    left: 0;
    margin: auto;
}
.rc-service_content_images, .rc-service_content_btn {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.rc-service_content_images img {
    width: 300px;
    margin-right: 40px;
}
.rc-service_content_images img:nth-child(3n) {
    margin-right: 0;
}

.rc-service_content_btn {
    flex-wrap: wrap;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}
.rc-service_content_btn_item img {
    width: 30px;
    padding-right: 10px;
}
.rc-service_content_btn_item {
    width: 500px;
    margin-right: 34px;
    margin-bottom: 10px;
}
.rc-service_content_btn_item:hover{
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35);
}
.rc-service_content_btn_item:nth-child(2n) {
    margin-right: 0;
}
.rc-service_content_wrap .rc-service_content_btn_link {
    padding: 15px;
    background: #fff;
    border-radius: 7px;
    display: block;
    padding-left: 91px;
    line-height: 2;
    color: #333;
    text-decoration: none;
}

.en .rc-service_content_btn_link {
    padding-left: 34px;
}
.en .underline::before {
    width: 510px;
}

.tc .underline::before {
    width: 343px;
}

.kr .underline::before {
    width: 379px;
}

/* =========================================================
   #sapporo01
========================================================= */
#sapporo01 {
    background-color:#F7F7F7 ;
    margin: 0 auto;
    margin-top: 66px;
}



#sapporo01 .siteFlow_subtitle,#sapporo01 .siteFlow_card_area {
    color: #6DD3FF;
}

#sapporo01 .area_name {
    color: #6DD3FF;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#sapporo01 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/01line.png);  
}

#sapporo01 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/01line.png);  
}

/* =========================================================
   #hakodate02
========================================================= */
#hakodate02{
    background-color:#fff5d9 ;
    margin: 0 auto;
    margin-top: 66px;
    padding-bottom: 66px;
}

#hakodate02 .siteFlow_subtitle,#hakodate02 .siteFlow_card_area {
    color: #F8B913;
}

#hakodate02 .area_name {
    color:#F8B913;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#hakodate02 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/02line.png);  
}

#hakodate02 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/02line.png);  
}

/* =========================================================
   #biei03
========================================================= */
#biei03{
    background-color:#F7F7F7 ;
    margin: 0 auto;
    margin-top: 66px;
}

#biei03 .siteFlow_subtitle,#biei03 .siteFlow_card_area {
    color: #5DB0FD;
}

#biei03 .area_name {
    color:#5DB0FD;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

.area_name_en {
    padding-top: 0px !important;
    line-height: normal;
}

#biei03 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/03line.png);  
}

#biei03 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/03line.png);  
}

/* =========================================================
   #noboribetsu04
========================================================= */
#noboribetsu04{
    background-color:#fbede9 ;
    margin: 0 auto;
    margin-top: 66px;
    padding-bottom: 66px;
}

#noboribetsu04 .siteFlow_subtitle,#noboribetsu04 .siteFlow_card_area {
    color: #FF9983;
}

#noboribetsu04 .area_name {
    color:#FF9983;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#noboribetsu04 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/04line.png);  
}

#noboribetsu04 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/04line.png);  
}

/* =========================================================
   #tokachi05
========================================================= */
#tokachi05{
    background-color:#F7F7F7 ;
    margin: 0 auto;
    margin-top: 66px;
    padding-bottom: 66px;
}

#tokachi05 .siteFlow_subtitle,#tokachi05 .siteFlow_card_area {
    color: #B1D849;
}

#tokachi05 .area_name {
    color:#B1D849;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#tokachi05 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/05line.png);  
}

#tokachi05 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/05line.png);  
}

/* =========================================================
   #kushiro06
========================================================= */
#kushiro06{
    background-color:#e2f9ef ;
    margin: 0 auto;
    margin-top: 66px;
    padding-bottom: 66px;
}

#kushiro06 .siteFlow_subtitle,#kushiro06 .siteFlow_card_area {
    color: #5BCE9A;
}

#kushiro06 .area_name {
    color:#5BCE9A;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#kushiro06 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/06line.png);  
}

#kushiro06 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/06line.png);  
}

/* =========================================================
   #shiretoko07
========================================================= */
#shiretoko07{
    background-color:#F7F7F7 ;
    margin: 0 auto;
    margin-top: 66px;
    padding-bottom: 66px;
}

#shiretoko07 .siteFlow_subtitle,#shiretoko07 .siteFlow_card_area {
    color: #D091EB;
}

#shiretoko07 .area_name {
    color:#D091EB;
    font-size: xxx-large;
    font-weight: bolder;
    margin-left: 29px;
    padding-top: 51px;
}

#shiretoko07 .siteFlow_subtitle::before {
    background-image: url(/car/special/go_hokkaido/images/07line.png);  
}

#shiretoko07 .siteFlow_subtitle::after {
    background-image: url(/car/special/go_hokkaido/images/07line.png);  
}