@charset "utf-8";

@import url('./sitesp.css');
@import url('./button.css');

html {
	vertical-align: top;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	color: #333333;
}

h1 {
	display: block;
    font-size: 2.4em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
h2 {
	display: block;
    font-size: 1.4em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
	padding: 0.25em 0.5em;
	border-left: solid 10px #7db4e6;
}
#topsubtitle {
    font-size: 1.4em;
    font-weight: bold;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

ul {
	padding: 0;
	margin: 0;
}

li {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #333333;
}
a:link {
	color: #333333;
}
a:visited {
	color: #333333;
}
a:hover {
	text-shadow: 1px 2px 3px #808080;
}
a:active {
	color: #333333;
}
ul {
	list-style: none;
}
input {
	border:solid 1px #cccccc;
	border-radius:10px;
	box-shadow: none;
	padding: 2px 8px;
	height: 30px;
}
select  {
	border:solid 1px #cccccc;
	border-radius:10px;
	box-shadow: none;
	padding: 4px 8px;
	height: 30px;
}
input[type=text]  {
	width: 100%;
}
input[type=checkbox]  {
	position: absolute;
	left: -9999px;
}
input[type=radio]  {
	position: absolute;
	left: -9999px;
}
textarea {
	border:solid 1px #cccccc;
	border-radius:10px;
	box-shadow: none;
	padding: 10px;
	width:100%;
}
.buttonArea{
	margin:50px 0;
	text-align:center
}
.buttonArea div{
	display:inline-block;
	letter-spacing:normal;
	margin:0 10px;
}


.transparent-bothends {
    position: relative;
    margin: 0;
    padding: 10px;
    text-align: center;
}
.transparent-bothends::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

#tag1, #tag2, #tag3, #tag4 {
	margin-top:-100px;
	padding-top:100px
}

@media screen and (min-width: 970px) {

	/*---  header  ----------------*/


	#header {
		width: 100%;
		height: 100px;
		margin: 0 auto;
		padding: 20px auto;
		background-repeat: no-repeat;
		border-bottom: solid 1px #DDDDDD;
		background-color: #EEEEEE;
		position:sticky;
		top:0;
		z-index: 9999;
	}
	#header:hover {
		opacity: 1;
	}
	#head_contents{
		clear: both;
		max-width: 1100px;
		height: 100px;
		margin:0 auto;
		padding: 0 auto;
	}
	#header-logo {
		float: left;
		padding: 10px 10px;
	}
	#header-logo img {
		width:160px;
		padding-top:10px;
	}
	#header-menu {
		float: right;
		padding-right: 40px;
		/* position: relative; */
  list-style: none;
	}
	#header-menu .btn-menu {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		font-size: 12pt;
		text-decoration: none;
		margin: 55px 5px 0 5px;
		padding: 10px 10px;
	}
	#header-menu a {
		position: relative;
		display: inline-block;
		text-decoration: none;
		color: #000000;
	}
	#header-menu > li.first > a::after {
		position: absolute;
		/* bottom: 18px; */
		top: 40px;
		left: 0;
		content: '';
		width: 100%;
		height: 3px;
		background: #0b7c98;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .5s;
	}
	#header-menu > li.first > ul:hover a::after {
		transform: scale(1, 1);
	}
	#header-menu > li.first a:hover::after {
		transform: scale(1, 1);
	}
	#header-menu-sp {
		display: none;
	}
	/*---  footer  ----------------*/
	#footer {
		width: 100%;
		clear: both;
		margin: 150px auto 0 auto;
		background-color: #bfbfc0;
	}
	#footer_link {
		clear: both;
		width:100%;
		margin: 50px auto 0 auto;
		background-color: #eeeeef;
	}
	#footer:hover {
		opacity: 1;
	}
	#footer_contents {
		width: 100%;
		height: auto;
		text-align: left;
		margin: 0 auto;
	}
	#footer_company{
		clear: both;
		max-width: 900px;
		height: 180px;
		margin: auto;
		padding: 40px 0 0 0 ;
	}
	#footer_logo {
		float:left;
		vertical-align: top;
		margin: auto;
		padding: 10px;
		text-align: left;
		float: left;
	}
	#footer_logo img{
		width: 120px;
	}
	#footer_sitemap {
		float: left;
		width: 500px;
		height: 20px;
		margin:  30px 0 10px 50px;
		padding: 0 0 20px 5px;
		font-size: 12pt;
	}
	#footer_sitemap .itemList{
		overflow: hidden;
	}
	#footer_sitemap .itemList li {
	/*	width: 200px; */
		text-align: left;
		float: left;
		height: 20px;
		line-height: 20px;
		padding: 5px;
	}
	#footer_sitemap .itemList li a {
		text-decoration: none;
		padding: 10px;
	}
	#footer_sns {
		float: right;
		width: 500px;
		height: 20px;
		margin:  20px 0 0 0;
		padding: 0 0 0 10px;
		font-size: 12pt;
		text-align: right;
	}
	#footer_sns img {
		width:30px;
		margin:0 5px
	}
	#fc-copyright {
		clear: both;
		width: 100%;
		margin: 10px auto 0 auto;
		padding: 4px 0;
		text-align: center;
		font-size: 10pt;
		line-height: 150%;
		letter-spacing: 0.1em;
	}
	/*---  main contents  ----------------*/
	.contents{
		margin: 10px auto;
		padding: 0px;
		max-width:1100px;
		text-align: center;
	}
	.contents_image{
		width:100%;
		height:400px;
		object-fit:cover;
	}
	.contents_title{
		margin: 10px auto;
		padding: 10px;
		text-align: center;
		font-size: 14pt;
	}
	.contents_text{
		margin: 4px auto 40px auto;
		padding: 4px 20px;
		text-align: left;
		font-size: 13pt;
	}
	.goods_image{
		width:200px;
		height:200px;
		margin:20px;
		object-fit: cover;
		border-radius: 50%;
		border:1px solid #CCCCCC;
	}
	/*---  topics  ----------------*/
	#topics  {
		/* display:none; */
		max-width:800px;
		margin: 80px auto 0 auto;
		padding: 50px 100px 10px 100px;
		font-size: 12pt;
		text-align: left;
	}
	#topics p {
		position: relative;
		text-align: left;
	}
	#topics p span {
		position: relative;
		z-index: 2;
		display: inline-block;
		margin: 0 4.5em;
		padding: 0 1em;
		background-color: #fff;
		text-align: center;
		font-weight: bold;
	}
	.topics  {
		margin: 10px 20px 10px 30px;
	}
	#topics p::before {
		position: absolute;
		top: 50%;
		z-index: 1;
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #999999;
	}


	#topicsList{
		text-align: left;
		max-width:700px;
		margin: 0 auto;
	}
	.topiccsItem{
		clear:both;
		list-style: none;
		margin: 20px 10px;
	}
	.listdate{
		float: left;
		margin: 4px ;
		margin: 10px 0 ;
	}
	.listtitle{
		float: left;
		max-width: 80%;
		margin: 10px 0 ;
		padding-left: 30px;
	}

	/*---  topics modal  ----------------*/

	.modal-wrapper {
		z-index: 999999;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 40px 10px;
		text-align: center
	}

	.modal-wrapper:not(:target) {
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s;
	}

	.modal-wrapper:target {
		opacity: 1;
		visibility: visible;
		transition: opacity .4s, visibility .4s;
	}

	.modal-wrapper::after {
		display: inline-block;
		height: 100%;
		margin-left: -.05em;
		vertical-align: middle;
		content: ""
	}

	.modal-wrapper .modal-window {
		box-sizing: border-box;
		display: inline-block;
		z-index: 20;
		position: relative;
		width: 90%;
		max-width: 800px;
		padding: 30px 20px;
		border-radius: 2px;
		background: #fff;
		box-shadow: 0 0 30px rgba(0, 0, 0, .6);
		vertical-align: middle
	}

	.modal-wrapper .modal-window .modal-content {
		max-height: 80vh;
		overflow-y: auto;
		text-align: left
	}

	.modal-overlay {
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .8)
	}

	.modal-wrapper .modal-close {
		z-index: 20;
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		color: #95979c !important;
		font-size: 20px;
		font-weight: 700;
		line-height: 35px;
		text-align: center;
		text-decoration: none;
		text-indent: 0
	}

	.modal-wrapper .modal-close:hover {
		color: #2b2e38 !important
	}

	/*--- Topics ----------------------------------------------*/
	#topics {
		margin-top: 80px;
		/* border-bottom: solid 1px #999999; */
		padding: 5px 0;
		font-size: 12pt;
		text-align: left;
	}

	#topics p {
		position: relative;
		text-align: left;
	}
	#topics p span {
		position: relative;
		z-index: 2;
		display: inline-block;
		margin: 0 2.5em;
		padding: 0 1em;
		background-color: #fff;
		text-align: left;
		font-weight: bold;
	}
	.topics  {
		margin: 10px 20px 10px 40px;
	}
	#topics p::before {
		position: absolute;
		top: 50%;
		z-index: 1;
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #999999;
	}

	/*---  Superiority  ----------------*/

	table.Superiority {
		/* width: 100%; */
		font-size:0.8em;
		border-collapse: collapse;
		margin: 10px 0;
		text-align: left;
	}
	table.Superiority tr {
		border-bottom: double 1px #FFFFFF;
		background-color: rgba(135, 206, 250, 0.8);
	}
	table.Superiority tr:nth-child(odd) {
		background-color: rgba(185, 206, 250, 0.8);
	}
	table.Superiority tr.head {
		background-color: rgba(0, 0, 139, 1.0);
		color: #FFFFFF;
	}
	table.Superiority th {
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.3em;
		margin: 20px 0;
		padding: 10px 20px;
		font-size: 0.8em;
	}
	table.Superiority td {
		padding: 4px 20px;
		vertical-align: middle;
		text-align: center;
		font-size: 0.8em;
	}
	table.Superiority td.red {
		color: #FF0000;
		/* font-weight: bold; */
		font-size: 0.8em;
	}






	/*---  company  ----------------*/
	#company_info{
		max-width: 900px;
		margin: 20px auto 50px auto;
	}
	table.company {
		width: 100%;
		border-collapse: collapse;
		line-height: 1.5;
		margin: 20px 0;
		font-size:13pt;
		text-align: left;
	}
	table.company tr {
		border-bottom: double 1px #cccccc;
	}
	table.company th {
		font-weight: bold;
		text-align: left;
		min-width:150px;
		font-size: 17px;
		line-height: 150%;
		letter-spacing: 0.3em;
		margin: 20px 0;
		padding: 20px 20px 20px 100px;
	}
	table.company td {
		padding: 20px 20px;
		vertical-align: middle;
	}

	.map_sp {
		display: none;
	}
	.map_pc {
		display: block;
	}

	/*---  legalnotice  ----------------*/
	#legalnotice_info{
		max-width: 900px;
		margin: 20px auto 50px auto;
	}
	table.legalnotice {
		width: 100%;
		border-collapse: collapse;
		line-height: 1.5;
		margin: 20px 0;
		font-size:11pt;
		text-align: left;
	}
	table.legalnotice tr {
		border-bottom: double 1px #cccccc;
	}
	table.legalnotice th {
		font-weight: bold;
		text-align: left;
		min-width:200px;
		font-size: 17px;
		line-height: 150%;
		letter-spacing: 0.3em;
		margin: 20px 0;
		padding: 20px;
		background-color:#eeeeee;
	}
	table.legalnotice td {
		padding: 20px 20px;
		vertical-align: middle;
	}
	
	table.legalnotice td ul {
		list-style:none;
	}
	table.legalnotice td span.title {
		float:left;
		width:200px;
	}
	table.legalnotice td span.detail {
		float:left;
		width:400px;
		margin-left: 10px;
	}

	.map_sp {
		display: none;
	}
	.map_pc {
		display: block;
	}
	
	/*---  privacy  ----------------*/
	#privacy_info{
		max-width: 900px;
		margin: 20px auto 50px auto;
	}
	.privacy_detail{
		margin: 4px 20pxx;
	}
	
	/*---  contact  ----------------*/
	div.tbl_list { margin:20px auto; width:90%; }
	div.tbl_list dl { display: table; width:100%; margin:4px 0 }
	div.tbl_list dl dt { display: table-cell; font-size: 11pt; width:200px; margin:auto 2px ; padding: 10px;  vertical-align: middle; }
	div.tbl_list dl dd { display: table-cell; font-size: 10pt; margin: 2px 0 2px 2px; padding: 20px 10px; }
	div.tbl_list .errMsg { margin:0; padding: 2px 0 6px 4px ;text-align:left; color:#FF0000; }
	.required {
		display:none;
		font-size: 8pt;
		letter-spacing: 0.2em;
		margin: 0 0 0 10px;
		padding: 0 10px;
		background-color: #FF0000;
		color: #FFFFFF;
		border-radius: 10px;
	}


}