@charset "utf-8";
/* body 基本設定（共通：common）
------------------------------------------------------------*/
*{
outline:none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd
{
margin: 0;
padding: 0;
}
body{
line-height: 1.7;
		color: #5e5d5c;
}
a{
color: #333333;
text-decoration: none;
}

a:hover{
color: #8ACBCF;
text-decoration: underline;
}
a[href^="tel:"] {
pointer-events: none;
text-decoration: none;
 }
h1, h2, h3, h4, h5, h6{
font-weight:normal;
line-height:1;
}
ol, ul {
list-style: none;
 margin: 0;
 padding: 0;
}
img,figure{
max-width:100%;
height:auto;
vertical-align:middle;
border:0;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;/* smoothスクロール */
}
/* ___________________________________________________
 FONT CSS＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿*/
	/* font
==============================================
ゴシック：Noto Sans Japanese（google）
明朝：Noto Sans JP Medium（google）
=============================================== */
body{
  font-weight:200 ;
}
body,
h2,.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight:400 ;
  font-style: normal;
}
h3,.noto-serif-jp
{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
margin: 0;
}
:root {
--size-11: clamp(11px, calc(11px + (31 - 11) * ((100vw - 375px) / (1180 - 375))), 31px);
--size-13: clamp(14px, calc(14px + (22 - 14) * ((100vw - 375px) / (1180 - 375))), 22px);
--size-14: clamp(14px, calc(14px + (32 - 14) * ((100vw - 375px) / (1180 - 375))), 32px);
--size-15: clamp(15px, calc(15px + (28 - 15) * ((100vw - 375px) / (1180 - 375))), 28px);
--size-16: clamp(15px, calc(15px + (22 - 15) * ((100vw - 375px) / (1180 - 375))), 22px);
--size-17: clamp(18px, calc(17px + (50 - 18) * ((100vw - 375px) / (1180 - 375))), 50px);
--size-18: clamp(18px, calc(18px + (32 - 18) * ((100vw - 375px) / (1180 - 375))), 32px);
--size-19: clamp(18px, calc(18px + (23 - 18) * ((100vw - 375px) / (1180 - 375))), 23px);
--size-20: clamp(20px, calc(20px + (60 - 20) * ((100vw - 375px) / (1180 - 375))), 60px);
--size-21: clamp(18px, calc(18px + (28 - 18) * ((100vw - 375px) / (1180 - 375))), 28px);
--size-22: clamp(22px, calc(22px + (62 - 22) * ((100vw - 375px) / (1180 - 375))), 62px);
--size-36: clamp(36px, calc(36px + (62 - 36) * ((100vw - 375px) / (1180 - 375))), 62px);
}
.size-11 {
  font-size: clamp(11px, calc(11px + (31 - 11) * ((100vw - 375px) / (1180 - 375))), 31px);
}

/* header  固定
------------------------------------------------------------*/
header{
position: fixed;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  width: 100%;
  height: 4.2rem;
  z-index: 10; 
  overflow: hidden;
}
/* ロゴマーク&hamburgerbuttonのlayout
------------------------------------------------------------*/
.headerArea{
position: relative;
}
/* ロゴマーク
------------------------------------------------------------*/
h1{
padding: 1rem 0rem 1rem 1rem;
width:10rem;
height: auto;
}
div.pcLogo{
display: none;
}
/* タイトル
------------------------------------------------------------*/
h2 span{
color:#999999;
}
h2{

}
h3{
line-height: 1.2;
margin-bottom: 1rem;

}
/* ナビゲーションのボタン（ハンバーガーボタン）
------------------------------------------------------------*/
/*hanbargar*/

nav {
  margin: 0 0 0 auto;
  width: 150px;
  padding: 0.5rem;
  position: fixed;
  top:0rem;
  right:1rem;
  z-index: 100000;
  height: 4rem;
}

.btn {
  text-align: right;
}

.btn a {
  display: inline-block;
  text-align: center;
}

#open a {
  width: 3.4rem;
  transition: 1s;
}

#close a {
  color: #fff;
  background: #aaaaaa;
  width: 3.4rem;
  line-height: 2.5rem;
  border-radius: 5px;
}

#g_menu li {
  list-style: none;
  padding: 1rem;
  }
#g_menu a {
  color: #fff;
}
#g_menu {
  height: 100%;
  width: 80%;
  padding: 0.5rem 1.5rem 0.5rem;
  background: rgba(0, 0, 0,.6);
  transition: right 1s;
  position: fixed;
  top: 0;
   z-index: 100000;
}
#g_menu:not(:target) {
right: -100%;
}
#g_menu:target {
right: 0;
}
nav a i.fa-regular.fa-envelope{
font-size: 1rem;
color: #FFFFFF;
}
nav li a img{
width: 32px;
height: auto;
}
nav li a img.arrowNAV{
width: 24px;
height: auto;
padding-right: 0.3rem;
}
/*footer*/
footer{
text-align: center;
}
footer p.action{
padding: 3rem 2rem;
}
footer p.action a img{
max-width: 100%;
height: auto;
}
footer p.action a:hover  img{
opacity: 0.5;
}
.footer_logo{
padding: 0rem 2rem;
}
.footer_inner{
padding: 1rem;
}

/* ここからパソコン用画面の設定
------------------------------------------------------------*/
@media screen and (min-width:756px){
.pc_None{
display: none;
}
/*　PC用のheader 部分　高さの変更　*/
header{
height: 4rem;

}
/*　ロゴマークのサイズ変更　*/

a[href^="tel:"]{
    pointer-events: none;
}
/*　ナビゲーションの設定　*/
/*　ハンバーボタン非表示　*/
.btn {
  display: none;
}
 nav {
  margin: 0 0 0 auto;
  width: 80%;
  padding: 0;
 position: fixed;
	top:0;
	right: 0;
		z-index: 1000;
}
 #g_menu {
height: 100%;
width: 100%;
padding: 0;
background-image: linear-gradient(to right, transparent, white);
background-color: unset;
position: static;
}
 #g_menu a {
  color: #333333;
}
nav ul{
display: flex;
justify-content: flex-end;
padding:0;
margin-right: 10%;
}
nav ul li{
width:auto;
}
nav a i.fa-regular.fa-envelope{
color: #333333;
}
/*footer*/
.footer{
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 0 auto;
}
.footer_logo{
width: 50%;
text-align: left;
}
.footer_logo img{
max-width: 50%;
height: auto;
}
.footer_inner{
width: 50%;
padding: 1rem;
text-align: right;
}
}
@media screen and (min-width:1280px){
header div.headerArea{
		width:80%;
		margin:0 auto;
  height: 5rem;
}

}