@charset "UTF-8";
/*
Author: 株式会社メックコミュニケーションズ
Author URI: http://www.mec-com.co.jp
*/


/*  CSS Index
--------------------------------------------------------------
ヘッダーのロゴは縦の長さで横幅を自動調整します。
比率に注意してください。
--------------------------------------------------------------
@media print, screen and (min-width: 768px) {pc/print}
@media screen and (max-width: 767px) {sp}
1 : base
 	  : body
 	  : frame(max-width:1220px)
 	  	  : frame.sp0
 	  : clearfix
 	  : accordion
 	  : pc/sp
2 : header
 	  : header_logo
 	  : header_contact
3 : main
 	  : article
4 : footer
 	  : pagetop
 	  : footer_nav
 	  : footer_logo
 	  : copyright
 	  : nihondata
-----------------------------------------------------------------------------------------*/


/*base
-----------------------------------------------------------------------------------------*/
*{
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	font-family: "Zen Maru Gothic",serif;
	font-weight: 500;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	height:100%;
	font-size:10px;
}
body{
	color:#000;
	background:#FFF;
	text-align:center;
	font-size:1.8rem;
	line-height:1.5;
	height:100%;
	min-width:400px;
	-webkit-text-size-adjust:none;
}
body {
   -webkit-text-size-adjust: 100%;
   overflow-wrap: break-word;
   word-wrap: break-word
}
body * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
}
ruby{
	ruby-position:under; 
}
ruby rt{
	margin:5px 0;
	letter-spacing:1px;
}
img{
	border-width: 0px;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
	width /***/:auto;
}
* html img{
	border-width: 0px;
	vertical-align: top;
	padding:-1px;
}
*:first-child+html img {
	border-width: 0px;
	vertical-align: middle;
	padding:-1px;
}
h1,h2,h3,h4,h5,h6,p,ul,dl,input,table,figure,ol,.dot{
	font-size:1.8rem;
	line-height:1.5;
	margin:0;
}
ul > li,
dl > dt,
dl > dd{
	font-size:inherit
}
span{
	font-weight:inherit;
	display:inline-block;
	text-decoration:inherit;
}
em{
	font-weight:700;
	font-style:inherit;
	color:var(--color_notice);
}
strong{
	font-weight:700;
}
a{
	color:inherit;
	font-weight:inherit;
	text-decoration: none;
	outline:none;
	-webkit-text-decoration-skip: none;
}
a:hover {
	text-decoration: none;
	outline:none;
}
a:link,a:visited,a:hover,a:active {
	outline:none;
}
hr{
	border:none;
	border-bottom:1px solid rgba(0,0,0,0.2);
	margin:70px 0;
}
@media screen and (max-width: 767px) {hr{margin:30px 0;}}
#wrapper{
	width:100%;
}
/*-------------------------frame*/
.frame{
	max-width:1220px;
	margin:0 auto;
	text-align:left;
	position:relative;
	padding:0 30px;
	z-index:20;
}
@media screen and (max-width: 767px) {
.frame{padding:0 25px;}
.frame.sp0{padding:0;}
}
/*-------------------------clearfix*/
.clearfix::after{
	display: block;
	clear: both;
	content: "";
}
/*-------------------------accordion*/
.accordion{
	display:none;
}
.accordion.open{
	display:block;
}
.acc_btn{
	cursor:pointer;
}
/*-------------------------pc/sp*/
@media screen and (max-width: 767px) {#wrapper .pc{display:none;}}
@media print, screen and (min-width: 768px) {#wrapper .sp{display:none;}}



/*header
-----------------------------------------------------------------------------------------*/
#wrapper{
	--hh:100px;/*ヘッダーの高さ*/
	padding-top:var(--hh);
}
header{
	z-index:1000;
	width:100%;
	text-align:center;
	max-width:100%;
	min-width:400px;
	position:fixed;
	padding:0 50px;
	top:0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	height:var(--hh);
	backdrop-filter: blur(5px);
	background:var(--color_sora);
	transition:all 0.3s;
}
#wrapper.scroll header{
	background:rgb(255,255,255,0.8);
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
@media screen and (max-width: 767px) {
	#wrapper{--hh:60px;}
	header{padding:0 10px;}
}
/*-------------------------header_logo*/
.header_logo{
	transition:all 0.3s;
	margin-right:auto;
	padding-left:5px;
}
.header_logo:hover{
	transform:scale(108%);
}
@media screen and (max-width: 767px) {
	.header_logo{width:100px;}
}
/*-------------------------header_contact*/
.header_contact a.btn{
	width:280px;
	height:46px;
	border-radius:30px;
}
.header_contact a:hover{
	transform:scale(105%);
}
@media screen and (max-width: 767px) {
	.header_contact a.btn{width:200px;height:40px;font-size:1.6rem;}
}




/*main
-----------------------------------------------------------------------------------------*/
main{
	display:block;
	position:relative;
	z-index:0;
	margin-top:-1px;
}
article{
	width:100%;
	position:relative;
	overflow:hidden;
}



/*footer
-----------------------------------------------------------------------------------------*/
footer{
	position:relative;
}
/*-------------------------pagetop*/
.pagetop a{
	position:fixed;
	bottom:0;
	right: 0;
	z-index:20;
	width:80px;
	height:80px;
	background:#6DC3FF80;
}
.pagetop a:hover{
	background:#6DC3FF;
}
@media screen and (max-width: 767px) {
	.pagetop a{width:50px;height:50px;}
}
/*-------------------------footer_nav*/
.footer_nav{
	padding:10px;
}
.footer_nav{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:1em;
}
.footer_nav li{
	font-weight:400;
}
.footer_nav li a{
	display:block;
	padding:0.5em;
	border-radius:5px;
}
.footer_nav li a:hover{
	background:#E6E6E6;
}
/*-------------------------footer_logo*/
.footer_logo a{
	display:inline-block;
	transition:all 0.3s;
}
.footer_logo a:hover{
	transform:scale(108%);
}
/*-------------------------copyright*/
.copyright{
	font-weight:400;
	display:block;
}
.copyright a:hover{
	text-decoration:underline;
}
/*-------------------------nihondata*/
.nihondata{
	background:#0b2592;
	color:#FFF;
}