article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
display: block;
}

html {
  scroll-behavior: smooth;
}

a {
	color: black;
	TEXT-DECORATION: none
  }

a:hover {
	COLOR: #ff0055;
}

/* 汎用的な左マージンクラス */
.space-ml-1em {
  margin-left: 1em; /* 約全角スペース1つ分の左マージン */
}

.space-ml-2em {
  margin-left: 2em; /* 約全角スペース2つ分の左マージン */
}

.space-pr-2em {
  padding-right: 2em; /* 約全角スペース2つ分の右パディ */
}

.space-pl-2em {
  padding-left: 2em; /* 約全角スペース2つ分の左パディ */
}

.space-pl-1em {
  padding-left: 1em; /* 約全角スペース2つ分の左パディ */
}

ul, li {
	padding: 0;
	list-style-type: none;	/*点を無くす*/
}

.tag {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.tag-danger {
    background-color: #d9534f;
}

.tag-default {
    background-color: #78909C;
}

.choi-title {
	display: inline-block;
	width: 50%;
	text-align: center;
	font-weight: bold;
	background-color:#CCCCCC;
}

.choice >li {
    background-color: #c1e3e3;
}

hr.order {
   border-width: 4px 0px 0px 0px; /* 太さ1px */
   border-style: dashed; /* 線種を破線に */
   border-color: red;   /* 線色を赤色に */
   height: 1px;         /* 高さ(※古いIE用) */
}

.order {
	color:red;
	font-weight:bold;
	width:80%;
	}
	background-color:#FFCACA;


.fon16 {
	font-size:16px;
	}

.fon14 {
	font-size:14px;
	}

.fon12 {
	font-size:12px;
	}

.fon10 {
	font-size:10px;
	}

.fon20e {
	font-size:2.0em
	}

.fon13e {
	font-size:1.3em
	}

.fon10e {
	font-size:1.0em
	}

.fonsmall {
	font-size: small;
	}

.fonlighter * {
	font-weight: lighter;
	}

body {
	margin-left: auto;
	margin-right: auto;
	background:#FFF url(img/bg_cardboard.jpg) left top;
	font-size: calc(10px + 0.6vw); /* ベースフォントサイズ + 画面幅に応じた可変サイズ */
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

div {
   border-radius: 10px;         /* CSS3 */
   -moz-border-radius: 10px;    /* Firefox */
   -webkit-border-radius: 10px; /* Safari,Chrome */

/*   border: 0px #00BFFF solid;      枠線の装飾 */
/*   background-color: #ccffcc;    背景色 */
}

.flex{
    display: flex;	/*コレ*/
    padding: 0px;
    flex-wrap: wrap
}

#header{
	margin-top: 0;
	margin-left: 0;
	margin-right: auto;
	width:100%;
	background-color:rgba(63,41,0,0.7);     /*�w�i�F rgba(179,125,78,0.7)#b37d4e #EAECEC*/
	padding: 8px 10px;
	display: flex;
	flex-wrap: wrap; 
	justify-content: center; /* 中央寄せに変更 */
	align-items: center;
	box-sizing: border-box;
}

.header{
    left: 0;
    width: 100%;    
    background-color:rgba(63,41,0,0.75) ;  /* rgba(49,68,72,0.5)(179,125,78,0.75) */
	color: #fff;
	padding:2px 0px 2px;
	text-align:center;
}

.container{
	max-width: 1000px; /* 最大幅を指定 */
	width: 100%;       /* 親要素に対して100%幅にする */
	margin:0 auto;
	word-break:break-all;
	box-sizing: border-box; /* padding等を含めて幅を計算する */
	}

.wrapper{
	position:relative;
	max-width: 1000px; /* 最大幅を指定 */
	width: 100%;       /* 親要素に対して100%幅にする */
	margin:0 auto;
	box-sizing: border-box; /* padding等を含めて幅を計算する */
	}

.inner{
	border: 0px solid black;    /* 枠線の装飾 */
	width: 70%;
	margin: auto;
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	font-size: calc(14px + 0.8vw); /* x-largeに近いサイズ感で可変性を付与 */
}

/* --- .inner のレスポンシブ対応 --- */
/* タブレットサイズでの調整 */
@media (max-width: 890px) {
  .inner {
    width: 80%;
  }
}

/* スマホサイズでの調整 */
@media (max-width: 500px) {
  .inner {
    width: 100%;
    border-radius: 0; /* 画面幅いっぱいの時は角丸をなくす */
  }
}

.title_logo{
	font-weight: bold;
	font-size: x-large;
	vertical-align:bottom;
	border-bottom: solid 2px;
}

.ti-sub{
	vertical-align:sub;
}

.ti-top{
	vertical-align:top;
}

.check_menu {
	margin-right: 3em; /* お好みの空白に調整してください */
}

.check_menu,
.go_top {
	text-align:right;
	font-size:large;
}

.check_menu a {
	/* メニュー項目の右側に余白を追加 */
	padding-right: 1em;
}

.right {
	text-align:right;
}

.form {
	width: 80%;
	border: 1px solid #ccc;
	margin:0 auto;
}

.form-title{
	display: inline-block;
	padding: 0.2em 3.5em;
	white-space: nowrap;
	border-radius: 1rem;
	text-align:center;
	font-weight: bold;
	font-size: 120%;
}

.form li {
	border: 1px solid #ccc;
	vertical-align: middle;
	font-size:1.5em;
}

.form-contact {
	text-align: left;
	grid-column: 2 / 3;
	-ms-grid-column: 2;
	margin: 0px 0px 0px 10px;
	padding: 5px 0px 5px 20px;
}

.form-base {
	display: grid;
display: -ms-grid;
	grid-template-columns: 30% 1fr;
	grid-template-rows:auto auto;
-ms-grid-columns: 30% 1fr;
-ms-grid-rows:auto auto;
	margin: 10px;
}

.form-side{
	text-align: right;
	grid-column: 1 / 2;
-ms-grid-column: 1;
	background-color:#c1e3e3;
	padding: 5px 20px 5px 0px;
	white-space: nowrap;
}

.form-side2{
	grid-row: 2;
	-ms-grid-row: 2;
}

.form-main{
	text-align: left;
	grid-column: 2 / 3;
-ms-grid-column: 2;
	background-color:#c1e3e3;
	margin: 0px 0px 0px 10px;
	padding: 5px 0px 5px 20px;
}

.form-main2{
	grid-row: 2;
	-ms-grid-row: 2;
}


.form-line {
	text-align: left;
	background-color:#c1e3e3;
	margin: auto;
	padding: 5px 0px 5px 20px;
	width:80%;
  white-space: nowrap;
}

.form caption,
.form th{
  font-weight: bold;
  white-space: nowrap;
}


.form input,
.form textarea{
	font-size:1.5em;
}

.td-side{
	text-align: right;
	width:30%;
}

.td-title{
	display: inline-block;
	padding: 0.25em 4em;
	white-space: nowrap;
	border-radius: 1rem;
	text-align:center;
	font-weight: bold;
	font-size: 120%;
}

/* .Companyクラスにpadding-topを追加して<br>を削除 */
.Company {
	padding-top: 1em;
}

.Company table {
	border-collapse: collapse;
	width: 100%; /* 親要素の幅に合わせる */
	max-width: 690px;
	margin-bottom: 1em; /* <br> の代わり */
	border-top: 2px solid #CCC;
	border-right: 2px solid #CCC;
	font-size: large;
	font-weight: bold;
	clear:left;
}

.Company table th,
.Company table td {
	border-bottom: 2px solid #FFF;
	margin: 0;
}

.Company table th {
	background: #CCC;
	width: 150px;
	padding: 10px;
	font-weight: bold;
}

.Company table td {
	padding: 10px 2em;
	border-bottom: 2px solid #CCC;
}

.button {
	font-size:120%;
	color:white;
}

/* <hr>タグ用の新しいクラス */
.section-divider {
  width: 80%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em auto;
}

.kon {
	background-color:rgba(29,32,137,1);/* 紺色　生花ページ */
	color:white;
}

.azuki {
	background-color:rgba(152,34,34,1); /* 小豆色 相談ページ*/
	color:white;
}

.midori {
	background-color:#8cc6ae; /* 緑色 相談ページ*/
	color:white;
}

.wtn_copyright {
	display:none;
}

.CameoPink{
	background-color: #EBC3CB;
}
.CadetBlue{
	background-color: #B2AFCC;
}
.Champagne{
	background-color: #F6E2D4;
}
.Cornsilk{
	background-color: #FFFBDB;
}
.BeauBlue{
	background-color: #B6D8DB;
}
.TeaGreen{
	background-color: #D3EBC7;
}

.linen{
	background-color: linen;
}

.shiro{
	background-color:white;
}

.gainsboro{
	background-color:gainsboro;
}
.shirohai{
	background-color:#EEEEEE;
}



.grid-container {
  display: grid;
  /* 基本は3列。各列は均等な幅を占める */
  grid-template-columns: repeat(3, 1fr);
  gap: 0px; /* ブロック間の隙間 */
  padding: 20px; /* コンテナ内の余白 */
	background: url(img/bg_bro.jpg);
	max-width: 850px; /* 画像の最大幅px */
  margin-left: auto;
  margin-right: auto;
}

.column-block {
  display: flex; /* 各ブロック内で要素を縦に並べる */
  flex-direction: column; /* 縦方向に配置 */
  gap: 3px; /* 要素間の隙間 */
  padding: 40px 10px;
  box-sizing: border-box; /* paddingとborderを幅に含める */
	border-right:solid 5px #dcdcdc;
	border-top:solid 5px #dcdcdc;
  border-radius: 0; /* 角丸をリセット */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  margin-left: auto;
  margin-right: auto;
}

.item {
	background: url(img/bg_bro.jpg);
border-radius: 10px;/* CSS3 */-moz-border-radius: 10px;/* Firefox */-webkit-border-radius: 10px; /* Safari,Chrome */
  padding: 5px;
  text-align: center;
  width: 100%; /* 親要素の幅に合わせる */
  max-width: 200px; /* 最大幅を200pxに設定 */
  margin-left: auto; /* 中央寄せのため追加 */
  margin-right: auto; /* 中央寄せのため追加 */
}

/* .column-block内の画像の幅を200pxに設定 */
.column-block img {
  width: 100%; /* 画像も親要素(.item)の幅に合わせる */
  height: auto; /* アスペクト比を維持 */
}

/* --- レスポンシブ対応 --- */

/* サイトの幅が小さくなり、例えば768px以下になったら2列にする */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
    padding: 15px 10px; /* 画面が狭いときはコンテナ内の余白を少し減らす */
    width: 80%; /* スマホ表示では幅を80%に */
  }
.item {
  width: 90%; /* 親要素の幅に合わせる */
}
}

/* さらに幅が狭くなり、500px以下になったら1列にする */
@media (max-width: 500px) {
  .grid-container {
/*    grid-template-columns: 1fr; /* 1列表示 */
/*    padding: 10px 5px; /* さらに余白を詰める */
    width: 90%; /* スマホ表示では幅を50%に */
  }
  
.item {
  width: 90%; /* 親要素の幅に合わせる */
}
}



/*
=================================
*    scroll footer
* ===============================
*/

div#scroll_footer {  
    position: fixed !important;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;    
    background-color:rgba(63,41,0,0.75) ;  /* rgba(49,68,72,0.5)(179,125,78,0.75) */
    color: #fff;
    padding: 10px 10px;
    display: flex;
	flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}  

.footer-logo {
	height: 45px;
	vertical-align: middle;
}

.footer-tel {
	display: flex;
	align-items: center;
	text-align: left;
	background-color: #fff;
	border: 2px solid #1F70B5;
	border-radius: 50px;
}


* html div#page_all{  
    height: 100%;  
    overflow: auto;  
}

div#stick {
	position: sticky;
	bottom: 0;  
	left: 0;  
	width: 100%;    
	color: #fff;
	padding:10px 0px 10px;
	text-align:center;
	background:#FFF url(img/bg_cardboard.jpg) left top;
}


.foot_copy{
	font-weight: bold;
	text-align:center;
	padding: 20px 0 0 0;
}

.inqu {
	height:50px;
	border-radius:15px;
	vertical-align:sub;
}


/* フッターのインラインスタイルを外部化 */
.footer-contact-info {
  border-radius: 15px;
  border: 1px solid #808080;
  padding: 14px;
}

.footer-banner-link {
  margin: 0 20px 0 5px;
  font-size: small;
  border-radius: 12px;
  border: 3px solid #808080;
  padding: 3px;
  background: white;
}

/* フッターの<BR>タグの代わりのスペーサー */
.footer-spacer-2 {
  margin-top: 2em; /* <br> 2つ分くらいのスペース */
}

.footer-spacer-6 {
  margin-top: 6em; /* <br> 6つ分くらいのスペース */
}

.submenu_navi { display: none !important; }

@media only screen and (max-width: 990px){

	/* 固定フッターの高さが変わるのに合わせて、ページフッターの余白も調整 */
.page-footer {
  /* #scroll_footer の高さ(約50px) + α の余白 */
  margin-bottom: 40px;
}

.inqu {
	height:30px;
	vertical-align:sub;
	border-radius:15px;
}

.header-logo {
	height: 40px;
}
.header-tel {
	font-size: 1rem;
	padding: 4px 12px;
}
.footer-logo {
	height: 35px;
}
.footer-tel {
	font-size: 1rem;
	padding: 4px 8px;
}
}

/* 既存の .inquiry-image-border は電話番号が画像でなくなったため不要になる可能性がありますが、
   他の要素で使われている可能性を考慮して残しておきます。 */


.inquiry-image-border {
  border: 2px solid gray;
}

.footer05 {
	color: rgba(63,41,0,0.95);    /*#3f2900*/
	background: rgba(63,41,0,0.20) ;
	/* 文字サイズを可変にしつつ、12pxから14pxの範囲に制限 */
	font-size: clamp(12px, calc(10px + 0.6vw), 14px);
}

/* 固定フッター(#scroll_footer)がコンテンツに重ならないように余白を確保 */
.page-footer {
  /* #scroll_footer の高さ(約70px) + α の余白 */
  margin-bottom: 72px;
}

.footer05 a {
	color: rgba(63,41,0,0.95);
	text-decoration: none;
}

.footer05 li a:hover {
	text-decoration: underline;
}
/* Footer .box layout using float */

.footer05 .wrap {
	max-width: 950px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
  overflow: auto; /* clearfix: to contain floated .box elements */
}

.footer05 .wrap h3 {
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px #808080 solid;
	background-color: rgba(230,230,230, 0.4);
	border-radius:5px;
text-align:center;border:0;
}

.footer05 .wrap p {
	margin: 0;
	padding: 0 0 20px 0;
}

.footer05 .wrap .box {
	width: 18%;
	min-width :135px;
	border-left: 1px #808080 solid;
	padding:4px;
	border-radius: 0px;         /* CSS3 */
	-moz-border-radius: 0px;    /* Firefox */
	-webkit-border-radius: 0px; /* Safari,Chrome */
}

.aoadd {
	font-size: x-large;
}

/*ブラウザサイズが小さいときのフッター表示の調整*/

@media only screen and (max-width: 500px) {
	/* 固定フッターの高さが変わるのに合わせて、ページフッターの余白も調整 */
.page-footer {
  /* #scroll_footer の高さ(約70px) + α の余白 */
  /* 2段になった時の高さを考慮して固定値に変更 */
  margin-bottom: 100px; 
}

.aoadd {
	font-size: large;
}

.footer05 .wrap .fitem1, 
.footer05 .wrap .fitem2, 
.footer05 .wrap .fitem3, 
.footer05 .wrap .fitem4, 
.footer05 .wrap .fitem5
 {
	width: 47%;
}

.fitem1 {
  order: -3;
}
.fitem5 {
  order: -1;
}
}

/*
ブラウザサイズが小さいときのfooterの調整
ここまで
*/

.footer05 .box {
  float: left;
  width: 18%; /* Aim for 5 columns. (100% / 5 = 20%). Adjust for margins. */
  margin-left: 0.8%;
  margin-right: 0.8%;
  margin-bottom: 20px; /* Space below each box */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  /* Add some padding inside the box if needed, e.g., padding: 10px; */
}

.footer05 .wrap .box ul {
	margin: 0;
	padding: 0 0 20px 0;
	list-style: none;
}

.footer05 .wrap .copyright {
	width: 950px;
	padding: 20px 0 0 0;
}

/* index上部メニューの背景 */
.floatover {
    background-color: white;;
    }

/* index上部メニューマウスオーバー時の背景色 */
.floatover:hover {
    background-color: wheat;
	float:none;
    }

.aligncenter,
.aligncenter9,
.aligncenter8,
.aligncenter7,
.aligncenter6 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.aligncenter {
  width: 100%;
}

.aligncenter9 {
  width: 90%;
}

.aligncenter8 {
  width: 80%;
}

.aligncenter7 {
  width: 70%;
}

.aligncenter6 {
  width: 60%;
}

.info-box {
  border: 10px outset #31A9EE;
  text-align: center;
  max-width: 700px; /* 画像の最大幅px */
  width: 90%;      /* 親要素の幅に合わせて伸縮 */
  height: auto;     /* アスペクト比を維持 */
}

/* ========================
	himaより
========================= */


.column0{
	padding:3px;
	float:left;
	background:#00BFFF
	}

.column{
	padding:3px;
	}
	float:left;
	border:1px solid #333333;
	background:#ccffff

.column9{width:90%;}
.column8{width:80%;}
.column7{width:70%;}
.column6{width:60%;}
.column5{width:50%;}
.column4{width:40%;}
.column3{width:30%;}
.column2{width:20%;}
.column1{width:10%;}

#left{
	float:left;
	}

#right{
	float:right;
	}


/* ==========グリッド表示
============ */

.wrapper-grid { 
	display: grid; 
	display: -ms-grid;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-columns: repeat(2, 1fr);
} 

.wrapper-left{
	grid-column: 1 / 2;
	-ms-grid-column: 1;
}

.wrapper-right{
	grid-column: 2 / 3;
	-ms-grid-column: 2;
}

.box1 { 
	grid-column-start: 1; 
	grid-column-end: 2; 
	grid-row-start: 1; 
	grid-row-end: 3; 
}

.box2 { 
	grid-column-start: 2; 
	grid-column-end: 3; 
	grid-row-start: 1; 
	grid-row-end: 2; 
}

.box3 { 
	grid-column-start: 2; 
	grid-column-end: 3; 
	grid-row-start: 2; 
	grid-row-end: 3; 
}

.box4 { 
	grid-column-start: 1; 
	grid-column-end: 3; 
	grid-row-start: 3; 
	grid-row-end: 4; 
}

/* ==========
============ */

ul.topmenu {
	width: 140px;
	margin: 5px;
	padding: 0;
	list-style-type: none;
	background-color: #eeeeee;
}

.topmenu li a {
	display: block;
	padding: 2px 5px;
	color: #000000;
}

.topmenu li {
	text-align: center;
	border-bottom: 1px solid #ccc;
}

.topmenu li :last-child {
	border-bottom: none;
}

.topmenu li a.active {
	color: #000000;
	background-color: #d7f7ea;
}

.topmenu li a.title {
	color: #ffffff;
	background-color: #A5A2C3;
}

.topmenu li a:hover:not(.title) {
	color: #ffffff;
	background-color: #1b2538;
}

*******************************
.submenu_box {
    display: flex;	/*コレ*/
    flex-wrap: wrap
	overflow: hidden;
	list-style-type: none;
}

.submenu_box ul {
	background-color: rgba(211,211,211,0.4);   /* ===淡いグレー=== */
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.submenu_box ul li {
	width: 164px;
	float: left;
	border: 1px solid #bbbbbb;   /* グレイ*/
}

.submenu_box ul li.title {
	width: calc(100%/6.6);
}

/* ==========
	width: calc(100%/6);
============ */

.submenu_box ul li a {
	display: block;
	text-align: center;
	padding: 2px 2px;
	color: #000000;
	/* 文字サイズを可変にしつつ、12pxから14pxの範囲に制限 */
	font-size: clamp(12px, calc(10px + 0.6vw), 14px);
}

.submenu_box ul li a.active {
	color: #000000;
	background-color: #d7f7ea;
}

/* ==========
.submenu_box ul li a:hover:not(.active) {
	color: #ffffff;
	background-color: #1b2538;
}
============ */

.submenu_box ul li a.title {
	color: #ffffff;
	background-color: #A5A2C3;
}

.submenu_box ul li a:hover:not(.title) {
	color: #ffffff;
	background-color: #1b2538;
}

.submenu_box ul li a.home {
	color: #000000;
	background-color: #A2D8BB;
}

****
/* ==========
============ */

.submenu_navi {
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;   /*薄いグレー */
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
	position:relative;
	z-index: 30;
}

.submenu_navi ul {
	margin: 0;
	padding: 0;
    text-align: left;
}
.submenu_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.submenu_navi > ul > li > a {
	color: black;   /* メイン文字色*/
	display: block;
	line-height: 50px;
	padding: 0 10px;
	text-decoration: none;
	/* 文字サイズを可変にしつつ、最大値を14pxに制限します */
	font-size: clamp(12px, 1.8vw, 14px);
}
.submenu_navi > ul > li:hover > a {
	color: white;
}
.submenu_navi > ul > li > a.logo {
	color: #ffffff;
	background-color: black;
    position: absolute;
    left: 5px;
    top: 0px;
}
.submenu_navi > ul > li > a > .caret {
	border-top: 4px solid red;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.submenu_navi > ul > li:hover {
	background-color: #DA3C41;   /*明るめの赤*/
}
.submenu_navi > ul > li:hover > a > .caret {
	border-top-color: white;
}
.submenu_navi > ul > li > div {
	width: 176px;
	background-color: #A2D8BB;   /*明るめの緑*/
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.submenu_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.submenu_navi > ul > li > div ul > li {
	display: block;
}
.submenu_navi > ul > li > div ul > li > a {
	color: black;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.submenu_navi > ul > li > div ul > li:hover > a {
	background-color: white;
}


.main-video {
  display: block; /* ブロック要素として扱い、マージンを有効にする */
  max-width: 700px; /* デザイン上の最大幅に制限 */
  width: 90%;      /* 画面幅に合わせて調整 */
  height: auto;     /* アスペクト比を保つ height: 100%;*/
  margin-left: auto;
  margin-right: auto; /* 中央寄せ */
  padding: 1em;       /* 元のパディングを維持 */
  z-index: 20;        /* 元のz-indexを維持 (必要に応じて調整) */
  background: url(img/bg_bro.jpg);
  box-sizing: border-box; /* paddingとborderを幅に含める */
 }



.top-banner1,
.top-banner2,
.top-banner3,
.top-banner4 {
	display: flex;
	flex-wrap:wrap;
	list-style: none;
	background: url(img/bg_bro.jpg);
border-radius: 10px;/* CSS3 */-moz-border-radius: 10px;/* Firefox */-webkit-border-radius: 10px; /* Safari,Chrome */
}

.top-banner1 li,
.top-banner2 li,
.top-banner3 li,
.top-banner4 li {
	box-sizing:border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-banner1 li {
	width: calc(100%);/*←画像を横に1つ並べる場合*/
	padding:20px 40px 25px 40px;/*←画像の左右に余白を入れる*/
}

.top-banner2 li {
	width: calc(100%/2);/*←画像を横に2つ並べる場合*/
	padding:20px 15px 25px 10px;/*←画像の左右に余白を入れる*/
}

.top-banner3 li {
	width: calc(100%/3);/*←画像を横に3つ並べる場合*/
	padding:20px 15px 25px 10px;/*←画像の左右に余白を入れる*/
  font-size: calc(8px + 0.4vw); /* 例: 少し小さめの設定 */
}

.top-banner4 li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:20px 25px 25px 20px;/*←画像の左右に余白を入れる*/
}

.top-banner1 li img,
.top-banner2 li img,
.top-banner3 li img,
.top-banner4 li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 2px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
	box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5);　/*水平垂直ぼかし広がり色透明 */
}

/* 画面幅が600px以下の場合のスタイル */
@media screen and (max-width: 600px) {
  .top-banner3-2 {
    /* もし .top-banner3 が Grid Layout で実装されている場合、
       以下のように grid-template-columns を2列に変更します。
       例: grid-template-columns: repeat(2, 1fr);
       mainw3.css の実装をご確認ください。 */
  }
  .top-banner3-2 li {
    /* Flexboxレイアウトやwidth指定の場合、li要素の幅を調整して2列にします。 */
    width: calc(50% - 8px); /* 2列表示。8pxはアイテム間の隙間を想定した値です。 */
                               /* mainw3.cssでのgapやmarginの設定に応じて調整してください。 */
    /* box-sizing: border-box; が mainw3.css で設定されていない場合は、それも考慮に入れるか、ここで指定してください。 */
  }
}


.top-box{
	box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5); /*水平垂直ぼかし広がり色透明 */
}

.banner-line {
  border-left: 5px solid #dcdcdc;
}


.banner-title span,
.banner-cap {
  font-size: calc(8px + 0.7vw); /* 'large'に近いサイズ感で可変性を付与。必要に応じて調整してください。 */
}

.banner-title {
	padding:15px 15px 0px 15px;
	border:solid 8px #eee;
	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	text-align:center;
	font-size:large;
	color:#000
}

.banner-tri {
	font-size:xx-large; 
	border: 0px;
	/* 上下のマージンは15px、左右はautoで中央寄せにする */
	margin: 15px auto;
}

.banner-cap {
	padding:10px;
	border:solid 5px #bbb;
	box-shadow: 5px 10px 5px 5px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	text-align:center;
	font-size:x-large;
	color:#000;
	background: url(img/bg_cardboard.jpg);
}

/*
=================================
*  画像ぼかし　blur
* ===============================
*/
.blur, .blur > img {
    margin: 0; padding: 0;
    border: 0;
}

.blur {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.blur:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #fff;
    -webkit-box-shadow: inset 0px 0px 15px 15px #fff;
    box-shadow: inset 0px 0px 15px 15px #fff;
    content: " ";
}


.success {
	font-size: x-large;
	font-weight:bolder;
	margin:1.5em 50px;
	padding:1.5em 0;
	background-color:#e8f198;
	border:solid 1px #c6e148;
	text-align:center;
	color:#4e4c35;
}

/** スライドショー
===================================*/
/** RESET AND LAYOUT
===================================*/
    /*スライダー*/

button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
.prev-arrow{
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.next-arrow{
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* New styles for diagnosis button text */
.diagnosis-text-button {
    font-family: "Noto Serif JP", "MS Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; /* Noto Serif JPを採用 */
    background-color: #b87ffa;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: bold;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.diagnosis-text-button:hover {
    background-color: #a572f0; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}
background-color:rgba(63,41,0,0.7);     /*背景色 rgba(179,125,78,0.7)#b37d4e #EAECEC*/

/* General styles for the container-wrapper (desktop first) */
.diagnosis-section-wrapper .container-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Responsive styles for smaller screens */
@media only screen and (max-width: 768px) {

	/* 固定フッターの高さが変わるのに合わせて、ページフッターの余白も調整 */
.page-footer {
  /* #scroll_footer の高さ(約50px) + α の余白 */
  margin-bottom: 40px;
}
	
    /* Ensure the container-wrapper itself is responsive */
    .diagnosis-section-wrapper .container-wrapper {
        flex-direction: column;
        gap: 10px;
        align-items: center; /* 中央揃え */
        width: 100%; /* 親要素の幅に合わせる */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
        padding: 0 10px; /* 左右に少しパディングを追加して、端に寄りすぎないようにする */
    }

    /* Adjust the button's image size on smaller screens */
    #main-diagnosis-button img {
        width: 60px !important; /* インラインスタイルを上書き */
        height: auto !important;
        margin-right: 8px !important;
    }

    /* Adjust the button text and ensure it wraps */
    .diagnosis-text-button {
        width: 100%; /* ボタンの幅を親要素に合わせる */
        white-space: normal; /* テキストを折り返すようにする */
        /* 画面幅に応じてフォントサイズを調整 (最小14px, 推奨4.5vw, 最大18px) */
        font-size: clamp(14px, 4.5vw, 18px);
		padding: 8px 12px; /* 小さなボタンに合わせてパディングを調整 */
        line-height: 1.4; /* 折り返し時の行間を調整 */
    }

    /* Adjust the paragraph text for smaller screens */
    .plan-section-description {
        /* 現在のフォントサイズは最小12pxに制限されています */
        /* 画面幅に応じてフォントサイズを調整 (最小12px, 推奨4vw, 最大16px) */
        font-size: clamp(12px, 4vw, 16px);
		text-align: center; /* テキストを中央揃えにする */
        padding: 0 10px; /* 左右にパディングを追加して、テキストが端に寄りすぎないようにする */
        box-sizing: border-box; /* パディングを幅に含める */
        max-width: 100%; /* 親要素の幅を超えないようにする */
        word-break: break-word; /* 長い単語を強制的に改行する */
        line-height: 1.8; /* 折り返し時の行間をさらに調整して読みやすくする */
    }
}



/* 007zsr2.html specific styles */

.zsr-description {
	font-size: 1.3em;
	padding-bottom: 2em;
}

.guideline-box {
	border: 10px solid skyblue;
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.disaster-agreement-box {
  border: 10px solid skyblue;
  width: 80%;
  margin: 0 auto;
  padding: 1em;
  font-size: 1.3em;
}

.zsr-intro {
	font-size: x-large;
	font-weight: bolder;
	clear: left;
	margin-bottom: 1em;
}

.zsr-banner-img {
	width: 200px;
}

.zsr-grid {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 20px;
	align-items: center;
	margin-top: 2em;
}

@media only screen and (max-width: 995px) {
	.zsr-grid {
		grid-template-columns: 1fr;
	}
	.zsr-grid > div {
		margin: 0 20px;
	}
}

/* 007zsr2.html specific styles ここまで*/


/* Custom spacer for text blocks */
.custom-spacer {
    height: 1em; /* スペーサーの高さを増やして、行間の区切りを明確にする */
}

/* --- Q&Aセクションのスタイル --- */
.qa-section {
  margin-top: 1.0em;
  padding: 1em;
}

.qa-section details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #f9f9f9;
}

.qa-section summary {
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding-left: 2em;
  color: #333;
}

.qa-section summary::before {
  content: "Q.";
  position: absolute;
  left: 0;
  color: #1F70B5; /* サイトのテーマカラーに合わせた青色 */
  font-size: 1.1em;
}

.qa-section details > p {
  padding-left: 2em;
  line-height: 1.7;
  margin-top: 0.8em;
  color: #555;
}

.table-container {
  overflow-x: auto; /* テーブルが画面幅を超える場合に横スクロールを可能にする */
  padding-left: 2em;
  margin-top: 0.8em;
}

.shuhashikata-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* スマホ表示でもテーブルが崩れない最小幅 */
}

.shuhashikata-table th, .shuhashikata-table td {
  border: 1px solid #ccc;
  padding: 0.8em;
  text-align: left;
  font-size: 0.8em; /* テーブル内のフォントサイズを少し小さくする */
}

.shuhashikata-table th {
  background-color: #e9f5ff;
  font-weight: bold;
}