@charset "UTF-8";
/*-------	. =Reset　---------*/
* {	margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6,hr,th,em {font-style: normal;font-weight: normal;font-size:16px;}
ul,ol,li {list-style: none;}
table {border-collapse:0;border-spacing: 0;}
th,td{letter-spacing: normal;}
img,img a,a img {border: 0;vertical-align:middle;}
a {text-decoration: none;color:#000;}
a:hover {filter: alpha(opacity=70);opacity:0.7;}
img{width:100%;
	-webkit-backface-visibility: hidden;} /*クロームボケ*/
hr{border:none;height: 0px;
	border-bottom:1px solid #666;}
/*----clearfix---*/
.clear {clear: both;}
.cf:after {
 content: "";
 clear: both;
 display: block;}
/*　space */
.mb20 {margin-bottom: 20px ;}
.mb40 {margin-bottom: 40px ;}
/*文字*/
.txt_l{text-align: left;}
.txt_r{text-align: right;}
.txt_c{text-align: center;}
.hide{display: none}
.sp{display: none}
@media only screen and (max-width: 767px) {
	.pc{display: none}
	.sp{display: block}
}
/* Lora */
@font-face {
  font-family: 'Lora';
  src: url('../font/Lora-Regular.ttf') format('truetype'); /* ttf - Safari, Android, iOS */
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
@font-face {
  font-family: 'Lora_semibold';
  src: url('../font/Lora-SemiBold.ttf') format('truetype'); /* ttf - Safari, Android, iOS */
  font-weight:600;}
@font-face {
  font-family: 'Lora bold';
  src: url('../font/Lora-Bold.ttf') format('truetype'); /* ttf - Safari, Android, iOS */
  font-weight:700;}

/*-----------------------body 〜 head---------------------------*/
html {scroll-behavior: smooth;}
body{
	color:#000;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.08em;
	font-family:'Lora', "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","游明朝", YuMincho, serif;
	-webkit-text-size-adjust: 100%; /*モバイルテキスト自動拡大アルゴリズム制御*/
	background-color: #FFF;
    position: relative}

/*----------------------- header ---------------------------*/
header {
    position: fixed;top: 0;left: 0;
    width: 100%;height: 130px;
    background-color:rgba(255,255,255,0.9);
    z-index: 10}
.head_logo{
    position: static;
    height: 130px;
    padding:45px 0 0 50px;box-sizing: border-box;
    z-index: 10}
.head_logo h1{width:102px}
@media only screen and (max-width: 767px) {
    header {height:80px}
	.head_logo{
        height: 80px;
        padding:23px 0 0 5%}
    .head_logo h1{width:80px}
}
/*----- ハンバーガー -----*/
/* ボタン */
.navToggle {
    display: block;
    position: absolute;
    right:50px;
	top: 42px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 99999;
    background-color: transparent;
    text-align: center;}
@media only screen and (max-width: 767px) {
	.navToggle {top:21px;right:4%}
}
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 24px;
    border-bottom: solid 1.5px #000;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
.navToggle span:nth-child(1) {top: 10px;}
.navToggle span:nth-child(2) {top: 20px;}
.navToggle span:nth-child(3) {top: 30px}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    border-bottom: solid 1px #fff;
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    border-bottom: solid 1px #fff;
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}



/*---------  ドローメニュー  ---------*/
.globalMenu {
    position: fixed;
    top: 0;
    left: 0;
    color: #fff;
    background: #000;
    width: 100%;
	height: 100vh;
    padding:50px;
    transform: translateY(-100%);
    transition: all 0.6s;
    z-index: 9999;
}
/* このクラスを、jQueryで付与・削除する */
.globalMenu.active {
    transform: translateY(0%);
}
.globalMenu_logo{
	margin-bottom:50px;
	width: 101px
}
.gmenu{
    font-size: 14px;
    line-height: 1;
    font-family: 'Lora';
    webkit-font-smoothing: antialiased; /* フォントを細めに */
    -moz-osx-font-smoothing: grayscale; /* フォントを細めに */
    margin-bottom: 60px}
.gmenu li{margin-bottom: 24px}
.gmenu a{color: #fff}
.hnav_sns img{width: 18px;margin-right: 16px}

@media only screen and (max-width: 767px) {
    .globalMenu {padding:24px 5% 40px}
    .globalMenu_logo{width: 80px}
}

/*  add 2023 header & top  */
.main.top2{margin:130px auto 0}

.header{display: flex;justify-content: space-between;width: calc(100% - 130px)}
.head_nav{ display: flex;padding:47px 0px 16px 30px;box-sizing: border-box;}
.head_nav ul{display: inline-block;margin-right: 20px}
.head_nav li{display: inline-block;margin: 0 35px}
.head_nav li a{text-decoration: underline;text-underline-offset: 5px;text-decoration-thickness:1px}

.top_nav_sns{ font-size: 12px;margin-top:3px}
.top_nav_sns span{padding-top:1px}
.top_nav_sns a img{ width: 18px;margin-left: 15px}

.copyright{font-size:9px;letter-spacing: 0;font-feature-settings: 'palt'}

.globalMenu2 .gmenu{padding-left:80px;font-size: 17px}
.globalMenu2 .gmenu li{margin:30px 0 0}
.globalMenu2 .gmenu li.second{font-size: 14px;margin-top: 14px}
.globalMenu2 .hnav_sns{padding-left:80px}
.copyright.sp{display: none}
@media only screen and (max-width:1300px) {
    .head_nav li{margin: 0 14px;font-size:15px}
    
}
@media only screen and (min-width:768px) and (max-width:1100px){
    .header{width: calc(100% - 110px)}
    .head_nav{padding-left:10px}
    .head_nav li{margin: 0 10px;font-size:12px}
    
    .top_nav_sns{ font-size:11px;width:168px;margin-top: 4px}
    .top_nav_sns a img{margin-left: 14px}
}
@media only screen and (max-width: 767px) {
    .main.top2 {margin: 80px auto 0}
    .head_nav.pc{display: none}
    
    .top_nav{
        position:static!important;display: flex;justify-content: space-between;
        background:#fff;padding:50px 20px 20px 0px}
    .top_nav ul{display: inline-block}
    .top_nav li{display:block;text-align: left;margin: 0 35px 18px;font-size: 15px}
    .top_nav li a{text-decoration: underline;text-underline-offset: 5px;text-decoration-thickness:1px}
    .top_nav li.pc{display: none}
    .top_nav_sns{
        width: 18px;
        padding:80px 0 0;margin: 10px 0 0;
        -webkit-writing-mode: vertical-rl; 
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
        position:relative}
    .top_nav_sns span{
        position: absolute;top:0;left:-3px}
    .top_nav_sns a{margin-bottom:15px}

    .globalMenu2 .gmenu{padding-left:0;margin-bottom:50px}
    .globalMenu2 .hnav_sns{padding-left:0}
    .globalMenu_logo{width:100px}
    .copyright.sp{display:block; text-align: center}
}



/*-----------------------ページトップ---------------------------*/
#pagetop{
    /*display: none*/
	position: fixed;
	z-index: 100;
	bottom:40px;
	right:60px;
	width: 20px;
    z-index: 10}
@media only screen and (max-width: 767px) {
    #pagetop{
        position: fixed;
        bottom:20px;
        right:5%}
}
/*----------------------- フッター ---------------------------*/
footer{
    margin-bottom: 40px;
    text-align: center
}
/* ご相談はこちらから */
.foot_contact_area{
    width: 90%;
    max-width: 720px;margin: 0 auto 350px;
    border: 2px solid #000;
    background: #f2f2f2;
    padding:40px 16px 30px;
    box-sizing: border-box;
}
.foot_contact_area h3{
    font-size: 20px;
    letter-spacing: 0.1em;
    margin-bottom: 20px
}
.foot_contact_txt{
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 55px
}
.foot_contact_area a{
    display: inline-block;
    width: 284px;
    height: 68px;
    line-height: 68px;
    font-size: 16px;
    background: #000;
    color: #fff;
    letter-spacing: 0.25em;
}
/* 404 */
.error404 .foot_contact_area{display: none}
.error404 section{text-align: center}
.error404 section a{
    padding-botom:2px;border-bottom: 1px solid #aaa}


@media only screen and (max-width: 767px) {
    footer{margin-bottom: 20px}
    .foot_contact_area{margin: 0 auto 150px}
    .foot_contact_area h3{margin-bottom: 15px}
    .foot_contact_txt{
        text-align: justify;
        margin-bottom: 35px}
    .foot_contact_area a{
        width: 100%;
        max-width: 300px}
}


/*----------------------- パンくず ---------------------------*/
.breadcrumbs {
    width: 90%;
    max-width: 1100px;
    margin:130px auto 40px;
    font-size:12px;line-height: 1.4}
.breadcrumbs li{display:inline;padding:0;margin:0;}
.breadcrumbs li + li:before{
    content:"＞"; 
    padding: 0 8px 0 5px;
    vertical-align: top;}
.breadcrumbs a {color:#000;}
.breadcrumbs a:hover {opacity:.5}

@media only screen and (max-width: 767px) {
    .breadcrumbs {margin:80px auto 20px;font-size:9px}
}

/*----------------------- section.main --------------------------*/
.top_main{margin:130px auto 85px}
.main{margin:0 auto 226px}

@media only screen and (max-width: 767px) {
    .top_main{margin:80px auto 28px}
    .main{margin:0 auto 96px}
}

/*----------------------- 下層ページ共通 ---------------------------*/
.pageTtl_e{
    text-align: center;
    max-width: 1100px;
	margin: 0 auto 80px;
	background: #f2f2f2;
    padding:60px 0 70px;}
.pageTtl_e h2{
	display: inline-block;
	font-size: 48px;
	line-height: 1.4;
	border-bottom: 1px solid #000
}
.pageTtl_j h2{
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.35em;
    margin-bottom: 80px}

.w1100{width: 90%; max-width: 1100px;margin:0 auto}
.w1040{width: 90%;max-width: 1040px;margin:0 auto}
.w960{width: 90%;max-width: 960px;margin:0 auto}

@media only screen and (max-width: 767px) {
    .pageTtl_e{
        margin: 0 auto 40px;
        padding:36px 0 40px}
    .pageTtl_e h2{font-size: 28px}
    .pageTtl_j h2{font-size: 18px;letter-spacing: 0.1em;margin-bottom:40px}
}





/*----------------------- Single page navigation ---------------------------*/
.single .pageTtl{
    max-width: 1100px;
	margin: 0 auto 80px;
	background: #f2f2f2;
	padding:60px;
}
.single .pageTtl h2{
	display: inline-block;
	font-family: 'Roboto';
	font-size: 48px;
	line-height: 1.4;
	font-weight: bold;
	border-bottom: 4px solid #000
}
.navigation{
	width: 100%;
	max-width: 420px;
	font-size: 14px;
	margin:150px auto}
.navigation a{color: #000}
.screen-reader-text{display: none}
.nav-links:after {
 content: "";
 clear: both;
 display: block;}
.nav-links div{
	display: inline-block;
    position: relative}

/* NEXT 矢印マーク（ → ） */
.nav-next {
    float: right;
    padding-right: 35px}
.nav-next::before {
	background-color: #000;
	content: "";
	height: 1px;
	position: absolute;
	bottom: 14px;
	right: -6px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: all ease-in-out 0.4s;
	width: 25px;
	}
.nav-next::after {
	border-top: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid #000;
	content: "";
	position: absolute;
	bottom: 12.5px;
	right: 0px;
	transition: all ease-in-out 0.4s;}
/* PREV 矢印マーク（ ← ） */
.nav-previous {
    float: left;
    padding-left: 33px}
.nav-previous::before {
	background-color: #000;
	content: "";
	height: 1px;
	position: absolute;
	bottom: 13px;
	left: 14px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: all ease-in-out 0.4s;
	width: 25px;
	}
.nav-previous::after {
	border-top: 3px solid transparent;
	border-right: 5px solid #000;
	border-bottom: 3px solid transparent;
	content: "";
	position: absolute;
	bottom: 11px;
	left: 0px;
	transition: all ease-in-out 0.4s;}
.nav-links div.nav-list{
    display: block;
    position: absolute;
    left:calc(50% - 30px);
}
@media only screen and (max-width: 767px) {
	.navigation{
		margin: 80px auto}
}



/*----------------------- front page --------------------------*/
.top{position: relative}
.top_video{
    line-height: 0;
    position: relative;
    width: calc(100% - 120px);
    margin-left:120px;margin-bottom: 80px;
    z-index: -1}
.top_video video{
    width: 100%;
    height: auto;
    z-index: -1}

.top_sns{
    z-index: 10;
    font-size: 12px;
    -webkit-writing-mode: vertical-rl; /*縦書き*/
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
    position: absolute;
    bottom:0;
    left:50px;
    width: 18px}
.top_sns a{
    z-index: 10;
    margin-top:14px}
@media only screen and (max-width: 767px) {
    .top_video{ 
        z-index: -1;
        width: 95%;
        margin-left:5%;margin-bottom:0}
    .top_video video{
        width: 100%}
    .top_video video{
        animation: fadeIn 4s ease 0s 1 normal;
        -webkit-animation: fadeIn 4s ease 0s 1 normal;}
    .top_sns{
        margin: 18px 5%;
        position: static}
}
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} 
    60% {opacity: 100}
    100% {opacity: 0}}
@-webkit-keyframes fadeIn { /*古いブラウザ用*/
    0% {opacity: 0}
    100% {opacity: 1}}



/*210915追加*/
.btnBlock{text-align:center;margin-bottom:50px;}
.btn01_wh,
.btn02_bk{margin:20px 10px;text-align: center;display:inline-block;}
.btn01_wh a,
.btn02_bk a{display:inline-block;width:284px;height:68px;line-height:68px;font-size:16px;border:1px solid #000;}
.btn01_wh a{background:#fff;color:#000;}
.btn02_bk a{background:#000;color:#fff;}
.btn02_ls25{letter-spacing:.25em;}


#contactForm{margin-top:-80px;padding-top:80px}