@charset "utf-8";
@import url("color.css");
/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/

@media screen and (min-width: 1024px) {
	img {
		max-width: 100%;
		height: auto;
		width/***/: auto;
	}
	/*共通部分*/
	html {
		height: 100%;
	}
	body {
		/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
		font-family: YuGothic,"Hiragino Kaku Gothic ProN",Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3","メイリオ", Meiryo, sans-serif;
		font-size: 12px;
		letter-spacing: 0.1em;
		height: 100%;
		background-color: #fafafa;
	}
	#container {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-image: url(./../img/back_leaf.jpg);
		background-repeat: repeat-y;
		background-position: center top;
	}
	header {
        background: url(./../img/head_bg.jpg) repeat-x;
        background-size: contain;
        width: 100%;
        display: grid;
        grid-template-columns: 40px 1fr;
	}
	header img {
		grid-column: 1/2;
		width: auto;
		height: auto;
  }
	header h1 {
		grid-column: 2/3;
		min-height: 40px;
		color: #ffffff;
		background: none repeat scroll 0 0 transparent;
		line-height: 1.7;
		font-weight: normal;
		padding-left: 10px;
  }
	footer {
		width: 100%;
		height: 70px;
		position: relative;
		bottom: 0px;
	}
	#ft_bar {
		width: 100%;
		height: 26px;
		background-color: #c78198;
		position: absolute;
		top: 44px;
	}
	#ft_icon {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 3px;
	}
	footer p {
		position: absolute;
		top: 44px;
		color: #FFF;
		font-size: 14px;
		height: 25px;
		margin-top: 4px;
		width: 100%;
		text-align: center;
	}
	address {
		text-align: right;
		margin-right: 20px;
		font-style: normal;
		position: relative;
		z-index: 6;
	}
	address strong {
		font-size: 12px;
	}
	address strong a {
		font-style: normal;
		text-decoration: none;
		color: #000000;
	}
	address strong a:hover {
		color: #999999;
	}
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	/* Hides from IE Mac */
	* html .clearfix {
		height: 1%;
	}
	.clearfix {
		display: block;
	}
	/* End Hack */
	/*==============================================
トップ用
===============================================*/
	#top_main {
		width: 980px;
		height: 500px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 35px;
	}
	#top_main2 {
		width: 980px;
		min-height: 200px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 35px;
	}
	#top_main #lang {
		width: 700px;
		position: relative;
		min-height: 430px;
		/*background-color:#7bd4e0;*/
		float: left;
		margin-bottom: 30px;
	}
	#top_main .sec_title {
		width: 100%;
		height: 24px;
		font-size: 16px;
		line-height: 24px;
	}
	#top_main #mod {
		width: 270px;
		position: relative;
		min-height: 430px;
		/*background-color:#7bd4e0;*/
		float: right;
	}
	.top_ul_eng {
		position: absolute;
		top: 4px;
		right: 5px;
		color: #ddd;
		font-size: 16px;
	}
	#top_main #lang #box_box {
		margin-left: 11px;
		margin-top: 5px;
	}
	#box_box {
		letter-spacing: 0px;
	}
	#aboutsite_link {
		display: block;
		background-color: #FFFFFF;
		width: 80%;
		text-align: center;
		margin: 10px auto;
		border: #999999 1px solid;
		padding: 10px;
	}
	/* 言語のボックスエリア */
	#lang #box_box a div {
		width: 93px;
		height: 86px;
		float: left;
		margin: 6px 10px;
		line-height: 92px;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		position: relative;
		border-radius: 15px;
	}
	#lang #box_box a div:before {
		content: "";
		height: 2.05em;
		width: 92%;
		padding: 0px 0px;
		margin-left: -46%;
		position: absolute;
		top: 0;
		left: 50%;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.25);
		background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
		background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95%);
	}
	#mod #box_box a div {
		width: 93px;
		height: 60px;
		float: left;
		margin: 6px 10px;
		padding-top: 28px;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		position: relative;
		border-radius: 15px;
	}
	#mod .box_b3, #mod .box_b4 {
		line-height: 35px;
	}
	#mod #box_box a div:before {
		content: "";
		height: 2.05em;
		width: 92%;
		padding: 0px 0px;
		margin-left: -46%;
		position: absolute;
		top: 0;
		left: 50%;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.25);
		background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
		background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95%);
	}
	#mod #box_box a div:after {
		content: "";
		width: 100%;
		height: 100%;
		padding: 0px 0px;
		margin-left: -50%;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 2;
	}
	#top_main .box_b1:after {
		background: url(../img/tufs00top_icon1.png) no-repeat center;
	}
	#top_main .box_b2:after {
		background: url(../img/tufs00top_icon2.png) no-repeat center;
	}
	#top_main .box_b3:after {
		background: url(../img/tufs00top_icon3.png) no-repeat center;
	}
	#top_main .box_b4:after {
		background: url(../img/tufs00top_icon4.png) no-repeat center;
	}
	#top_main .box_b1 p, #top_main .box_b2 p, #top_main .box_b3 p, #top_main .box_b4 p {
		position: relative;
		z-index: 3;
	}
	/* ボックスエリア終わり */
	#top_main #mod_snd {
		width: 235px;
		height: 28px;
		line-height: 28px;
		color: #000;
		margin-top: 10px;
		background: #d1ceca url(./../img/icon_snd.jpg) no-repeat left;
		padding-left: 35px;
	}
	#top_main #mod_talk {
		clear: both;
		width: 235px;
		height: 28px;
		line-height: 28px;
		color: #000;
		margin-top: 115px;
		background: #d1ceca url(./../img/icon_talk.jpg) no-repeat left;
		padding-left: 35px;
	}
	#top_main #mod #box_box {
		margin-left: 19px;
		margin-top: 5px;
	}
	#top_menu {
		clear: both;
	}
	#top_menu div {
		height: 40px;
		width: 162px;
		line-height: 40px;
		text-align: center;
		float: left;
	}
	#intromenu div:nth-child(3) {
		width: 156px;
	}
	#top_menu div:nth-child(4) {
		width: 158px;
	}
	#top_menu div:nth-child(5) {
		position: relative;
		border-top: 0px;
	}
	#top_menu div:nth-child(5):before {
		background-color: transparent;
		height: 0px;
		width: 0px;
	}
	#top_menu div:nth-child(6) {
		/* width: 172px; */
		border-top: 0px;
	}
	/* top_introはidなのに複数のファイルで複数出現。about_site.htmlでは全体のコンテナにもなっている。影響が大きいため対処保留 2025.10 about_siteだけ対処 */
	#about_site{
		width: 934px;
		height: auto;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 50px;
		margin-top: 40px;
		clear: both;
	}
	#about_site h2{
	    color: #0099FF;
	}
	.top_intro p{
		padding:20px;
	}
	.top_intro_box h2{
		padding-left:20px;
	}
	.top_intro_box h2 a{
		text-decoration: none;
	    color: #0099FF;
	}
	#contact_address{
		padding:20px;
		background-color: #f7f4f2;
	}

	/* top_introはidなのに複数のファイルで複数出現。about_site.htmlでは全体のコンテナにもなっている。影響が大きいため対処保留 2025.10 about_siteだけ対処 */

	/* イントロ＆ニュース箇所 */
	#top_intro {
		width: 934px;
		height: auto;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 50px;
		margin-top: 40px;
		clear: both;
	}
	.top_intro_box {
		width: 100%;
		height: auto;
		position: relative;
	}
	.top_intro_title {
		width: 100%;
		background: url(./../img/top_innw_bg.jpg) repeat-x;
		height: 23px;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 16px;
		padding-top: 2px
	}
	.top_intro_title2 {
		color: #666;
		text-align: right;
		width: 100%;
		font-size: 15px;
	}
	.top_intro_content {
		width: auto;
		padding: 20px;
		padding-bottom: 10px;
		font-size: 14px;
		line-height: 1.4em;
	}
	.top_intro_after {
		text-align: right;
		width: 100%;
		font-size: 16px;
		color: #c00;
	}
	.top_intro_news {
		padding-left: 150px;
		background: url(./../img/top_up.jpg) no-repeat top left #fafafa;
		min-height: 36px;
		line-height: 36px;
		border-bottom: 1px #999 dashed;
		font-size: 12px;
		letter-spacing: 0.1em;
		text-indent: -7.5em;
	}
	#intro_news_box {
		margin-top: 20px;
		margin-bottom: 30px;
		border-top: 1px dashed #999999;
	}
	.top_intro_content .pro {
		display: block;
		background-color: rgb(255, 170, 152);
		height: 22px;
		line-height: 22px;
		width: 200px;
		padding-left: 10px;
		border-left: 5px solid #FF7226;
		border-bottom: 1px solid #FF7226;
		margin-bottom: 5px;
	}
	.top_intro_content .dia {
		display: block;
		background-color: #88c4a1;
		height: 22px;
		line-height: 22px;
		width: 200px;
		padding-left: 10px;
		border-left: 5px solid #124226;
		border-bottom: 1px solid #124226;
		margin-bottom: 5px;
	}
	.top_intro_content .gra {
		display: block;
		background-color: rgb(247, 173, 202);
		height: 22px;
		line-height: 22px;
		width: 200px;
		padding-left: 10px;
		border-left: 5px solid #f75f9b;
		border-bottom: 1px solid #f75f9b;
		margin-bottom: 5px;
	}
	.top_intro_content .goi {
		display: block;
		background-color: #b6c8dc;
		height: 22px;
		line-height: 22px;
		width: 200px;
		padding-left: 10px;
		border-left: 5px solid #3f95f4;
		border-bottom: 1px solid #3f95f4;
		margin-bottom: 5px;
	}
	.top_intro_content .res {
		display: block;
		background-color:rgb(216, 255, 255);
		height: 22px;
		line-height: 22px;
		width: 200px;
		padding-left: 10px;
		border-left: 5px solid #65ffff;
		border-bottom: 1px solid #65ffff;
		margin-bottom: 5px;
	}

	.abtmod_box01 {
		padding: 5px;
		background-color: #FFF;
		margin-bottom: 5px;
	}
	.abtmod_box01 strong {
		display: block;
		color: #039;
		margin-bottom: 5px;
	}
}