@charset "UTF-8";
/*
Theme Name: iconic_tcd062 Child
Theme URI: 
Description: This is a custom child theme I have created.
Author: Hands.Inc
URI: https://www.hands-inc.co.jp/
Template: iconic_tcd062
Version: 1.0
*/

/*--floatの解除--------------------------------*/
.clearfix:after {
display:block;
clear:both;
height:0px;
visibility:hidden;
content:".";
}
/*--共通--------------------------------*/
body.l-header__fix .is-header-fixed .l-header__bar {
    background: rgba(255, 255, 255, 1) !important;
}
.sp-br {
	display: none;
}
.p-entry__body {
	color: #333 !important;
}

.p-cb__item-headline {
font-weight: bold;
font-size: 32px !important;
display: flex;
align-items: center;
gap: 0 7px;
}

#cb_5 .p-cb__item-headline,
#cb_6 .p-cb__item-headline {
	font-weight: bold;
}


.p-cb__item-headline::before {
margin-right:20px;
content: url("https://travel.shizuoka-taas.com/wp-content/uploads/2024/09/taas-headline.png");
}

.p-widget-sidebar .p-widget__title {
background-color: #4A81C3 !important;
}

.p-entry__body h2,
.p-entry__body h3 {
	font-weight: bold;
}

/* 通常状態でのアンダーバーを非表示 */
.menu-item:hover > a::after,
.menu-item.current-menu-item > a::after,
.menu-item.is-active > a::after {
    height: 0px !important;
}

/* メニュー項目のホバー中に色を#F3981Dに設定 */
.menu-item a:hover {
    color: #F3981D !important;
}

/*--Top-about--------------------------------*/
.about-container {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
max-width: 1200px;
margin: 0 auto;
}

.text-content {
max-width: 800px;
margin-right: 40px;
}

.btn {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
margin-bottom: 20px;
background-color: white;
color: #004080;
text-decoration: none;
font-size: 14px;
}

a.btn-border {
  border: 2px solid #14519a;
  border-radius: 0;
  background: #fff;
}

a.btn-border:hover {
  color: #fff !important;
  background: #14519a;
}

.p-entry__body a {
color: #14519a !important;
}

.btn:hover {
background-color: #cccccc;
}
/*--Top-Selling 1day Shore Excursions from Shimizu Port, Shizuoka--------------------------------*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.grid-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.grid-item img {
max-width: 100%;
height: auto;
display: block;
}

.grid-item-content {
padding: 15px;
}

.grid-item h3 {
font-size: 1.2em;
margin: 0 0 10px;
	font-weight: bold;
}

.grid-item p {
font-size: 0.9em;
color: #666;
margin: 0 0 10px;
}

.grid-item a {
text-decoration: none;
color: #007BFF;
}

/*--バナー--------------------------------*/
.top__banner-h2 {
margin-bottom: 10px;
}

.top__banner-lead {
font-size: 1em;
margin-bottom: 15px;
}

.clickable-image {
display: inline-block;
transition: transform 0.3s ease, border 0.3s ease;
}

.clickable-image img {
max-width: 100%;
height: auto;
display: block;
border-radius: 5px;
transition: opacity 0.3s ease;
}

.clickable-image:hover {
opacity: 0.6;
}

.clickable-image:active {
transform: scale(0.95);
}

.attention__container {
	background-color: #F4F4F4;
	padding: 24px 15px;
	border-radius: 5px;
}

/*--Sights and Experience--------------------------------*/
.p-entry__body p {
	margin-bottom: 0em !important;
}

#cb_8 .p-entry__body {
color: #fff;
}
.spots {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}

.spots img {
width: 100%;
height: auto;
border-radius: 5px;
}

.spots-item {
text-align: center;
margin-bottom: 2em;
}

/*--FAQ--------------------------------*/
.faq__container {
    margin-bottom: 6em;
}

.heading {
    position: relative;
    padding-top: 1.5em;
    color: #333333;
}

.heading::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    color: #9CC0EB;
    font-size: 4em;
    line-height: 1;
    content: attr(data-number);
    pointer-events: none;
}

.faq {
    max-width: 1200px;
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
	text-align: left; 
}

.faq summary::before,
.faq p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.faq summary::before {
    color: #75bbff;
    content: "Q";
}

.faq summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.faq[open] summary::after {
    transform: rotate(225deg);
}

.faq p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.faq[open] p {
    transform: none;
    opacity: 1;
}

.faq p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/*--About us--------------------------------*/
.aboutus-container {
display: flex;
justify-content: space-between;
align-items: end;
color: white;
max-width: 1200px;
margin: 0 auto;
}

.aboutus-text-content {
width: 80%;
margin-right: 40px;
}

.aboutus-image-content {
width: 20%;
}

/*--フッター--------------------------------*/
.page-id-168 .l-footer {
margin-top: 0px !important;
}

.p-footer-widget-area {
background-color: #14519a !important;
color: #fff !important;
}

.p-footer-widget-area .p-widget {
width: 100% !important;
}

.p-footer-widget-area a {
	color: #fff !important;
}

.p-footer-search__input {
    display: none !important;
}

/*--レスポンシブ--------------------------------*/
@media only screen and (max-width: 991px) {
.p-index-slider__item-content {
 padding-bottom: 16%;
}
.p-index-slider__item--1 .p-index-slider__item-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.p-index-slider__item--1 .p-index-slider__item-content {
background-color: transparent !important;
}
.p-index-slider__item--1 .p-index-slider__item-catch {
color: #fff !important;
font-size: 28px;
}
.p-entry__body {
 line-height: 1.8 !important;
}
.faq summary {
padding: 1em 1em 1em 3em !important;
}
}

@media screen and (max-width: 768px) {
.p-cb__item-headline {
font-size: 24px !important;
}
.p-cb__item-headline::before {
margin-right:8px;
content: url("https://travel.shizuoka-taas.com/wp-content/uploads/2024/09/headline-icon-sp-1.png");
}
.text-content {
margin-right: 0px;
}
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
.spots {
grid-template-columns: repeat(3, 1fr);
}
.about-container {
display: block;
}
}

@media screen and (max-width: 480px) {
.p-index-slider__item--1 .p-index-slider__item-catch {
font-size: 20px !important;
}
.p-index-slider__item-content {
 padding-bottom: 0%;
padding-top: 10%;
height: 100%;
}
.sp-br {
display: block;
}
.grid-container {
grid-template-columns: 1fr;
}
.aboutus-container {
display: block;
}
.aboutus-text-content {
width: 100%;
margin-right: 0px;
}
.aboutus-image-content {
width: 60%;
margin-top: 24px;
}
}

/* ===== フォントサイズ変更（確実に効かせる） ===== */
.p-entry__body p,
.p-entry__body li {
  font-size: 18px !important;
  line-height: 1.8 !important;
}

.p-entry__body h1 { font-size: 28px !important; }
.p-entry__body h2 { font-size: 24px !important; }
.p-entry__body h3 { font-size: 20px !important; }