@charset "UTF-8";
/* CSS Document */

html,
html, body, header, div, ul, li, a, img {
	padding: 0;
	margin: 0 !important;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
}
/*　全体のボックサイズ計算を統一　*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*　ヘッダー部分　*/
header {
	display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #191D2C;
  position: relative;
  width: 100%;
  height: 220px;
  z-index: 100;
}

/*　サイトのロゴに関して　*/
.site-logo{
	font-size: 24px;
	width: auto;
	object-fit: contain;
}

/* ハンバーガーメニューに関して */ 
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #FFFFFF;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  left: 0; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  transition: 0.5s;
  text-align: center;
  padding-top: 100px;
}

/* メニュー黒ポチを消す */
.nav_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav_item {
	margin-bottom: 25px;
	display: block;
	width: 100% !important;
}
.nav_item a {
	display: inline-block;
	font-size: 1.2rem;
	color: #fff;
	text-decoration: none;
	transition: 0.3s;
	padding: 10px 0;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
    top: 0;/* メニューを画面に入れる */
}

/*　ナビコンテンツ(メニュー)の装飾に関して　*/
.nav_content {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.nav_content {
	text-align: center;
}
.nav_content ul{
	margin: 0;
	padding: 0;
}
.nav_content li{
	list-style: none;
	display: inline-block;
	width: 10%;
	min-width: 90px;
}
.nav_content li:not(:last-child){
	border-right:2px solid #ddd;
}
.nav_content a{
	text-decoration: none;
	color: #FFFFFF;
}
.nav_content a.current{
	color: #00B0F0;
	border-bottom: 2px solid #00B0F0;
}
.nav_content a:hover{
	color: #F7CB4D;
	border-bottom: 2px solid #F7CB4D;
}

.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}

/*　メインの見出しに当たる部分（全ページ共通！）　*/
.thema {
	background-color: #FFFFFF;
	padding: 30px 15px;
	text-align: center;
}
.thema h1 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #333;
	margin: 0;
	letter-spacing: 0.1em;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
/*　文字の下にアクセントの細い線　*/
.thema h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background-color: #4285F4;
}
/*　index_リード文の装飾　*/
.thema h2 {
	margin: 30px auto 0 auto;/*　下線との距離をしっかり離す　*/
	font-size:  0.95rem;
	font-weight: normal;
	color: #555555;
	line-height: 1.8;
	text-align: left;
	width: 90%;/*　スマホ画面の横幅に応じて文章が自動で画面幅の90%にフィット　*/
	max-width: 500px;
}

/*　index_2枚のデモカー画像に関して　*/
.image-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}
.image-item {/*　2枚の画像サイズが違うため image-item という枠で囲った　*/
	width: 100%;
}
.image-item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/*　product_サービスメニューについて　*/
/*　全体の枠組み　*/
.accordion-container {
	width: 100%;
	max-width: 90%;
	margin: 0 auto !important;
	font-family: sans-serif;
	box-sizing: border-box;
}
/* 各アコーディオンの枠　*/
.accordion-item {
	border-bottom: 1px solid #dcdcdc;
	overflow: hidden;
}
/*　タイトル部分（クリックエリア）*/
.accordion-title {
	display: block;
	padding: 18px 40px 18px 15px;
	font-weight: bold;
	color: #333;
	cursor: pointer;
	position: relative;
	list-style: none;
}
/* Firefox等の一部のブラウザ用のデフォルト矢印消し*/
.accordion-title::webkit-details-marker {
	display: none;
}
/* 自作の矢印アイコン（デフォルトの状態：右向き）*/
.accordion-title::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	text-underline-position: 20px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.3s;/* 回転を滑らかに　*/
}
/*　アコーディオンが開いてる時（open属性がある時）のスタイル　*/
.accordion-item[open] .accordion-title {
	background-color: #f9f9f9;
}
/*　アコーディオンが開いてる時、矢印を「下向き」に回転　*/
.accordion-item[open] .accordion-title::after {
	transform: translateY(-70%) rotate(135deg);
}
/*　中身のコンテンツエリア　*/
.accordion-content {
	padding: 15px;
	background-color: #fff;
	color: #555;
	line-height: 1.6;
}
.accordion-content p {
	margin: 0;
}

/*　product_サービスメニューの画像レイアウト　*/
/*　共通：画像が枠からはみ出さない基本設定　*/
single-phpto img,
gallery-images img,　{
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
}

/* product_項目1：写真1枚を中央に大きく表示　*/
.single-phpto {
	margin-top: 15px;
	display: flex;
	justify-content: center;/*　横方向の中央揃え　*/
}
.single-phpto img {
	max-width: 100%;
}

/* product_項目2：強めの見出し文章　*/
.accordion-content .accordion-lead {
	font-size: 1.1rem;
	font-weight: bold;
	color: #191D2C;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 15px;
	letter-spacing: 0.03em;
	text-align: left;
}

/* product_項目2：ハイパーリンクの装飾　*/
/*　リンクを包む外箱　*/
.accordion-link-box {
	margin-top: 15px;
	text-align: center;
}
/*　リンクの文字そのもののデザイン　*/
.accordion-link {
	display: inline-block;
	color: #4285F4;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.25rem;
	padding: 10px 0;
	border-bottom: 1px solid transparent;
	transition: color 0.3s, border-coler 0.3s;
}
/*　ホバー時やタップした瞬間の動き　*/
.accordion-link:hover {
	color: #F7CB4D;
	border-bottom: 1px solid #F7CB4D;
}

/*　product_項目3：説明文＋画像3枚のブロック　*/
/*　ブロック全体の枠　*/
.acc-block {
	margin: 15px 0 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/*　ワンラップロゴを包む外枠　*/
.acc-pdf-image-box {
	width: 90%;
	max-width: 600px;
	margin: 15px auto 10px auto !important;
	text-align: center !important;
}
.acc-pdf-image-box img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 auto !important;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/*　説明文の高さなど　*/
.acc-text {
	font-weight: bold;
	font-size: 0.95rem;
	color: #444;
	margin: 0 0 2px 0!important;
	padding: 0 !important;
	line-height: 1.2 !important;
	text-align: left !important;
}
/*　画像をまとめる外枠　*/
.acc-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/*　画像を包む透明な箱　*/
.acc-img-box {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	/*　画像のアスペクト比固定　*/
	aspect-ratio: 4/3 !important;
	overflow: hidden !important;
	border-radius: 6px;
}

/*　画像そのものの設定　*/
.acc-img-box img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
}

/*　product_アコーディオン全体の下に余白　*/
details {
	margin-bottom: 24px;
}

/*　access_Googleマップ含む住所全体のレイアウト　*/
/*　セクション全体の余白と最大幅　*/
.access-section {
	padding: 40px 20px;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* access_地図コンテナと情報エリアを縦並び＆適度な余白　*/
.access-container,
.access-info {
	width: 100%;
	margin-bottom: 30px !important;
}
/*　地図の枠（比率を保ってレスポンシブ化　*/
.access-map {
	position: relative;
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0 0 0 0.1);
	margin-bottom: 15px;
}
 /*　地図のiframe自体を枠いっぱいに広げる　*/
.access-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height:  100% !important;
	border: 0;
}
/*　Googleマップアプリで見るボタン　*/
.map-app-btn {
	display: block;
	text-align: center;
	background-color: #4285F4;
	color: #ffffff;
	padding: 14px 20px;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.95rem;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	transition: background-color 0.3s, opacity 0.3s;
	margin-top: 10px !important;
}
/* ボタンのホバー・タップ時　*/
.map-app-btn:hover {
	background-color: #3367D6;
}

/*　住所情報エリアの装飾　*/
.info-list {
	margin: 0;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
}
/*　項目名　*/
.info-list dt {
	font-weight: bold;
	font-size: 1rem;
	color: #222;
	margin-bottom: 8px;
}
/*　項目の中身　*/
.info-list dd {
	margin-left: 0;
	margin-bottom: 25px;
	line-height: 1.6;
	color: #555;
}
/*　最後の項目だけ下の余白をなくす　*/
.access-info dd:last-child {
	margin-bottom: 0;
}

/*　company_会社概要セクション全体の余白　*/
.company-section {
	padding: 20px 20px 60px 20px;
	max-width: 1000px;
	margin: 0 auto;
}
/*　会社情報リストの枠　*/
.company-list {
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
}
/*　会社名の調整　*/
.company-list h2 {
	font-size: 1.35rem;
	font-weight: 700;
	color: #191D2C;
	margin: 0;
	padding: 25px 0 15px 0;
	letter-spacing: 0.05em;
	text-align: left;
	position: relative;
	display: block;
}
/* 会社名左側に縦線のアクセント　*/
.company-list h2::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 1.15em;
	background-color: #4285F4;
	margin-right: 10px;
	border-radius: 2px;
}

/*　1つの項目ごとの設定　*/
.company-row {
	padding: 20px 0;
	border-bottom: 1px solid #eee;
}

/* 項目のタイトル　*/
.company-row dt {
	font-weight: bold;
	font-size: 0.9rem;
	color: #191D2C;
	margin-bottom: 6px;
}
/*　項目の詳細内容　*/
.company-row dd {
	margin-top: 0;
	font-size: 1rem;
	color: #444;
	line-height: 1.6;
}
/*　ddの中にあるオーナー名のスタイル　*/
.company-row dd .owner-name {
	display: block;
	margin-top: 8px;
	font-size: 0.9rem;
	color: #666;
}

/*　contact_お問い合わせセクション全体の余白と最大幅　*/
.contact-section {
	padding: 20px 20px 60px 20px;
	max-width: 700px;
	margin: 0 auto;
}
/*　フォーム内の各入力ブロックの隙間　*/
.form-group {
	margin-bottom: 20px;
}
/*　項目名のラベル　*/
.form-group label {
	display: block;
	font-weight: bold;
	font-size: 0.95rem;
	color: #191D2C;
	margin-top: 15px;
	margin-bottom: 5px;
}
/*　「必須」マークの小さなバッジ　*/
.required-badge {
	background-color: #c5221f;
	color: #ffffff;
	font-size: 0.75rem;
	padding: 3px 6px;
	border-radius: 3px;
	margin-left: 1px;
	vertical-align: middle;
}
/*　お名前・連絡先の入力欄　*/
.form-input {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fafafa;
	outline: none;
	transition: border-color 0.3s, background-color 0.3s;
}
/*　ご用件の入力欄　*/
.form-textarea {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fafafa;
	outline: none;
	resize: vertical;
	transition: border-color 0.3s, background-color 0.3s;
}
/*　入力欄にカーソルが当たった時の変化　*/
.form-input:focus,
.form-textarea:focus {
	border-color: #4285F4;
	background-color: #ffffff;
}
/*　案内文章の装飾　*/
.form-notice {
	font-size: 0.85rem;
	color: #c5221f;
	margin: 5px 0 35px 0;
	line-height: 1.1;
	text-align: left;
}
/*　送信ボタン全体の配置ブロック　*/
.form-submit-block {
	text-align: center;
}
/*　送信ボタン本体のデザイン　*/
.submit-btn {
	display: inline-block;
	width: 100%;
	max-width: 350px;
	background-color: #4285F4;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.05rem;
	padding: 16px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0,15);
	transition: background-color 0.3s, transform 0.2s;
}
/*　ボタンにマウスを乗せた時やタップした時　*/
.submit-btn:hover {
	background-color: #3367D6;
}

/*　フッター部分　*/
footer {
	padding: 10px 20px 20px 20px;
	background-color: #FD6875;
	color: #ffffff;
	font-family: sans-serif;
}

/*　情報とメニューを包むコンテナ　*/
.footer-container {
	max-width: 1100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/*　左：会社情報エリア　*/
.footer-logo {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}
.footer-company {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 6px;
}
.footer-address {
	font-size: 0.85rem;
	opacity: 0.9;
}

/*　右：ミニメニューのリスト　*/
.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 12px 20px;
	margin-bottom: 30px;
}
.footer-menu a {
	color: #ffffff;
	text-decoration: none;
	font-size: 0.9rem;
	display: inline-block;
	transition: opacity 0.3s;
}

/*　スマホでのホバー・タップ時の動作　*/
.footer-menu a:hover {
	opacity: 0.7;
}

/*　最下部：コピーライトエリア　*/
.footer-bottom {
	margin-top: 30px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	padding-top: 30px;
	text-align: center;
}
.footer-bottom small {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	opacity: 0.8;
}

/*　Tablet View　*/
@media (min-width: 768px) {
/*　header_ナビメニューについて　*/
	.style-nav ul li {
		display: inline-block;
	}
	.style-nav ul{
		text-align: center;
	}
/*　ハンバーガーボタンは不要なので非表示　*/
	.drawer_open {
		display: none;
	}
/* スマホ用全画面固定を解除、右側にナビ配置　*/
	.nav_content {
		position: static;
		width: auto;
		height: auto;
		background: none;
		padding-top: 0;
		display: block;
		margin-left: auto;
	}
/*　メニュー項目を横並びに　*/
	.nav_list {
		display: flex;
		align-items: center;
		gap: 0;
	}
	.nav_item {
		margin-bottom: 0;
		display: block !important;
		width: auto !important;
	}
	.nav_item:not(:last-child) {
		border-right: 1px solid rgba(255,255,255,0.3);
	}
	.nav_item a {
		font-size: 0.95rem;
		padding: 10px 20px;
		display: block;
		border-bottom: 2px solid transparent;
	}
	.nav_content a.current {
		color: #00B0F0;
		border-bottom: 2px solid #00B0F0;
	}
	.nav_content a:hover {
		color: #F7CB4D;
		border-bottom: 2px solid #F7CB4D;
	}
	
/*　main_見出し部分の装飾　*/
	.thema {
		padding: 50px 0;
		text-align: left;
	}
	.thema h1 {
		font-size: 2.2rem;
		padding-left: 20px
	}
	.thema h1::after {
		left: 20px;
		transform: none;
		width: 80px;
	}
/*　main_見出しの下のリード文　*/
	.thema h2 {
		margin: 40px 0 0 20px;/*　h1とh2の距離を画面サイズによって変えてる　*/
		text-align: left;
		font-weight: normal;
		width: 70%;
		max-width: 1000px;
		font-size: calc(0.95rem + (3 * (100vw - 768px) / 1152)) !important;
		line-height: 1.9;
	}
	
/*　index_2枚のデモカー画像に対しての処理　*/
	.image-container {
		flex-direction: row;
	}
	.image-item {/*　2枚の画像サイズが違うため image-item という枠で囲った　*/
		flex: 1;
		width: 0;
		aspect-ratio: 4/3;
	}
	.image-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;/*　枠で囲んでから object-fit: cover をかける手法はレイアウト崩れを防ぐため　*/
	}
	
/*　product_ecu画像に対して　*/
	.single-phpto img {
		max-width: 80%;
	}
/*　product_3枚ずつの画像に対して　*/
	.acc-gallery {
		flex-direction: row !important;
		justify-content: space-between !important;
	}
	.acc-img-box {
		width: calc(33.333% - 6px) !important;
	}
	
/*　access_セクション全体の余白を少し広げる　*/
	.access-section {
		padding: 60px 20px;
	}
/*　セクションの直下で地図コンテナと情報エリアを横並びにするためflexboxを適用　*/	
	.access-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
/*　左側：地図エリアの幅を48％に設定　*/
	.access-container {
		width: 48%;
		margin-bottom: 0;
	}
/*　右側：情報エリアの幅を48％に設定　*/
	.access-info {
		width: 48%;
		margin-bottom: 0;
	}
/*　リンク装飾　*/
	.nav_item a {
		font-size: 1rem;
		padding: 8px 0;
		border-bottom: 2px solid transparent;
	}
/*　現在のページとホバー時の下線デザイン　*/
	.nav_content a.current {
		color: #00B0F0;
		border-bottom: 2px solid #00B0F0;
	}
	.nav_content a:hover {
		color: #F7CB4D;
		border-bottom: 2px solid #F7CB4D;
	}

/*　company_セクション全体の余白について　*/
   .company-section {
        padding: 40px 20px 80px 20px;
    }
/*　会社名の調整　*/
.company-list h2 {
	font-size: 1.75rem;
	padding: 35px 10px 20px 10px;
    }
/*　1つの項目の中身をFlexboxを使って2カラムに　*/
   .company-row {
	    display: flex;
	    align-items: flex-start;
	    padding: 25px 10px;
    }   
/*　左側：タイトルの横幅を25%に固定し縦ラインを揃える　*/
   .company-row dt {
	    widows: 25%;
	    max-width: 200px;
	    margin-bottom: 0;
	    font-size: 1rem;
    }
/*　右側：内容の横幅を75%に広げる　*/
   .company-row dd {
	    width: 75%;
	    font-size: 1rem;
	    max-width: 700px;
    }
/*　ddの中にあるオーナー名のスタイル　*/
	.company-row dd .owner-name {
		font-size: 1rem;
		margin-top: 10px;
	}
	
/*　contact_お問い合わせセクションについて　*/
	.contact-section {
		padding: 40px 20px 80px 20px;
	}
/*　PCでは入力欄の内側のクッションを少し広げる　*/
	.form-input 
	.form-textarea {
		padding: 14px;
	}
	
/*　fotter_大画面では会社情報とメニューを綺麗に左右寄せ　*/
	.footer-container {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 20px;
	}
	
/*　会社情報エリアの幅を少し広めに　*/
	.footer-info {
		width: 40%;
	}
/*　メニューの並びを横一列に　*/
	.footer-menu {
		display: flex;
		gap: 0;
	}
/*　メニューの項目同士の間に区切り線　*/
	.footer-menu li:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, 0.4);
	}
	
/*　PC向けリンクの余白調整　*/
	.footer-menu a {
		padding: 0 15px;
	}
}

@media (min-width: 768px) and (max-width: 912px) {  
  /* ヘッダーの中身を強制的に横並び（左右端寄せ）にする */
  .header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* ロゴが小さめの画面でも圧迫しないよう、少しコンパクトに（高さを35pxに） */
  .site-logo {
    height: 150px !important;
    width: auto !important;
  }
  /* メニューを右端に寄せる */
  .nav_content {
    margin-left: auto !important;
  }
  /* メニューの項目（Home, Productなど）を強制的に横並びにする */
  .nav_list {
    display: flex !important;
    align-items: center !important;
  }
  /* スマホ用の幅設定（10%や90pxなど）を完全にリセットして文字幅に合わせる */
  .nav_item {
    width: auto !important;
    min-width: 0 !important;
  }
  /* 白い線と文字が絶対に被らないよう、リンクの左右の余白を狭め（10px）に設定 */
  .nav_item a {
    font-size: 0.85rem !important; /* 文字を少し小さく（約13.5px）して省スペース化 */
    padding: 8px 10px !important;  /* 左右の余白を10pxにして、横幅に余裕を持たせる */
    display: block !important;
    white-space: nowrap !important; /* 文字が途中で2行に折れるのを絶対に防ぐ */
  }
}

@media (min-width: 913px) {
   /* ヘッダー全体を左右端寄せの横並びにする */
	.header {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 4% !important;
		max-width: 1200% !important;
	    margin-left: auto !important;
		margin-right: auto !important;
	}
/*　メニュー項目を横並びに　*/
.nav_list {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
    }
/*　スマホ用の幅設定　*/
.nav_item {
	width: auto !important;
	min-width: 0 !important;
    }
.nav_item a {
	font-size: 0.9rem !important;
	padding: 5px 10px !important;
	display: block !important;
	white-space: nowrap !important;
	transition: color 0.3s, border-color 0.3s !important;
    }
}
	
/*　Desktop View　*/
@media (min-width: 1005px){
	
	.site-logo {
		float: left !important;
	}
	.style-nav {
		float: right;
		padding-top: 90px;
	}
	
/*　ナビメニューとロゴの表示の仕方　*/
	.nav_item a {
		font-size: 1rem !important;
		padding: 15px calc(15px + (15 * (100vw - 1005px) / 915)) !important;
	}
	

/*　access_画面が広いため地図の高さを少し出す　*/
	.access-map {
		padding-top: 70%;
	}
}