@charset "utf-8";

/* カスタムプロパティ */
:root {
  	--nvy-color: #1a3950;
  	--wht-color: #ffffff;
}

/* 共通設定 */
html {
	/* ページ内リンクのスクロールがスムーズに移動 */
	scroll-behavior: smooth;
	/* ヘッダposition:fixedによるページ内リンク先のズレを是正 */
  	scroll-padding-top: 100px;
  	font-family: "Noto Serif JP", serif;
  	font-weight: 400;
  	font-style: normal;
}

/* 背景色・文字色の設定クラス */
.background-nvy {
	background-color: var(--nvy-color);
	color: var(--wht-color);
}
.background-wht {
	background-color: var(--wht-color);
	color: var(--nvy-color);
}

/* 見出し共通設定 */
& h1 {
	font-size: 30px;
	font-weight: 700;
	@media (width <= 768px) {
		font-size: 20px;
	}
}
& h2 {
	font-size: 48px;
	color: var(--wht-color);
	line-height: 1.5;
	@media (width <= 768px) {
			font-size: 36px;
	}
}
& h3 {
	font-size: 40px;
	margin-bottom: 16px;
	@media (width <= 768px) {
		font-size: 30px;
	}
}
& h4 {
	font-size: 40px;
	@media (width <= 768px) {
		font-size: 32px;
	}
}


/* ヘッダー */
.header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100px;
	align-content: center;
	z-index: 100;
  	& .header-area {
    	max-width: 1440px;
    	margin: 0 auto;
    	display: grid;
    	grid-template-columns: auto auto 1fr;
    	grid-auto-flow: column;
    	gap: 16px;
    	align-items: center;
    	padding: 16px 24px 16px 8px;
		@media (width <= 425px) {
			gap: 12px;
		}
    	& .site-logo img {
      		width: 60px;
      		height: 60px;
      		@media (width <= 768px) {
        		width: 56px;
        		height: 56px;
      		}
    	}
    	& .site-menu {
      		grid-column: -1;
      		display: grid;
      		grid-auto-flow: column;
      		gap: 24px;
      		justify-content: start;
      		font-size: 16px;
			& li:first-child {
				letter-spacing: -2px;
			}
    	}
		/* メニューアイコン（指定のブレークポイント超の時に非表示） */
    	& .sp-show-menu {
      		grid-column: -1;
      		@media (width > 1200px) {
        		display: none;
      		}
      		& .material-symbols-rounded {
        		font-size: 36px;
        		display: inline-flex;
        		vertical-align: middle;
        		cursor: pointer;
      		}
    	}
		/* メニューリスト（指定のブレークポイント以下の時に非表示） */
    	& .pc-show-menu {
      		@media (width <= 1200px) {
        		display: none;
      		}
    	}
  	}
}


/* セクション：ファーストビュー */
.first-view {
	position: static;
	height: 618px;
	margin-top: 100px;
	padding-top: 5%;
  	background-image: url(../img/firstview-img.jpg);
  	background-repeat: no-repeat;
  	background-size: cover;
  	background-position: center center;
	@media (width <= 768px) {
			height: 459px;
	}
	& .message-area {
		max-width: 1440px;
		margin: 0 auto;
		padding-left: 40px;
		@media (width <=768px) {
			padding-left: 20px;
		}
	}
}




/* セクション：About */
.about-inner {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto auto;
	max-width: 1440px;
	margin: 0 auto;
	padding: 60px 0;
	/* レシポンシブ設定(1列レイアウト) */
	@media (width <=1024px) {
    	grid-template-columns: 16px 1fr 16px;
    	grid-template-rows: auto auto auto auto;
		@media (width <=375px) {
			grid-template-columns: 8px 1fr 8px;
		  }
  	}
	/* 以下、各アイテムの配置およびレシポンシブ設定 */
  	& .grid-item1 {
    	grid-column: 1 / 2;
    	grid-row: 1 / 2;
    	font-size: 40px;
    	place-self: center;
    	padding-bottom: 24px;
    	@media (width <= 1200px) {
      		font-size: 36px;
			@media (width <=1024px) {
				grid-column: 2 / 3;
				grid-row: 1 / 2;
				@media (width <= 768px) {
					text-align: center;
			  	}
		  	}
    	}
		/* 改行位置のレシポンシブ設定 */
    	& .desktop-hidden {
      		@media (width > 768px) {
        		display: none;
      		}
    	}
		/* アニメーション設定 */
		& .about-title {
			transition: opacity 1s ease-out;
			opacity: 0;
		}
		& .about-title.anim {
			opacity: 1;
		}
  	}


	& .grid-item2 {
    	grid-column: 1 / 2;
    	grid-row: 2 / 3;
    	justify-self: center;
    	align-self: baseline;
		@media (width <=1024px) {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
	  }
    	& img {
      		height: 100%;
      		max-width: 100%;
    	}
		/* アニメーション設定 */
		& .about-image {
			transition: opacity 1s ease-out;
			opacity: 0;
		}
		& .about-image.anim {
			opacity: 1;
		}
  	}
  	& .grid-item3 {
    	grid-column: 1 / 2;
    	grid-row: 3 / 4;
    	justify-self: center;
    	align-self: self-start;
    	font-size: 16px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 3 / 4;
    	}
  	}
	/* アニメーション設定 */
	& .about-name {
		transition: opacity 1s ease-out;
		opacity: 0;
	}
	& .about-name.anim {
		opacity: 1;
	}

  	& .grid-item4 {
    	grid-column: 2 / 3;
    	grid-row: 1 / 4;
    	place-self: center;
    	font-size: 24px;
		letter-spacing: 0.05em;
    	line-height: 1.5;
    	text-align: center;
    	@media (width <= 1200px) {
      		font-size: 20px;
			  @media (width <=1024px) {
				grid-column: 2 / 3;
				grid-row: 4 / 5;
				padding-top: 64px;
		  }
    	}
		/* 改行位置のレシポンシブ設定 */
    	& .desktop-hidden {
      		@media (width > 768px) {
        	display: none;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .about-content {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .about-content.anim {
		opacity: 1;
	}
}



/* セクション：わたしたちにできること */
.wecan-inner {
	display: grid;
  	grid-template-columns: 1fr 45% 1fr 45% 1fr;
  	grid-template-rows: auto 32px auto auto;
  	max-width: 1440px;
  	margin: 0 auto;
  	padding: 60px 0;
	/* レシポンシブ設定(1列レイアウト) */
  	@media (width <=1024px) {
    	grid-template-columns: 16px 1fr 16px;
    	grid-template-rows: auto 32px auto auto 32px auto auto;
  	}
	/* 以下、各アイテムの配置およびレシポンシブ設定 */
  	& .grid-item1 {
    	grid-column: 1 / 6;
    	grid-row: 1 / 2;
    	border-bottom: 1px solid var(--nvy-color);
    	padding-left: 32px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		padding-left: 0px;
			& h3 {
				text-align: center;
			}
    	}
  	}
	/* アニメーション設定 */
	& .wecan-title {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .wecan-title.anim {
		opacity: 1;
	}
  	& .grid-item2 {
    	grid-column: 2 / 3;
    	grid-row: 3 / 4;
    	padding: 32px 16px;
    	text-align: center;
    	background-color: var(--nvy-color);
    	color: var(--wht-color);
    	border: 2px solid var(--nvy-color);
    	@media (width <= 768px) {
      		padding: 12px;
    	}
		/* アニメーション設定 */
		& .wecan-menu-title1 {
			transition: opacity 1s ease;
			opacity: 0;
		}
		& .wecan-menu-title1.anim {
			opacity: 1;
		}
	}
	& .grid-item3 {
    	grid-column: 2 / 3;
    	grid-row: 4 / 5;
    	border: 2px solid var(--nvy-color);
    	padding: 128px 16px;
    	@media (width <=1024px) {
      		padding: 32px 16px;
			@media (width <= 425px) {
				padding: 32px 12px;
		  	}
    	}
		/* アニメーション設定 */
		& .wecan-menu-content1 {
			transition: opacity 1s ease;
			opacity: 0;
		}
		& .wecan-menu-content1.anim {
			opacity: 1;
		}
  	}
	& .grid-item4 {
    	grid-column: 4 / 5;
    	grid-row: 3 / 4;
    	padding: 32px 16px;
    	text-align: center;
    	background-color: var(--nvy-color);
    	color: var(--wht-color);
    	border: 2px solid var(--nvy-color);
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 6 / 7;
			@media (width <= 768px) {
				padding: 12px;
		  	}
    	}
		/* アニメーション設定 */
		& .wecan-menu-title2 {
			transition: opacity 1s ease;
			opacity: 0;
		}
		& .wecan-menu-title2.anim {
			opacity: 1;
		}
  	}
	& .grid-item5 {
    	grid-column: 4 / 5;
    	grid-row: 4 / 5;
    	border: 2px solid var(--nvy-color);
    	padding: 16px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 7 / 8;
      		padding: 32px 16px;
			@media (width <= 425px) {
				padding: 32px 12px;
		  	}
    	}
		/* アニメーション設定 */
		& .wecan-menu-content2 {
			transition: opacity 1s ease;
			opacity: 0;
		}
		& .wecan-menu-content2.anim {
			opacity: 1;
		}
  	}
	/* 大項目リストの設定 */
	& .list-large {
    	font-size: 32px;
		font-weight: 700;
    	list-style: none;
    	line-height: 2;
    	@media (width <= 768px) {
      		font-size: 24px;
    	}
  	}
	/* 大項目リストのリストスタイルを任意設定 */
	& .list-large::before {
		content:  ""; 
		width:  8px;
		height:  8px;
		margin-right: 10px;
		vertical-align: 10%;
		display:  inline-block;
		background-color: var(--nvy-color);
		border-radius:  50%;
	}
	/* 小項目リストの設定 */
  	& .list-small {
    	font-size: 16px;
		font-weight: 400;
    	text-indent: 8px;
    	line-height: 2;
    	@media (width <= 768px) {
      		font-size: 13px;
    	}
  	}
	/* 小項目リスト最終行の設定 */
  	& .list-small:last-child {
    	margin-bottom: 16px;
  	}
}

/* セクション：業務の流れ */
.workflow-inner {
	display: grid;
  	grid-template-columns: 1fr 90% 1fr;
  	grid-template-rows: auto 32px auto;
  	max-width: 1440px;
  	margin: 0 auto;
  	padding: 60px 0;
  	@media (width <= 1024px) {
    	grid-template-columns: 16px 1fr 16px;
  	}
  	& .grid-item1 {
    	grid-column: 1 / 4;
    	grid-row: 1 / 2;
    	border-bottom: 1px solid var(--wht-color);
    	padding-left: 32px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		padding-left: 0px;
			  & h3 {
				text-align: center;
			}
    	}
  	}
	/* アニメーション設定 */
	& .workflow-title {
			transition: opacity 1s ease;
			opacity: 0;
	}
	& .workflow-title.anim {
			opacity: 1;
	}
  	& .grid-item2 {
    	grid-column: 2 / 3;
    	grid-row: 3 / 4;
    	place-self: center;
		/* 表示する画像をブレークポイントで切り替える設定 */
    	& .sp-img {
      		display: none;
      		max-width: 100%;
      		height: auto;
      		@media (width <= 1024px) {
        		display: inline;
      		}
    	}
    	& .pc-img {
      		max-width: 100%;
      		@media (width <= 1024px) {
        		display: none;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .workflow-pc-image {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .workflow-pc-image.anim {
		opacity: 1;
	}
	/* アニメーション設定 */
	& .workflow-sp-image {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .workflow-sp-image.anim {
		opacity: 1;
	}
}

/* セクション：事務所概要 */
.office-inner {
	display: grid;
	grid-template-columns: 1fr 35% 15% 40% 1fr;
  	grid-template-rows: auto 32px auto auto;
  	max-width: 1440px;
  	margin: 0 auto;
  	padding: 60px 0;
	/* レシポンシブ設定(1列レイアウト) */
  	@media (width <= 1024px) {
    	grid-template-columns: 16px 1fr 16px;
    	grid-template-rows: auto 32px auto auto auto;
  	}
	/* 以下、各アイテムの配置およびレシポンシブ設定 */
  	& .grid-item1 {
    	grid-column: 1 / 6;
    	grid-row: 1 / 2;
    	border-bottom: 1px solid var(--nvy-color);
    	padding-left: 32px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		padding-left: 0px;
			  & h3 {
				text-align: center;
			}
    	}
  	}
	/* アニメーション設定 */
	& .office-title {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .office-title.anim {
		opacity: 1;
	}
  	& .grid-item2 {
    	grid-column: 2 / 3;
    	grid-row: 3 / 4;
    	padding: 8px;
    	text-align: center;
    	& img {
      		max-width: 100%;
      		height: auto;
      		@media (width <=1024px) {
        		max-width: 60%;
				@media (width <=768px) {
					max-width: 80%;
				}
      		}
    	}
  	}
	/* アニメーション設定 */
	& .office-image1 {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .office-image1.anim {
		opacity: 1;
	}
  	& .grid-item3 {
    	grid-column: 2 / 3;
    	grid-row: 4 / 5;
    	padding: 8px;
    	text-align: center;
    	& img {
      		max-width: 100%;
      		height: auto;
      		@media (width <=1024px) {
        		max-width: 60%;
				@media (width <=768px) {
					max-width: 80%;
				}
      		}
    	}
  	}
	/* アニメーション設定 */
	& .office-image2 {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .office-image2.anim {
		opacity: 1;
	}
  	& .grid-item4 {
    	grid-column: 4 / 5;
    	grid-row: 3 / 5;
    	align-self: center;
    	@media (width <=1024px) {
      		padding-top: 48px;
      		grid-column: 2 / 3;
      		grid-row: 5 / 6;
			place-self: center;
    	}
		& li {
			font-size: 20px;
			line-height: 1.5;
			padding-bottom: 20px;
			@media (width <=425px) {
				font-size: 18px;
				padding-bottom: 18px;
			}
		}
		& .company-name {
			text-indent: calc(-20px * 3);
			padding-left: calc(20px * 3);
			@media (width <=425px) {
				text-indent: calc(-18px * 3);
				padding-left: calc(18px * 3);
			}
		}
		& .company-address {
			text-indent: calc(-20px * 3);
			padding-left: calc(20px * 3);
			@media (width <=425px) {
				text-indent: calc(-18px * 3);
				padding-left: calc(18px * 3);
			}
		}
		& .business-content {
			text-indent: calc(-20px * 5);
			padding-left: calc(20px * 5);
			@media (width <=425px) {
				text-indent: calc(-18px * 5);
				padding-left: calc(18px * 5);
			}
		}
  	}
	/* アニメーション設定 */
	& .office-overview {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .office-overview.anim {
		opacity: 1;
	}
}

/* セクション：アクセス */
.access-inner {
	display: grid;
  	grid-template-columns: 1fr 40% 10% 40% 1fr;
  	grid-template-rows: auto 32px auto auto;
  	max-width: 1440px;
  	margin: 0 auto;
  	padding: 60px 0;
	/* レシポンシブ設定(1列レイアウト) */
  	@media (width <= 1024px) {
    	grid-template-columns: 16px 1fr 16px;
    	grid-template-rows: auto 32px auto auto auto auto;
  	}
	/* 以下、各アイテムの配置およびレシポンシブ設定 */
  	& .grid-item1 {
    	grid-column: 1 / 6;
    	grid-row: 1 / 2;
    	border-bottom: 1px solid var(--wht-color);
    	padding-left: 32px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		padding-left: 0px;
			  & h3 {
				text-align: center;
			}
    	}
  	}
	/* アニメーション設定 */
	& .access-title {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .access-title.anim {
		opacity: 1;
	}
  	& .grid-item2 {
    	grid-column: 2 / 3;
    	grid-row: 3 / 4;
		/* マップリンクを事務所外観の画像のサイズに合わせる設定 */
    	position: relative;
    	width: 100%;
		padding-top: 75%;
    	height: 0;
    	& iframe {
      		max-width: 100%;
      		position: absolute;
      		top: 0;
      		left: 0;
      		width: 100%;
      		height: 100%;
      		@media (width <=1024px) {
        		max-width: 60%;
        		left: 20%;
				@media (width <=768px) {
					max-width: 80%;
					left: 10%;
				}
      		}
    	}
  	}
	/* アニメーション設定 */
	& .access-map {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .access-map.anim {
		opacity: 1;
	}
  	& .grid-item3 {
    	grid-column: 2 / 3;
    	grid-row: 4 / 5;
    	justify-self: center;
    	line-height: 2;
		margin-top: 16px;
    	& p {
      		font-size: 24px;
      		@media (width <=425px) {
        		font-size: 18px;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .access-map-caption {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .access-map-caption.anim {
		opacity: 1;
	}
  	& .grid-item4 {
    	grid-column: 4 / 5;
    	grid-row: 3 / 4;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 5 / 6;
			text-align: center;
      		margin-top: 64px;
    	}
    	& img {
      		max-width: 100%;
      		height: auto;
      		@media (width <=1024px) {
        		max-width: 60%;
				@media (width <=768px) {
					max-width: 80%;
				}
      		}
    	}
  	}
	/* アニメーション設定 */
	& .access-office-image {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .access-office-image.anim {
		opacity: 1;
	}
  	& .grid-item5 {
    	grid-column: 4 / 5;
    	grid-row: 4 / 5;
    	justify-self: center;
		margin-top: 16px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 6 / 7;
    	}
    	& p {
      		font-size: 20px;
      		text-align: center;
      		line-height: 2.5;
      		@media (width <=425px) {
        		font-size: 18px;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .access-office-caption {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .access-office-caption.anim {
		opacity: 1;
	}
}

/* セクション：お問い合わせ */
.contact-inner {
	display: grid;
	grid-template-columns: 1fr 45% 45% 1fr;
  	grid-template-rows: auto 32px auto auto auto;
  	max-width: 1440px;
  	margin: 0 auto;
  	padding: 60px 0;
	/* レシポンシブ設定(1列レイアウト) */
  	@media (width <= 1024px) {
    	grid-template-columns: 16px 1fr 16px;
    	grid-template-rows: auto 32px auto auto auto auto;
  	}
	/* 以下、各アイテムの配置およびレシポンシブ設定 */
  	& .grid-item1 {
   		grid-column: 1 / 5;
    	grid-row: 1 / 2;
    	border-bottom: 1px solid var(--nvy-color);
    	padding-left: 32px;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		padding-left: 0px;
			  & h3 {
				text-align: center;
			}
    	}
  	}
	/* アニメーション設定 */
	& .contact-title {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .contact-title.anim {
		opacity: 1;
	}
  	& .grid-item2 {
    	grid-column: 2 / 3;
    	grid-row: 3 / 4;
    	& p {
      		font-size: 32px;
			font-weight: 700;
      		text-align: center;
      		line-height: 1.5;
      		@media (width <= 1200px) {
        		font-size: 28px;
				@media (width <= 768px) {
					font-size: 20px;
				}
      		}
    	}
  	}
	/* アニメーション設定 */
	& .contact-guide {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .contact-guide.anim {
		opacity: 1;
	}
  	& .grid-item3 {
    	grid-column: 2 / 3;
    	grid-row: 4 / 5;
    	place-self: center;
    	text-align: center;
    	padding: 16px;
    	& img {
      		max-width: 100%;
      		height: auto;
      		@media (width <=425px) {
        		max-width: 80%;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .contact-qrcode {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .contact-qrcode.anim {
		opacity: 1;
	}
  	& .grid-item4 {
    	grid-column: 2 / 3;
    	grid-row: 5 / 6;
    	place-self: center;
    	& a {
      		font-size: 32px;
			font-weight: 700;
      		@media (width <= 768px) {
        		font-size: 20px;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .contact-url {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .contact-url.anim {
		opacity: 1;
	}
  	& .grid-item5 {
    	grid-column: 3 / 4;
    	grid-row: 3 / 6;
    	place-self: center;
    	text-align: center;
    	@media (width <=1024px) {
      		grid-column: 2 / 3;
      		grid-row: 6 / 7;
      		margin-top: 64px;
    	}
    	& img {
      		max-width: 100%;
      		height: auto;
      		@media (width <=768px) {
        		max-width: 80%;
      		}
    	}
  	}
	/* アニメーション設定 */
	& .contact-office-image {
		transition: opacity 1s ease;
		opacity: 0;
	}
	& .contact-office-image.anim {
		opacity: 1;
	}
}

/* フッター */
.footer {
	width: 100%;
	height: 160px;
	text-align: center;
  	align-content: center;
  	& p small {
    	font-size: 20px;
    	line-height: 2;
		@media (width <= 768px) {
			font-size: 18px;
	  	}
    	/* 指定のブレークポイントで改行を入れる設定 */
    	& .desktop-hidden {
      		@media (width > 768px) {
        		display: none;
      		}
    	}
  	}
}

/* ドロワーメニュー */
.drawer-menu {
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	position: fixed;
	top: 0;
	left: 0;
  	z-index: 100;
	transform: translateY(-100vh);
  	display: grid;
  	grid-template-columns: 1fr auto 1fr;
  	grid-template-rows: 100px 1fr;
  	& .menu-close {
    	grid-column: 1 / 4;
    	grid-row: 1 / 2;
    	justify-self: right;
    	padding-right: 32px;
    	& .material-symbols-rounded {
      		font-size: 36px;
      		display: inline-flex;
      		vertical-align: middle;
      		line-height: 100px;
      		cursor: pointer;
    	}
  	}
  	& .menu-list {
    	grid-column: 2 / 3;
    	grid-row: 2 / 3;
    	display: grid;
    	grid-template-columns: auto;
    	grid-template-rows: 16px 16px 16px 16px 16px 16px;
    	gap: 48px;
    	text-align: center;
		& li:first-child {
			letter-spacing: -2px;
		}
  	}
}

	
	/* 下層ページ */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 20px auto;
        }
		.main-content {
			max-width: 1000px;
			margin: 0 auto 120px;
		}
			.sub-h2, .sub-h3 {
            border-bottom: 2px solid #005a9c;
            padding-bottom: 5px;
            margin-top: 40px;
			font-weight: 700;
        }
        .sub-h2 {
			color: #333;
			font-size: 32px;
            text-align: center;
            border-bottom: 3px solid #005a9c;
			padding-top: 100px;
        }
		.sub-h3 {
			font-size: 24px;
		}
        .no-underline {
			border-bottom: none;
		    padding-bottom: 0;	
		}
		p.text-block {
			    margin: 15px 0;
		}
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
			    font-weight: 600;
        }
        th {
            background-color: #f2f2f2;
        }
        td:first-child {
            text-align: left;
            background-color: #f9f9f9;
            font-weight: bold;
        }
        .note {
            font-size: 0.9em;
            color: #555;
            background-color: #f7f7f7;
            border-left: 5px solid #005a9c;
            padding: 15px;
            margin: 20px 0;
        }
        .price {
            font-weight: bold;
        }
        summary {
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            background-color: #e7f3ff;
            border-radius: 5px;
            margin-top: 10px;
        }
        details > div {
            padding: 15px;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 5px 5px;
        }



		
   /* ▼ ドロップダウン用追記 */
.nav li {
  position: relative; /* 子メニューを相対配置できるように */
}

.nav .dropdown {
  display: none;            /* 初期は非表示 */
  position: absolute;
  top: 100%;                /* 親の下に表示 */
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.nav .dropdown li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;       /* 長い文字でも折り返さない */
}

.nav .dropdown li a:hover {
  background: #f5f5f5;
}

/* ▼ 親メニューをホバーしたときに表示 */
.nav li.has-dropdown:hover .dropdown {
  display: block;
}


/*アコーディオン*/
.h1-title{
	padding-bottom: 20px;
}
.accordion-wrap { 
	max-width: 1100px; 
	margin: 40px auto; 
	padding: 0 20px; 
}
    .accordion {
		 border: 1px solid #e6e6e6; 
		 border-radius: 8px;
		  margin-bottom: 14px;
		   background: #fff; 
		}
    .acc-head { 
		display:flex; 
		align-items:center; 
		justify-content:space-between; 
		padding:14px 18px; 
		cursor:pointer; 
		background:#193950; 
		border-bottom:1px solid #eee;
	 }
    .acc-head h2 {
		 margin:0;
		  font-size:1.1rem;
		   font-weight:700;
		 }
    .chev {
		 transition: transform .25s ease;
		 color: white;
		 }
    .accordion.open .chev {
		 transform: rotate(180deg);
		 }
    .acc-body {
		 max-height:0;
		  overflow:hidden;
		   transition: max-height .45s ease, padding .25s ease; padding:0 18px; 
		}
    .accordion.open .acc-body {
		 padding:18px;
		  max-height:4000px;
		 }
    .acc-inner img {
		 max-width:100%;
		  height:auto;
		 }
		 
   /*料金の目安ボタン*/
.btn-style1 { 
	display: block;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background-color: #193950;
    color: white;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 20px;
	 }
.btn-style1:hover { 
	background-color: color-mix(in srgb, #193950 90%, #fff);
	 transform: translateY(-2px);
	 }
.btn-style1:active { transform: translateY(0);
 }

.size-small { 
	font-size: 0.875rem; 
	padding: 0.5em 1em; 
}
.size-medium {
	 font-size: 1rem;
	  padding: 0.75em 1.5em;
	 }
.size-large {
	 font-size: 1.125rem; 
	 padding: 1em 2em;
	 }

.width-auto {
	 display: inline-block;
	  width: auto;
	 }
.width-full {
	 display: block;
	  width: 100%; 
	  box-sizing: border-box;
	 }
.radius-none {
	 border-radius: 0; 
	}
.radius-small {
	 border-radius: 4px; 
	}
.radius-medium {
	 border-radius: 3px;
	 }
.radius-large {
	 border-radius: 50px; 
	}