@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}
 *, *:before, *:after {
box-sizing: border-box;
}
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu {
display: block;
}
mark {
background-color: #ff0;
color: #000;
}
audio:not([controls]) {
display: none;
height: 0;
}
svg:not(:root) {
overflow: hidden;
}
button, input, optgroup, select, textarea {
margin: 0;
}
button, input {
overflow: visible;
}
button, select {
text-transform: none;
}
button, html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
display: inline-block;
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
appearance: button;
font: inherit;
}
summary {
display: list-item;
}
canvas, time {
display: inline-block;
}
[hidden] {
display: none;
}
html {
font-size: calc(0.75em + 0.5vw);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
letter-spacing: 0.2vw;
}
body {
color: #000;
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-optical-sizing: auto;
line-height: 1.5;
margin: 0;
}
#wrapper {
overflow: hidden;
}
img {
border-style: none;
vertical-align: bottom;
}
a {
background-color: transparent;
color: #000;
transition: all 0.5s cubic-bezier(0.4, 0, 0.5, 1);
}
a:hover {
opacity: 0.7;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
section {
margin: 3rem 0;
}
.home .section,
#bottomContact {
margin: 4rem 0;
}
h1 {
margin: 0;
}
ul, ol, table {
margin: 0 0 1.5rem;
}
h2, h3, h4, h5, h6, li, p, img, .noImg {
margin: 0 0 1rem;
}
h1 {
text-align: center;
font-size: 1.8rem;
padding: 1rem 0 2rem;
}
#main .pageTitle {
padding-bottom: 0;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1.1rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 1rem;
}
p {
line-height: 1.8;
}
p, dt, dd, li, input, textarea, select {
font-size: 0.85rem;
}
small {
font-size: 0.75rem;
color: #999;
margin: 0.4rem 0;
display: inline-block;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 1.2rem 1rem;
font-size: .9rem;
text-align: left;
}
th {
font-weight: normal;
background: #f5f5f5;
min-width: 9em;
}
ul, ol {
padding-left: 0.5rem;
margin-left: 1rem;
}
img {
max-width: 100%;
width: auto;
height: auto;
}
.author{
text-align: right;
font-size: 0.7rem;
color: #999;
padding: 0 1.1rem 1.1rem;
}
.publisher {
display: none;
}
.frame {
width: 100%;
padding: 0 5vw;
}
.btnWrap {
text-align: center;
}
.btn {
display: inline-block;
background: #999;
color: #fff;
padding: 1rem 2rem;
border-radius: 2px;
text-decoration: none;
font-size:1rem;
}
.btnDark {
background: #000;
border: 1px solid #000;
}
.btn:hover {
background: #000;
border-color: #000;
color: #fff;
opacity: 1;
}
.btnDark:hover {
background: #fff;
color: #000;
opacity: 1;
}
body:not(.home) #content {
margin-top: 1rem;
}
.single #content,
.category #content,
.error404 #content {
overflow: hidden;
}
.pageTitle,
.archiveTitle {
font-size: 1.8rem;
padding-top: 2.4rem;
}
.single-post #main,
.archive #main,
.error404 #main,
.search-results #main {
float: left;
width: 70%;
}
.single-post #main .wrap,
.archive #main .wrap,
.error404 #main .wrap,
.search-results #main .wrap {
border: 1px solid #ddd;
margin-bottom: 1rem;
}
.single-post #main .wrap .thumb img, .single-post #main .wrap .noImg,
.archive #main .wrap .thumb img,
.archive #main .wrap .noImg,
.error404 #main .wrap .thumb img,
.error404 #main .wrap .noImg,
.search-results #main .wrap .thumb img,
.search-results #main .wrap .noImg {
margin: 0;
}
.single-post #main .wrap a,
.archive #main .wrap a,
.error404 #main .wrap a,
.search-results #main .wrap a {
text-decoration: none;
}
.single-post #main .wrap img,
.archive #main .wrap img,
.error404 #main .wrap img,
.search-results #main .wrap img {
width: 100%;
}
.single-post #main .wrap .category, .single-post #main .wrap .postTitle, .single-post #main .wrap .footer,
.archive #main .wrap .category,
.archive #main .wrap .postTitle,
.archive #main .wrap .footer,
.error404 #main .wrap .category,
.error404 #main .wrap .postTitle,
.error404 #main .wrap .footer,
.search-results #main .wrap .category,
.search-results #main .wrap .postTitle,
.search-results #main .wrap .footer {
padding: 0 1rem;
}
.single-post #main .wrap .meta,
.archive #main .wrap .meta,
.error404 #main .wrap .meta,
.search-results #main .wrap .meta {
padding: 0.4rem 1.2rem 0.6rem;
}
.single-post #main .wrap .meta .date,
.archive #main .wrap .meta .date,
.error404 #main .wrap .meta .date,
.search-results #main .wrap .meta .date {
color: #999;
font-size: 0.8rem;
}
.single-post #main .wrap .post-categories,
.archive #main .wrap .post-categories,
.error404 #main .wrap .post-categories,
.search-results #main .wrap .post-categories {
margin: 0;
padding: 0;
list-style: none;
}
.single-post #main .wrap .post-categories li,
.archive #main .wrap .post-categories li,
.error404 #main .wrap .post-categories li,
.search-results #main .wrap .post-categories li {
display: inline-block;
margin: 0 0.3rem 0.55rem 0;
font-size: 0.7rem;
}
.single-post #main .wrap .post-categories li a,
.archive #main .wrap .post-categories li a,
.error404 #main .wrap .post-categories li a,
.search-results #main .wrap .post-categories li a {
color: #999;
border-radius: 2px;
border: 1px solid #ddd;
display: inline-block;
padding: 0.4rem 0.5rem;
}
.single-post #main .wrap .post-categories li a:hover,
.archive #main .wrap .post-categories li a:hover,
.error404 #main .wrap .post-categories li a:hover,
.search-results #main .wrap .post-categories li a:hover {
background: #000;
border-color: #000;
color: #fff;
opacity: 1;
}
.single-post #main .wrap .postTitle,
.archive #main .wrap .postTitle,
.error404 #main .wrap .postTitle,
.search-results #main .wrap .postTitle {
text-align: left;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.single-post #main .wrap .postTitle span,
.archive #main .wrap .postTitle span,
.error404 #main .wrap .postTitle span,
.search-results #main .wrap .postTitle span {
padding: 0.2rem 0 0.8rem;
display: block;
border-bottom: 1px solid #ddd;
}
.single-post #main .wrap .content,
.archive #main .wrap .content,
.error404 #main .wrap .content,
.search-results #main .wrap .content {
margin: 0;
padding: 0 1.1rem;
}
.single-post #main .wrap .content p img,
.archive #main .wrap .content p img,
.error404 #main .wrap .content p img,
.search-results #main .wrap .content p img {
margin: 0;
}
.single-post #main .wrap .content iframe{
width: 100% !important;
}
.single-post #main .wrap .footer,
.archive #main .wrap .footer,
.error404 #main .wrap .footer,
.search-results #main .wrap .footer {
padding-bottom: 1rem;
}
.single-post #main .wrap .footer .title,
.archive #main .wrap .footer .title,
.error404 #main .wrap .footer .title,
.search-results #main .wrap .footer .title {
margin-bottom: 0.4rem;
}
.single-post #main .wrap .footer .btn,
.archive #main .wrap .footer .btn,
.error404 #main .wrap .footer .btn,
.search-results #main .wrap .footer .btn {
font-size: 0.7rem;
}
.archive .footer {
text-align: right;
}
.single-post #side,
.archive #side,
.error404 #side,
.search-results #side {
float: right;
width: 25%;
}
.single-post #side .sideWidgetInner,
.archive #side .sideWidgetInner,
.error404 #side .sideWidgetInner,
.search-results #side .sideWidgetInner {
border: 1px solid #eee;
margin-bottom: 1rem;
text-align: center;
}
.single-post #side .sideWidgetInner .sideTitle,
.archive #side .sideWidgetInner .sideTitle,
.error404 #side .sideWidgetInner .sideTitle,
.search-results #side .sideWidgetInner .sideTitle {
background: #f5f5f5;
padding: 1.5rem 0;
font-size: 0.9rem;
margin: 0;
}
.single-post #side .sideWidgetInner ul,
.archive #side .sideWidgetInner ul,
.error404 #side .sideWidgetInner ul,
.search-results #side .sideWidgetInner ul {
margin: 0;
padding: 0;
list-style: none;
}
.single-post #side .sideWidgetInner ul li,
.archive #side .sideWidgetInner ul li,
.error404 #side .sideWidgetInner ul li,
.search-results #side .sideWidgetInner ul li {
border-top: 1px solid #eee;
margin: 0;
}
.single-post #side .sideWidgetInner ul li a,
.archive #side .sideWidgetInner ul li a,
.error404 #side .sideWidgetInner ul li a,
.search-results #side .sideWidgetInner ul li a {
display: block;
padding: 1rem;
text-decoration: none;
}
.single-post #side #recent-posts-2 li,
.archive #side #recent-posts-2 li,
.error404 #side #recent-posts-2 li,
.search-results #side #recent-posts-2 li {
text-align: left;
position: relative;
padding-top: 1.1rem;
}
.single-post #side #recent-posts-2 li .post-date,
.archive #side #recent-posts-2 li .post-date,
.error404 #side #recent-posts-2 li .post-date,
.search-results #side #recent-posts-2 li .post-date {
position: absolute;
left: 1rem;
top: 0.9rem;
color: #999;
font-size: 0.7rem;
}
.noImg {
display: block;
overflow: hidden;
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/logo.png);
background-position: center;
background-repeat: no-repeat;
background-color: #f5f5f5;
background-size: 22px;
height: 5rem;
}
.contact .btn {
background: #00b900 !important;
}
.contact .btn:hover {
background: #049f04 !important;
}
.home #header,
.home #bottomCampaign,
#bottomBtns {
display: none;
}
#header {
position: absolute;
z-index: 1;
top: 0;
}
#header .logoNav {
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
padding: 0.5rem 1rem;
position: fixed;
top: 0;
z-index: 1;
background: #fff;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
#header .logoNav,
#header .nav,
#header .menu,
#header .diving {
display: flex;
justify-content: space-between;
align-items: center;
}
#header .nav {
width: 78%;
max-width: 1000px;
justify-content: flex-end;
flex-wrap: wrap;
}
#header .nav a {
text-decoration: none;
}
#header .navBtn {
display: none;
}
#header .menu,
#header .diving,
#header .icon,
#mainVisual {
margin: 0;
padding: 0;
list-style: none;
}
#header .menu.clickNav.resize {
display: flex !important;
height: auto !important;
}
#header .menu .contact {
display: none;
}
#header li {
text-align: center;
margin: 0 10px;
}
#header li a {
font-size: 14px;
letter-spacing: 1px;
}
#header .menu li.tel a .number {
font-weight: bold;
font-size: 16px;
letter-spacing: 0;
}
#header li i {
margin-right: 3px;
vertical-align: 0;
font-size: 18px;
}
#header .tel i {
margin-right: 1px;
font-size: 16px;
}
#header .icon li {
margin-right: 0;
}
#header .icon .en,
#header .icon .voice {
display: none;
}
#header .icon .contact {
margin-left: 0;
}
#header .icon li .btn {
padding: 6px 10px;
text-align: center;
font-size: 12px;
}
#header .icon .contact .btn i {
font-size: 14px;
}
#header li.sp {
display: none;
}
#header .menu li.en {
margin: 0;
}
#header .icon .en a,
#header .menu li.en a {
display: inline-block;
padding: 5px 14px;
border-radius: 2px;
border: 1px solid #666;
font-weight: bold;
font-size: 12px;
}
#header .icon .en a:hover,
#header .menu li.en a:hover {
background-color: #e8e8e8;
}
#header .diving {
margin-top: 0.2rem;
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/wave.png);
background-position: left top;
background-repeat: repeat-x;
background-size: 21px;
background-color: #ebf5ff;
}
#header .diving li {
padding: 10px 0 8px;
}
#header .divingList a {
color: #00a1e1;
}
#header .logo {
width: 22%;
margin: 0;
padding: 0;
}
#header .logo a {
line-height: 0.7;
display: block;
text-decoration: none;
text-align: left;
}
#header .logo .en {
font-family: 'Kaushan Script', cursive;
margin-left: 5px;
vertical-align: 6px;
letter-spacing: 1px;
font-size: 23px;
}
#header .logo .jp {
font-family: "Folk Medium";
display: block;
font-size: 11px;
letter-spacing: 1px;
padding-top: 8px;
}
#header .logo .jp .large {
font-size: 14px;
margin-left: 5px;
}
#header .logo a img {
margin-bottom: 0;
width: 33px;
}
@media screen and (max-width: 1023px) {
#header .menu li {
margin: 0 8px;
}
#header li a {
font-size: 12px;
letter-spacing: 0;
}
#header li i {
font-size: 16px;
}
#header .icon li .btn,
#header .menu li.en a {
font-size: 10px;
} #header .icon li.en a {
padding: 6px 14px;
}
#header .icon .contact .btn i {
font-size: 12px;
}
#header .logo a img {
width: 22px;
}
#header .logo .en {
font-size: 19px;
}
#header .logo .jp {
letter-spacing: 1px;
font-size: 10px;
}
#header .logo .jp .large {
font-size: 11px;
}
}
@media screen and (max-width: 895px) {
#header li {
margin: 0 6px;
}
#header .menu li {
margin: 0 5px;
}
#header li a {
font-size: 11px;
}
#header .menu li.tel a .number {
font-size: 14px;
}
#header li i {
font-size: 14px;
}
#header .icon li .btn,
#header li.en a {
font-size: 9px;
}
#header .icon .contact .btn i {
font-size: 10px;
}
#header .logo .jp {
font-size: 9px;
}
}
@media screen and (max-width: 767px) {
#header .logoNav {
padding: 10px 8px;
}
#header .nav {
width: 61%;
padding-top: 0.2rem;
}
#header .menu,
#header .diving {
display: none;
}
#header .menu.clickNav.resize {
display: none !important;
}
#header .navBtn {
font-size: 10px;
display: block;
padding: 8px 10px 7px;
border-radius: 2px;
background: #000;
color: #fff;
border: 1px solid #000;
cursor: pointer;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
#header li {
margin: 0 0.8rem;
}
#header .menu .contact {
display: block;
}
#header .icon {
display: flex;
align-items: center;
}
#header .icon li {
margin-left: 8px !important;
}
#header .icon .en,
#header .icon .voice {
display: block;
}
#header .icon li .btn {
margin: 0;
padding: 0;
background: none !important;
}
#header .icon li .btn i {
margin: 0;
}
#header .icon .voice .btn i {
font-size: 24px;
color: #000;
}
#header .icon .contact .btn i {
font-size: 24px;
color: #00b900;
}
#header .icon .btn span {
display: block;
font-weight: bold;
font-size: 9px
}
#header .icon .voice .btn span {
color: #000;
}
#header .icon .contact .btn span {
color: #00b900;
}
#header .menu {
display: none;
padding-bottom: 4rem;
width: 100%;
position: absolute;
left: 0;
background: #fff;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#header .menu li.sp {
display: block;
}
#header .menu li.pc {
display: none;
}
#header .menu li a {
display: block;
font-size: 17px;
padding: 19px;
border-top: 1px solid #eee;
letter-spacing: 2px;
}
#header .menu li.en a {
font-size: 9px;
}
#header .menu li.tel a .number {
font-size: 22px;
}
#header .menu li.contact a {
border-top: none;
}
#header .menu li.tel a i,
#header .menu li.contact a i {
margin-right: 5px;
font-size: 20px;
}
#header .menu li.tel a i {
font-size: 20px;
}
#header .menu li.contact a i {
font-size: 18px;
}
#header .logo {
width: auto;
}
#header .logo .en {
font-size: 13px;
}
#header .logo .jp,
#header .logo .jp .large {
font-size: 8px;
letter-spacing: 0;
}
#header .logo a img {
width: 20px;
}
}
#mainVisual {
position: relative;
height: 100vh;
}
#mainVisual li {
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#mainVisual li:before {
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
content: '';
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
animation-name: mainAnime;
animation-duration: 40s;
}
#mainVisual li:nth-child(1):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-pc1.jpg);
}
#mainVisual li:nth-child(2):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-pc2.jpg);
}
#mainVisual li:nth-child(3):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-pc3.jpg);
}
#mainVisual li:nth-child(4):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-pc4.jpg);
}
#mainVisual li:nth-child(5):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-pc5.jpg);
}
@keyframes mainAnime {
from {
transform:scale3d(1, 1, 1);
}
to {
transform:scale3d(1.5, 1.5, 1);
}
}
#mainVisual .txt {
width: 100vw;
height: 10rem;
line-height: 1.5;
font-size: 1rem;
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-shadow: 0 0 10px rgba(1,41,101,0.2);
}
#mainVisual .txt .en {
font-size: 4rem;
font-family: 'Kaushan Script', cursive;
}
@media screen and (max-width: 767px) {
#mainVisual li:nth-child(1):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-sp1.jpg);
}
#mainVisual li:nth-child(2):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-sp2.jpg);
}
#mainVisual li:nth-child(3):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-sp3.jpg);
}
#mainVisual li:nth-child(4):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-sp4.jpg);
}
#mainVisual li:nth-child(5):before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/main-visual-sp5.jpg);
}
#mainVisual .txt {
height: 15rem;
}
@keyframes mainAnime {
from {
transform:scale3d(1, 1, 1);
}
to {
transform:scale3d(2.5, 2.5, 1);
}
}
}
.topTitle {
text-align: center;
font-size: 1.8rem;
margin-bottom: 2rem;
background-position: center top;
background-repeat: no-repeat;
padding: 6rem 0 0;
}
.topLoop .box .wrap {
text-align: center;
margin-bottom: 3rem;
}
.topLoop .box .wrap .img {
display: block;
overflow: hidden;
position: relative;
margin-bottom: 0.4rem;
}
.topLoop .box .wrap .postTitle {
font-size: 1rem;
margin: 0;
}
.topLoop .box .wrap .postTitle a {
height: auto !important;
}
.topLoop .box .wrap .thumb img,
.topLoop .box .wrap .noImg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.topLoop .box {
display: flex;
justify-content: space-between;
}
.topLoop .box .wrap {
width: 21.5%;
}
.topLoop .box .wrap .img {
height: 13vw;
}
.topLoop .box .wrap .noImg {
height: 10rem;
}
.topLoop .box .wrap .date {
color: #999;
font-size: 0.8rem;
margin-bottom: 0.4rem;
}
#topNews {
display: flex;
align-items: center;
background: #f5f5f5;
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
}
#topNews .topTitle {
line-height: 2;
font-size: 1rem;
min-width: 5rem;
margin: 0;
padding: 0;
}
#topNews .wrap {
padding-left: 1.8rem;
margin-left: 1.2rem;
border-left: 1px solid #ccc;
}
#topNews .date {
color: #999;
font-size: 0.8rem;
margin-right: 0.3rem;
}
#topNews .postTitle {
display: inline-block;
margin: 0;
}
#topBnr {
margin: 1.5rem 0 -4.25rem;
}
#topAbout {
margin-top: 3rem;
}
#topAbout .topTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-title-icon.png);
}
#topAbout .txt {
text-align: center;
line-height: 2;
margin-bottom: 2rem;
}
#topAbout .box,
#about2 {
position: relative;
}
#topAbout .subTItle,
#about2 .subTItle {
width: 100%;
text-align: center;
position: absolute;
top: 0;
background: #dcd500 !important;
color: #fff;
padding: 1rem 0;
}
#topAbout .subTItle:before,
#topAbout .subTItle:after,
#about2 .subTItle:before,
#about2 .subTItle:after {
content: '';
border-style: solid;
border-color: transparent;
position: absolute;
top: 100%;
}
#topAbout .subTItle:before,
#about2 .subTItle:before {
left: 0;
border-width: 0 10px 10px 0;
border-right-color: #b7b100;
}
#topAbout .subTItle:after,
#about2 .subTItle:after {
right: 0;
border-width: 10px 10px 0 0;
border-top-color: #b7b100;
}
#topAbout ul,
#about2 ul {
width : calc(100% - 20px) ;
margin: 0 auto 2rem;
padding: 5rem 2rem 1.4rem;
list-style: none;
border: 1px solid #ece400;
background: #faf9e6;
}
#topAbout li,
#about2 li h3 {
font-weight: bold;
font-size: 1.2rem;
background-position: left center;
background-repeat: no-repeat;
padding: 1.3rem 0 1.3rem 4.5rem;
margin: 0;
}
#topAbout li:nth-child(1),
#about2 li:nth-child(1) h3 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-list-icon1.png);
}
#topAbout li:nth-child(2),
#about2 li:nth-child(2) h3 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-list-icon2.png);
}
#topAbout li:nth-child(3),
#about2 li:nth-child(3) h3 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-list-icon3.png);
}
#topAbout li:nth-child(4),
#about2 li:nth-child(4) h3 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-list-icon4.png);
}
#topAbout li:nth-child(5),
#about2 li:nth-child(5) h3 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-list-icon5.png);
}
#about2 li p {
font-weight: normal;
font-size: 1rem;
}
#about3 th {
background: none;
color: #c9c200;
font-weight: bold;
}
#topAbout .btn {
background: #dcd500;
}
#topAbout .btn:hover {
background: #d1ca00;
}
#topAbout .btn .small {
display: inline-block;
border-radius: 2px;
font-size: 0.8rem;
color: #f46d66;
background: #fff;
padding: 0.3rem 1rem;
margin-top: 0.5rem;
}
#topDiving .noLicense,
#topDiving .hasLicense {
margin-bottom: 4rem;
padding: 2rem;
}
#topDiving .noLicense {
background: #f8817c;
}
#topDiving .hasLicense {
background: #ffb647;
}
#topDiving .noLicense .title,
#topDiving .noLicense .price,
#topDiving .noLicense .txt {
color: #f46d66;
}
#topDiving .hasLicense .title,
#topDiving .hasLicense .price,
#topDiving .hasLicense .txt {
color: #fa9700;
}
#topDiving .bg {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#topDiving .box {
text-align: center;
background: #fff;
padding: 2rem;
width: 48%;
}
#topDiving .topTitle {
margin: 0;
padding: 0 0 1.9rem;
color: #fff;
}
#topDiving .box .title {
background-repeat: no-repeat;
background-position: center top;
padding-top: 8rem;
font-size: 1.5rem;
margin: 0;
font-weight: bold;
}
#topDiving .dolphinSnorkel .title {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-dolphin-snorkel-icon.gif);
background-position: center .5rem;
}
#topDiving .trialDiving .title {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-trial-diving-icon.gif);
}
#topDiving .divingLicense .title {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-license-icon.gif);
background-position: center 1rem;
}
#topDiving .funDiving .title {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-tour-icon.gif);
}
#topDiving .padiRankUp .title {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-padi-rank-up-icon.gif);
}
#topDiving .price {
font-family: 'Open Sans', sans-serif;
font-size: 2rem;
margin-bottom: 0.7rem;
}
#topDiving .price .small {
font-size: 1rem;
margin-left: 0.4rem;
}
#topDiving .price .before {
margin-right: 2rem;
position: relative;
display: inline-block;
line-height: 1.3;
}
#topDiving .price .before:after {
content: '';
position: absolute;
right: -1.8rem;
border: 10px solid transparent;
border-left-color:#ccc;
}
.line {
font-weight: bold;
color: #00B900;
}
#topDiving .price .line {
background: linear-gradient(transparent 50%, yellow 50%);
}
#topDiving .divingLicense {
position: relative;
width: 100%;
margin-top: 2rem;
}
#topDiving .divingLicense .point {
position: absolute;
top: 1rem;
right: 1rem;
background: yellow;
font-weight: bold;
line-height: 1.2;
border-radius: 100%;
width: 7rem;
height: 7rem;
display: table;
}
#topDiving .divingLicense .point:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
border: 20px solid transparent;
border-right-color:yellow;
transform: rotate(60deg);
}
#topDiving .divingLicense .point .txtPoint {
display: table-cell;
vertical-align: middle;
}
#topDiving .divingLicense .point .large {
font-size: 2rem;
letter-spacing: 0;
margin-right: 0.2rem;
}
#topDiving .txt {
text-align: left;
}
#topDiving .noLicense .btn {
background: #f46d66;
}
#topDiving .noLicense .btn:hover {
background: #ec524a;
}
#topDiving .hasLicense .btn,
.page-id-17764 .btn {
background: #fa9700;
}
#topDiving .hasLicense .btn:hover,
.page-id-17764 .btn:hover {
background: #e28800;
}
#topDivingTour {
padding-top: 4rem;
padding-bottom: 3rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#topDivingTour .topTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-tour-report-title-icon.png);
color: #04a3e2;
padding-top: 4rem;
}
#topDivingTour .title {
text-align: center;
color: #04a3e2;
padding: 1rem;
font-size: 1.4rem;
margin: 4rem 0 0;
}
#topDivingTour iframe {
width: 100%;
margin-bottom: 2rem;
}
#topDivingTour .btn {
background: #148af9;
}
#topDivingTour .btn:hover {
background: #0071da;
}
#topDivingTour .btn {
background: #148af9;
}
#topDiverBlog .topTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diver-blog-title-icon.png);
padding-top: 5rem;
}
#topInstagram .title {
text-align: center;
padding-top: 2rem;
}
#topInstagram .title img {
margin: 0 1rem 0 0;
width: 196px;
vertical-align: middle;
}
#topInstagram .title span {
font-size: 1rem;
}
#topInstagram ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 2rem;
padding: 0;
list-style: none;
}
#topInstagram li {
width: 25%;
margin: 0;
height: 25vw;
position: relative;
overflow: hidden;
}
#topInstagram li img {
max-width: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: auto;
height: 40vw;
}
#topHydro .box,
#topRecruit .box,
#topSustainable .box,
#topEnglish .box,
#topInbound .box,
#main #sustainable1,
#main #inbound1 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
text-align: center;
padding: 3rem 1rem;
}
#main #sustainable1 h2,
#main #inbound1 h2 {
background: none;
padding: 0;
}
#topHydro .title,
#topRecruit .title,
#topSustainable .title,
#topEnglish .title,
#topInbound .title,
#main #sustainable1 h2,
#main #inbound1 h2 {
font-size: 1.8rem;
text-shadow: 0 0 10px rgba(1,41,101,0.8);
}
#topHydro .title {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
#topHydro .txt,
#topRecruit .txt,
#topSustainable .txt,
#topEnglish .txt,
#topInbound .txt,
#main #sustainable1 p,
#main #inbound1 p {
margin-bottom: 1rem;
text-shadow: 0 0 10px rgba(1,41,101,0.4);
}
#topHydro .txt {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
#topHydro .btn,
#topRecruit .btn ,
#topSustainable .btn,
#topEnglish .btn,
#topInbound .btn,
#main #inbound1 .btn {
background: #fff;
color: #00a1e1;
}
#main #inbound1 .btn {
margin-top: 1.5rem;
width: 500px;
font-size: 16px;
padding-left: 0;
padding-right: 0;
letter-spacing: 1px;
}
@media screen and (max-width: 639px) {
#main #inbound1 .btn {
width: 100%;
font-size: 13px;
letter-spacing: 0;
}
}
#topHydro .btn {
color: #b64910;
}
#topHydro .btn:hover,
#topRecruit .btn:hover,
#topSustainable .btn:hover,
#topEnglish .btn:hover,
#topInbound .btn:hover,
#main #inbound1 .btn:hover {
opacity: 0.7;
}
#topSdg {
text-align: center;
}
#breadCrumbWrap {
background: #f5f5f5;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
#breadCrumbWrap .breadcrumb {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#breadCrumbWrap .breadcrumb li {
font-size: 0.8rem;
margin: 0.8rem 0.5rem 0.8rem 0;
}
#breadCrumbWrap .breadcrumb li span {
margin-right: 0.5rem;
}
#breadCrumbWrap .breadcrumb li i {
font-size: 0.9rem;
vertical-align: -0.05rem;
}
#googleMap {
width: 100%;
height: 50vh;
margin-bottom: 2rem;
}
#bottomContact .box {
border: 1px solid #000;
position: relative;
padding: 2rem 0;
}
#bottomContact .box .title {
width: 100%;
position: absolute;
top: -1.1rem;
text-align: center;
}
#bottomContact .box .title span {
display: inline-block;
padding: 0 1rem;
background: #fff;
}
#bottomContact .box .inner {
display: flex;
align-items: center;
justify-content: space-around;
}
#bottomContact .box a {
text-decoration: none;
}
#bottomContact .box p {
margin: 0;
}
#bottomContact .box i {
font-size: 1.6rem;
margin-right: 0.4rem;
}
#bottomContact .box .access {
padding-top: 0.6rem;
}
#bottomContact .box .access a {
display: inline-block;
}
#bottomContact .box .access span {
display: inline-block;
line-height: 1.4;
vertical-align: 7px;
}
#bottomContact .box .access i {
vertical-align: 1.4rem;
}
#bottomContact .box .tel {
font-weight: bold;
font-size: 1.7rem;
line-height: 0.2;
text-align: center;
padding-top: 0.6rem;
}
#bottomContact .box .tel i {
vertical-align: middle;
margin-right: 0.2rem;
font-size: 1.5rem;
}
#bottomContact .box .tel .open {
font-weight: normal;
margin-top: 0.4rem;
font-size: 0.8rem;
color: #999;
line-height: 1.4;
display: inline-block;
text-align: center;
letter-spacing: 1px;
}
#bottomContact .box .contact {
padding-top: 0.2rem;
}
#bottomContact .box .contact .btn {
padding: 0.8rem 2rem 0.8rem 1.6rem;
font-size: 0.9rem;
}
#bottomContact .box .contact .btn i {
font-size: 1.2rem;
}
#bottomContact .box .innerSub {
padding: 2rem 2rem 0;
}
#bottomContact .box .innerSub .titleSub {
color: #148af9;
margin-bottom: 0.2rem;
text-align: center;
}
#bottomContact .box .innerSub .txtSub {
color: #999;
text-align: left;
}
#footer {
text-align: center;
}
#footer .sns {
display: flex;
justify-content: center;
}
#footer .sns a {
display: table;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin: 0 .8rem;
background: #000;
color: #fff;
text-decoration: none;
padding: .05rem 0 0 .05rem;
}
#footer .sns a i {
display: table-cell;
vertical-align: middle;
}
#footer .sns a.snsX,
#footer .sns a.snsNote {
position: relative;
}
#footer .sns a.snsX img,
#footer .sns a.snsNote img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#footer .sns a.snsX img {
width: 11px;
}
#footer .sns a.snsNote img {
width: 20px;
}
#footer .bnr{
display: flex;
justify-content: space-around;
align-items: flex-end;
font-size: 0.7rem;
margin-top: 2rem;
}
#footer .bnr a {
margin: 1rem 0;
width: 30%;
text-align: center;
}
#footer .bnr a img {
max-width: 170px;
margin: 0 auto 0.5rem;
display: block;
}
#footer #pageTop {
background: rgba(0, 167, 255, 0.4);
width: 3rem;
height: 3rem;
position: fixed;
right: 1rem;
bottom: 4.5rem;
border-radius: 100%;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
#footer #pageTop:hover {
transform: translateY(-0.4rem);
transition: all 0.5s ease-out;
}
#footer #pageTop span {
display: block;
width: 0.7rem;
height: 0.7rem;
transform: rotate(45deg);
border-top: 2px solid #fff;
border-left: 2px solid #fff;
position: absolute;
top: 0.2rem;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#footer .hide {
opacity: 0;
}
#footer .show {
opacity: 1;
}
#footer #footerCopy {
margin: 1.5rem 0 2.5rem;
}
.pagination {
margin-bottom: 1rem;
border-collapse: collapse;
display: inline-block;
}
.pagination span, .pagination a {
width: 3rem;
height: 3rem;
text-align: center;
text-decoration: none;
display: inline-block;
border: 1px solid #eee;
margin: 0 0.5rem 0.5rem 0;
line-height: 2.7;
}
.pagination a:hover {
background: #000;
border-color: #000;
color: #fff;
opacity: 1;
}
.pagination .current {
background: #f5f5f5;
}
.contentNone .box {
border: 1px solid #eee;
}
.contentNone .box .postTitle {
background: #f5f5f5;
padding: 1rem;
margin: 0;
border-bottom: 1px solid #eee;
}
.contentNone .box .txt {
padding: 1rem 1rem 0;
}
.contentNone .box .txt ul {
margin-bottom: 0;
}
.contentNone .box .txt form {
margin-bottom: 1rem;
}
.contentNone .box .txt form > div {
display: flex;
border: 1px solid #ddd;
padding: 0.5rem 0;
border-radius: 2px;
}
.contentNone .box .txt form > div input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-right: 1px solid #ddd;
font-size: 1.15rem;
width: 80%;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
border-radius: 0;
}
.contentNone .box .txt form > div button {
margin: 0 auto;
cursor: pointer;
background: none;
border: none;
}
.contentNone .box .txt form > div button:hover {
opacity: 0.7;
}
.contentNone .box .txt form > div button i {
font-size: 1.5rem;
}
.contentNone .box .txt form > div input, .contentNone .box .txt form > div button {
padding: 1rem;
}
.contentNone .box .txt form > div input:focus, .contentNone .box .txt form > div button:focus {
outline: none;
background: #f5f5f5;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
.contentNone .box .txt form > div input:-webkit-autofill, .contentNone .box .txt form > div button:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset;
}
.page-id-99 #content {
padding: 0 20vw;
}
.page-id-99 #content p,
.lp main #form p {
display: block;
margin: 2rem 0;
}
.page-id-99 #content .title,
.lp main #form .title {
display: block;
margin-bottom: 0.2rem;
padding-left: 0.1rem;
font-size: 1.2rem;
}
.page-id-99 #content .title .caution,
.lp main #form .title .caution {
display: inline-block;
padding: 0.1rem 0.5rem 0;
background: #000;
color: #fff;
font-size: 0.7rem;
border-radius: 2px;
margin-left: 0.4rem;
vertical-align: 0.2rem;
}
.page-id-99 #content .txt,
.lp main #form .txt {
display: block;
}
.page-id-99 #content .txt input,
.page-id-99 #content .txt textarea,
.page-id-99 #content .txt select,
.lp main #form .txt input,
.lp main #form .txt textarea,
.lp main #form .txt select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ddd;
padding: 1rem 0.5rem;
font-size: 1.15rem;
width: 100%;
border-radius: 2px;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
.page-id-99 #content .txt input:focus,
.page-id-99 #content .txt textarea:focus,
.page-id-99 #content .txt select:focus,
.lp main #form .txt input:focus,
.lp main #form .txt textarea:focus,
.lp main #form .txt select:focus {
outline: none;
background: #f5f5f5;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
.page-id-99 #content .txt input:-webkit-autofill,
.page-id-99 #content .txt textarea:-webkit-autofill,
.page-id-99 #content .txt select:-webkit-autofill,
.lp main #form .txt input:-webkit-autofill,
.lp main #form .txt textarea:-webkit-autofill,
.lp main #form .txt select:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset;
}
.page-id-99 #content .txt ::-webkit-input-placeholder,
.lp main #form .txt ::-webkit-input-placeholder {
color: #999;
}
.page-id-99 #content .txt ::-moz-placeholder,
.lp main #form .txt ::-moz-placeholder {
color: #999;
opacity: 1;
}
.page-id-99 #content .txt :-ms-input-placeholder,
.lp main #form .txt :-ms-input-placeholder {
color: #999;
}
.page-id-99 #content select,
.lp main #form select {
text-indent: 0.01px;
text-overflow: '';
background: none;
background: #f5f1e9;
background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
position: relative;
}
.page-id-99 #content select::-ms-expand,
.lp main #form select::-ms-expand {
display: none;
}
.page-id-99 #content select:-moz-focusring,
.lp main #form select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #999;
}
.page-id-99 #content .select,
.lp main #form .select {
position: relative;
}
.page-id-99 #content .select i,
.lp main #form .select i {
font-size: 2rem;
position: absolute;
top: 1rem;
right: 1rem;
pointer-events: none;
}
.page-id-99 #content input[type="radio"],
.page-id-99 #content input[type="checkbox"],
.lp main #form input[type="radio"],
.lp main #form input[type="checkbox"] {
position: relative;
width: 2.2rem;
height: 2.2rem;
padding: 0;
vertical-align: middle;
background: none;
margin-right: 0.2rem;
}
.page-id-99 #content input[type="radio"]:focus,
.page-id-99 #content input[type="checkbox"]:focus,
.lp main #form input[type="radio"]:focus,
.lp main #form input[type="checkbox"]:focus {
background: none;
}
.page-id-99 #content input[type="radio"]:checked,
.page-id-99 #content input[type="checkbox"]:checked,
.lp main #form input[type="radio"]:checked,
.lp main #form input[type="checkbox"]:checked {
font-family: FontAwesome;
font-smoothing: antialiased;
}
.page-id-99 #content input[type="radio"]:checked:before,
.page-id-99 #content input[type="checkbox"]:checked:before,
.lp main #form input[type="radio"]:checked:before,
.lp main #form input[type="checkbox"]:checked:before {
position: absolute;
top: 0;
left: 0.1rem;
content: '\f00c';
font-size: 1.9rem;
}
.page-id-99 #content input[type="radio"],
.lp main #form input[type="radio"] {
border-radius: 50%;
}
.page-id-99 #content input[type="radio"]:checked:before,
.lp main #form input[type="radio"]:checked:before {
top: -0.3rem;
left: 0;
content: '\f111';
font-size: 2.5rem;
}
.page-id-99 #content .wpcf7-list-item,
.lp main #form .wpcf7-list-item {
margin: 1rem 1rem 0 0;
}
.page-id-99 #content .wpcf7-list-item-label,
.lp main #form .wpcf7-list-item-label {
pointer-events: none;
}
.page-id-99 #content .select select,
.page-id-99 #content .select label,
.page-id-99 #content .select input,
.page-id-99 #content .check select,
.page-id-99 #content .check label,
.page-id-99 #content .check input,
.page-id-99 #content .radio select,
.page-id-99 #content .radio label,
.page-id-99 #content .radio input,
.page-id-99 #content #submitBtn select,
.page-id-99 #content #submitBtn label,
.page-id-99 #content #submitBtn input,
.lp main #form .select select,
.lp main #form .select label,
.lp main #form .select input,
.lp main #form .check select,
.lp main #form .check label,
.lp main #form .check input,
.lp main #form .radio select,
.lp main #form .radio label,
.lp main #form .radio input,
.lp main #form #submitBtn select,
.lp main #form #submitBtn label,
.lp main #form #submitBtn input {
cursor: pointer;
}
.page-id-99 #content textarea,
.lp main #form textarea {
resize: none;
}
.page-id-99 #content #submitBtn,
.lp main #form #submitBtn {
display: block;
text-align: center;
}
.page-id-99 #content #submitBtn input,
.lp main #form #submitBtn input {
display: inline-block;
font-size: 1rem;
min-width: 280px;
padding: 1.6rem 2rem;
border-radius: 2px;
background: #dcd500;
border: 1px solid #dcd500;
color: #fff;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
.page-id-99 #content #submitBtn input:hover,
.lp main #form #submitBtn input:hover {
background: #d1ca00;
border: 1px solid #d1ca00;
transition: all 0.5s cubic-bezier(1, 0, 0.5, 1);
}
.page-id-99 #content #submitBtn input:focus,
.lp main #form #submitBtn input:focus {
outline: none;
}
.page-id-99 #content .wpcf7-not-valid-tip,
.lp main #form .wpcf7-not-valid-tip {
color: #ff6262;
font-weight: bold;
margin: 0.2rem 0 0 0.2rem;
}
.page-id-99 #content .wpcf7-response-output,
.lp main #form .wpcf7-response-output {
margin: 0;
padding: 0.5rem 0;
text-align: center;
font-weight: bold;
}
.page-id-99 #content .wpcf7-validation-errors,
.page-id-99 #content .wpcf7-mail-sent-ng,
.lp main #form .wpcf7-validation-errors,
.lp main #form .wpcf7-mail-sent-ng {
border: 2px solid #ff6262;
color: #ff6262;
}
.page-id-99 #content .wpcf7-mail-sent-ok,
.lp main #form .wpcf7-mail-sent-ok {
border: 2px solid #428cff;
color: #428cff;
}
.page-id-99 #content .wpcf7-spinner,
.lp main #form .wpcf7-spinner {
display: block !important;
width: 3rem !important;
height: 3rem !important;
margin: 1rem auto 0 !important;
background: #428cff !important;
border-radius: 50%;
animation: scaleout 1.0s infinite ease-in-out;
}
.wpcf7-spinner::before {
content: none;
}
@keyframes scaleout {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
.caution {
color: #f46d66;
font-size: 0.8rem;
display: inline-block;
line-height: 1.5;
}
.caution a {
color: #f46d66;
}
.page .content ul,
.page .content ol,
.single .content ul,
.single .content ol,
#content .voiceBox,
#topVoice,
#content .recommendedBox {
background: #f5f5f5;
border: 1px solid #eee;
margin: 0 0 1rem;
padding: 1.5rem 1rem 0.5rem 2rem;
border-radius: 2px;
}
#content .voiceBox,
#topVoice,
#content .recommendedBox {
padding: 2rem 2rem 1rem;
}
.page .content li ul,
.page .content li ol {
border: none;
padding: 0 0 0 1rem;
margin: 0;
}
.page .pageTitle i {
display: block;
margin: -1.8rem 0 0.2rem;
color: #ccc;
}
.page-id-9350 .pageTitle,
.page-id-126 .pageTitle,
.page-id-127 .pageTitle,
.page-id-128 .pageTitle,
.page-id-129 .pageTitle,
.page-id-17771 .pageTitle,
.page-id-17775 .pageTitle,
.page-id-109 .pageTitle,
.category-diving-tour .archiveTitle,
.category-diver-blog .archiveTitle {
background-position: center top;
background-repeat: no-repeat;
background-size: 2.4rem;
}
.page-id-9350 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-dolphin-snorkel-icon.gif);
}
.page-id-126 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-trial-diving-icon.gif);
}
.page-id-127 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-license-icon.gif);
}
.page-id-128 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-tour-icon.gif);
}
.page-id-129 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-padi-rank-up-icon.gif);
}
.page-id-17771 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/awaer-dive-against-debris-icon.png);
}
.page-id-17775 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/coral-reef-protection-icon.png);
}
.page-id-109 #content .pageTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-about-title-icon.png);
background-size: 3rem;
}
.category-diving-tour #content .archiveTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-tour-report-title-icon.png);
background-size: 4.4rem;
}
.category-diver-blog #content .archiveTitle {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diver-blog-title-icon.png);
background-size: 3.6rem;
}
#content .anchorList {
margin:0 0 3rem;
padding: 2rem 1rem 0.4rem 2rem;
border-radius: 2px;
border: none;
background: #f5f5f5;
}
.page-id-9350 #content .anchorList,
.page-id-126 #content .anchorList,
.page-id-127 #content .anchorList,
.page-id-128 #content .anchorList,
.page-id-129 #content .anchorList,
.page-id-17771 #content .anchorList,
.page-id-17775 #content .anchorList {
list-style: none;
padding: 2rem 1rem 0.4rem 1rem;
}
.page-id-9350 #content .anchorList,
.page-id-126 #content .anchorList,
.page-id-127 #content .anchorList {
background: #fbf1f1;
}
.page-id-128 #content .anchorList,
.page-id-129 #content .anchorList,
.page-id-17771 #content .anchorList,
.page-id-17775 #content .anchorList {
background: #fff4e3;
}
#content .anchorList li {
font-size: 1.2rem;
margin-bottom: 1.6rem;
position: relative;
color: #999;
}
.page-id-9350 #content .anchorList li,
.page-id-126 #content .anchorList li,
.page-id-127 #content .anchorList li,
.page-id-128 #content .anchorList li,
.page-id-129 #content .anchorList li,
.page-id-17771 #content .anchorList li,
.page-id-17775 #content .anchorList li {
padding-left: 2.4rem;
}
#content .anchorList li a {
color: #000;
text-decoration: none;
}
#content .anchorList li i {
position: absolute;
top: 0.2rem;
left: 0;
}
.page:not(.home) #content h2 {
color: #fff;
background: #000;
padding: 1.1rem;
border-radius: 2px;
}
.page:not(.home) #content h2 a {
color: #fff;
}
.page:not(.home) #content h3 {
margin-top: 2rem;
}
.page-id-9350 #content .anchorList li a,
.page-id-126 #content .anchorList li a,
.page-id-127 #content .anchorList li a,
.page-id-9350 #content h3,
.page-id-126 #content h3,
.page-id-127 #content h3 {
color: #f46d66;
}
.page-id-9350 #content h2,
.page-id-126 #content h2,
.page-id-127 #content h2 {
background:  #f8817c !important;
}
.page-id-128 #content .anchorList li a,
.page-id-129 #content .anchorList li a,
.page-id-17771 #content .anchorList li a,
.page-id-17775 #content .anchorList li a,
.page-id-128 #content h3,
.page-id-129 #content h3,
.page-id-17771 #content h3,
.page-id-17775 #content h3 {
color: #fa9700;
}
.page-id-128 #content h2,
.page-id-129 #content h2,
.page-id-17771 #content h2,
.page-id-17775 #content h2 {
background:  #ffb647 !important;
}
#content .anchorList i,
#content h2 i,
#qaBox i {
font-size: 1.4rem;
width: 2rem;
text-align: center;
opacity: 0.5;
margin-right: 0.4rem;
}
#content h2 i,
#qaBox h2 i {
opacity: 1;
}
#content .priceBox h3 {
margin-bottom: 0.4rem;
font-weight: bold;
}
#content .priceBox th {
min-width: 34%;
}
#content .priceBox td {
text-align: center;
}
#content .other {
font-size: 0.75rem;
}
.scrollTable {
display: block;
width: 100%;
}
.scrollTable thead {
display: block;
float: left;
}
.scrollTable tbody {
font-size: 0;
display: block;
width: auto;
overflow-x: auto;
white-space: nowrap;
}
.scrollTable tbody tr {
display: inline-block;
}
.scrollTable th,
.scrollTable td {
height: 5rem;
}
.scrollTable th {
display: block;
width: 300px;
}
.scrollTable tbody th {
display: flex;
align-items: center;
justify-content: center;
}
.scrollTable td {
display: block;
border-top: none;
}
.scrollTable tbody::-webkit-scrollbar {
height: 1rem;
}
.scrollTable tbody::-webkit-scrollbar-thumb:horizontal {
background: #aaa;
}
.scrollTable tbody::-webkit-scrollbar:horizontal {
background: #f5f5f5;
}
#content .priceBox .member,
#content .priceBox .vip,
#content .priceBox .pro {
color: #000;
background: #f5f5f5;
text-align: center;
}
#content .priceBox .vip {
background: #fff4e3;
color: #fa9700;
}
#content .priceBox .pro {
background: #fbf1f1;
color: #f46d66;
}
#content .priceBox .vipPrice {
color: #fa9700;
}
#content .priceBox .proPrice {
color: #f46d66;
}
#price3 h3 {
color: #f46d66;
}
#divingLicense2 h3 .caution,
#price3 h3 .caution,
.benefit div {
display: inline-block;
background: #f46d66;
color: yellow;
padding: 1rem;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
position: relative;
margin: 1rem 0;
}
#divingLicense2 h3 .caution:after,
#price3 h3 .caution:after,
.benefit div:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
border-width: 0 1rem 1rem 0;
border-style: solid;
border-color: #fff #fff #ff9a94 #ff9a94;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}
.benefit p {
color: #f46d66;
font-weight: bold;
font-size: 1.1rem;
}
.benefit div {
margin: -.5rem 0 1.5rem;
}
.benefit span {
font-size: .8rem;
color: #fff;
}
.discountProgram h3 {
font-weight: bold;
color: #04a3e2;
}
.discountProgram h4 {
font-weight: bold;
color: #fff;
background: #04a3e2;
border-radius: 2px;
padding: .5rem;
font-size: 1rem;
}
.page .content .discountProgram ul {
background: #ebf5ff;
border: 1px solid #deebf7;
}
#divingLicense2 td .caution,
#price3 td .caution {
font-weight: bold;
font-size: 1.6rem;
background: linear-gradient(transparent 50%, yellow 50%);
}
#content .courseBox3 p {
padding: 2rem;
border: 1px solid #eee;
background: #f5f5f5;
}
#content .schedule {
margin: 0;
padding: 0;
list-style: none;
background: none;
border: none;
}
#content .schedule>li {
border: 1px solid #111;
border-radius: 2px;
position: relative;
margin-bottom: 3rem;
padding: 0 1.2rem;
}
#content .schedule>li:after {
content: '';
position: absolute;
bottom: -3rem;
left: 0;
right: 0;
margin: auto;
border: 1rem solid transparent;
border-top-color:#ddd;
width: 0;
}
#content .schedule>li:last-child:after {
content: none;
}
#content .schedule>li>h3 {
font-size: 1.1rem;
font-weight: bold;
border-bottom: 1px solid #111;
position: relative;
padding: 1.6rem 0 1.6rem 6rem;
margin-bottom: 1.2rem;
color: #000;
}
.page:not(.home) #content .schedule>li>h3,
.page:not(.home) #content .list>li>h3 {
margin-top: 0;
}
#content .schedule>li>h3.alignLeft {
padding-left: 0;
}
#content .schedule p {
margin: 1.2rem 0;
}
#content .schedule .time {
position: absolute;
top: 1.2rem;
left: 0;
background: #111;
color: #fff;
font-size: 0.9rem;
border-radius: 2px;
margin-right: 0.6rem;
padding: 0.5rem 0;
width: 5rem;
display: inline-block;
text-align: center;
}
#content .schedule .cols,
#content .schedule .col img {
margin-bottom: 0;
}
#content .schedule li ul,
#content .schedule li ol {
margin: 1.2rem 0;
padding: 2rem 1rem 1rem 2rem;
}
#recruit1 .name {
display: block;
text-align: right;
font-weight: bold;
margin-top: 1rem;
}
#qaBox section {
margin: 0 0 1.6rem;
}
#content .qaBox h3,
.lp main .qaBox h3 {
background: linear-gradient(-45deg, #148af9, #00caca);
color: #fff;
padding: 1.2rem;
position: relative;
border-radius: 2px;
}
#qaBox h3 {
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.5, 1);
}
#qaBox h3:after {
content:'+';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 3.2rem;
right: 1.2rem;
font-size: 2rem;
font-weight: bold;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.5, 1);
}
#qaBox h3.minus:after {
transform: rotate(45deg);
}
#qaBox h3:hover {
opacity: 0.7;
}
#content .qaBox ul,
.lp main .qaBox ul {
margin: 0;
padding: 0;
list-style: none;
background: none;
border: none;
}
#qaBox ul {
display: none;
}
#content .qaBox li,
.lp main .qaBox li {
margin-bottom: 1.6rem;
}
#content .qaBox li h4,
#content .qaBox li p,
.lp main .qaBox li h4,
.lp main .qaBox li p {
position: relative;
padding: 0 0 0 2rem;
}
#content .qaBox li h4:after,
#content .qaBox li p:after,
.lp main .qaBox li h4:after,
.lp main .qaBox li p:after {
position: absolute;
top: -0.4rem;
left: 0;
font-weight: bold;
font-size: 1.6rem;
}
#content .qaBox li h4,
#content .qaBox li h4 a,
.lp main .qaBox li h4,
.lp main .qaBox li h4 a {
color: #00caca;
}
#content .qaBox li h4,
.lp main .qaBox li h4 {
font-weight: bold;
margin-bottom: 0.6rem;
}
#content .qaBox li h4:after,
.lp main .qaBox li h4:after {
content: 'Q';
}
#content .qaBox li p,
#content .qaBox li p a,
.lp main .qaBox li p,
.lp main .qaBox li p a {
color: #227cd2;
}
#content .qaBox li p,
.lp main .qaBox li p {
padding-top: 0.1rem;
}
#content .qaBox li p:after,
.lp main .qaBox li p:after {
content: 'A';
color: #148af9;
}
#content .glossaryBox h3 {
margin: 1rem 0 0;
color:#04a3e2;
font-weight: bold;
}
#bottomBnr,
#bottomBnrOther {
text-align: center;
}
#bottomBnr a {
background-position: center 1rem;
background-repeat: no-repeat;
background-size: 50px auto;
background-color: #fff;
font-size: 1.2rem;
padding: 5rem 1rem 1rem;
font-weight: bold;
box-sizing: border-box;
display: block;
}
#bottomBnrOther li {
margin-bottom: 0.1rem;
}
#bottomBnrOther a {
width: 100%;
background: #148af9;
padding-left: 0;
padding-right: 0;
}
#bottomBnrOther a:hover {
opacity: 0.7;
}
#bottomBnrOther i {
font-size: 1.6rem;
display: block;
margin-bottom: 0.6rem;
opacity: 0.7;
}
#bottomBnr .link {
font-size: 1rem;
padding: 1rem;
color: #fff;
border-radius: 2px;
display: block;
margin-top: 1rem;
}
#bottomBnr .dolphinSnorkel {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-dolphin-snorkel-icon.gif);
}
#bottomBnr .trialDiving {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-trial-diving-icon.gif);
}
#bottomBnr .divingLicense {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-license-icon.gif);
background-size: 50px auto;
}
#bottomBnr .funDiving {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-diving-tour-icon.gif);
}
#bottomBnr .padiRankUp {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/top-padi-rank-up-icon.gif);
}
#bottomBnr .dolphinSnorkel,
#bottomBnr .trialDiving,
#bottomBnr .divingLicense {
border: 2px solid #f46d66;
color: #f46d66;
}
#bottomBnr .dolphinSnorkel .link,
#bottomBnr .trialDiving .link,
#bottomBnr .divingLicense .link {
background: #f46d66;
}
#bottomBnr .funDiving,
#bottomBnr .padiRankUp {
border: 2px solid #fa9700;
color: #fa9700;
}
#bottomBnr .funDiving .link,
#bottomBnr .padiRankUp .link {
background: #fa9700;
}
#bottomBnr .cols.first {
margin-bottom: 1rem;
}
#bottomBnr .campaign {
position: absolute;
top: -2rem;
right: 1rem;
padding: 0.6rem 1rem;
background: yellow;
font-weight: bold;
border-radius: 2px;
font-size: 0.9rem;
}
#bottomBnr .campaign:after {
content: '';
position: absolute;
left: 7px;
bottom: -4px;
border: 10px solid transparent;
border-right-color: yellow;
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
#staff .box {
margin-bottom: 3rem;
}
#content .voiceBox,
#topVoice {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/bg-note.jpg);
background-position: left top;
background-repeat: repeat;
border: 1px solid #eee8e4;
border-top: none;
}
#topVoice {
border-radius: none;
padding: 2rem;
}
#topVoice .topTitle {
padding: 0;
}
#staff .box:after,
#content .voiceBox:after,
#topVoice .box:after,
#content .recommendedBox:after {
content: '';
display: block;
clear: both;
}
#staff .box .img,
#content .voiceBox img,
#topVoice .box img,
#content .recommendedBox .img {
border-radius: 100%;
width: 24%;
}
#content .recommendedBox .img {
border-radius: 0;
}
#staff .box .txt,
#content .voiceBox .txt,
#topVoice .box .txt,
#content .recommendedBox .txt {
border-radius: 100%;
width: 70%;
}
#content .voiceBox .txt .title,
#topVoice .box .txt .title,
#content .recommendedBox .txt .title {
display: inline-block;
margin: 0;
background: linear-gradient(transparent 65%, #ffe2a2 65%);
color: #000;
padding: 0;
border-radius: 0;
}
#content .recommendedBox .txt .title {
background: none;
margin-bottom: 1rem;
}
#staff .box .txt .title span,
#content .voiceBox .title span,
#topVoice .box .txt .title span {
color: #aaa;
margin-left: 1rem;
font-size: 0.9rem;
letter-spacing: 3px;
}
#content .voiceBox .title span,
#topVoice .box .txt .title span {
color: #8b6f4f;
display: inline-block;
}
#staff .left .img,
#staff .right .txt,
#content .voiceBox img,
#topVoice .box .img,
#content .recommendedBox .img {
float: left;
}
#staff .right .img,
#staff .left .txt,
#content .voiceBox .txt,
#topVoice .box .txt,
#content .recommendedBox .txt {
float: right;
}
#content .voiceBox .txt dt,
#topVoice .box .txt dt {
font-weight: bold;
color: #d59300;
}
#content .voiceBox .txt dd,
#topVoice .box .txt dd {
margin: 0.2rem 0 1rem 0;
}
#topVoice .btn {
background: #b3906b;
margin-top: 0.5rem;
}
#skinDiving {
background: none;
border: none;
padding: 0;
border-radius: 0;
display: flex;
justify-content: space-between;
list-style: none;
}
#skinDiving li,
#skinDiving li .inner {
border-radius: 2px;
}
#skinDiving li {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
width: 32%;
}
#skinDiving li .inner {
background: rgba(0, 0, 0, .2);
padding: 1rem;
height: 100%;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
}
#skinDiving li:nth-child(1) {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/skin-diving-bg1.jpg);
}
#skinDiving li:nth-child(2) {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/skin-diving-bg2.jpg);
}
#skinDiving li:nth-child(3) {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/skin-diving-bg3.jpg);
background-position: bottom;
}
#skinDiving li h4 {
text-align: center;
margin-top: 1rem;
}
.cols {
padding: 0;
list-style: none;
display: flex;
margin: -0.75rem;
margin-bottom: 3rem;
}
.cols .col {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.cols .col img {
width: 100%;
border-radius: 2px;
}
.cols.reverse {
flex-direction: row-reverse;
}
.mb0 {
margin-bottom: 0 !important;
}
.bt0 {
border-top: none !important;
}
.bb0 {
border-bottom: none !important;
}
.line {
text-align: center;
}
.line img {
display: block;
margin: 8px auto 32px;
width: 160px;
}
.iframe {
position: relative;
}
.iframe iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.iframeYoutube {
padding-top: 56.25%;
}
.grecaptcha-badge {
visibility: hidden !important;
}
.reCAPTCHA {
margin-top: 40px;
color: #999;
font-size: 11px;
text-align: center;
} .scheduleImg {
text-align: center;
}
.scheduleImg img {
width: auto;
max-width: 100%;
}
.tourSchedule .btnWrap {
margin-top: 2rem;
} #main .definition {
margin-top: 2rem;
border: 1px solid #148af9;
}
#main .definition dl {
margin: 0;
padding: .5rem 1.2rem 0;
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #148af9;
border-bottom: 1px solid #148af9;
}
#main .definition dt,
#main .definition dd {
margin-bottom: .5rem;
}
#main .definition dt {
display: inline-block;
margin-right: .8rem;
padding: .2rem .4rem;
background-color: #fff;
color: #148af9;
font-size: .8rem;
font-weight: bold;
border-radius: 2px;
}
#main .definition dd {
margin-left: 0;
color: #fff;
font-size: 1rem;
}
#main .definition p {
padding: 1rem 1.2rem 0;
color: #148af9;
}
.page-id-17764 .pageTitle i {
color: #8dd1ed;
}
#content #sustainableAnchor {
background: #ebf5ff;
}
#main #sustainable2 h2 span,
#main #inbound2 h2 span {
font-size: .85rem;
display: block;
}
#main #sustainable4 h3 {
font-weight: bold;
color: #04a3e2;
}
#main #sustainable4 .logo {
display: flex;
justify-content: center;
margin-bottom: 4rem;
}
#main #sustainable4 .logo > * {
margin: 0 .5rem;
}
#main #sustainable4 .logo > * img {
width: auto;
height: 68px;
}
#main #inbound4 h2 {
background: none;
padding: 0;
color: #000;
}
#main #inbound4 h2 span {
display: inline-block;
color: #fff;
font-size: .85rem;
font-weight: bold;
margin-bottom: 0.4rem;
padding: 0.4rem 1rem;
border-radius: 30px;
background-image: linear-gradient(43deg, #047bff 0%, #d446e4 46%, #fcff00 100%);
}
#main #inbound5 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/inbound-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
padding: 3rem;
}
#main #inbound5 .box {
background: rgba(255, 255, 255, 0.8);
padding: 2rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#main #inbound5 h2,
#main #inbound5 ul {
background: none;
color: #000;
margin: 0;
padding: 0;
}
#main #inbound5 h2 {
text-align: center;
width: 100%;
}
#main #inbound5 ul {
border: none;
list-style: none;
}
#main #inbound5 li {
margin: 1rem 0 0;
font-weight: bold;
}
#main #inbound5 li i {
font-size: 1.2rem;
margin-right: 0.4rem;
color: #10b900;
vertical-align: bottom;
}
@media screen and (max-width: 767px) {
p, dt, dd, li, input, textarea, select {
font-size: 1rem;
}
.single-post #side .sideWidgetInner .sideTitle,
.archive #side .sideWidgetInner .sideTitle,
.error404 #side .sideWidgetInner .sideTitle,
.search-results #side .sideWidgetInner .sideTitle {
font-size: 1.1rem;
}
.single-post #side #recent-posts-2 li .post-date,
.archive #side #recent-posts-2 li .post-date,
.error404 #side #recent-posts-2 li .post-date,
.search-results #side #recent-posts-2 li .post-date {
font-size: 0.8rem;
}
.single-post #main,
.archive #main,
.error404 #main,
.search-results #main,
.single-post #side,
.archive #side,
.error404 #side,
.search-results #side {
width: 100%;
float: none;
}
br.pc {
display: none;
}
#topNews .postTitle {
display: block;
}
#qaBox h3:hover {
opacity: 1;
}
#topBnr {
margin: 5vw 0 -4rem;
}
#topAbout .topTitle {
padding: 4rem 0 0;
background-size: 58px;
}
#topAbout .txt {
text-align: left;
}
#topAbout .subTItle,
#about2 .subTItle {
font-size: 1.2rem;
}
#topAbout ul,
#about2 ul {
padding: 4rem 1rem 0.2rem 1rem;
}
#topAbout li,
#about2 li h3 {
font-size: 1.1rem;
background-size: 30px;
padding: 1rem 0 1rem 3rem;
}
#topDiving .noLicense,
#topDiving .hasLicense {
padding: 1rem;
}
#topDiving .topTitle {
font-size: 1.3rem;
padding-top: 1rem;
}
#topDiving .bg {
display: block;
}
#topDiving .box {
width: 100%;
margin-bottom: 1rem;
}
#topDiving .divingLicense {
margin-top: 0;
}
#topDiving .box .title {
padding-top: 6rem;
}
#topDiving .dolphinSnorkel .title {
background-size: 55px;
}
#topDiving .trialDiving .title {
background-size: 52px;
}
#topDiving .divingLicense .title {
background-size: 50px;
background-position: center 0.8rem;
}
#topDiving .funDiving .title {
background-size: 61px;
}
#topDiving .padiRankUp .title {
background-size: 50px;
}
#topDivingTour .topTitle {
background-size: 56px;
padding-top: 3rem;
}
#topDiverBlog .topTitle {
background-size: 56px;
padding-top: 3.6rem;
}
.topLoop .box {
display: block;
}
.topLoop .box .wrap {
text-align: left;
width: 100%;
}
.topLoop .box .wrap .img {
height: 28vh;
}
#topInstagram li {
width: 50%;
height: 50vw;
max-height: 333px;
}
#topInstagram li img {
height: 80vw;
}
#bottomContact .box {
margin: 4rem 0;
padding: 2.5rem 0;
}
#bottomContact .box .title {
top: -1rem;
font-size: 1.2rem;
}
#bottomContact .box .title span {
padding: 0 0.5rem;
}
#bottomContact .box .inner {
display: block;
}
#bottomContact .box p {
text-align: center;
}
#bottomContact .box p a {
text-align: left;
}
#bottomContact .box .access {
font-size: 1rem;
padding-top: 0;
margin: 0 0 2rem -0.5rem;
}
#bottomContact .box .access span {
line-height: 1.4;
margin-right: 0.7rem;
}
#bottomContact .box .access i {
vertical-align: 1.7rem;
margin-right: 0.8rem;
}
#bottomContact .box .tel {
margin: 0 0 3rem -1rem;
}
#bottomContact .box .tel .open {
font-size: 1rem;
}
#bottomContact .box .contact {
font-size: 1.2rem;
}
#bottomContact .box .contact .btn {
background: #000;
padding: 1.5rem 4rem 1.5rem 3rem;
font-size: 1.1rem;
}
#breadCrumbWrap .breadcrumb {
display: block;
}
.page-id-99 #content {
padding: 0 5vw;
}
#staff .box .img,
#staff .box .txt,
#content .voiceBox img,
#content .voiceBox .txt,
#topVoice .box .img,
#topVoice .box .txt,
#content .recommendedBox .img,
#content .recommendedBox .txt {
width: 100%;
float: none;
}
#staff .box .img,
#content .voiceBox img,
#topVoice .box .img {
width: 70%;
display: block;
margin: 1rem auto;
}
#skinDiving {
display: block;
}
#skinDiving li {
width: 100%;
}
#bottomBnr .col {
margin-bottom: 1rem;
}
#footer .bnr {
flex-wrap: wrap;
}
#footer .bnr a {
width: 50%;
}
#footer .bnr a img {
max-width: 100px;
}
#footer .bnr a.hydro img {
max-width: 130px;
}
.cols {
display: block;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.cols .col {
padding: 0;
}
.scrollTable th {
width: 10rem;
}
#main #inbound5 {
padding: 0;
}
#main #inbound5 .box {
padding: 1rem;
}
} .lp * {
margin: 0;
}
.lp .maxWidth {
max-width: 1024px;
margin-inline: auto;
}
.lp .sideSpace {
padding-left: 20px !important;
padding-right: 20px !important;
}
.lp .reverse {
flex-direction: row-reverse;
}
.lp h1,
.lp h2,
.lp h3 {
line-height: 1.7;
letter-spacing: 2px;
}
.lp section h2 {
text-align: center;
font-size: 20px;
}
.lp p {
font-size: 14px;
}
.lp .btnWrap {
margin-bottom: 8rem;
}
.lp .btnWrap .btn {
min-width: 280px;
background: #dcd500;
padding: 2rem;
}
.lp .btnWrap .btn:hover {
background: #d1ca00;
}
.lp .pc {
display: none;
}
@media screen and (min-width: 1024px) {
.lp section h2 {
font-size: 28px;
}
.lp .sp {
display: none;
}
.lp .pc {
display: block;
}
}
.lp .el {
opacity: 0;
transform: translateY(30px);
transition: 1s;
}
.lp .el.in {
opacity: 1;
transform: translateY(0);
}
.lp header::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/mv-sp.jpg);
background-repeat: no-repeat;
background-position-y: var(--bg-position, 0px); background-position-x: center;
background-size: 200% auto;
transition: background-position 1s ease-out;
content: '';
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.lp header p {
opacity: 0;
max-inline-size: max-content;
margin-inline: auto;
padding: 23vh 0;
transition: 1s;
}
.lp header p.show {
opacity: 1;
}
@media screen and (min-width: 768px) {
.lp header::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/mv-pc.jpg);
background-size: 110% auto;
}
.lp header p {
padding: 30vh 0;
}
}
.lp main {
padding-top: 200px;
background: linear-gradient(to bottom, transparent 0px, #fff 200px);
}
.lp main #benefit .box {
margin-bottom: 8rem;
}
.lp main #benefit .map {
position: relative;
padding-top: 75%;
width: 100%;
height: 0;
}
.lp main #benefit .map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.lp main #benefit .txt {
margin-bottom: 3rem;
}
.lp main #benefit h2 {
position: relative;
margin-bottom: 1rem;
text-align: left;
}
.lp main #benefit h2::before {
content: '';
position: absolute;
left: -8px;
top: -8px;
width: 120px;
height: 1px;
background-color: #9fbfed;
transform: rotate(-45deg);
z-index: -1;
}
.lp main #benefit h2::after {
position: absolute;
left: 20px;
top: -64px;
font-size: 48px;
color: #9fbfed;
font-family: "Roboto", sans-serif;
font-weight: 100;
}
.lp main #benefit .box1 h2::after {
content: '1';
}
.lp main #benefit .box2 h2::after {
content: '2';
}
.lp main #benefit .box3 h2::after {
content: '3';
}
.lp main #benefit .box2 figure,
.lp main #benefit .box3 figure {
text-align: center;
}
.lp main #benefit .box3 figure {
position: relative;
}
.lp main #benefit .box3 figure img {
border: 8px solid #fff;
box-shadow: 4px 4px 12px rgba(0, 0, 0, .2);
}
.lp main #benefit .box3 figure img:nth-child(1) {
width: 90%;
}
.lp main #benefit .box3 figure img:nth-child(2),
.lp main #benefit .box3 figure img:nth-child(3),
.lp main #benefit .box3 figure img:nth-child(4) {
border-width: 5px;
position: absolute;
}
.lp main #benefit .box3 figure img:nth-child(2) {
width: 45%;
left: 24%;
bottom: -24px;
}
.lp main #benefit .box3 figure img:nth-child(3) {
width: 28%;
left: 1%;
bottom: -45px;
}
.lp main #benefit .box3 figure img:nth-child(4) {
width: 32%;
right: 3%;
bottom: -54px;
}
@media screen and (min-width: 1024px) {
.lp main #benefit .box {
display: flex;
justify-content: space-between;
}
.lp main #benefit .txt {
width: 574px;
margin-bottom: 0;
}
.lp main #benefit .map,
.lp main #benefit figure {
width: 450px;
}
.lp main #benefit .map {
padding-top: 0;
height: auto;
}
.lp main #benefit figure {
height: 269px;
}
.lp main #benefit h2 {
font-size: 24px;
}
.lp main #benefit p {
font-size: 16px;
}
.lp main #benefit .box3 figure img:nth-child(2) {
bottom: -24px;
}
.lp main #benefit .box3 figure img:nth-child(3) {
bottom: -45px;
}
.lp main #benefit .box3 figure img:nth-child(4) {
bottom: -54px;
}
}
.lp main #itinerary h2,
.lp main #price h2,
.lp main #voice h2,
.lp main #qa h2 {
position: relative;
}
.lp main #itinerary h2::after,
.lp main #price h2::after,
.lp main #voice h2::after,
.lp main #qa h2::after {
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
font-family: "Roboto", sans-serif;
letter-spacing: 3px;
font-weight: 100;
text-shadow: 0 0 2px #fff;
}
.lp main #itinerary h2::after {
top: -40px;
content: 'After Diving';
color: #00b8cb;
}
.lp main #price h2::after {
content: 'Price';
}
.lp main #voice h2::after {
content: 'Voice';
}
.lp main #qa h2::after {
content: 'Q&A';
}
@media screen and (min-width: 1024px) {
.lp main #itinerary h2::after,
.lp main #price h2::after,
.lp main #voice h2::after {
top: -44px;
font-size: 24px;
}
}
.lp main #itinerary {
margin-bottom: 8rem;
}
.lp main #itinerary .wave {
fill: none;
stroke: #00b8cb;
stroke-width: 2;
}
.lp main #itinerary h2,
.lp main #itinerary .subttl {
text-align: center;
}
.lp main #itinerary h2 {
margin-top: -11px;
letter-spacing: 1px;
}
.lp main #itinerary .subttl {
color: #8da6ca;
font-size: 13px;
margin: 12px 0 40px;
}
.lp main #itinerary ol,
.lp main #itinerary ol > li {
position: relative;
}
.lp main #itinerary ol {
padding-left: 0;
list-style: none;
position: relative;
}
.lp main #itinerary ol::before,
.lp main #itinerary ol > li::before {
content: '';
position: absolute;
}
.lp main #itinerary ol::before {
top: 0;
left: 82px;
width: 4px;
height: 100%;
background-color: #1267ff;
}
.lp main #itinerary ol > li::before {
top: 0;
left: 44px;
width: 40px;
height: 40px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 16px auto;
background-color: #3a49ac;
border: 2px solid #fff;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}
.lp main #itinerary ol > li.train::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-train.svg);
}
.lp main #itinerary ol > li.person::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-person.svg);
}
.lp main #itinerary ol > li.car::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-car.svg);
}
.lp main #itinerary ol > li.sea::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-sea.svg);
}
.lp main #itinerary ol > li.restaurant::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-restaurant.svg);
}
.lp main #itinerary ol > li.flag::before {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-flag.svg);
}
.lp main #itinerary ol dl {
display: flex;
}
.lp main #itinerary ol dt {
width: 40px;
flex-shrink: 0;
margin: 9px 56px 0 0;
color: #3a49ac;
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
}
.lp main #itinerary ol dd {
padding-top: 6px;
}
.lp main #itinerary ol dd h3 {
color: #00b8cb;
font-size: 16px;
font-weight: bold;
margin-bottom: 4px;
}
.lp main #itinerary ol dd p,
.lp main #itinerary ol dd figure {
margin-bottom: 12px;
}
.lp main #itinerary ol dd p {
font-size: 13px;
line-height: 2;
}
.lp main #itinerary ol dd img {
margin-bottom: 4px;
}
.lp main #itinerary ol dd ul {
padding-left: 0;
list-style: none;
}
.lp main #itinerary ol dd li h4 {
margin: 40px 0 4px;
padding-left: 34px;
font-size: 16px;
font-weight: bold;
background-repeat: no-repeat;
background-position: left center;
background-size: 24px auto;
}
.lp main #itinerary ol dd li.it h4 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-it.svg);
}
.lp main #itinerary ol dd li.fr h4 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-fr.svg);
}
.lp main #itinerary ol dd li.es h4 {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-es.jpg);
}
.lp main #itinerary ol dd li figcaption {
font-size: 13px;
margin-bottom: 8px;
}
.lp main #itinerary ol dd li .link {
text-align: right;
font-size: 13px;
margin-top: 8px;
}
@media screen and (min-width: 1024px) {
.lp main #itinerary .wave {
stroke-width: 1;
}
.lp main #itinerary h2 {
margin-top: -88px;
letter-spacing: 2px;
}
.lp main #itinerary .subttl {
font-size: 16px;
}
.lp main #itinerary ol::before {
left: 116px;
width: 8px;
}
.lp main #itinerary ol > li::before {
left: 72px;
width: 56px;
height: 56px;
background-size: 20px auto;
border: 4px solid #fff;
}
.lp main #itinerary ol dt {
width: 64px;
margin: 13px 80px 0 0;
font-size: 22px;
letter-spacing: 1px;
}
.lp main #itinerary ol dd {
padding-top: 11px;
}
.lp main #itinerary ol dd h3 {
font-size: 20px;
}
.lp main #itinerary ol dd p,
.lp main #itinerary ol dd figure {
margin-bottom: 24px;
}
.lp main #itinerary ol dd p {
font-size: 15px;
}
.lp main #itinerary ol dd img {
margin-bottom: 0;
}
.lp main #itinerary ol dd li h4 {
padding-left: 42px;
font-size: 18px;
background-size: 30px auto;
}
.lp main #itinerary ol dd li figcaption {
font-size: 15px;
margin-bottom: 12px;
}
}
.lp main #price {
margin-bottom: 2rem;
}
.lp main #price h2 {
margin-bottom: 24px;
}
.lp main #price table {
margin-top: 24px;
}
.lp main #price th,
.lp main #price td {
font-size: 13px;
border: 1px solid #eee;
}
.lp main #price th {
width: 66%;
}
.lp main #price tr:nth-child(1) th {
border-bottom-color: #fff;
}
.lp main #price small {
display: block;
text-align: right;
margin-top: 8px;
font-size: 11px;
}
@media screen and (min-width: 640px) {
.lp main #price .box {
width: 640px;
margin-inline: auto;
}
.lp main #price th,
.lp main #price td {
font-size: 15px;
}
}
.lp main #voice {
margin-bottom: 8rem;
}
.lp main #voice h2 {
margin-bottom: 24px;
}
.lp main #voice .box {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/bg-note.jpg);
background-position: center top;
background-repeat: repeat-y;
background-size: contain;
margin-bottom: 32px;
padding: 24px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
}
.lp main #voice figure {
text-align: center;
margin-bottom: 16px;
}
.lp main #voice img {
border-radius: 50%;
width: 180px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
}
.lp main #voice .txt h3 {
font-size: 16px;
margin-bottom: 8px;
}
.lp main #voice .txt h3 span {
font-size: 11px;
letter-spacing: 0;
margin-left: 8px;
}
.lp main #voice .txt dt,
.lp main #voice .txt dd {
font-size: 13px;
line-height: 2;
}
.lp main #voice .txt dt {
font-weight: bold;
color: #e88c00;
margin-bottom: 4px;
}
.lp main #voice .txt dt:not(:first-child) {
margin-top: 16px;
}
@media screen and (min-width: 640px) {
.lp main #voice .inner {
display: flex;
justify-content: space-between;
}
.lp main #voice .box {
background-size: contain;
width: 48%;
}
}
@media screen and (min-width: 1024px) {
.lp main #voice .txt h3 {
font-size: 18px;
}
.lp main #voice .txt h3 span {
font-size: 12px;
margin-left: 12px;
}
.lp main #voice .txt dt,
.lp main #voice .txt dd {
font-size: 14px;
}
.lp main #voice .txt dt:not(:first-child) {
margin-top: 24px;
}
} .lp main #qa h2 {
margin-bottom: 24px;
}
.lp main #qaBox h3 {
font-size: 16px;
padding: 16px;
}
.lp main #qaBox h3::after {
font-size: 24px;
height: auto;
bottom: auto;
top: 9px;
}
.lp main .qaBox li h4,
.lp main .qaBox li p {
font-size: 14px;
padding-left: 24px;
}
.lp main .qaBox li h4 {
margin: 24px 0 4px;
}
.lp main .qaBox li h4::after,
.lp main .qaBox li p::after {
font-size: 17px;
left: 2px;
}
.lp main .qaBox li h4::after {
top: -2px;
}
.lp main .qaBox li p::after {
top: -1px;
}
@media screen and (min-width: 640px) {
.lp main #qa #qaBox {
width: 640px;
margin-inline: auto;
}
.lp main #qaBox h3 {
font-size: 18px;
}
.lp main #qaBox h3::after {
font-size: 28px;
top: 6px;
}
.lp main .qaBox li h4,
.lp main .qaBox li p {
font-size: 15px;
padding-left: 32px;
}
.lp main .qaBox li h4::after,
.lp main .qaBox li p::after {
font-size: 18px;
left: 4px;
}
}
.lp main #about {
margin-bottom: 4rem;
padding-top: 48px;
background: linear-gradient(to bottom, #e6eff4 0px, transparent 200px);
}
.lp main #about .logo {
margin-bottom: 24px;
}
.lp main #about .logo .en {
font-family: 'Kaushan Script', cursive;
font-size: 23px;
}
.lp main #about .logo .jp {
font-family: "Folk Medium";
font-size: 11px;
display: block;
}
.lp main #about .logo .jp .large {
font-size: 14px;
margin-left: 5px;
}
.lp main #about figure {
text-align: center;
}
.lp main #about .txt p {
margin-bottom: 40px;
}
.lp main #about figure {
margin-bottom: 24px;
}
.lp main #about .txt p {
font-size: 13px;
line-height: 2;
}
.lp main #about .staff figure {
margin-bottom: 16px;
}
.lp main #about .staff figure img {
margin-bottom: 8px;
width: 240px;
border-radius: 50%;
}
.lp main #about .staff figure figcaption {
font-size: 12px;
color: #999;
}
.lp main #about table {
max-width: 640px;
margin: 0 auto 24px;
}
.lp main #about th,
.lp main #about td {
font-size: 13px;
border: 1px solid #eee;
}
.lp main #about th {
width: 34%;
}
.lp main #about tr:not(:last-child) th {
border-bottom-color: #fff;
}
@media screen and (min-width: 1024px) {
.lp main #about {
padding-top: 72px;
}
.lp main #about .box {
display: flex;
justify-content: space-between;
}
.lp main #about .box .txt,
.lp main #about .box figure {
width: 48%;
}
.lp main #about figure {
margin-bottom: 40px;
}
.lp main #about .txt p {
font-size: 15px;
}
.lp main #about th,
.lp main #about td {
font-size: 15px;
}
}
.lp main #form {
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
padding-top: 24vw;
}
.lp main #form.lazyloaded {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/bg-form.jpg);
}
.lp main #form h2 {
text-shadow: 0 0 24px #fff;
}
.lp main #form .description {
font-size: 13px;
line-height: 2;
}
.lp main #form #contactTxt {
text-align: center;
}
.lp main form {
max-width: 640px;
margin-inline: auto;
}
.lp main #form .title,
.lp main #form .txt input,
.lp main #form .txt textarea,
.lp main #form .txt select  {
font-size: 14px;
}
.lp main #form .title .caution {
font-size: 9px;
}
.lp main #form .reCAPTCHA {
font-size: 11px;
margin: 0;
}
@media screen and (min-width: 1024px) {
.lp main #form .description {
font-size: 15px;
}
.lp main #form .title,
.lp main #form .txt input,
.lp main #form .txt textarea,
.lp main #form .txt select  {
font-size: 16px;
}
.lp main #form .title .caution {
font-size: 11px;
}
.lp main #form .reCAPTCHA {
font-size: 11px;
margin: 0;
}
}
.lp #footer {
background-color: #fff;
}
.lp #footer #footerCopy {
margin: 0;
padding: 80px 0 104px;
}
.lp #footer #footerCopy small {
font-size: 11px;
}
#bottomCampaign,
#bottomBtns {
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
}
#bottomCampaign dl,
#bottomBtns ul {
display: flex;
justify-content: center;
align-items: center;
max-width: 640px;
height: 56px;
margin: auto;
}
#bottomBtns ul {
list-style: none;
padding-left: 0;
}
#bottomCampaign dt {
font-weight: bold;
font-size: 13px;
color: #00a2b2;
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/icon-shop.svg);
background-position: left center;
background-repeat: no-repeat;
background-size: 28px;
padding-left: 38px;
}
#bottomCampaign dd {
margin-left: 1rem;
}
#bottomCampaign dd a,
#bottomBtns li a {
display: block;
text-align: center;
font-size: 12px;
text-shadow: 0 0 8px #a49e00;
background-color: #dcd500;
color: #fff;
padding: 12px;
border-radius: 2px;
text-decoration: none;
letter-spacing: 0;
}
#bottomCampaign dd a:hover {
opacity: 1;
background: #d1ca00;
}
#bottomBtns li {
width: 44%;
margin-inline: 2%;
}
#bottomBtns li a {
display: block;
text-shadow: none;
}
#bottomBtns .voice a {
background-color: #ee9919;
}
#bottomBtns .about a {
background-color: #00b8cb;
}
#bottomBtns .form a {
background-color: #dcd500;
text-shadow: 0 0 8px #a49e00;
}
#bottomBtns li a span {
display: inline-block;
background-repeat: no-repeat;
background-position: left center;
background-size: 19px;
line-height: 22px;
padding-left: 25px;
}
#bottomBtns .voice a span {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-voice.svg);
}
#bottomBtns .about a span {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-about.svg);
}
#bottomBtns .form a span {
background-image: url(//hokulea-shonan.com/wp-content/themes/custom-themes/img/lp/icon-form.svg);
}
@media screen and (min-width: 768px) {
#bottomCampaign dl,
#bottomBtns ul {
height: 64px;
}
#bottomCampaign dt {
font-size: 14px;
background-size: 30px;
padding-left: 40px;
}
#bottomCampaign dd {
margin-left: 2rem;
}
#bottomCampaign dd a,
#bottomBtns li a {
font-size: 13px;
padding: 12px 16px;
}
#bottomBtns li a {
font-size: 14px;
}
}