@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
header, footer {display:none;}
.content {margin-top:0;}
.wrap {
	margin:0;
	width:auto;
}
.main {padding:0;}
.entry-content {margin-top:0;}
/* 画像ブロック自体の余白と影を完全に消す */
.wp-block-image img {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important; /* これがフチに見えることがあります */
    display: block; /* 下部の微細な隙間対策 */
}

/* 画像を囲むフィギュアタグの余白もリセット */
.wp-block-image {
    margin: 0 !important;
}
/*ヘッダー*/
.original-header {background:#19293f;}
.header-flex {
	display:flex;
	justify-content: space-between;
	align-items:center;
	padding:1.5em;
}
.headerlogo {width:70%;}
.nav-list {
	display:flex;
	list-style:none;
}
.nav-list li {margin-right: 20px;position: relative;}
.nav-list a {
  text-decoration: none; /* 下線を消す */
  color: #fff;           /* 文字の色 */
}
/* 最初はサブメニューを隠す */
.sub-menu {
	list-style: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 10px;
  min-width: 200px;
  z-index: 999;
}

/* 親liにホバーしたら表示 */
li:hover > .sub-menu {display: block;color:#000;}

/* サブメニュー内の装飾 */
.sub-menu li {margin: 5px 0;}
.sub-menu a {color:#000;}
/*フッター*/
/* アンカーリンクで飛んだ時の停止位置を調整 */
.aboutus {
    scroll-margin-top: 120px; /* ヘッダーの高さ + 20px〜40px 程度の余裕を持たせる */
}
/* 親コンテナ：背景画像の高さに合わせて領域を確保する */
/* 親コンテナ */
.aboutus {
    position: relative;
    width: 100%;
    /* height: 250px; ← 削除（高さは中身に合わせる） */
    min-height: 250px; /* 最低限の高さは維持 */
    overflow: visible;
    display: flex; /* 追加：高さを認識させるため */
    flex-direction: column;
}
/* 背景画像 */
.aboutus > img {
    position: absolute;
    bottom: -20%;
    left: 0;
    width: 100%;
    height: 250px; /* 画像の表示高さは固定を維持 */
    z-index: 1;
    object-fit: cover;
}
/* 会社概要ボックス：背景画像の上にはみ出すように配置 */
/* 会社概要ボックス */
.profile {
    position: relative; /* absolute から relative に変更：これで親が高さを認識します */
    /* top: 30%; left: 70%; transform... はデザイン維持のため以下に集約 */
    margin-top: -50px; /* NEWSとの重なり具合を調整（数値は現状に合わせて微調整してください） */
    margin-left: auto;
    margin-right: 17%; /* 右側の位置を固定 */
    z-index: 2;
    background-color: #000;
    color: #fff;
    padding: 1.5em; /* 少し余裕を持たせると画像に近くなります */
    max-width: 418px;
    box-sizing: border-box;
    width: 100%;
}
/* 見出し部分 */
.profile > div:nth-child(1) {
    font-size: 1.2rem;
    font-weight: bold;
	    margin-bottom: -8px;
}
.profile > div:nth-child(2) {
    font-size: 1rem;
    margin-bottom: 20px;
}
/* リスト部分（前回のまま） */
.company-info dl {
    margin: 0;
}
.info-row {
    display: flex;
    margin-bottom: 3px;
    line-height: 1.3;
}
.info-row dt {
    width: 5em; /* ラベルの幅を固定して揃える */
    font-weight: bold;
    flex-shrink: 0;
}
.info-row dd {
    margin: 0;
    flex: 1;
}
/*map*/
/* map */
.access-section {
    position: relative;
    width: 100%;
    margin-top: 40px; /* 手動の 150px をやめ、自然な余白に */
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
}
/* 背景画像（薄い地図） */
.back-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
	margin-top:130px;
}
/* 黒いボックス（アクセス） */
.access-profile {
    position: relative; /* absolute から relative に変更 */
    margin-top: -300px; /* 画像の上に重ねるためのネガティブマージン */
    margin-left: auto;
    margin-right: 17%;
    background-color: #000;
    color: #fff;
    padding: 1.5em;
    max-width: 418px;
    z-index: 10;
    width: 100%;
}
/* タイトル部分 */
.title-en {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
}
.title-jp {
    font-size: 0.9rem;
    margin-bottom: 0;
}
/* ボックス内の地図画像 */
.map-inner-img {margin-top:-47px;}
.map-inner-img img {
    width: 93%;
    height: auto;
    display: block;
	margin:0 0 0 auto;
}
/* Google Mapで見る リンク */
.map-link {
    max-width: 1200px; /* サイトのコンテンツ幅に合わせる */
    margin: 50px auto 0 50px;
    padding: 0 20px;
}
.map-link a {
    color: #1a365d; /* 濃いめの紺色 */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
}
/*コンタクト*/
/* セクション全体 */
.contact {
    position: relative;
    width: 100%;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px; /* 最低限の背景エリアを確保 */
}
/* 背景画像 */
.contact-bg {
    position: absolute; /* ここは absolute のままで OK（親が padding で高さを出しているため） */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* フォームを包む白いボックス */
.contact-form-inner {
    position: relative;
    z-index: 2;
    background-color: #fff;
    width: 60%;
    max-width: 500px;
    padding: 30px 40px;
	border:10px solid #dcdcdc;
    padding: 30px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/* タイトル部分 */
.contact-title-en {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
    line-height: 1;
}
.contact-title-jp {
    font-size: 1rem;
    margin: 5px 0 20px;
    font-weight: bold;
}
/* CF7 内部の入力フィールドのスタイル */
.form-box .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}
.form-box label {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
/* 入力欄（テキスト、メール、電話番号、メッセージ） */
.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0; /* 角丸をなくしてシャープに */
    background-color: #fff;
    box-sizing: border-box;
}
/* 送信ボタン */
.form-box input[type="submit"] {
    display: block;
    margin: 40px auto 0;
    padding: 10px 40px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}
.form-box input[type="submit"]:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}
/* チェックされていない時の送信ボタンのスタイル */
.wpcf7-submit:disabled {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #ccc !important;
    cursor: not-allowed; /* 禁止マークのカーソル */
    opacity: 0.6;
}
/* 同意チェックボックス周りの余白 */
.acceptance-wrapper {
    margin: 20px 0;
    text-align: center;
    font-size: 0.9rem;
}
.acceptance-wrapper input {margin-right: 8px;}
.copyright {
	margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 13px;
}

/*home*/
/* 1. コンテンツの幅制限を無視して全幅にする */
.imagebox {
    width: 100vw;
	max-height:700px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
    line-height: 0; /* 画像下の微細な隙間を消す */
	margin-top:-1px;
}
/* 2. 画像自体のフチや余白を完全にリセット */
.imagebox img {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    max-width: none !important; /* Cocoonの制限を解除 */
	max-height:700px;
	object-fit:cover;
}
/* 3. メイン画像の表示設定 */
.topimage {
    width: 100%;
    height: auto;
    display: block;
}
/* 4. ロゴ（177.svg）を中央に重ねる */
.imagebox-inner {position: relative;}
.txt-177 {
        position: absolute;
    top: 20%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 48%;
    height: auto;
    z-index: 10;
}
.imagebox-ttl {
	z-index: 10;
    width: 100%;
    position: absolute;
    top: 30%;
    left: 6%;
    font-size: 100px;
    font-weight: bold;
    color: #fff;
	line-height:0.4;
}
.imagebox-sub {
    color: #fff;
	font-size:18px;
}
/*top-news*/
.news-section {
	width:50%;
	margin:0 auto 7% auto;
}
.news-head {
	font-size: 30px;
    font-weight: bold;
    color: #19293f;
    border-bottom: 5px solid #dd960f;
}
.news-list {
	list-style:none;
	padding:0;
}
.news-list li {
	margin: 0.2em;
    border-bottom: 1px solid;
    padding: 0.5em 0;
}
.newslink {
	color: #000;
    text-decoration: none;
}
.date {
	font-size: 15px;
    padding-right: 2em;
}
.title {font-size: 17px;}
.news-btn-wrap {text-align:end;}
.news-btn-wrap a {
	background:#19293f;
	color:#fff;
	text-decoration:none;
	padding: 0.3em 1em;
    font-size: 14px;
}
.news-btn-wrap a:hover {color:#fffbc8;}
/*news個別ページ*/
.entry-news-body {
	width:65%;
	margin:0 auto 15% auto;
}
.news-title {
	font-size:22px;
	font-weight:bold;
	color:#19293f;
	border-bottom:3px solid #dd960f;
	margin-top:3em;
}
.dnews-ate {
	padding: 0.5em 0;
    border-bottom: 1px dotted;
    margin-bottom: 1em;
	font-size:13px;
}
/*TOPサービス*/
/* 親：見出しの幅を規定 */
.service-section {
    width: 50%;
    margin: 0 auto 7% auto;
}
.service-head {
	font-size: 30px;
    font-weight: bold;
    color: #19293f;
    border-bottom: 5px solid #dd960f;
}
/* はみ出しコンテナ：ここを画面見ながらいじってください */
.service-container-wide {
    width: 125%; /* 65%に対しての125%なので、結果的に約80%強の幅になります */
    margin-left: -10%; /* 左へのはみ出し具合を調整 */
    /* もしくは width: 80vw; margin-left: calc(50% - 40vw); などでもOKです */
    margin-top: 40px;
	margin-bottom:15%;
}
.service-container-wide2 {
    width: 125%; /* 65%に対しての125%なので、結果的に約80%強の幅になります */
    margin-left: -10%; /* 左へのはみ出し具合を調整 */
    /* もしくは width: 80vw; margin-left: calc(50% - 40vw); などでもOKです */
    margin-top: 40px;
}
/* 画像とテキストの重なり */
.service-main-visual {
    display: flex;
    align-items: center;
    position: relative;
}
.service-photo {width: 55%;}
.service-intro-text {
	width: 70%;
    background-color: #fff;
    padding: 1em;
    margin-left: -10%;
	margin-top:-10%;
    z-index: 2;
}
.intro-sub {
	font-size:18px;
	font-weight:bold;
}
.intro-ttl {
	font-size:35px;
	color:#19293f;
	font-weight:900;
	line-height:1.2;
}
.intro-description {line-height:1.5;}
/* カードの並び */
.service-cards {
	display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
    width: 80%;
    margin: -70px auto 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}
.s-card-box {width:30%;}
.s-card-box2 {width:30%;}
.s-card {
    background: #fff;
    padding: 10px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.s-card-ttl {
	text-align:center;
	font-size:18px;
	color:#19293f;
	font-weight:bold;
}
.s-card-txt {
	line-height:1.5;
	margin-top:0.5em;
}
.kikaiicon {
	width:70%;
	display:block;
	margin:0 auto;
}
.service-subtxt {
	text-align: center;
    font-size: 20px;
	font-weight:bold;
    border-top: 2px solid;
    border-bottom: 2px solid;
    margin-top: 1.5em;
}
.service-btn-wrap {
	text-align:center;
	margin:2em 0;
}
.service-btn-wrap a {
	background:#19293f;
	color:#fff;
	text-decoration:none;
	padding: 0.3em 1em;
    font-size: 14px;
}
.service-btn-wrap a:hover {color:#fffbc8;}
/*TOPレジャー*/
.leisure-section {
    width: 50%;
    margin: 0 auto;
}
.leisure-head {
	font-size: 30px;
    font-weight: bold;
    color: #19293f;
    border-bottom: 5px solid #dd960f;
}
.leisure-box {
	margin:5% 0;
	margin: 5% 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.leisure-box2 {
	display: flex;
    flex-direction: row-reverse;
}
.leisure-container {width:52%}
.leisure-img {width:48%}
.leisure-ttl {
	font-size:20px;
	font-weight:bold;
	border-bottom:1px solid #000;
}
.leisure-ttl.reverse {padding-left:1em;}
.leisure-sub {
	font-size:17px;
	font-weight:600;
}
.leisure-sub.reverse {padding-left:1em;}
.leisure-txt {
	text-align:justify;
	padding-right:2em;
}
.leisure-txt.reverse {
	padding-right:0;
	padding-left:1em;
}
.leisure-btn-wrap {
	text-align:end;
	padding-right:2em;
	margin-top:1em;
}
.leisure-btn-wrap.reverse {padding-right:0;}
.leisure-btn-wrap a {
	background:#19293f;
	color:#fff;
	text-decoration:none;
	padding: 0.3em 1em;
    font-size: 14px;
}
.leisure-btn-wrap a:hover {color:#fffbc8;}
/*天気*/
/* 天気とタイドグラフのエリア */

.weather-section {background-image:url(/test/wp-content/uploads/2026/03/blogback.webp);}
.weather-area {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 上下中央で揃えると高さの差が気にならなくなります */
    gap: 40px; /* 少し広げると圧迫感が減ります */
    width: 80%;
    margin: 7% auto 13% auto;
	padding:2em;
}

/* 天気ウィジェットの箱（左側） */
.weather {
    flex: 0 0 300px; 
    min-width: 0;
}

/* タイドグラフの箱（右側）：ここを固定幅にして小さくします */
.tidegraph {
    flex: 0 0 450px; /* 300px〜500px程度でお好みで調整してください */
    min-width: 0;
}

.tidegraph img {
    width: 100%;
    height: auto;
    cursor: zoom-in; /* マウスを乗せたら「拡大できる」合図を出す */
    transition: opacity 0.3s;
}

.tidegraph img:hover {
    opacity: 0.8; /* 重ねた時に少し薄くして反応を出す */
}
/*ブログアーカイブ*/
.blog-archive {
	width:65%;
	margin:5% auto 10% auto;	
}
.blogttlimg {width:50%;margin-bottom:0.5em;}
.blog-list {
	border-bottom:1px solid;
	padding:1em 0;
}
.blog-card {
	display: flex;
    flex-direction: row;
    align-items: center;
	color: #000;
    text-decoration: none;
}
.blog-card__img {
	width:150px;
	height:100px;
	display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    overflow: hidden;        /* はみ出た部分を隠す */
    background-color: #f0f0f0; /* 画像がない時の背景色 */
}
.blog-card__img img {
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.blog-card__body {
	display: flex;
    align-items: center;
	gap: 1em;
	margin-left:1em;
}
/*ブログ詳細*/
.blog-detail {
	width:65%;
	margin:5% auto 15% auto;
}
.blog-detail__image {width:100%;margin-top: 1em;}
.blog-detail__image img {width:100%;}
.blog-detail__content {
	margin-top:2em;
	text-align:justify;
}

/*サービスページ*/
.service-midashi {
	font-size:18px;
	font-weight:bold;
	margin-top:1em;
}
.service-txt {margin-top:1em;}
.shindanki-ttl {
	display: flex;       /* Flexboxで横並びにする */
	align-items: center; /* 文字と線の垂直中心を揃える */
	white-space: nowrap; /* 画面が狭い時に線が消えないよう改行を防止 */
	font-size:20px;
	font-weight:bold;
	font-feature-settings: "palt";
}
.shindanki-ttl::after {
	content: "";
	flex-grow: 1;        /* 右側の余ったスペースをすべて線にする */
	height: 1px;         /* 線の太さ */
	background: #333;    /* 線の色（お好みの色に変更してください） */
	margin-left: 15px;   /* 文字と線の間の余白 */
}
.kakko {display: inline-block;
		margin-left: -0.6em;}
.shindanki-but {
	margin-top: 3%;
    text-align: end;
}
.shindanki-but a {
	text-decoration:none;
	color:#19293f;
	background:#fff;
	border:1px solid #19293f;
	padding:0.3em 1em;
	font-size:15px;
}
.shindanki-but a:hover {
	color:#fff;
	background:#19293f;
}
/*ボート販売一覧*/
.boat-box {margin:5% 0 10% 0;}
.boat-archive {
	width:100%;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5%;
}
.boat-card-hover {text-decoration:none;    width: 30%;}
.boat-card__img {
	width: 100%;
    height: 150px;
}
.boat-card__img img {
	width:100%;
	height:150px;
	object-fit: contain;
}
.boat-card__name {color:#000;}
.boat-card__btn {
	text-align:center;
	margin:1em 0;
}
.boat-card__btn_txt {
	color: #fff;
    background: #19293f;
    display: inline;
    padding: 0.3em 1em;
}
/*ボート販売詳細*/
.boat-detail-page {
	width:65%;
	margin:5% auto 15% auto;
}
/* ギャラリーのフレックス配置 */
.boat-visual-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.boat-main-view {
	flex: 2;
	width: 100%;
    /* アスペクト比を16:9で固定（イラレのデザインに合わせて4:3等に変更可） */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    background-color: #f0f0f0; /* 画像がない部分の背景色 */
    border: 1px solid #eee;
}
.boat-main-view img.js-main-img {
    width: 100%;
    height: 100%;
    /* 縦長画像でも、枠に合わせて中央で切り抜き（または収める） */
    object-fit: contain; 
    /* もし全体を見せたい（切りたくない）場合は contain に変更してください */
    object-position: center;
    display: block;
	background:#fff;
}
/* サムネイル側も高さを揃えるとより綺麗です */
.thumb-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* サムネイルは正方形で統一 */
    object-fit: contain;
	background:#fff;
}
.boat-sub-thumbs {
    flex: 1; /* サムネイルエリア */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
    gap: 8px;
    align-content: start;
}
.thumb-item {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.2s;
}
.thumb-item:hover {
    border-color: #1e3650;
}
.boat-name {font-size:22px;}
.boat-price {
	font-size:25px;
	font-weight:bold;
}
.zeikomi {font-size:12px;}
/* スペック表の装飾 */
.boat-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.boat-spec-table th {
    width: 30%;
    background: #f8f8f8;
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
    font-size: 14px;
}
.boat-spec-table td {
    border: 1px solid #ccc;
    padding: 12px;
    font-size: 14px;
}
/*ボート販売説明*/
.setsumei {
	font-size:20px;
	font-weight:bold;
	color:#19293f;
	border-bottom:1px solid;
}
.description-content {line-height:1,.5;}
.supplement-box {
	margin-top:5%;
	line-height:2;
}
.supplement-box p {
	border-bottom:1px solid;
	padding:0.7em 0;
}
.supplement-box strong {color:#19293f;}
.boat-detail-page {margin: 5% auto 25% auto;}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .boat-visual-flex {
        flex-direction: column;
    }
    .boat-sub-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
}





/* スマホでは縦並びにして、幅を100%に戻す */
@media screen and (max-width: 1024px) {
    .weather-area {
        flex-direction: column;
        align-items: center;
    }
    .weather, .tidegraph {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px; /* スマホで広がりすぎないように */
    }
}
.blog-area {width:30%;}
.blog-sub {
	font-size:18px;
	font-weight:bold;
	margin-bottom:0.3em;
}
.blog-txt {
	text-align:justify;
	margin-top:0.3em;
}
.blog-btn-wrap {
	margin: 0.5em 0 1em 0;
	text-align:end;
}
.blog-btn-wrap a {
	background:#19293f;
	color:#fff;
	text-decoration:none;
	padding: 0.3em 1em;
    font-size: 14px;
}
.blog-btn-wrap a:hover {color:#fffbc8;}
.link {
	font-size:18px;
	font-weight:bold;
	border-bottom:1px solid;
}
.linktxt {
	text-decoration:none;
	color:#000;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* モバイル時の余白を強制的にゼロにする */
@media screen and (max-width: 834px) {
    #content main.main,
    #content div.sidebar {
        padding: 0 !important;
    }
}
/* PC用（既存のスタイルがある場合は調整してください） */
@media screen and (min-width: 961px) {
    .hamburger { display: none; }
    .nav-list { display: flex; gap: 20px; }
}

/* モバイル用 */
@media screen and (max-width: 960px) {
    /* ボタンの見た目 */
    .hamburger {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 24px;
        z-index: 100;
        cursor: pointer;
		
    }
    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff; /* ロゴに合わせた濃紺 */
        transition: all 0.4s;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* メニューが開いた時のボタン（×印） */
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

    /* メニュー本体の隠し設定 */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* 最初は画面の外 */
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95); /* 和紙の風合いを活かすなら透け感を */
        z-index: 90;
        transition: all 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-menu.is-active {
        right: 0; /* 画面内にスライドイン */
    }
    .nav-list {
        flex-direction: column;
        text-align: center;
        list-style: none;
        padding: 0;
    }
    .nav-list li { margin: 20px 0; }
    .nav-list li a {
        font-size: 1.5rem;
        color: #1e3650;
        text-decoration: none;
        font-weight: bold;
    }
	/* スクロール後に色を濃紺（#1e3650）に変える */
	.hamburger.is-scrolled span {
		background-color: #1e3650;
	}
	/* メニューが開いている時（is-active時）は、背景が何色でも白で見やすくする */
	.hamburger.is-active span {
		background-color: #fff !important;
	}
	/*topページ*/
	.header-flex {justify-content: center;}
	.imagebox {height:500px;}
	.topimage {
		height:500px;
		object-fit:cover;
	}
	.txt-177 {
		top:50%;
		left:50%;
		width:80%;
	}
	.news-section {width:90%;}
	ul.news-list {padding:0;}
	.date {font-size:13px;}
	.title {font-size:15px;}
	.news-btn-wrap a {font-size:13px;}
	.service-section {width:90%;}
	.service-main-visual {flex-direction: column;}
	.service-container-wide {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	.service-photo {
		width:100%;
		margin-top:5%;
	}
	.service-intro-text {
		width:90%;
		margin-left: 0;
		margin-top: -10%;
	}
	.intro-sub {font-size:17px;}
	.intro-ttl {font-size:24px;}
	.intro-description {
		font-size:15px;
		text-align:justify;
		font-feature-settings: "palt";
	}
	.service-cards {
		width:100%;
		margin:0;
	}
	.service-cards {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 3;
		width: 100%;
		margin: 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap:0;
	}
	.s-card-box {
		width:46%;
		margin-bottom:5%;
	}
	.s-card-icon img {
		max-width: 60%;
		display:block;
		margin:0 auto;
	}
	.s-card-ttl {font-size:16px;}
	.s-card-txt {
		font-size:14px;
		text-align:justify;
		font-feature-settings: "palt";
	}
	.service-container-wide2 {
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	.s-card-box2 {
		width:48%;
		margin-bottom:5%;
	}
	.leisure-section {width:90%;}
	.leisure-container {
		width:100%;
		margin-bottom:10%;
	}
	.leisure-img {width:100%;}
	.leisure-btn-wrap {padding-right:0;}
	.leisure-ttl.reverse, .leisure-sub.reverse, .leisure-txt.reverse {padding-left:0;}
	.blog-area {width:100%;}
	.aboutus img {display:none;}
	.access-profile{margin-top:-50px;}
	.back-img {display:none;}
	.title-en {font-size:font-size: 1.2rem;}
	.map-link {margin: 0 auto 0 0;}
	.contact {padding: 50px 0;}
	.contact-form-inner {width:90%;}
	.entry-news-body {
		width:90%;
		margin:0 auto 35% auto;
	}
	.blog-archive {
		width:90%;
		margin: 5% auto 25% auto;
	}
	.blog-card {align-items: flex-start;}
	.blog-card__img {width:120px;}
	.blogttlimg {width:80%;}
	.blog-card__body {
		flex-direction: column;
		align-items: flex-start;
		gap:0;
	}
	.blog-card__body time {font-size:14px;}
	h3 {font-size:17px;}
	.service-head {font-size:23px;}
	.blog-detail {
		width:90%;
		margin: 5% auto 35% auto;
	}
	.blog-detail__meta time {font-size:14px;}
	.blog-detail__image {height:200px;}
	.blog-detail__image img {
		height:200px;
		object-fit:cover;
	}
	.blog-detail__content {margin-top:1em;}
	.imagebox-ttl {font-size:50px;}
	.imagebox-sub {font-size:14px;}
	/*ボート販売一覧*/
	.boat-card-hover  {width:100%;}
	.boat-card__img {height:200px}
	.boat-card__img img {width:100%;height:200px}
	/*ボート販売詳細*/
	.boat-detail-page {width:90%;}
	
}

@media screen and (max-width: 450px) {
	.imagebox {height:300px;}
	.txt-177 {top: 30%;}
	.imagebox img {max-height:250px;}
	.leisure-box {flex-direction: column;}
	.leisure-box2 {flex-direction: column;}
}