@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=NTR&display=swap');
/* =====================
  default style
===================== */
img{
	vertical-align:top;
}
em,i{
	font-style: normal;
}
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	letter-spacing: 2px;
}
body{
	line-height: 2;
	font-family:  "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;
	letter-spacing: 0.1em;
	box-sizing: border-box;
	 -webkit-overflow-scrolling: touch;
	overflow-scrolling:touch;
}

.c-btn{display: inline-block;
    min-width: 16rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 100px;
}
.c-btn i{position: relative; top: 2px;transition: .3s;}
.c-btn:hover i{
	padding-left: 40px;
}

/* fakeloader */
#wrap{
    opacity: 0;
}
#fakeloader{
	z-index: 9999;
	background-size: 10%;
}
#fakeloader:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	top: 0;
	left: 0;
}
#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 140px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 5s;
	animation-timing-function: ease;
}
@keyframes loader{
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

/* =====================
  header
===================== */
.menu_btn{
    width: 80px;
    height: 80px;
	border-radius: 80px;
	box-sizing: border-box;
	cursor: pointer;
	z-index: 101;
	padding: 30px 25px 25px 25px;
	position: absolute;
    right: 20px;
	top: 50%;
	transform: translate(0,-50%);
}
.menu_btn span{height: 3px;border-radius: 10px;background-color: #ffffff;}
.menu_btn.stick_trans span{
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	margin: 0;
}
.menu_btn{
	border: 2px solid #ffffff;
	margin: 0px;
	/* box-shadow: 0 2px 20px rgba(0,0,0,.08); */
}
.menu_btn.stick_trans{padding: 34px 25px 20px 25px;}
.menu_btn.stick_trans span:first-child{
	opacity: 0;
}
.menu_btn.stick_trans span:last-child{
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg);
	margin-top: -2px;
}
#sp_nav{
	z-index: 100;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	min-height:  100vh;
	overflow: auto;
}
#sp_nav .sp_nav_inner{
	box-sizing: border-box;
	width: 90%;
	max-width: 1200px;
	padding: 50px 0px 100px 0px;
	margin: 0 auto;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img{
	max-width: 140px;
}
#sp_nav .sp_nav_inner .header-con{z-index: 102;}
#sp_nav .sp_nav_inner .menu__header{
	border-radius: 10px 10px 0px 0px;
	padding: 50px 100px;
	background-color: var(--color5);
}
#sp_nav .sp_nav_inner .l-menu{
	border-radius: 0px 0px 10px 10px;
	padding: 50px 100px 100px;
	background-color: var(--color5);
}
#sp_nav .sp_nav_inner .l-menu ul li a span{position: relative; top: -4px;transition: .3s;}
#sp_nav .sp_nav_inner .l-menu ul li:hover a span{
	 font-size: 15px;
}
.menu_sns .box a{border-radius: 10px;padding: 15px 40px 20px;}
.menu_sns .box a img{max-height: 50px; width:auto; transition: .3s;}
.menu_sns .box a:hover img{
	    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
.menu_sns .box:last-of-type{margin-right: 0px;}

.header{position: fixed;z-index: 99;padding: 0;}
.header-in{position: relative;width: 90%;box-sizing: border-box;height: 120px; border-radius: 100px; padding: 0px;    -webkit-box-shadow: 0 2px 20px rgba(0,0,0,.08); box-shadow: 0 2px 20px rgba(0,0,0,.08); margin-top: 10px;}
.header .tel a,.header .mail a{border-radius: 100px; width: 120px; height:120px;padding-top: 17px;    transition: .3s; -webkit-box-shadow: 0 2px 20px rgba(0,0,0,.08); box-shadow: 0 2px 20px rgba(0,0,0,.08);
box-sizing: border-box;}
.header .tel a:hover,.header .mail a:hover{
  -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
.header .tel a span.icon,.header .mail a span.icon{ width: 30px; margin: 0 auto 5px;}


.logo1{transition: .3s;}
.pc_nav li{transition: .3s;  padding-top: 10px;}
.logo1:hover,.pc_nav li:hover{  -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}

.logo1{max-width: 120px;padding-left: 20px;padding-right: 20px;}

.pc_nav{padding: 0 80px 0 0;box-sizing: border-box;}

/*con1*/
.topTxt1{
	border-radius: 67px;
padding: 11px 25px 9px;
}
.topTxt1 .arrow{
width: 0;
height: 0;
border-left: 16px solid #0000;
border-right: 16px solid transparent;
border-top: 15px solid;
left: 50%;
margin-left: -8px;
bottom: -14px;
}
.con1_squ{bottom: -10px;}
.con1_squ span{display: none;width: 20px;height: 20px;display: block;border-radius: 5px;background-color: transparent;}

/*con2*/
#con2 .topimg2{width: 80%;}
#con2 .topimg2 img,#con2 .topimg3 img{border-radius: 10px;}
#con2 .topimg3{width: 50%; margin: -100px 0px 0px auto;}

/*con3*/
#con3 .title .en{font-size: 30px;}
#con3 .box .img{border-radius: 500px;}
#con3 .box .icon{
	position: relative;
	z-index: 1;
	margin-top: -50px;
}
.con4_list{max-width: 1200px; margin: 0 auto}
.con4_list li{width: 49.5%; box-sizing: border-box;margin-bottom: 1%;border-radius: 20px;}
.con4_list li:nth-of-type(odd){margin-right: 1%; }

.cmstitle .en{font-size: 40px; line-height: 1.0;}

.footer{padding: 150px 0px 100px;}
.f_contact_img{
	height: 400px;
	background-size: cover;
	background-position: center;
}
.f_contact_box{padding: 60px 0px; border-radius: 40px; width: 800px; left: 50%;margin-left: -400px; bottom: -100px;}
.f_contact_btn a{padding: 20px 0px;border-radius: 50px;  transition: .3s;}
.f_contact_btn a:hover{
	    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
.footer_sns .box a{border-radius: 10px;padding: 15px 40px 20px;background-color: var(--color5);}
.footer_sns .box a img{max-height: 50px;width:auto;transition: .3s;}
.footer_sns .box a:hover img{
	    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
.footer_sns .box:last-of-type{margin-right: 0px;}
.footer_sitemap{}
.f_sitemap_inner li{width: 20%;}

.pagetop{
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 30px;
    bottom: 50px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	border-radius: 100px;
}
.pagetop i{
    position: absolute;
    left: 0;
    top: 0;
	text-align: center;
	line-height: 50px;
    display: block;
    width: 50px;
    height: 50px;
	pointer-events: none;
}
.pagetop:hover{
  -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}

/* =====================
  allpage
===================== */
.pagetitle{
padding-top: 180px;
padding-bottom: 50px;
overflow: hidden;
}
.pagetitle h2{font-size: 40px; line-height: 50px;}
.pagetitle_img{top: 0;left: 0;right: 0;bottom: 0;/* opacity: 0.25; */mix-blend-mode: luminosity;background-position: center center;}
.all_contents .content{border-radius: 10px;}

.cate_list li a{border-radius: 100px;}

/*#page7*/
#page7 .info .info__row{
	    padding: 35px 0;
}
#page7 .info .info__row .title{
    width: 320px;
	line-height: 1.6;
}
#page7 .info .info__row .txt{
    flex: 1;
    margin: -8px 0 0;
    line-height: 2.4;
}
#page7 .map iframe{
  width: 100%;
  height: 300px;
  border: none;
}
/*#page8*/
#page8 .contact_tel a {
    padding: 18px 40px;
    border-radius: 50px;
    transition: .3s;
    color: var(--color5);
}
#page8 .contact_tel a:hover,.f_contact_btn a:hover{
	    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
#page8 .contact__form .mail_btn input{
	border-radius: 50px;
	padding: 20px 0px;
}
#page8 .contact__form .mail_btn input:hover{
	    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
#page8 #mail_contact li:before{
	content: "◆";
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 5px;
}
#page8 #form_box .box input::-webkit-input-placeholder,#page8 #form_box .box textarea::-webkit-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
}
#page8 #form_box .box input:-moz-placeholder,#page8 #form_box .box textarea:-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
}
#page8 #form_box .box input::-moz-placeholder,#page8 #form_box .box textarea::-moz-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
}
#page8 #form_box .box input:-ms-input-placeholder,#page8 #form_box .box textarea:-ms-input-placeholder{
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	opacity: 0.8;
}
#page8 #form_box .box input,#page8 #form_box .box textarea{
	outline: none;
	border-style: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#page8 input[type="submit"].btn,
#page8 input[type="reset"].btn{
	-webkit-appearance: none;
	/*background: transparent;*/
	border-radius: 0;
	outline: none;
	border: 1px solid #fff;
	cursor: pointer;
	color: #fff;
}
#page8 input[type="submit"].btn:disabled{
    cursor: default;
}
.g-recaptcha > div{
	margin: 0 auto;
}
#page8 #form_box .box input, #page8 #form_box .box textarea{
	background-color: #f5f5f5;
}


/*#page9*/
#page9 .box{margin-bottom:2px;}
#page9 .box .no{border-radius: 50px;width: 30px; line-height: 30px; }
#page9 .privacy .box:first-of-type{border-radius: 40px 40px 0px 0px;}
#page9 .privacy .box:last-of-type{border-radius: 0px 0px 40px 40px;}

/*#page10*/
#page10 .sitemap li{width: 45%; margin-bottom: 20px;}
#page10 .sitemap li:nth-of-type(odd){margin-right: 5%;}
#page10 .sitemap li a{
	border-radius: 50px;
padding: 20px 0px; }
#page10 .sitemap li a:hover{
	    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}
@media screen and (max-width: 1280px){

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.pagetitle{padding-top: 164px;}
	#sp_nav .sp_nav_inner .menu__header{padding: 8% 8% 6%;}
	#sp_nav .sp_nav_inner .l-menu{padding: 6% 8% 8%;}
	.menu_btn{
		width: 80px;
		height: 80px;
		padding: 30px 29px 24px 29px;
		position: relative;
		right: 10px;
		top: 0;
		transform: translate(0,0);
	}
	.menu_btn.stick_trans{position: static;}
	.menu_btn.stick_trans {
		padding: 33px 29px 24px 29px;
	}
	.header-in{
		height: 94px;
		background: none;
		box-shadow: none;
		padding: 0px;
	}
.menu_sns .box a{border-radius:20px; padding: 20px 20px;}
.menu_sns .box a img{max-height: 26px; }
	.header .tel a, .header .mail a{width: 60px; height: 60px; padding-top:17px;}
	.header .tel a span.icon, .header .mail a span.icon{margin: 0 auto; width: 27px;}
	.header .logo1{ padding-right: 20px;}
	.cmstitle .en{font-size: 30px;}
	.f_contact_box{width: 90%; left: 5%; margin-left: auto;}
	.footer_sns .box a{padding: 15px 30px 20px;}
	.f_sitemap_inner li{width: 30%;}
	.pagetop{right: 20px; bottom: 60px;}
	
#page10 .sitemap li{width: 49%; margin-bottom: 20px;}
#page10 .sitemap li:nth-of-type(odd){margin-right: 2%;}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#sp_nav .sp_nav_inner .l-menu ul li{padding: 3px 0;}
#sp_nav .sp_nav_inner .menu__header .logo img{
	max-width: 200px;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img{
	max-width: 100px;
}
.menu_btn{
	width: 60px;
	height: 60px;
	padding: 20px 18px 20px 18px;	
}
.menu_sns .box a {
    border-radius: 0px;
    padding: 0px;
	border: none;
}
	.menu_btn.stick_trans {
		padding: 23px 18px 15px 18px;
	}
#con2 .topimg3{margin: -30px 0px 0px auto;}
#con3 .title .en{font-size: 20px; font-weight: bold;}
#con3 .title .sl img{width: 30px;}
#con3 .box .img{max-width: 300px; margin: 0 auto; border-radius: 20px;}
#con3 .box .icon img{width: 80px;}
.con4_list li{width: 100%; box-sizing: border-box;margin-bottom: 1%;border-radius: 20px; padding: 20px;}
.con4_list li:nth-of-type(odd){margin-right: 0px; }
.pagetitle{padding-top: 120px;}
.pagetitle h2 {	font-size: 30px; line-height: 40px;}
	#sp_nav .sp_nav_inner{padding: 30px 0px 50px 0px;}
.header-in{height: 68px; background: none; padding: 0px; box-shadow: none;}
.header .tel a, .header .mail a {
    width: 40px;
    height: 40px;
    padding-top: 10px;
}
.header .tel a span.icon, .header .mail a span.icon{width: 20px;  margin: 0 auto;}
.f_contact_box{padding: 60px 20px; box-sizing: border-box;}
.footer_sns .box a {padding: 10px;border-radius: 10px;}
.footer_sns .box a img {
    max-height: 25px;
	vertical-align: middle;
}
#page8 .contact__form .mail_btn input {
    padding: 15px 0px;
}
#page8 .contact__tel .box p{border-left: none;}
#page8 .contact_tel a {display: block;padding: 18px 18px;}
#page9 .privacy .box{background: none; border-radius: none;}
#page10 .sitemap li{width: 100%; margin-bottom: 10px;}
#page10 .sitemap li:nth-of-type(odd){margin-right: 0px;}
#page10 .sitemap li a{padding: 10px 0px; }
	
	.pager li:not(.prev){
		display: none;
	}
}



/* ---------- top_message ---------- */

/* ---------- top_contents1 ---------- */
/* ---------- top_cms ---------- */


/* =====================
  下層ページ
===================== */



@media only screen and (max-device-width:768px ) and (orientation:landscape) {

}
/*====================================
  	IE環境の設定
====================================*/
@media all and (-ms-high-contrast:none){
#page8 .contact_tel a {padding: 22px 40px 14px;}
}