@charset "UTF-8";

/* -------------------------------------
workation
------------------------------------- */
.inner__1200 {
    width: 90.27%;
    max-width: 1200px;
    margin: 0 auto;
}
.beb {
    font-family: bebas-neue-pro, sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
}
.zen {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    letter-spacing: 0.15em;
}
/*Regular 400,Medium 500,Bold 700*/

.fs-mid {
  font-size:23px;
  font-weight:700;
  letter-spacing:0.1em;
}

.workation {
  color:#000;
  font-size:16px;
  /*font-feature-settings: normal;*/
  padding-bottom: 58px;
}




.low #mainimg {
    min-height: auto;
}
#mainimg .imgflame {
  display:flex;
  width:74.3vw;
  gap:10px;
  padding-top:104px;
}
#mainimg .imgflame >* {
  width:calc((100% - 20px)/3);
}

/* -------------------------------------
workation_intro
------------------------------------- */
.intro_ttl_wrap {
  text-align:center;
  margin-bottom:80px;
}
.intro_ttl {
  font-size:50px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:10px;
}
.intro_ttl span {
  display:inline-block;
}
.intro_copy {
  color:#ca5142;
  letter-spacing:0;
}
.intro_txt span {
  display:inline-block;
}
.check_wrap {
  text-align:center;
  background-color:#ca5142;
  padding:50px 0 75px;
}
.check_ttl {
  color:#fff;
  line-height: 1;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:0 40px;
  margin-bottom: 25px;
  position:relative;
}
.check_ttl .ja {
}
.check_ttl .en {
  font-size:35px;
}
.check_ttl::before {
  content:"";
  width:22px;
  height:41px;
  background:url(../imgs/workation/line_lft.svg) 0 0 no-repeat;
  background-size:contain;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
}
.check_ttl::after {
  content:"";
  width:20px;
  height:40px;
  background:url(../imgs/workation/line_rgt.svg) 0 0 no-repeat;
  background-size:contain;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
}

.check_navlist {
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.check_nav-item {
  width:calc((100% - 40px)/3);
  max-width:370px;
}
.check_nav-item a {
  color:#000;
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:center;
  height:100%;
  background-color:#fff;
  border:3px solid #ca5142;
  border-radius:30px;
  transition:all 0.3s;
  padding:26px 10px;
}
.check_nav-item a:hover {
  color:#fff;
  background-color:#ca5142;
  border-color:#fff;
  opacity:1;
}

.check_nav-item a .item_icon {
  width:14%;
  max-width:50px;
  min-width:35px;
}
.check_nav-item a .item_icon .on {
  display:none;
}
.check_nav-item a:hover .item_icon .off {
  display:none;
}
.check_nav-item a:hover .item_icon .on {
  display:block;
}
.check_nav-item a .check_item-name {
  line-height:1.6;
}
.check_nav-item a .check_item-name span.stxt {
  display:block;
}
.check_nav-item a .check_item-name span.mtxt {
  letter-spacing:0.05em;
  display:inline-block;
}


/*共通*/
.workation .scttl_wrap {
  padding-bottom: 20px;
  margin-bottom: 30px;
  position: relative;
}
.workation .scttl_wrap::after {
    display: block;
    content: "";
    width: 70px;
    height: 1px;
    background-color: #CA5142;
    position: absolute;
    bottom: 0;
    left: 0;
}
.workation .scttl_wrap .sec_ttl{
  font-size: 35px;
  line-height:1;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 10px;
}
.workation .scttl_wrap .mtxt{
  display: block;
}
.sec_blk {
  padding:80px 0;
}


/* -------------------------------------
point
------------------------------------- */
.point_list {
  display:flex;
  flex-wrap:wrap;
  align-items: flex-start;
  justify-content:space-between;
  gap:80px 8%;
}
.point_list >* {
  width:46%;
  max-width:550px;
}
.point_list .imgbk {
  margin-bottom:30px;
}
.point_list .txtbk {
  position:relative;
}
.point_list .point_name {
  line-height:1.52;
  display:flex;
  align-items:flex-end;
  margin-bottom:15px;
  position:relative;
  z-index:1;
}
.point_list .point_txt {
  letter-spacing:0.05em;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}
.point_list .tx_bg {
  color:#efede7;
  font-size:130px;
  font-weight:700;
  line-height:1;
  position:absolute;
  top:0;
  right:0;
  z-index:0;
}

/* -------------------------------------
work-space
------------------------------------- */
#work-space {
  padding-bottom:195px;
}
.work-space_ttl_wrap {
  min-height:400px;
  background:url(../imgs/workation/nemuro_work08.jpg) center center no-repeat;
  background-size:cover;
  position:relative;
}
.work-space_ttl {
  color:#fff;
  font-size:170px;
  line-height:1;
  text-align:center;
  display:block;
  width:100%;
  max-width:90vw;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.work-space_list {
  display:flex;
  flex-direction:column;
}
.work-space_list-item {
  display:flex;
  flex-wrap:wrap;
  padding-top:40px;
  position:relative;
}
.work-space_list-item.rgt {
  flex-direction:row-reverse;
  margin-bottom:40px;
}
.list-item_in {
  width:54.2%;
  max-width:650px;
}
.work-space_list-item .txtbk {
  margin-bottom:50px;
}
.list_ttlblk {
  padding:97px 0 0 50px;
  margin-bottom:10px;
  position:relative;
  z-index:0;
}
.num_bg {
  color:#efede7;
  font-size:170px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
}
.name_cap {
  line-height:1.2;
  margin-bottom:5px;
}
.space_name {
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0.1em;
}
.space_name span {
  display:inline-block;
}
.space_txt {
  line-height:1.87;
}
.main_blk {
  width:42%;
  max-width:500px;
  position:absolute;
  bottom:0;
  left:0;
  z-index:1;
}
.work-space_list-item.lft {
  padding-top:140px;
}
.work-space_list-item.lft::after {
  content:"";
  width:calc(100% - 185px);
  height:200px;
  background:url(../imgs/workation/bg_line.svg) 0 bottom no-repeat;
  background-size:cover;
  position:absolute;
  top:0;
  right:0;
  z-index:-1;
}

.work-space_list-item.lft .main_blk {
  left:auto;
  right:0;
}

.thum_blk {
  display:flex;
  gap:25px;
  max-width:650px;
}


/* -------------------------------------
model-plan
------------------------------------- */
#model-plan {
  padding-bottom:180px;
}
.day_name {
  color:#fff;
  font-size:35px;
  font-weight:600;
  line-height:1;
  padding:4px 20px;
  margin-bottom:30px;
  background-color: #ca5142;
}
.model-plan_list {
  display:flex;
  flex-direction:column;
  gap:70px;
  margin-bottom:70px;
}
.model-plan_list.list_btm {
  margin-bottom:0;
}
.model-plan_list-item {
  display:flex;
  gap:50px;
}
.model-plan_list-item .imgbk {
  width:calc(50% - 50px);
}
.model-plan_list-item .txtbk {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:50%;
  padding-top:20px;
}
.model-plan_list-item .txtbk .txtbk_in {

}

.model-plan_list-item .item_name {
  letter-spacing:0.05em;
  line-height:1.6;
  margin-bottom:15px;
}
.model-plan_list-item .item_name span {
  display:block;
}
.model-plan_list-item .item_txt {

}

.linkbtn_wrap {
    display: flex;
    flex-direction:column;
    gap:10px;
    padding-top:20px;
    position:relative;
    bottom:0;
}
.linkbtn {
    color:#000;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    gap:10px;
    width:100%;
    max-width:400px;
    padding:13px 30px;
    background-color: #fff;
    border-radius: 30px;
    border:2px solid #ca5142;
    transition: all 0.3s;
}
.linkbtn:hover {
  color:#fff;
  background-color:#ca5142;
}
.link_icon {
  height:30px;
}
.link_icon .img {
  display:block;
  width:auto;
  height:100%;
}
.link_icon .on {
  display:none;
}
.linkbtn:hover .link_icon .off {
  display:none;
}
.linkbtn:hover .link_icon .on {
  display:block;
}
.linkbtn .link_txt {
  font-size:20px;
  line-height:1;
  min-width:240px;
}

/*sightseeing*/
#sightseeing {
  display:flex;
  gap:35px;
  padding:79px 50px;
  margin-bottom:62px;
  background-color:#ca5142;
}
#sightseeing .img_wrap {
  display:flex;
  
  gap:20px;
  width:calc(100% - 353px);
  max-width:730px;
}
#sightseeing .txt_wrap {
  color:#fff;
  letter-spacing:0.05em;
  width:100%;
  max-width:318px;
}
#sightseeing .s_ttl {
  line-height:1.52;
  letter-spacing:0.05em;
  padding-top:10px;
  margin-bottom:10px;
}
#sightseeing .s_txt {

}


/* -------------------------------------
about
------------------------------------- */
.overview_wrap {
  padding:50px 50px 40px;
  border:3px solid #ca5142;
  margin-bottom:70px;
}
.overview_wrap_in {

}
.ov_ttl_blk {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 20px;
  margin-bottom:10px;
}
.ov_ttl {
  line-height:1.2;
  letter-spacing:0.03em;
}
.ov_note {
  color:#fff;
  font-size:18px;
  letter-spacing:0.05em;
  line-height:1.2;
  background-color:#ca5142;
  padding:3px 7px;
}
.ov_ttl span, .ov_note span {
  display:inline-block;
}

.ov_item {
  padding:10px 0;
  border-top:1px solid #ca5142;
}
.ov_item:last-child {
  padding-bottom:0;
}
.ov_item dt {
  font-weight:700;
}
.ov_item_note {
  font-weight:400;
}




@media screen and (max-width: 1200px) {
.workation {
  font-size:clamp(14px,1.33vw,16px);
}
.fs-mid {
  font-size: clamp(17px, 1.9vw, 23px);
}


/* -------------------------------------
point
------------------------------------- */
.point_list .tx_bg {
    font-size: clamp(70px,10.8vw,130px);
}

/* -------------------------------------
work-space
------------------------------------- */
#work-space {
    padding-bottom: 16.25vw;
}
.work-space_ttl {
    font-size: clamp(90px,14.2vw,170px);
}
.work-space_list-item.lft {
    padding-top: 11.6vw;
}
.list_ttlblk {
    padding: 8vw 0 0 4.16vw;
}
.num_bg {
    font-size: clamp(120px,14.2vw,170px);
}
.space_name {
    font-size: clamp(20px,2.5vw,30px);
}
.work-space_list-item.lft::after {
    width: calc(100% - 15.4vw);
    height: 16.6vw;
}

/* -------------------------------------
model-plan
------------------------------------- */
#model-plan {
  padding-bottom:max(80px,15vw);
}
.linkbtn .link_txt {
    font-size: clamp(14px,1.66vw,20px);
    min-width:165px;
}


#sightseeing .txt_wrap {
    max-width: 280px;
}
#sightseeing .img_wrap {
    width: calc(100% - 280px);
    max-width:540px;
}

/* -------------------------------------
about
------------------------------------- */
.ov_note {
    font-size: clamp(15px,1.5vw,18px);
}



}

@media screen and (max-width: 1160px) {
}

@media screen and (max-width: 1060px) {
}

@media screen and (max-width: 980px) {
/* -------------------------------------
work-space
------------------------------------- */
.thum_blk {
    gap: 15px;
}


/* -------------------------------------
model-plan
------------------------------------- */
#sightseeing {
    gap: 25px;
    padding: 5vw;
}
#sightseeing .txt_wrap {
    max-width: 260px;
}
#sightseeing .img_wrap {
    width: calc(100% - 260px);
}



}

@media screen and (max-width: 880px) {
/* -------------------------------------
workation_intro
------------------------------------- */
.n-880 {
  display:none;
}

.intro_ttl {
  font-size:clamp(30px,5.68vw,50px);
}

.check_nav-item a {
    gap: 10px;
}


}

@media screen and (max-width: 800px) {
.n-800 {
  display:none;
}

}

@media screen and (max-width: 768px) {
/* -------------------------------------
mainimg
------------------------------------- */
.workation.low .low_inblk .spttl {
  position:static;
}
.low .low_inblk .page_ttl.spttl span {
  color: #ca5142;
}
.low .low_inblk .page_ttl .jp:after {
  background-color: #ca5142;
}
#mainimg .imgflame {
  width:100%;
  min-height:150px;
  padding-top:0;
}
.imgflame_item:nth-child(odd) .img_cvr {
    object-position: left;
    -o-object-position: left;
}
.imgflame_item:nth-child(even) .img_cvr {
    object-position: right;
    -o-object-position: right;
}




/* -------------------------------------
workation_intro
------------------------------------- */
.check_navlist {
  flex-wrap:wrap;
}
.check_nav-item {
  width: calc((100% - 20px) / 2);
}

/* -------------------------------------
point
------------------------------------- */
.point_list {
    gap: 50px 4%;
}
.point_list >* {
    width: 48%;
}

/* -------------------------------------
work-space
------------------------------------- */
.work-space_list-item.lft::after {
    width: calc(100% - 140px);
    height: 16.6vw;
}
.list_ttlblk {
    padding: 60px 0 0 30px;
}

/* -------------------------------------
model-plan
------------------------------------- */
.model-plan_list-item {
  gap:30px;
}
.model-plan_list-item .imgbk {
    width: calc(50% - 30px);
}
.link_icon {
    height: 23px;
}

#sightseeing {
    flex-direction:column;
}
#sightseeing .img_wrap {
    width: 100%;
    max-width:100%;
}
#sightseeing .txt_wrap {
    width: 100%;
    max-width:100%;
}



}

@media screen and (max-width: 640px) {
/* -------------------------------------
work-space
------------------------------------- */
.work-space_ttl_wrap {
    min-height: auto;
    aspect-ratio:62 / 40;
}
.work-space_ttl {
    font-size: clamp(50px,14vw,90px);
    letter-spacing:0.1em;
}
.work-space_list-item {
  flex-direction:column;
    max-width:500px;
    margin:0 auto;
}
.list-item_in {
    width: 100%;
}
.work-space_list-item .txtbk {
    margin-bottom: 20px;
}
.main_blk {
    width: 100%;
    margin-bottom: 15px;
    position: static;
}

/* -------------------------------------
model-plan
------------------------------------- */
.model-plan_list-item {
  flex-direction:column;
  gap:20px;
  max-width:500px;
  margin:0 auto;
}
.model-plan_list-item .imgbk {
    width: 100%;
}
.model-plan_list-item .txtbk {
    width: 100%;
    padding-top:0;
}


/* -------------------------------------
about
------------------------------------- */
.overview_wrap {
    padding: 30px 20px 30px;
}



}


@media screen and (max-width: 600px) {

}

@media screen and (max-width: 550px) {
/* -------------------------------------
workation_intro
------------------------------------- */
.check_ttl {
  flex-direction:column;
}
.check_navlist {
  flex-direction:column;
  align-items:center;
}
.check_nav-item {
  width: 100%;
}


/* -------------------------------------
point
------------------------------------- */
.point_list {
  flex-direction:column;
  gap: 40px;
}
.point_list >* {
    width: 100%;
}





}

@media screen and (max-width: 500px) {

.intro_ttl {
    font-size: clamp(24px, 6vw, 30px);
}


}

@media screen and (min-width: 769px) {
}