@charset "utf-8";

/*PCSP共通設定*/
html {scroll-behavior: smooth;}/*smooth scroll*/

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}

/* CSS */
#dirPathBlock {
	overflow-x: scroll;
	overflow-y: hidden;
}
#dirPathBlock,
#anchorLinkBlock {margin: 0 1%;}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
#dirPathBlock p {width: max-content;}
h1 {
	font-size: 12px;
	margin: 0 1% 1%;
}


#surftrip{
  font-size: 16px;
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
}
#surftrip a{
  opacity: 1;
  transition: .3s;
}

.inner{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

}

/*760px以上*/
@media screen and (min-width: 760px),print {
#wrapper {line-height: 1.231;}
.pcnone{display:none;}

/* CSS */
#dirPathBlock,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: auto;
}
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
	font-size: 12px;
  width: 100%;
	max-width:1080px;
  margin: 0 auto 5px;
}


#surftrip{
  font-size: 16px;
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
}
#surftrip a{
  opacity: 1;
  transition: .3s;
}

.inner{
	max-width:1080px;
	margin: 0 auto;
	padding:0;
}

}


#surftrip img {
	max-width:100%;
	height: auto;
}
#surftrip strong{
font-weight:600;
}


/* ─── フェードイン ─── */
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.fadein.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ==========

  #title

========== */
#title{
width: 100%;
}
#title img{
width: 100%;
}

@media screen and (min-width: 760px),print {  /*PC*/
  #title{
  width: 100%;
  max-height: 500px;
  background: url(../images/title_bg_pc.jpg) no-repeat 50% top;
  background-size: auto;
  }
  #title h2{
  margin: 0 auto;
  max-width: 1080px;
  }
#title img{
  width: 70%;
  max-width: 730px;
  padding-top: 270px;
  }
}




/* ==========

  section

========== */
section{
margin:0;
padding:20px 0 0 0;
position: relative;
}
.wave_gray,
.wave_white{
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: auto;
aspect-ratio: 24 / 1;
}
.wave_gray{
background: url("../images/wave_gray.png") no-repeat left bottom;
background-size: 100%;
}
.wave_white{
background: url("../images/wave_white.png") no-repeat left bottom;
background-size: 100%;
}

.section_title_img{
text-align: center;
font-size: clamp(1.125rem, 0.58rem + 2.73vw, 1.875rem);  /*18-30*/
font-weight: 600;
padding: 0 15px;
line-height: 1.2;
}
.section_title_img img{
display: block;
margin: 0 auto 10px auto;
}
.section_title{
text-align: center;
font-size: clamp(1.25rem, 0.341rem + 4.55vw, 2.5rem);  /*20-40*/
font-weight: 600;
}
.section_title span{
background: linear-gradient(transparent 70%, #9bd3ee 70%);
padding-bottom: 5px;
}

@media screen and (min-width: 760px),print {  /*PC*/
  .section_title_img{
  font-size: 36px;
  }
  .section_title{
  text-align: center;
  font-size: 44px;
  }
}


/* ==========

  #intro

========== */
#intro{
background: #fff;
padding-top: 30px;
}

.intro_box{
display:flex;
flex-direction: column;
align-items: flex-end;
gap:10px;
}
.intro_box .intro_img{
width: 100%;
max-width: 760px;
}
.intro_box > div{
padding: 0 15px 15px 15px;
}
.intro_box > div h3{
font-weight: 600;
padding-bottom: 20px;
font-size: 1.2em;
}

@media screen and (min-width: 760px),print {  /*PC*/
  #intro{
  padding-top: 40px;
  }
  .intro_box{
  display: flex;
  align-items: center;
  gap: 40px;
  flex-direction: row-reverse;
  padding-right: 30px;
  }
  .intro_box .intro_img{
  width: 300px;
  max-width:50%;
  }
  .intro_box > div{
  padding: 0 0 50px 0;
  }
  .intro_box > div h3{
  font-weight: 600;
  padding-bottom: 20px;
  font-size: 26px;
  }
  .intro_box > div p{
  font-size: 20px;
  line-height: 2;
  }

}

/* ==========

  #surfmiyazaki

========== */
#surfmiyazaki{
background: #f0efed;
}
.surfmiyazaki_box{
display:flex;
flex-direction: column;
gap:10px;
padding-top: 40px;
}
.surfmiyazaki_box .surfmiyazaki_img{
width: 100%;
max-width: 760px;
}
.surfmiyazaki_box > div{
padding: 0 15px 15px 15px;
}
.surfmiyazaki_box > div h3{
font-weight: 600;
padding-bottom: 10px;
font-size: 1.4em;
}
.surfmiyazaki_box > div p{
padding: 10px 0 10px 15px;
margin-left: 5px;
border-left: 2px solid #51b3ed;
}
.surfmiyazaki_box > div p span{
display: block;
font-weight: 600;
font-size: 1.1em;
}

@media screen and (min-width: 760px),print {  /*PC*/
  #surfmiyazaki{
  }
  .surfmiyazaki_box{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px;
  padding-top: 80px;
  background: url("../images/illust01.png") no-repeat 50% bottom;
  }
  .surfmiyazaki_box .surfmiyazaki_img{
  width: 300px;
  max-width:50%;
  }
  .surfmiyazaki_box > div{
  padding: 0 0 50px 20px;
  }
  .surfmiyazaki_box > div h3{
  font-weight: 600;
  padding-bottom: 30px;
  font-size: 34px;
  }
  .surfmiyazaki_box > div p{
  font-size: 18px;
  line-height: 2.4;
  border-left: 3px solid #51b3ed;
  padding-left: 25px;
  margin-left: 15px;
  }
  .surfmiyazaki_box > div p span{
  display: block;
  font-weight: 600;
  font-size: 22px;
  }
}




/* ==========

  #guide

========== */
#guide{
background: #fff;
}


@media screen and (min-width: 760px),print {  /*PC*/
}


/* ===== LAYOUT ===== */
.layout {
  display: flex;
  min-height: 100vh;
  margin-top: 40px;
}

/* ===== VERTICAL NAV ===== */
.side-nav {
    position: sticky;
    top: 30px;
    height: 100vh;
    width: 44px;
    background: #f0efed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 100;
    flex-shrink: 0;
    border-radius: 25px 25px 0 0;
}

.nav-item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(240,244,248,0.4);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  padding: 6px 2px;
  position: relative;
}

.nav-item::before {
  content: '';
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #239ce4;
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-item:link {
  color: #6f6f6f;
}
.nav-item.active,
.nav-item:hover {
  color: #239ce4;
}

.nav-item.active::before {
  opacity: 1;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  padding: 0 15px 40px 15px;
  max-width: 100%;
}

/* ===== SECTION ===== */
.surf-section {
  padding: 20px 0;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.surf-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: #8e8c87;
  margin: 0 0 12px 5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #8e8c87;
}

.guide-title {
    font-size: clamp(1.75rem, 1.205rem + 2.73vw, 2.5rem);  /*28-40*/
    color: #333;
    line-height: 1;
    margin-bottom: 30px;
    font-weight: 500;
}

/* ===== CARD ===== */
.card {
  overflow: hidden;
  margin-top: 32px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.card-img{
text-align: center;
}

.card-body {
  padding: 20px 0 24px;
}

.card-comment {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: #4a5568;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed #e2e8f0;
}

/* ===== LIST ===== */
.surf-list {
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

/*ulリストの場合*/
.surf-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 12px;
}


.surf-list li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #87cdf0;
  flex-shrink: 0;
}

/*dlリストの場合*/
.surf-list div{
border-left: solid 3px #87cdf0;
padding-left: 15px;
margin: 10px 0;
}
.surf-list dt{
font-weight: 600;
font-size: 1.1em;
}




@media screen and (min-width: 760px),print {  /*PC*/
  .side-nav {
    width: 50px;
    gap: 40px;
  }
  .nav-item {
    font-size: 16px;
    padding: 8px 4px;
  }
  .main-content {
    max-width: 1000px;
    padding: 0 20px 120px 60px;
  }
  .surf-section {
    padding: 40px 0 40px;
  }
  .card {
  display: flex;
  align-items: flex-start;
  gap:30px;
  }
  .card-img{
  width: 40%;
  }
  .card-body {
    padding: 0;
    width: 60%;
  }
  .surf-list li{
  padding:0;
  font-size: 18px;
  }
  .surf-list div{
  margin: 0 0 20px 0;
  }
  .surf-list dt{
  font-size: 20px;
  padding-bottom: 10px;
  }
  #conditions .card-img{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 10px 0 10px;
  }


}



/* ==========

  #hotel

========== */
#hotel{
background: #f0efed;
padding-bottom: 50px;
}

.hotel_box{
background: #fff;
margin: 40px 15px;
padding: 30px clamp(0.625rem, -0.739rem + 6.82vw, 2.5rem);/*10-40*/;
border-radius: 14px;
box-shadow: 0px 0px 15px 0px #dcd9d4;
}
.hotel_name{
font-size: clamp(1.75rem, 1.477rem + 1.36vw, 2.125rem);  /*28-34*/
font-weight: 600;
line-height: 1.2;
margin-bottom: 10px;
border-left:solid 3px #51b3ed;
padding: 7px 0 7px 15px;
}
.hotel_intro {
display: flex;
flex-direction: column;
gap: 20px;
}
.hotel_intro > p{
font-weight: 600;
width: 100%;
}

/* ANA ホリデイ・イン リゾート 宮崎 */
#hotel_anaholidayin .hotel_service{
display: flex;
align-items: flex-start;
gap:clamp(0.625rem, 0.17rem + 2.27vw, 1.25rem);/*10-20*/
}
#hotel_anaholidayin .hotel_service img{
width:40%;
max-width:210px;
}
#hotel_anaholidayin .hotel_service dl dt{
font-weight:600;
line-height: 1.5;
}
#hotel_anaholidayin .hotel_service dl dt:nth-of-type(2){
padding-top: 10px;
}
#hotel_anaholidayin .hotel_service dl dd{
font-size:clamp(0.75rem, 0.645rem + 0.53vw, 1rem);  /*12-16*/
line-height: 1.5;
padding: 5px 0;
}

/* ホテルメリージュ */
#hotel_merieges .hotel_service{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap:10px;
}
#hotel_merieges .hotel_service img{
width:calc((100% / 2) - 5px);
max-width:245px;
}
#hotel_merieges .hotel_service p{
width:100%;
}



.hotel_opinfo{
margin: 30px 0;
display: flex;
flex-direction: column-reverse;
gap:10px;
}
.hotel_opinfo_img{
max-width:500px;
margin: 0 auto;
}
.hotel_opinfo_txt h3{
font-weight: 600;
font-size: 1.1em;
}
.hotel_opinfo_txt dl{
padding:10px 0;
}
.hotel_opinfo_txt dl > div{
display:flex;
}
.hotel_opinfo_txt dl dt{
width:6em;
font-weight: 600;
}
.hotel_opinfo_txt dl dd{
width:calc(100% - 6em);
}
/*電話番号の自動リンクを解除*/
a[href^="tel:"] {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}

.hotel_opinfo_txt p{
padding: 5px 0;
}
.bt_jump{
display: flex;
align-items: center;
justify-content: flex-end;
gap:5px;
}
.bt_jump img{
width: 1em;
margin-right: 10px;
}
.bt_jump a{
text-decoration: underline;
}
.bt_jump a:hover{
transform: translateY(2px);
}

.hotel_link{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap:15px;
width: 100%;
}
.hotel_link a{
display: flex;
align-items: center;
justify-content: center;
gap:10px;
font-weight: 500;
color: #fff;
padding: 10px 15px;
background: -moz-linear-gradient(left, #6fc2ec, #51b3ed);
background: -webkit-gradient(linear, left center, right center, from(#6fc2ec), to(#51b3ed));
border-radius: 25px;
text-align: center;
max-width: 22em;
margin: 0 auto;
box-shadow: 0px 3px 10px 0px #cfdde4;
transition: transform 0.2s, box-shadow 0.2s;
}
.hotel_link a img{
width: 2em;
}
.hotel_link a span{
min-width: 8em;
}
.hotel_link a:hover{
transform: translateY(2px);
}



/* ===== GALLERY ===== */
  .gallery-group {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
  }

  .gallery-block {}


  .gallery-viewport {
    width: 100%;
    overflow: hidden;
  }

  .gallery-track {
    display: grid;
  }

  .gallery-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
  }

  .gallery-slide.active {
    opacity: 1;
    pointer-events: auto;
  }

  .gallery-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }


  .gallery-dots {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    justify-content: center;
  }

  .gallery-dot {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: #d3d3d3;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
  }

  .gallery-dot.active {
    background: #87cdf0;
    transform: scaleY(1.5);
  }

@media (max-width: 768px) {
  .gallery-dot { 
  width: 32px;
  }
}


@media screen and (min-width: 760px),print {  /*PC*/
.hotel_box{
margin: 40px 15px;
padding: clamp(0.625rem, -0.739rem + 6.82vw, 2.5rem);/*10-40*/;
border-radius: 20px;
}
.hotel_intro {
display: flex;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
align-items: flex-start;
}
.hotel_intro > p{
padding: 15px 0;
}

.hotel_service{
width: 50%;
}
.gallery-group{
width: 47%;
}

.hotel_opinfo{
margin: 40px 0;
flex-direction: row;
gap:30px;
}
.hotel_opinfo_img{
width: 50%;
}
.hotel_opinfo_txt{
width: 47%;
}
.hotel_opinfo_txt dl dd{
line-height: 1.5;
}

.hotel_link{
display: flex;
flex-direction: row;
align-items: center;
gap:20px;
}
.hotel_link a{
padding: 10px 25px;
}

}

@media screen and (min-width: 1080px),print {  /*PC 1080px以上*/
.hotel_box{
margin: 40px 0;
}

}



/*ANAホリデイ・インリゾート宮崎サブスクプラン*/
.subsc_box{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap:20px;
background: #deeff7;
border-radius: 12px;
padding: 15px;
margin: 80px 0 30px 0;
}
.subsc_label {
padding-bottom: 20px;
font-weight:600;
font-size: 1.2em;
width: 100%;
}
.ico_check{
display: block;
width: 90px;
margin: -70px auto 3px auto;
}
.marker{
background: linear-gradient(transparent 60%, #fcfb82 60%);
}
.subsc_txt p{
padding-bottom:10px;
line-height: 1.5;
}

.subsc_info {
width: 100%;
}
.subsc_info dt{
background: #87cdf0;
padding: 10px;
font-weight:600;
display: flex;
}
.subsc_info dt::before{
content: '●';
color: #fff;
font-size: 0.9em;
margin-right: 7px;
padding-top: 0.1em;
}
.subsc_info dd{
padding: 20px 0;
line-height: 1.5;
}
.subsc_info dd ul li{
padding: 3px 0 3px 10px;
display: flex;
}
.subsc_info dd ul li::before{
content: '●';
color: #87cdf0;
font-size: 0.9em;
margin-right: 7px;
padding-top: 0.1em;
}

.subsc_items dd{
padding-left: 1em;
}
.subsc_items dd span{
font-size: 0.9em;
}

.subsc_label_apply{
font-weight:600;
font-size: 1.2em;
width: 100%;
text-align: center;
}
.subsc_box .hotel_link{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap:15px;
width: 100%;
}
.subsc_box .hotel_link a{
display: flex;
align-items: center;
justify-content: center;
gap:10px;
font-weight: 500;
color: #1d90d4;
padding: 10px 15px;
background: -moz-linear-gradient(left, #ffffff, #eaf7ff);
background: -webkit-gradient(linear, left center, right center, from(#ffffff), to(#eaf7ff));
border-radius: 25px;
text-align: center;
max-width: 22em;
margin: 0 auto;
box-shadow: 0px 3px 10px 0px #cfdde4;
transition: transform 0.2s, box-shadow 0.2s;
border:solid 1px #1d90d4;
}
.subsc_box .hotel_link a img{
width: 2em;
}
.subsc_box .hotel_link a span{
min-width: 8em;
}
.subsc_box .hotel_link a:hover{
transform: translateY(2px);
}


@media screen and (min-width: 760px),print {  /*PC*/
.subsc_box{
padding: 20px;
gap:20px;
justify-content: space-between;
}
.subsc_label {
text-align: center;
font-size: clamp(1.375rem, 0.943rem + 0.91vw, 1.625rem);  /*22-26*/
}
.subsc_txt{
 width:60%;
}
.subsc_txt p{
 line-height: 1.8;;
}
.subsc_info{
 width:35%;
 padding: 0;
}
.subsc_box .hotel_link{
display: flex;
flex-direction: row;
align-items: center;
gap:20px;
}
.subsc_box .hotel_link a{
padding: 10px 25px;
}

}


/* ==========

  #surfspot

========== */
#surfspot{
background: #fff;
padding-bottom: 50px;
}

.surfspot_box{
max-width: 1080px;
margin: 50px auto;
padding: 0 10px;
}


/* ===== SPOT GALLERY ===== */
  .spot-gallery-group {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
  }
  .spot-viewport {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }

  .spot-track {
    display: grid;
  }

  .spot-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
  }

  .spot-slide.active {
    opacity: 1;
    pointer-events: auto;
  }

  .spot-img {
    width: 100%;
    aspect-ratio: 108 / 67;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  
  /* 矢印ボタン */
  .spot-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    z-index: 10;
  }

  .spot-btn:hover {
    background: #5cb9ef;
    border-color: #fff;
    transform: translateY(-50%) scale(1.08);
  }

  .spot-btn.prev { left: 8px; }
  .spot-btn.next { right: 8px; }
  
  .spot-btn.prev img { width: 10px; }
  .spot-btn.next img { width: 10px; }


  @media (max-width: 768px) {
    .spot-section { padding: 60px 20px 60px; }
    .spot-btn { width: 36px; height: 36px; font-size: 13px; }
    .spot-btn.prev { left: 4px; }
    .spot-btn.next { right: 4px; }
  }




@media screen and (min-width: 1080px),print {  /*PC 1080px以上*/
  .surfspot_box{
  padding: 0;
  }
}


.wave_spot{
position: absolute;
left: 0;
bottom: -2px;
display: block;
width: 100%;
height: auto;
aspect-ratio: 542 / 27;
background: url("../images/wave_spot.png") no-repeat left bottom;
background-size: 100%;
}


.surfspot_info{
display:flex;
flex-direction: column;
gap:20px;
}
.surfspot_info_inbox {
padding-left: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
.spot_label{
padding: 5px 0 5px 15px;
border-left:solid 3px #51b3ed;
font-weight: 600;
font-size: clamp(1.75rem, 1.568rem + 0.91vw, 2rem);  /*28-32*/
line-height:1.3;
letter-spacing: 1px;
}
.spot_label .area{
font-size: 16px;
display: block;
}
.spot_label .rub{
font-size: 12px;
padding-left: 2px;
display: block;
}
.surfspot_type{
position: relative;
width: 12em;
font-weight: 500;
display: flex;
align-items: flex-end;
margin-right: 10px;
font-size: 0.9em;
}
.surfspot_type span{
display: inline-block;
background: #fcfb82;
padding: 3px 18px 3px 14px;
margin-bottom: 8px;
border-radius: 20px 0 0 20px;
white-space: nowrap;
}
.surfspot_type img{
width: 30px;
position: absolute;
right:-8px;
bottom:0;
}
.surfspot_txt{
padding-top: 10px;
width: 100%;
}
.surfspot_info dl{
display:flex;
flex-direction: column;
padding: 10px 15px;
background: #f0efed;
border-radius: 12px;
font-size: 0.9em;
}
.surfspot_info dl dt{
font-weight: 600;
padding-top: 5px;
}
.surfspot_info dl dd{
padding-left: 1em;
}
.surfspot_info dl dd ul li{
display:flex;
}
.surfspot_info dl dd ul li::before{
content: '・';
}

@media screen and (min-width: 760px),print {  /*PC*/

.surfspot_box{
margin: 50px auto 70px auto;
}
.surfspot_info{
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap:20px;
width: 98%;
margin: 0 auto;
}
.surfspot_info_inbox{
width: calc(100% - 350px);
}
.surfspot_type{
margin-right: 5px;
}
.spot_label .rub{
display: inline-block;
}
.surfspot_txt{
padding-top: 20px;
line-height: 1.8;
}

.surfspot_info dl{
width: 280px;
margin: 30px 0 0 0;
}
}



/* ==========

  #QandA

========== */

#QandA{
background: #f0efed;
padding-bottom: 90px;
}
.qa_list{
max-width: 1080px;
margin: 20px auto;
padding: 0 15px;
}
.qa_list dt,
.qa_list dd{
display: flex;
align-items: center;
}
.qa_list dd{
align-items: flex-start;
}
.qa_list dt img,
.qa_list dd img{
margin-right: 1em;
width: 3em;
}
.qa_list dt{
font-weight: 600;
padding: 2em 1em 0.6em 0;

}
.qa_list dd{
padding: 1em;
background: #fff;
border-radius: 20px;
margin-left: 2em;
}

.garea {
  margin: 50px 0 0;
}
.garea h3 {
  margin-bottom: 15px;
  font-size: 18px;
  text-align: center;
}

@media screen and (min-width: 760px),print {  /*PC*/
.qa_list dt,
.qa_list dd{
font-size: 1.1em;
}

.garea {
  margin: 90px 0 0;
}
.garea h3 {
  font-size: 25px;
}

}

/* ==========

  #garea

========== */

#garea {
  margin: 40px 0;
}
#garea h2 {
  margin-bottom: 15px;
  font-size: 18px;
  text-align: center;
}

@media screen and (min-width: 760px),print {  /*PC*/
#garea h2 {
  font-size: 25px;
}

}