@media screen and (max-width: 550px) {
.hero-area {
margin: 0 -10px;
}
}

.cmn-image {
margin-top: 0;
text-align: center;
}

.cmn-image .copy {
font-size: 10px;
display: block;
text-align: right;
}

.topic-path h1{
display: inline-block;
font-weight: normal;
}

/* hdg
--------------------------------------------------*/
.hdg-area {
display: block;
overflow: hidden;
max-width: 960px;
height: 0;
padding-top: 13%;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100%;
}

.area-hawaii .hdg-area {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-bg-01-01.png);
}

.area-maui .hdg-area {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-bg-02-01.png);
}

.area-kauai .hdg-area {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-bg-03-01.png);
}

.area-other .hdg-area {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-bg-04-01.png);
}

.hdg-rec {
display: block;
overflow: hidden;
width: 100%;
height: 0;
margin-top: 20px;
padding-top: 8%;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100%;
}

.hdg-rec.rec-activity {
background-image: url(/w_special/hawaii_neighborislands/images/cmn-hdg-bg-01.png);
}

.hdg-rec.rec-spot {
background-image: url(/w_special/hawaii_neighborislands/images/cmn-hdg-bg-02.png);
}

@media screen and (max-width: 550px) {
.hdg-area {
padding-top: 20%;
background-size: 155%;
}

.hdg-rec {
margin-top: 5px;
padding-top: 11%;
background-position: 50% 20%;
background-size: 170%;
}
}

.hdg-lv4 {
font-size: 22px;
font-weight: bold;
line-height: 1.2;
margin-top: 15px;
}

.area-hawaii .hdg-lv4 {
color: #f06582;
}

.area-maui .hdg-lv4 {
color: #407dcf;
}

.area-kauai .hdg-lv4 {
color: #16ba7a;
}

@media screen and (max-width: 550px) {
.hdg-lv4 {
font-size: 14px;
}
}

/* intro
--------------------------------------------------*/
.intro {
font-size: 14px;
line-height: 1.8;
margin: 10px 0;
text-align: center;
letter-spacing: -.07em;
}

.intro span {
display: block;
}

@media screen and (max-width: 980px) {
.intro span {
display: inline;
}
}

@media screen and (max-width: 550px) {
.intro {
font-size: 13px;
text-align: left;
}
}

/* nav-internal
--------------------------------------------------*/
.nav-internal {
overflow: hidden;
}

.nav-internal li {
float: left;
width: 31.66667%;
margin-left: 2.5%;
}

.nav-internal li:first-child {
margin-left: 0;
}

.nav-internal li img {
opacity: 1;
}

.nav-internal li a:hover img {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-property: opacity;
transition-property: opacity;
opacity: .6;
}

/* lead-container
--------------------------------------------------*/
.top-container {
margin-bottom: 87px;
padding: 20px 20px;
background: #edf2f8;
}

@media screen and (max-width: 550px) {
.top-container {
margin: 0 -10px;
padding: 0 10px 14px;
border-bottom: solid 1px #bcbaba;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
}

/* catch
--------------------------------------------------*/
.catch {
font-size: 22px;
font-weight: bold;
line-height: 1.2;
margin-top: 15px;
}

.area-hawaii .catch {
color: #f06582;
}

.area-maui .catch {
color: #407dcf;
}

.area-kauai .catch {
color: #16ba7a;
}

@media screen and (max-width: 550px) {
.catch {
font-size: 14px;
}
}

/* catch-image
--------------------------------------------------*/
.catch-image {
display: block;
overflow: hidden;
width: 360px;
height: 0;
margin-bottom: 15px;
padding-top: 65px;
background-repeat: no-repeat;
background-size: 100%;
}

.area-hawaii .catch-image {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-img-01.png);
}

.area-maui .catch-image {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-img-02.png);
}

.area-kauai .catch-image {
background-image: url(/w_special/hawaii_neighborislands/images/hdg-img-03.png);
}

@media screen and (max-width: 1000px) {
.catch-image {
background-size: 90%;
}
}

@media screen and (max-width: 720px) {
.catch-image {
font-size: 22px;
font-weight: bold;
line-height: 1.2;
overflow: visible;
width: 100%;
height: auto;
padding-top: 0;
}

.area-hawaii .catch-image {
color: #f06582;
background-image: none;
}

.area-maui .catch-image {
color: #407dcf;
background-image: none;
}

.area-kauai .catch-image {
color: #16ba7a;
background-image: none;
}
}

@media screen and (max-width: 550px) {
.catch-image {
font-size: 17px;
}
}

/* top-item
--------------------------------------------------*/
.top-item .copy {
margin-top: -8px;
}

.top-item .cmn-col {
font-size: 14px;
padding-top: 65px;
}

.top-item .cmn-col table {
width: 100%;
margin-top: 15px;
}

.top-item .cmn-col table th {
font-weight: normal;
position: relative;
width: 5em;
text-align: left;
vertical-align: top;
}

.top-item .cmn-col table th:after {
position: absolute;
top: 0;
right: 5px;
display: block;
content: ':';
}

@media screen and (max-width: 1000px) {
.top-item .cmn-col {
padding-top: 30px;
}
}

@media screen and (max-width: 850px) {
.top-item .cmn-col {
padding-top: 15px;
}
}

@media screen and (max-width: 550px) {
.top-item .cmn-col {
padding-top: 0;
}
}

/* movie-container
--------------------------------------------------*/
.movie-container {
margin: 30px 0 20px;
padding: 4.9% 30px;
background-repeat: no-repeat;
background-size: 100%;
}

.movie-container .movie-item {
padding-right: 45%;
}

.movie-container .movie-item .movie {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}

.movie-container .movie-item .movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

.movie-container .movie-desc {
font-size: 12px;
display: none;
text-align: center;
}

.area-hawaii .movie-container {
background-image: url(/w_special/hawaii_neighborislands/images/img-01-06.jpg);
}

.area-maui .movie-container {
background-image: url(/w_special/hawaii_neighborislands/images/img-02-04.jpg);
}

.area-kauai .movie-container {
background-image: url(/w_special/hawaii_neighborislands/images/img-03-04.jpg);
}

@media screen and (max-width: 720px) {
.movie-container {
padding: 0;
}

.movie-container .movie-item {
padding-right: 0;
}

.movie-container .movie-desc {
display: block;
}

.area-hawaii .movie-container {
background: none;
}

.area-maui .movie-container {
background: none;
}

.area-kauai .movie-container {
background: none;
}
}

@media screen and (max-width: 550px) {
.movie-container {
padding-bottom: 20px;
border-bottom: 1px solid #d2d2d2;
}
}

/* box
--------------------------------------------------*/
.area-other {
margin-bottom: 90px;
}

.area-other .lead {
margin: 30px 0 20px;
}

.area-other .cmn-col {
margin-bottom: 20px;
}

@media screen and (max-width: 720px) {
.box {
margin: 0 10px;
}
}

/* --------------------------------------------------------
 Link
----------------------------------------------------------*/
/* link-tour
-------------------------------------------- */
.link-tour {
margin-bottom: 15px;
}

.link-tour a {
font-size: 17px;
font-weight: bold;
position: relative;
display: block;
padding: 12px 10px 10px 35px;
text-decoration: none;
color: #333;
border: 2px solid #d2d2d2;
border-radius: 4px;
}

.link-tour a:hover {
background: #f1f1f1;
}

.link-tour a:before {
position: absolute;
top: 50%;
left: 10px;
display: block;
overflow: hidden;
width: 18px;
height: 18px;
margin-top: -9px;
content: '';
}

.link-tour a:before {
border-radius: 3px;
background-color: #d1b1f1;
}

.link-tour a:after {
position: absolute;
display: inline-block;
display: block;
width: 0;
height: 0;
margin: 0;
content: '';
border-width: 4px 0 4px 4px;
border-style: solid;
border-color: transparent transparent transparent #fff;
}

.link-tour a:after {
top: 50%;
left: 17px;
margin-top: -4px;
}

.area-hawaii .link-tour a:before {
background-color: #d1b1f1;
}

.area-maui .link-tour a:before {
background-color: #74d3e1;
}

.area-kauai .link-tour a:before {
background-color: #93d98a;
}

@media screen and (max-width: 720px) {
.link-tour a {
font-size: 14px;
}
}

@media screen and (max-width: 600px) {
.link-tour a {
font-size: 13px;
letter-spacing: -.04em;
}
}

@media screen and (max-width: 550px) {
.link-tour a {
font-size: 14px;
border-width: 1px;
box-shadow: inset 0 -3px rgba(25, 25, 25, .1);
}
}

/* link-other-tour
--------------------------------------------------*/
.link-other-tour {
margin-top: 0;
text-align: right;
}

.link-other-tour li {
display: inline-block;
margin-left: 1em;
}

.link-other-tour a {
font-size: 16px;
position: relative;
padding-left: 23px;
text-decoration: none;
color: #000;
}

.link-other-tour a:hover {
text-decoration: underline;
}

.link-other-tour a:before,
.link-other-tour a:after {
position: absolute;
top: 50%;
display: block;
content: '';
}

.link-other-tour a:before {
left: 0;
width: 18px;
height: 18px;
margin-top: -9px;
border-radius: 3px;
background: #d1b1f1;
}

.link-other-tour a:after {
left: 7px;
margin-top: -4px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #fff;
}

.area-hawaii .link-other-tour a:before {
background-color: #d1b1f1;
}

.area-maui .link-other-tour a:before {
background-color: #74d3e1;
}

.area-kauai .link-other-tour a:before {
background-color: #93d98a;
}

@media screen and (max-width: 720px) {
.link-other-tour a {
font-size: 14px;
}
}

/* link-top
--------------------------------------------------*/
.link-top {
position: relative;
margin-bottom: 60px;
padding: 0 8px 8px 20px;
text-align: right;
}

.link-top:before {
position: absolute;
top: 7px;
right: 10.8em;
display: block;
width: 0;
height: 0;
margin: 0;
content: '';
border-width: 0 6px 8px;
border-style: solid;
border-color: transparent transparent #0b41a1;
}

@media screen and (max-width: 550px) {
.link-other-tour {
margin-bottom: 20px;
}

.link-top {
display: none;
}
}

/* --------------------------------------------------------------
    button
--------------------------------------------------------------- */
/* .btn
----------------------------------------------- */
.btn {
display: block;
padding: 10px 5px;
border-radius: 4px;
background-color: #eee;
}

.btn span {
position: relative;
display: inline-block;
padding-right: 18px;
}

.btn span:before {
position: absolute;
display: block;
width: 7.5px;
height: 7.5px;
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-right: 2.5px solid #333;
border-bottom: 2.5px solid #333;
}

.btn span:before {
top: 50%;
right: 0;
margin-top: -8px;
}

.cmn-toggle-container.active .btn span:before {
margin-top: -2px;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}

/* .related-container
----------------------------------------------- */
.related-container {
padding: 0 15px;
}

/* .related
----------------------------------------------- */
.related {
font-size: 13px;
position: relative;
min-height: 140px;
margin-top: 10px;
padding-left: 150px;
}

.related a {
text-decoration: none;
color: #333;
}

.related a:active .related-hdg,
.related a:hover .related-hdg,
.related a:focus .related-hdg {
text-decoration: underline;
}

.related .related-hdg {
font-size: 18px;
font-weight: bold;
line-height: 1.25;
margin-bottom: -10px;
color: #0b41a1;
}

.related .related-thumb {
position: absolute;
top: 0;
left: 0;
}

/* .sns
----------------------------------------------- */
.sns li {
display: inline-block;
margin-left: 10px;
vertical-align: top;
}

.sns li:first-child {
margin-left: 0;
}

/* .page-info
----------------------------------------------- */
.page-info {
margin-top: 40px;
border-top: 1px solid #ddd;
}

.page-provide {
font-size: 12px;
margin-top: -20px;
}