@charset "utf-8";
/* CSS Document */

/*******************　start---　 基本的なクラスはここに記述しています　※コーディングの時に毎回記述する内容　　********************/
body {font-size: 14px;}
.inner {max-width: 96%;}
.sp {display: block;}
.pc {display: none;}


/**************************************************　end---　基本的なクラスここまで　********************************************/




/******************************************　start--- ABトリップの記述はここから　**********************************************/


/******************* start---　common 共通で使うクラスはここに記述する　********************/
/* 例）同じ見出しタイトルのデザインや、同じボタンのデザインなど　*/

/*****************************　end---　common 共通で使うクラスここまで  *********************************/



/********** header *******************/
/**************** nav *********************/
header#header nav ul#nav {display: block; font-size: 0.9375em; text-align:left; padding-top: 7em;}
header#header nav ul#nav li { display: block;}
header#header nav ul#nav li a { text-align: left;}
header#header nav ul#nav li.header_contact_btn a {
	padding: 1.2em 0;
	text-align: center;
	width: 94%;
}
#common_ttl .hokkaido {
	max-width: 330px;
	z-index: 5;
	right: 1em;
	width: 28%;
	top: 1.8em;
}
/********** footer ************/
footer#footer .logo_box{
	text-align: center;
	display: block;
	margin: 0em auto 2em;
}
footer#footer .logo_box img.logo{
}
footer#footer .name{
	float: none;
	width: 100%;
}
footer#footer div.menu{
    margin: 0;
    float: none;
    width: 100%;
}
footer#footer div.menu ul.main{
	text-align: left;
	margin: 2em 0 0 0;
}
footer#footer ul.main li.i_block{
    display: block;
    margin: 0 0 1.6em 0;
	font-size: 1.1em;
}
footer#footer ul.small li {
    margin: 0.9em 0;
}
#to_top {
    bottom: 22vw;
	line-height: 3.2;
}
footer#footer p.copy{
	font-size: 0.71em;
}
footer#footer .link li, footer#footer .plan_company li {
	font-size:1em;
}
footer#footer .plan_company {
	margin:0;
}
	
/************ top_store&news *************/
#top_store .store,#top_news .news_content .news,#top_news a.viewbutton {
	width:100%;
	padding-bottom:2em;
}
#top_store .store {
	padding-bottom:0;
}
#top_news {
    padding: 0%;
    float: none;
    width: 100%;
}
#top_news a.viewbutton {
	padding:1em; margin: 1em auto;
}
#top_news .news_content .news {
    padding-bottom: 1em;
}
#top_news .news_content .news img {
	max-width:none;
}
/*追加*/
#top_news .news_content .news a img {
    width: 100%;
    height: min(70vw,450px);
}
/**/
#top_news .news_content .news dl {
	padding:0;
}
#top_store {
	background: #F1F5D8;
	padding: 1em 0 4em 0;
	background-image:linear-gradient(20deg, #D4E386 50%,#F1F5D8 50%); /* -45deg で45度マイナス回転するので斜めになる */
	background-image:-webkit-linear-gradient(20deg, #D4E386 50%,#F1F5D8 50%);
	background-image: -moz-linear-gradient(20deg, #D4E386 50%,#F1F5D8 50%);
	background-image:-ms-linear-gradient(20deg, #D4E386 50%,#F1F5D8 50%);
}
#top_store a.storebutton {
	width:100%;
	max-width:none;
}
#top_store dt.aba {
	padding-top:0;
}
#top_store .store dl.kitami {
    margin-bottom: 0;
}
#top_news .otaru,#top_contact .trip01 {
    position: absolute;
	right: 1%;
	bottom: -8em;
	width: 28%;
}
#top_contact .trip01 {
   width: 25%;
   top:-3em;
}
#top_contact .trip02 {
    position: absolute;
    left: 1%;
    top: -4em;
    max-width: 310px;
    width: 24%;
}
#top_news .news_content .news a.news_sum {
    height: min(45vw,210px);
}
#top_news .news_content .news .txt_box {
    height: min(45vw,210px);
}
.twitter {
    width: 100%;
	padding-bottom: 3.8em;
}
.tw_box,#sns .insta_bnr {inline-size: min(490px,90%);}
#sns .trip01 {bottom: -30em;}

/************　バナー　*************/
#store_bnr {padding: 0 0 5.5em;}

#store_bnr .link_bnr {
    margin: 0 auto 1.5em;
    inline-size: min(320px, 100%);
    display: block;
}
/************ top_service *************/
#top_store .store,#top_news .news_content,#top_store .store_content,#top_service_list .service_content,#top_contact .company_contact,
#store_produce .store_contents,#store_produce .storeinfo2,#store_produce .trip_number{
	display:block;
}
#top_service_list div.top_sv,#store_produce .store_contents img {
	width:100%;
	margin-bottom: 1em;
}
#top_service_list .trip02 {
    position: absolute;
    left: 1%;
    top: -8em;
    width: 27%;
}

/************ top_contact *************/
#top_contact .s_adress {
	width: 90%;
	margin: 0 auto 1em;
}
#top_contact .s_adress dd.contact span.number, #top_contact .s_adress dd.contact_fax span.number {
	margin-right: 5%;
}
#top_contact p {
	font-size:4vw;
}
#top_contact .s_adress dd.contact a.tel,#top_contact .s_adress dd.contact_fax {
	padding: 0.5em 20vw;
	display: block;
	text-align: center;
}
#top_contact .s_adress dd.contact,#top_contact .s_adress dd.contact_fax {
	font-size: 1.2em;
}
#top_contact .s_adress dd.adress {
	font-size:1em;
}

/************ service_list *************/
#price .price_list_pdf {
    height: 520px;
}

#service_list .country dl {
	display:block;
	margin-bottom:1.25em;
}
#service_list .country dt,#service_list .country dd {
	width:auto;
	text-align: left;
}
#service_list .country .nation {
	margin-bottom: 2em;
}
#service_list .trip01 {
	top: 10em;
	width: 17%;
	z-index: 1;
}
#service_list .trip02 {
    bottom: 31.6em;
    width: 11.4%;
    z-index: 1;
}
#service_list .trip03 {
    bottom: -3em;
    width: 12%;
}
#common_ttl p.spt {
	font-size: 1.7em;
}
/************ company *************/
#company .c_info,#store_produce .storeinfo dl {
	display:block;
	margin: 0 auto 1em;
}
#company .c_info dt {
	padding:0;
	margin:0;
	font-size: 1.1em;
}
#company div.information,#company div.information2,#company div.information dl {
	padding:0;
}
#company div.information2 {
	margin: 0 auto;
	width: 13.5em;
}
#company div.information2 span{
	font-size:1.059em;
}
#company .c_info dl.information {
    text-align: center;
	padding-left: 0;
	margin-bottom: 1em;
}
#company .logo_box {
	text-align: center;
	display: block;
	margin: 0em auto 2em;
}
#company .logo_box img.logo {
    float: none;
}
#company div.info2_tel {
	margin: 0 auto 0.25em;
}
#company div.information2 a, #company div.information2 .fax {
	font-size:1.2em;
	top: 0.1em;
}
#company .c_info dd {
	font-size:1em;
}
#company .c_info div.information2 span.number {
	padding: 0.09em 0.5em 0.09em;
	vertical-align: middle;
}

/******* swiper *******/
.swiper-container{	width: 98%;}
.swiper-container .swiper-wrapper .swiper-slide { height: 360px;}
.swiper-container-android .swiper-slide, .swiper-wrapper{
	width: 100%;
	margin: 0 0 0 auto;
}
#slide div.slide_txt {
	width: 21.5em;
    padding: 1.5em 0 1.5em 1.5em;
}
#slide div.slide_txt p.ttl_txt {
    font-size: 2.85em;
}
#slide div.slide_txt p.sub_txt {
    font-size: 1.15em;
    padding-top: 0.5em;
}
/*************************************　コンテンツページ　ここから　********************************************/
/**********コンテンツページ共通　見出しタイトル**********/
section#common_ttl div.ttl_container {
    background-position: left top;
    height: 280px;
	width: 98%;
}
section#common_ttl div.slide_txt2 {
    width: 22em;
    padding: 1.5em 0 1.4em 1.2em;
}
section#common_ttl .hokkaido {
    width: 25%;
    /*bottom: 3.9em;*/top:1em;
    right: 2%;
}
#price {
    background: linear-gradient(white 25%, #F1F5D8 25%);
}
.bg_box {
    background-size: 100% auto,100% auto,100% auto,100% auto;
    padding-bottom: 4em;
}
#store_produce .storeinfo dt, #store_produce .storeinfo dd {
	width:auto;
	text-align:left;
}
#store_produce .store_contents {
	margin:0 auto;
}
#store_produce .storeinfo2 dl {
	width:100%;
}
section#contact_form {
	background: linear-gradient(white 25%, #F1F5D8 25%);
}
/*contact*/
section#contact_form form dl dd {
    padding: 0.5em;
}
section#contact_form form dl dd label {
    margin-right: 0;
    display: block;
    margin-top: 1em;
}
section#contact_form h3 {
    margin: 1em 0 1em 0;
}
section#contact_form .bg_box {
    background-position: 0% 15%,52% 30%,50% 72%,60% 100%;
}
section#contact_form form .flex {
    display: block;
}
section#contact_form form .flex a {
    width: 100%;
    display: block;
    margin-bottom: 1em;
}
section#contact_form .complate_box {
    margin-bottom: 3em;
}
section#contact_form form dl dd.kind label {
    width: 100%;
    margin-bottom: 0em;
}
section#contact_form .privacy_link {
    text-align: left;
    width: 96%;
}
section#contact_form form dl dd.tel input[type="text"] {
    margin-top: 1em;
}
/*************************************　コンテンツページ　ここまで　********************************************/

/********************************************　end---　 ABトリップの記述はここまで　****************************************************/