@charset "shift_jis";

/* BASIC DESIGN */
body {
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #333333;
  	background: #e7e7eb; 
	border-right: 0px solid #cc7eb1;
	border-left: 0px solid #cc7eb1;
	border-top: 7px solid #cc7eb1;
	border-bottom: 10px solid #cc7eb1;
	padding: 0px;
	width : 80% ; /* 任意の横幅を指定 */
  margin-left: auto;
  margin-right: auto;
}
.grid-container {
    display: grid; /* グリッドレイアウトを有効にする */
    grid-template-columns: 1fr 3fr 1fr; /* カラムの比率を設定 */
    gap: 10px; /* カラム間のスペースを設定 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* コンテナを中央に配置 */
}

.left-column, .main-column, .right-column {
    padding: 20px;
    background-color: #f0f0f0;
    box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
}

/* メディアクエリでレスポンシブ対応 */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1カラムレイアウトに切り替える */
    }
    .left-column, .right-column {
        order: -1; /* ナビゲーションカラムを中央カラムの上に表示 */
    }
}

/* ここからヘッダーの固定のための */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}



.site-header {
  height: 80px;
  background: #ffffff;
  color: #ffffff;
  border-top: 5px solid #cc7eb1;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 32px, 1120px);
  height: 100%;
  margin-inline: auto;
}

.site-logo {
  color: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.global-nav ul {
  display: flex;
  gap: 20px;
  font-size: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav a {
  color: inherit;
  text-decoration: none;
}

.global-nav a:hover,
.global-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}


:root {
  --header-height: 80px;
}

body {
  padding-top: var(--header-height);
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
}

/* ここまでヘッダーの固定のための */

h1 {
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 10px;
	border-bottom: 5px solid #cc7eb1;
	}

h2 {
	font-size: 18px;
	font-weight: nomal;
	color: #e95295;
	margin:0px 0px 5px 5px;
	padding: 2px 0px 2px 5px;
	border-bottom: 0px solid #b0e0e6;
	text-indent: 0px;
}


h3{
	color: #7a4171;
	font-size: 14px;
	margin: 5px 0px 3px 0px;
	padding: 0px 0px 0px 10px;
	border-bottom: 0px solid #999999;
	  vertical-align: text-top;
	}


h4{
	color: #e95295;
	font-size: 14px;
	margin: 3px 0px 2px 0px;
	padding: 0px 0px 0px 10px;
	border-bottom: 0px solid #999999;
	  vertical-align: text-top;	
	}


h6{
	color: #7a4171;
	font-size: 0.6em;
	margin: 0px 0px 1px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #e7e7eb;
	text-align: right;
	clear: both;
	}

p { 
	margin: 0px 0px 11px 10px; 
	text-align: left;
	line-height: 1.4em;	
	}

	
	
p.right {
	text-align: right;
	}
	
p.center {
	text-align: center;
	}
	
p.s {
	font: 12px "MS ゴシック",Osaka; 
	}

img {
  vertical-align: text-bottom;
 border: 2px;
  border-color: #cca6bf;
  border-style: solid;
	}
img.toplogo	{
  vertical-align: text-bottom;
 border: 1px;
  border-color: #cccccc;
  border-style: none;
  gap: none; /* 画像間の隙間 */
	}


.image-row {
    display: flex;
    justify-content: left; /* 左揃え */
    gap: 10px; /* 画像間の隙間 */
}

.image-container {
    width: 20%;
    text-align: center;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 角を少し丸くする */
   margin: 0 auto;
}

.image-container p {
   padding: 10px 0 0 0;
    font-size: 14px;
}

	
em {
  font-style: normal;
  font-weight: bold;
  color: #006699;
}


hr {
  color: #ff0000;
  background-color: #ffffff;
  height: 0px;
  border: 1px;
  border-color: #e6cde3;
  border-style: solid;
   }
  
table, td, th {
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff; 
  border-collapse: collapse;
  }


a:link { 
	font-weight: nomal; 
	text-decoration: none; 
	color: #330099;
	}
a:visited { 
	font-weight: nomal; 
	text-decoration: none; 
	color: #6600ff;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #ff3366;
	}
	


/* TITLE DESIGN */
/* PCなど、広い画面向けの共通スタイル */


#container { 
	float: right;
	text-align: left;
	position: relative;
	background: #fff url(toplogoshougatu01.gif) no-repeat right 10px;
	margin: 0px auto;	
	border-right: 0px solid #008080;
	border-left: 0px solid #008080;
	border-top: 0px solid #cc7eb1;
	border-bottom: 5px solid #cc7eb1;
	padding: 0px;
	width: 100%; 
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 100%;
	}
	html>body #container {
	width: 100%;
}



/* CONTENTS LAYOUT */


div#main-column {
	border-right: 0px solid #708090;
	border-left: 0px solid #708090;
	border-top:  7px solid #cc7eb1;
	border-bottom: 0px none #708090;
	background: #ffffff;
	}

div#main-column ul {
	line-height: 1.5em;
	list-style-type: disc;
	margin: 8px 0px 5px 12px;
	padding: 0px 0px 0px 12px;
	color: #9d5b8b;
	}

div#main-columnmain ol {
	line-height: 1.5em;
	list-style-type: square;
	margin: 10px 0px 15px 12px;
	padding: 0px 0px 0px 12px;
	}

/* side */	
div#left-column {
	top: 1px;
	left: 0px;
	background: #ffffff ;	
	}

div#left-column p { 
	font-size: 12px;
	margin: 3px 0px 5px 6px; 
	text-align: left;
	line-height: 1.2em;
	}

div#left-column h4{
	color: #1f3134;
	font-size: 12px;
	margin: 0px 0px 2px 0px;
	padding: 2px 1px 4px 5px;
	background-color: #dbd0e6;
	text-indent: 5px;
	height: 20px; 
	}
	
div#left-column ul {
	text-align:left;
	font-size: 12px;
	list-style-type: square;
	margin: 0px 0px 8px 6px;
    padding-left: 6px;
    }

div#left-column li {
	font-size: 1.0em;
	border-top:0px solid #a9a9a9;
	border-right:0px solid #999999;
	border-bottom:0px solid #ccccff;
	border-left:0px solid #999999;
	text-align: left;
	color: #333333;
	margin:0px 0px 1px 10px;
	padding:0px 0px 0px 0px;		
	line-height: 1.6em;	
	}
	
div#left-column li.one {
	font-size: 1.0em; 
	text-align: left;
	color: #e95295;
	margin:0px 0px 1px 10px;
	padding: 0px;	
	}
		
	
div#left-column a:link { 
	font-weight: nomal; 
	text-decoration: underline; 
	color: #330099;
	}
div#left-column a:visited { 
	font-weight: nomal; 
	text-decoration: underline; 
	color: #6600ff;
	}
div#left-column a:hover { 
	text-decoration: underline; 
	color: #ff3366;
	}

	
div#right-column {
	top: 10px;
	right: 0px;
	background: #ffffff;
	}
	


#footer { 
	width : 80% ;
	padding:2px 0px 2px 0px;
	clear : both ;
	text-align: center;
	border-top: 1px solid #c0a2c7;	
	}
	
div#footer p.right {
	font-size: 12px;
	text-align: right;
	}