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

#wrapper {width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;}


/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 24px; font-weight: bold; float: left;}
	
	section {width: 60%; height: auto; margin: 0 20% 80px; padding: 0 0 35px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box;}
	section h3 {width: 100%; height: auto; margin: 0 auto; padding: 10px 0; font-size: 20px; text-align: center; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	.section_ul1 {width: 100%; margin: 5px 0; padding: 0; font-size: 16px; text-align: center;}
	.section_ul1 li {width: 100%; padding: 8px 0;}
	.section_ul1 li a {color: #6B401B;}
	.section_ul1 li a:hover {color: #6B401B; text-decoration: none;}
	
	.greeting_section {width: 99%; margin: 0 0.5% 0; height: auto; padding: 16px 0 0; box-sizing: border-box;}
	.greeting_section h2 {width: 100%; height: auto; padding: 0 0 16px; font-size: 20px; box-sizing: border-box;}
	.greeting_flex_container {display: flex; gap: 30px; /* 画像とテキストの間隔を固定 */ align-items: flex-start; width: 70%; margin: 10px 15% 0;}
	.greeting_image {flex: 0 0 300px; /* 「伸びない・縮まない・300px固定」の設定 */
    	width: 300px;
	}
	.greeting_image img {width: 100%; height: auto;
    	border-radius: 8px; /* 角を少し丸くし理事長の写真を優しく */
	}
	.greeting_body {flex: 1; /* 残りの幅をすべて使う */}
	.u2title1 {width: 100%; height: auto; padding: 0 0 20px 10px; font-size: 20px; text-align: left; box-sizing: border-box;}
	.u2text1 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	.u2title2 {width: 90%; height: auto; padding: 18px 0; margin: 18px auto; line-height: 24px; font-size: 20px; text-align: center; box-sizing: border-box; border-top: solid 3px #04574E; border-bottom: solid 3px #04574E;}
	.u2text2 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	
	/* 縦並び */
	/*.philosophy_container {display: flex; justify-content: space-around; gap: 20px; max-width: 1000px; margin: 0 auto;}*/
	/*.philo_card {flex: 1; background: #fff; padding: 30px; border-radius: 10px; border: 1px solid #eee; transition: transform 0.3s;}*/
	
	.philosophy_detail_area {width: 100%; margin: 0 0 90px;}
	.philosophy_section {background-color: #f9f9f9; padding: 60px 8px 0; text-align: center; width: 99%; box-sizing: border-box; margin: 0 0.5%;}
	.philosophy_header {text-align: center; margin-bottom: 40px;}
	.philosophy_header small {color: #2D7CC5; /* 法人カラー */ font-weight: bold; display: block; letter-spacing: 0.2em;}
	
	.philosophy_container {display: flex !important; justify-content: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px;}
	.philosophy_block {flex: 1; padding: 20px; background: #fff; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
	.philosophy_block small {color: #2D7CC5; font-weight: bold; letter-spacing: 0.1em;}
	.philosophy_block h3 {margin: 10px 0; font-size: 1.2rem;}
	.philosophy_block p { font-size: 0.9rem; line-height: 1.6; color: #666;}
	
	.philo_card {flex: 1; background: #fff; padding: 30px; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; margin: 0 0 30px;}
	.philo_card:hover {transform: translateY(-5px);}
	.philo_card h3 {margin: 0 0 15px 0; /* ブラウザごとの余白の差をリセットして固定する */ padding: 0; font-size: 1.25rem;  /* 自分のさじ加減で大きさを決める */ color: #2D7CC5; /* 法人カラーを当てる */}
	.philo_card p {width: 100%; margin: 0; padding: 8px 0 50px; text-align: left;}
	.philo_icon {width: 50px; height: 50px; background: #2D7CC5; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold;}
	
	/* 追加 */
	/* 三原則（カード）のスタイル */
	.principles_area {margin: 0 auto 50px; max-width: 1000px;}
	.principles_head {text-align: center; font-size: 1.2rem; color: #0B666E; margin-bottom: 30px; position: relative; padding-bottom: 15px;}
	.principles_head::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #0B666E;}
	.principles_container {
    	display: flex; /* Flexbox発動！ */
    	gap: 20px; justify-content: space-between;}
	.principle_card {
    	flex: 1; /* 3つ均等配分 */
    	background: #fff; border: 1px solid #e0e0e0; padding: 0 20px 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; box-sizing: border-box;}
	.principle_card:hover {transform: translateY(-5px); /* マウスを乗せると少し浮く演出 */}
	.card_num {display: block; font-size: 1.5rem; font-weight: bold; color: #0B666E; margin: 0; width: 100%; height: 80px; padding: 0; box-sizing: border-box;}
	.card_num h4 {font-size: 1.3rem; border-bottom: 2px solid #f4f9f9; width: 100%; height: auto; margin: 0; padding: 18px 0; box-sizing: border-box; text-align: center;}
	.principle_card p {font-size: 0.95rem; line-height: 1.6; color: #555; text-align: justify;}
	
	.principle_text {width: 90%; margin: 30px auto; padding: 10px 0; box-sizing: border-box; line-height: 1.8; color: #333;}
	.sign {width: 100%; margin: 60px 0; padding: 0 30px 60px 0; box-sizing: border-box;}
	.sign p {width: 100%; float: right; text-align: right; font-family: "Yuji Syuku", serif; font-weight: 400; font-style: normal;}
	.sign p span {display: block; line-height: 1.2;}
	.span01 {font-size: 20px;}
	.span02 {font-size: 24px;}
	.span03 {font-size: 26px;}

}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 20px; font-weight: bold; float: left;}
	
	section {width: 90%; height: auto; margin: 0 5% 80px; padding: 0 0 35px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box;}
	section h3 {width: 100%; height: auto; margin: 0 auto; padding: 10px 0; font-size: 20px; text-align: center; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	.section_ul1 {width: 100%; margin: 10px 0; padding: 0; font-size: 16px; text-align: center;}
	.section_ul1 li {width: 100%; padding: 12px 0;}
	.section_ul1 li a {color: #6B401B;}
	.section_ul1 li a:hover {color: #6B401B; text-decoration: none;}
	.section_ul1 li a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; /* タップ時の色を透明に */
        -webkit-user-select: none; /* テキスト選択を一時的に無効化してテスト */
        user-select: none;
        background: none !important;
        display: block; /* タップ範囲を広げて安定させる */
    }
	
	.greeting_section {width: 90%; margin: 10px 5%; height: auto; padding: 16px 0; box-sizing: border-box;}
	.greeting_section h2 {width: 90%; height: auto; margin: 0 5%; padding: 8px 0 16px; font-size: 18px; text-align: center; box-sizing: border-box;}
	.greeting_flex_container {
		flex-direction: column; /* 縦並びに変更 */
		align-items: center; /* 中央寄せ */}
	.greeting_image {flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0 auto 20px;}
	.greeting_image img {width: 100%; height: auto;	border-radius: 8px;}
	.greeting_body {width: 100%;}
	.u2title1 {width: 100%; height: auto; padding: 0 0 20px 10px; font-size: 20px; text-align: center; box-sizing: border-box;}
	.u2text1 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	.u2title2 {width: 80%; height: auto; padding: 18px 0; margin: 15px auto; line-height: 24px; font-size: 20px; text-align: center; box-sizing: border-box; border-top: solid 3px #04574E; border-bottom: solid 3px #04574E;}
	.u2text2 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	
	/* 縦並び */
	/*.philosophy_container {display: flex; justify-content: space-around; gap: 20px; max-width: 1000px; margin: 0 auto;}*/
	/*.philo_card {flex: 1; background: #fff; padding: 30px; border-radius: 10px; border: 1px solid #eee; transition: transform 0.3s;}*/
	
	.philosophy_detail_area {width: 90%; margin: 0 5% 90px;}
	.philosophy_section {background-color: #f9f9f9; padding: 60px 8px; text-align: center; width: 100%; box-sizing: border-box; margin: 0;}
	.philosophy_header {text-align: center; margin-bottom: 40px;}
	.philosophy_header small {color: #2D7CC5; /* 法人カラー */ font-weight: bold; display: block; letter-spacing: 0.2em;}
	
	.philosophy_container {display: flex !important; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 0 20px;}
	.philosophy_block {flex: 1; padding: 20px; background: #fff; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
	.philosophy_block small {color: #2D7CC5; font-weight: bold; letter-spacing: 0.1em;}
	.philosophy_block h3 {margin: 10px 0; font-size: 1.2rem;}
	.philosophy_block p { font-size: 0.9rem; line-height: 1.6; color: #666;}
	
	.philo_card {flex: 1; background: #fff; padding: 30px 12px; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; margin: 0 0 30px;}
	.philo_card:hover {transform: translateY(-5px);}
	.philo_card h3 {margin: 0 0 15px 0; /* ブラウザごとの余白の差をリセットして固定する */ padding: 0; font-size: 1.25rem;  /* 自分のさじ加減で大きさを決める */ color: #2D7CC5; /* 法人カラーを当てる */}
	.philo_card p {width: 100%; margin: 0; padding: 8px 0 50px; text-align: left;}
	.philo_icon {width: 50px; height: 50px; background: #2D7CC5; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold;}
	
	/* 追加 */
	/* 三原則（カード）のスタイル */
	.principles_area {margin: 0 auto; max-width: 1000px;}
	.principles_head {text-align: center; font-size: 1.4rem; color: #0B666E; margin-bottom: 30px; position: relative; padding-bottom: 15px;}
	.principles_head::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #0B666E;}
	.principles_container {
    	display: flex; /* Flexbox発動！ */
    	gap: 20px; justify-content: space-between;}
	.principle_card {
    	flex: 1; /* 3つ均等配分 */
    	background: #fff; border: 1px solid #e0e0e0; padding: 30px 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;}
	.principle_card:hover {transform: translateY(-5px); /* マウスを乗せると少し浮く演出 */}
	.card_num {display: block; font-size: 1.5rem; font-weight: bold; color: #0B666E; margin: 0; width: 100%; height: 80px; padding: 0; box-sizing: border-box;}
	.card_num h4 {font-size: 1.3rem; border-bottom: 2px solid #f4f9f9; width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box; text-align: center;}
	.principle_card p {font-size: 0.95rem; line-height: 1.6; color: #555; text-align: justify;}
	
	.principle_text {width: 90%; margin: 30px auto; padding: 10px 0; box-sizing: border-box; line-height: 1.8; color: #333;}
	.sign {width: 100%; margin: 60px 0; padding: 0 30px 60px 0; box-sizing: border-box;}
	.sign p {width: 100%; float: right; text-align: right; font-family: "Yuji Syuku", serif; font-weight: 400; font-style: normal;}
	.sign p span {display: block; line-height: 1.2;}
	.span01 {font-size: 20px;}
	.span02 {font-size: 24px;}
	.span03 {font-size: 26px;}

}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 20px; font-weight: bold; float: left;}
	
	section {width: 90%; height: auto; margin: 0 5% 80px; padding: 0 0 35px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box;}
	section h3 {width: 100%; height: auto; margin: 0 auto; padding: 10px 0; font-size: 16px; text-align: center; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	.section_ul1 {width: 100%; margin: 10px 0; padding: 0; font-size: 14px; text-align: center;}
	.section_ul1 li {width: 100%; padding: 12px 16px;}
	.section_ul1 li a {color: #6B401B;}
	.section_ul1 li a:hover {color: #6B401B; text-decoration: none; }
    .section_ul1 li a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; /* タップ時の色を透明に */
        -webkit-user-select: none; /* テキスト選択を一時的に無効化してテスト */
        user-select: none;
        background: none !important;
        display: block; /* タップ範囲を広げて安定させる */
    }
	
	.greeting_section {width: 99%; margin: 10px 0.5% 50px; height: auto; padding: 0 0 16px; box-sizing: border-box;}
	.greeting_section h2 {width: 90%; height: auto; margin: 0 5%; padding: 0 0 16px; font-size: 18px; text-align: center; box-sizing: border-box;}
	.greeting_flex_container {
		flex-direction: column; /* 縦並びに変更 */
		align-items: center; /* 中央寄せ */}
	.greeting_image {flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0 auto 20px;}
	.greeting_image img {width: 100%; height: auto;	border-radius: 8px;}
	.greeting_body {width: 90%; margin: 0 auto;}
	.u2title1 {width: 100%; height: auto; padding: 0 0 20px 10px; font-size: 20px; text-align: center; box-sizing: border-box;}
	.u2text1 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	.u2title2 {width: 90%; height: auto; padding: 16px 0; margin: 15px auto; line-height: 24px; font-size: 20px; text-align: center; box-sizing: border-box; border-top: solid 3px #04574E; border-bottom: solid 3px #04574E;}
	.u2text2 {line-height: 1.8; color: #333;/* 必要なら white-space: pre-wrap; を入れてもOK */}
	
	 /* 縦並び */
	.philosophy_container {display: flex !important; flex-direction: column; align-items: center; gap: 30px; width: 100%; margin: 0 auto;}
	.philo_card {display: flex; flex-direction: column; width: 98%; max-width: 800px; background: #fff; padding: 30px; border-radius: 10px; border: 1px solid #eee; transition: transform 0.3s;}
	
	/*横並び*/
	/*.philosophy_container {display: flex !important; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 0 20px;}*/
	/*.philo_card {flex: 1; background: #fff; padding: 30px 12px; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; margin: 0 0 30px;}*/
	
	.philosophy_section {background-color: #f9f9f9; padding: 60px 8px; text-align: center; width: 100%; box-sizing: border-box; margin: 0;}
	.philosophy_header {text-align: center; margin-bottom: 40px;}
	.philosophy_header small {color: #2D7CC5; /* 法人カラー */ font-weight: bold; display: block; letter-spacing: 0.2em;}
	
	.philosophy_block {flex: 1; padding: 20px; background: #fff; border-top: 4px solid #2D7CC5; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
	.philosophy_block small {color: #2D7CC5; font-weight: bold; letter-spacing: 0.1em;}
	.philosophy_block h3 {margin: 10px 0; font-size: 1.2rem;}
	.philosophy_block p { font-size: 0.9rem; line-height: 1.6; color: #666;}
	
	.philo_card:hover {transform: translateY(-5px);}
	.philo_card h3 {margin: 0 0 15px 0; padding: 0; font-size: 1.25rem; color: #2D7CC5;}
	.philo_card p {width: 100%; margin: 0; padding: 8px 0 50px; text-align: left;}
	.philo_icon {width: 50px; height: 50px; background: #2D7CC5; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold;}
	
	/* 追加 */
	/* 黒子セクションのスタイル */
	.kuroko_section {margin: 50px auto; padding: 40px 20px; background-color: #f4f9f9; /* 優しいジョイまつどカラーの背景 */
    	border-radius: 15px; text-align: center;max-width: 900px;}
	.kuroko_sub {font-size: 1.1rem; color: #666; margin-bottom: 10px; letter-spacing: 0.1em;}
	.kuroko_title {font-size: 2.4rem; font-weight: bold;
    	color: #0B666E; /* 濃い緑 */
    	margin-bottom: 20px;}
	.kuroko_desc {font-size: 1.1rem; line-height: 1.8;color: #333; max-width: 700px; margin: 0 auto;}
	
	/* 三原則（カード）のスタイル */
	.principles_area {margin: 60px auto; max-width: 1000px;}
	.principles_head {text-align: center; font-size: 1.1rem; color: #0B666E; margin-bottom: 30px; position: relative; padding-bottom: 15px;}
	.principles_head::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #0B666E;}
	.principles_container {
    	display: flex; /* Flexbox発動！ */
    	gap: 20px; justify-content: space-between;}
	.principle_card {
    	flex: 1; /* 3つ均等配分 */
    	background: #fff; border: 1px solid #e0e0e0; padding: 30px 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;}
	.principle_card:hover {transform: translateY(-5px); /* マウスを乗せると少し浮く演出 */}
	.card_num {display: block; font-size: 1.5rem; font-weight: bold; color: #0B666E; margin: 0; width: 100%; height: 60px; padding: 0; box-sizing: border-box;}
	.card_num h4 {font-size: 1.2rem; border-bottom: 2px solid #f4f9f9; width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box; text-align: center;}
	.principle_card p {font-size: 0.95rem; line-height: 1.6; color: #555; text-align: justify;}
	
	.principle_text {width: 90%; margin: 30px auto; padding: 10px 0; box-sizing: border-box; line-height: 1.8; color: #333;}
	.sign {width: 100%; margin: 60px 0; padding: 0 30px 60px 0; box-sizing: border-box;}
	.sign p {width: 100%; float: right; text-align: right; font-family: "Yuji Syuku", serif; font-weight: 400; font-style: normal;}
	.sign p span {display: block; line-height: 1.2;}
	.span01 {font-size: 14px;}
	.span02 {font-size: 18px;}
	.span03 {font-size: 20px;}
	
	.principles_container {
        flex-direction: column;
    }
    .kuroko_title {
        font-size: 1.8rem;
    }
}