@charset "utf-8";
/* CSS Document */
/*==========
 header
=====================================================================*/
header{
	height: 90px;
	width: 100%;
}
.head{
	display: flex;
	justify-content: space-between;
	width: calc(90% - 170px);
	margin: 0 auto 0 5%;
	align-items: center;
	height: 100%
}
.head-rep{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 3vw;
}

.hlogo{
	height: 70px;
	margin: auto 0;
}
.hlogo img{
	height: 100%;
	object-fit: contain;
}

.gnav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.gnav ul li a{
	display: block;
	padding: 0 20px;
	font-family: 'Tempus Sans ITC';
	font-size: 23px;
}


.head-fix{
	position: fixed;
	right: 5%;
	top: 0;
	display: flex;
	align-items: center;
	height: 90px;
	z-index: 999;
}

.hmail,.openbtn{
	width: 65px;
	height: 65px;
	margin: auto 10px;
}
.openbtn{
	cursor: pointer;
}
.hmail img,.openbtn img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: -1;
}

@media(max-width:900px){
	.gnav{
		display: none;
	}
}
@media(max-width:767px){
	header{
		height: 60px;
	}
	.hlogo{
		height: 55px;
		margin: auto 0;
	}	
	.head-fix{
		height: 60px;
	}	
	.hmail,.openbtn{
		width: 50px;
		height: 50px;
		margin: auto 6px;
	}	
}

@media(max-width:450px){
	.hmail{
		display:none;
	}	
}

/*==========
	opne-nav
=====================================================================*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 888;
    /*ナビのスタート位置と形状*/
	top:-200%;
    left:0;
	width:100%;
	height: auto;
	background:url("../img/menu_bg.png");
	background-position: center bottom;
	background-size:contain;
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーション*/
#g-nav ul {
	width: 98%;
	max-width: 500px;
	margin: 100px auto 30px;
}	

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	border-bottom: 1px dotted #888;
}

#g-nav li a{
	text-decoration: none;
	padding:10px;
	padding-left: 50px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'Tempus Sans ITC';
	position: relative;
}
#g-nav li a::before{
	position: absolute;
	content: '';
	width: 35px;
	height: 100%;
	background: url("../img/illust04.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	left: 0;
	bottom: 5px;	
}
#g-nav li a:hover{
	color: #29d8e9;
	background: rgba(229,252,255,.30);
	letter-spacing: 0.3rem;
}

.mobilinfo{
	text-align: center;
	padding-bottom: 80px;
}
.mobilinfo a{
	display: inline-block;
	width: 350px;
	padding: .7rem 2rem;
	text-align: center;
	margin: 0 auto 20px;
	background: #bde5e5;
	border-radius: 10px;
}


/*==========
	f_contact
=====================================================================*/
.foote_top{
	background: url("../img/contact_bg.jpg");
	background-position: center;
	color: #fff;
	z-index: 0;
}
.foote_top::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background:  rgba(0,95,147,.65);
	top: 0;
	left: 0;
	z-index: -1;
}
.cbtn{
	width: 350px;
	background: #fff;
	margin: 0 15px 15px;
	border-radius: 10px;
}
	
.cbtn a{
	display: block;
	font-size: 23px;
	padding: .5rem 0;
	border-radius: 10px;
}
.cbtn a:hover{
	background: rgba(183,219,243,.5)
}

@media(max-width:430px){
	.cbtn{
		margin: 0 auto 15px;
		max-width: 95%;
	}

}
/*==========
	footer
=====================================================================*/
footer{
	padding: 100px 0 30px;
	background: linear-gradient(to bottom,#fff,#fff 40px, #29d8e9 40px, #29d8e9);
	position: relative;
	font-size: 16px;
}
#page-top{
	position: absolute;
	content: '';
	width: 60px;
	height: 60px;
	background: url("../img/pagetop.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}
#page-top a {
	display: block;
	width: 100%;
	height: 100%;
}
.flogo{
	width: 60%;
	max-width: 400px;
	margin: 0 auto 20px;
}
.flogo img{
	width: 100%;
	object-fit: contain;
}
.copy{
	background: #bde5e5;
	text-align: center;
	padding: 5px 0;
	font-size: 13px;
}
@media(max-width:500px){
	.copy{
		padding-bottom: 50px;
	}
}

/*SP footbtn*/
@media(min-width:501px){
	#spnavi{
		display: none;
	}	
}
  #spnavi {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background: #fff;
	border-top: 2px solid #2e3192;
  }
  #spnavi ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #spnavi ul li {
    width: 50%;
    border-right: 1px solid #fff;
  }
  #spnavi ul li:last-child {
    border-right: none;
	background: #29bfe9; 
  }
  #spnavi ul li a {
    display: block !important;
    padding: 5px 0;
    text-align: center;
    color: #29bfe9;
    font-size: 1rem;
    line-height: 2;
  }
  #spnavi ul li:last-child a{
    color: #fff; 
  }
  #spnavi ul li a.sp_tel:before {
    font-family: "Font Awesome 6 Free";
    content: "\f095";
    font-weight: 900;
  }
  #spnavi ul li a.sp_contact:before {
    font-family: "Font Awesome 6 Free";
    content: "\f0e0";
    font-weight: 900;
  }
  #spnavi ul li a span {
    font-size: 1rem;
	margin-left: 5px;  
  }



/*==========
top_slider
=====================================================================*/
#fv{
	padding: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 90px);
}

.fvbg{
	position: absolute;
	content: '';
	width: 20vw;
	height: 20vw;
	right: 5vw;
	top: 0;
	z-index: -2;
}
.fvbg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top_slider {
	position:absolute;
	z-index: 1;
	width: 70vw;
	max-width: 1080px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	bottom:30px;
	left: 48%;
	transform: translateX(-50%);
	box-shadow: 3vw -3vw 0px 0px #29d8e9;
}

/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/slide01.jpg);
}

.slider-item02 {
    background:url(../img/slide02.jpg);
}

.slider-item03 {
    background:url(../img/slide03.jpg);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	aspect-ratio: 16 / 9;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

.slide_illust{
	position: absolute;
	width: clamp(120px,20vw,350px);
	aspect-ratio: 2 / 1;
	bottom:60px;
	right: 8vw;
	z-index: 3;
	
}

@media(max-width:700px){
	.slide_illust{
		right: 2vw;
	}
}

/*==========
	index
=====================================================================*/
.greet{
	background: linear-gradient(#fff, #fff 10%, #bde5e5 10%,#bde5e5 90%, #fff 90%,#fff)	;
}
.greet::before,.greet::after{
	position: absolute;
	content: '';
	width: clamp(100px,15vw,250px);
	aspect-ratio: 2 / 1;
	background:url("../img/illust02.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.greet::before{
	top: 3%;
	left: 5%;
}
.greet::after{
	transform:scaleX(-1);
	bottom: 0;
	right: 5%;
}
.gtitle{
	text-align: center;
	position: relative;
	margin: 30px 0;
	padding-bottom: 15px;
	font-size: 1.5rem;
}
.gtitle::before{
	position: absolute;
	content: '';
	width: 150px;
	height: 2px;
	background: #2e3192;
	bottom:0;
	left: 50%;
	transform: translateX(-50%);
}

.gtxt{
	width: 90%;
	max-width: 600px;
	margin: 0 auto 50px;
}

.img-rb,.img-lt{
	width: 20%;
	max-width: 420px;
	max-height: 60%;
	aspect-ratio: 3 / 5;
	overflow: hidden;
}
.img-rb{
	margin-top: auto;
	margin-bottom: -80px;
}

.img-lt{
	margin-bottom: auto;
	margin-top: -80px;
}


.img-rb img,.img-lt img{
	height: 100%;
	object-fit: cover;
}

.twork_txt{
	padding: 3rem;
	position: relative;
}
.twork_txt._02{
	text-align: end;
}
.twork_txt::before,.twork_txt::after{
	position: absolute;
	content: '';
	background: #2e3192;
}
.twork_txt::before{
	width: 200px;
	height: 1px;
	top: 2rem;
	left: 0;	
}
.twork_txt::after{
	width: 1px;
	height: 120px;
	top: 0;
	left: 2rem;
}
.twork_txt._02::before{
	left: auto;
	right: 0;	
}
.twork_txt._02::after{
	left: auto;
	right: 2rem;
}
.twork_txt h3{
	margin-bottom: 30px;
	padding: 1rem;
}
.twork_txt h3 .itc{
	font-size: 1.7rem;
	display: block;
}
.twork_txt h3 .ja{
	display: block;
	font-size: 16px;
}

.twork_img{
	width: 80%;
	object-fit: contain;
	box-shadow: 20px 20px 0 0 #29d8e9;
}
.twork_img._02{
	box-shadow: -20px 20px 0 0 #29d8e9;
}

@media(max-width:1179px){
	.img-rb{
		display: none;
	}
	.img-rb,.img-lt{
		width: 80%;
		max-width: auto;
		max-height: 350px;
		aspect-ratio: 2 / 1;
		overflow: hidden;
		margin: 0 auto;
	}
	.img-rb img,.img-lt img{
		width: 100%;
	}	
}
@media(max-width:799px){
	.greet{
		background: linear-gradient(#fff, #fff 5%, #bde5e5 5%,#bde5e5 90%, #fff 90%,#fff)	;
	}	
	.twork .h50{
		height: 0;
	}
}
@media(max-width:768px){
	
}


/*==========
	共通
=====================================================================*/
#kfv{
	padding: 30px 0;
    background-color: rgba(0,0,0,0.3);
}
#kfv::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: url("../img/kfvbg.jpg")no-repeat center 30%/cover;
	top: 0;
	left: 0;
	z-index: -1;
}
.pagetitle{
	text-align: center;
	color: #fff;
	font-family: 'Tempus Sans ITC';
	font-size: clamp(30px,3vw,55px);
	letter-spacing: .2rem;
}
.pagetitle .ja{
	display: block;
	font-size: 18px;
	text-shadow: 2px 2px 0 #000;
}

/*==========
	Service
=====================================================================*/
.s_txt h3{
	border-bottom: 1px solid #3a478e;
	padding-bottom: 5px;
	margin-bottom: 30px;	
	color: #3a478e;
}
.s_txt dl{
	display: inline-flex;
	padding-top: 5px;
	padding-left: 1rem;
}
.s_txt dt{
	font-weight: 600;
	color: #3a478e;
	white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 768px),
       (max-width: 685px) {
  .s_txt dl {
    display: block;
  }
}
.grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}




/*==========
	About
=====================================================================*/
.w960{
	max-width: 960px;
	margin: 30px auto;
}
.map{
	width: 90%;
	height: 45vh;
	position: relative;
	margin: 0 auto;
}
.map::after{
	position: absolute;
	content: '';
	width: 50%;
	height: 50%;
	right: -3%;
	top:-5%;
	background: url(../img/frame.svg)no-repeat left bottom/contain;
	transform: scale(-1);
}

.w960{
	position: relative;
}
.w960::before{
	position: absolute;
	content: '';
	width: clamp(110px,20vw,200px);
	aspect-ratio: 2 / 1;
	background: url("../img/illust01.png")no-repeat right top/contain;
	top: -20px;
	right: 0;
}

.about tr{
	border-bottom: 1px outset #eee;
}
.about th{
	padding: 1rem .5rem;
	padding-right: 1rem;
	text-align: end;
	font-weight: 400;
	width: 130px;
}

.about td{
	padding: 1rem;
	padding-left: 2rem;
}

@media(max-width:499px){
	.about th{
		display: block;
		padding: .5rem;
		padding-bottom: 0;		
		width: 100%;
		text-align: left;
		font-weight: 600;
	}
	.about td{
		display: block;
		width: 100%;
		padding-top: .5rem;
		
	}
}








/*==========
	Contact
=====================================================================*/
.contact{
	background: #d4e5e5;
	padding-top: 150px;
}

/*メールフォーム*/
.mailform{
	margin: 0 auto;
	max-width: 960px;
}
.mailform .row{
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
}
.mailform .row:not(.last){
	border-bottom: 1px dotted #005b97;
}
.mailform .row div:nth-child(1){
	width: 28%;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}
.mailform .row div:nth-child(2){
	width: 70%;
	line-height: 1.5;
}
.mailform .row span{
	padding: 5px;
	margin-right: 5px;
	font-size: 11px;
	border-radius: 2px;
	vertical-align: middle;
}
.mailform .row span.hissu{
	color: #fff;
	background:#29bfe9;
}
.mailform .row span.ninni{
	background: #f9f5f4;
}
.mailform .row small{
	display: block;
	margin-top: 3px;
}
.mailform .box, .mailform textarea{
	border: 1px solid #ddd;
  	padding: 5px;
  	width: 100% !important;
  	border-radius: 0;
	-webkit-appearance: none;
	margin-bottom: 5px;
	background: #fff;
}
.mailform .box.mini{
	width: 120px !important;
}
.mailform .postal_btn{
	padding: 2px 10px;
	background: #f4f4f4;
	border-radius: 2px;
	margin-left: 5px;
	border: 1px solid #ccc;
}
.mailform .postal_btn:hover{
	opacity: 0.7;
}
.mailform button{
	position: relative;
	display: inline-block;
	padding: .5rem 1rem;
	background:#29bfe9;
	color: #fff;
	transition: all 0.4s;
	text-align: center;
	vertical-align: middle;	
	letter-spacing: 0.1em;
	box-shadow: 2px 2px 0 #1598b7;
	border-radius: 5px;
	width: 90%;
	max-width: 300px;
}
.mailform button:hover{
	transform: translate(2px,2px);
	box-shadow: 0px 0px 0 #1598b7;
}
.mailform button::before{
	font-family: "Font Awesome 6 Free";
	content: "\f0e0";
	font-weight: 700;
	margin-right: 10px;
}

@media (max-width: 750px){
	.mailform .row{
		padding: 20px 0;
		flex-direction: column;
	}
	.mailform .row div:nth-child(1){
		width: 100%;
		margin-bottom: 20px;
	}
	.mailform .row div:nth-child(2){
		width: 100%;
	}
}

/*チェックボックス*/
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label{
    display: block;
	padding-left: 20px;
	position: relative;
	margin-bottom: 15px;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
}
input[type=checkbox] + label::before{
    background: #fff;
    border: 1px solid #999;
    content: '';
    display: block;
	position: absolute;
	top: 55%;
	transform: translate(0,-50%);
  	left: 0;
    width: 15px;
  	height: 15px;
	border-radius: 3px;
}
input[type=checkbox] + label::after{
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    content: '';
    display: block;
    height: 15px;
    left: 8px;
    opacity: 0;
    position: absolute;
    top: 55%;
	margin-top: -10px;
    width: 5px;
	transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
	transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
input[type=checkbox]:checked + label::after{
    opacity: 1;
	transform: rotate(45deg) scale3d(1,1,1);
}
@media (max-width: 750px){
	input[type=checkbox] + label{
		display: block;
	}
}

/*ラジオボタン*/
input[type=radio]{
	display: none;
}
input[type=radio] + label{
    display: inline-block;
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
	margin-bottom: 10px;
	cursor: pointer;
}
input[type=radio] + label::before {
	content: "";
	display: block;
	position: absolute;
	top: 55%;
	transform: translate(0,-50%);
  	left: 0;
    width: 15px;
  	height: 15px;
	background: #f4f4f4;
	border-radius: 100%;
	border: 1px solid #b4b4b4;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
}
input[type=radio]:checked + label::before {
	background-color: #000;
	box-shadow: inset 0 0 0 2px #f4f4f4;
}
input[type=radio]:focus + label::before{
	outline: none;
	border-color: #000;
}
input[type=radio]:disabled + label::before {
	box-shadow: inset 0 0 0 2px #f4f4f4;
	border-color: #b4b4b4;
	background: #b4b4b4;
}
input[type=radio] + label:empty::before{
	margin-right: 0;
}
@media (max-width: 750px){
	input[type=radio] + label{
		display: block;
	}
}


.contact_info ul li{
	margin-bottom: 5px;
	text-align: center;
	font-size: 0.9rem;
}

/*プライバシーポリシー*/
.privacy{
}
.privacy li{
}
.privacy li .privacy_wrap{
	
}
.privacy li .privacy_wrap .privacy_subject{
	text-align: center;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
	text-decoration: underline;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.privacy li .privacy_wrap .privacy_subject:hover{
	text-decoration: none;
}
.privacy li .privacy_wrap .privacy_subject.area_close{
}

/*アコーディオンで現れるエリア*/
.privacy li .privacy_wrap .privacy_box{
	position: relative;
	display: none;/*はじめは非表示*/
	padding: 20px;
	background-color: #fff;
	margin-top: 5px;
}

.privacy_flame{
	height: 250px;
	overflow-y: scroll;
}
.privacy_flame p{
	padding: 10px;
	font-size: 0.8rem;
}
.privacy_flame p span{
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
}
.privacy_flame p span::before{
	content: "■";
	display: inline-block;
	font-size: 0.6rem;
	margin-right: 0.5em;
	transform: translateY(-2.5px);
}
.privacy_flame ul li{
	font-size: 0.8rem;
}

/*スクロールバー*/
.privacy_flame::-webkit-scrollbar{
    overflow: hidden;
    width: 1px;
    background: #fafafa;
}
.privacy_flame::-webkit-scrollbar-button {
    display: none;
}
.privacy_flame::-webkit-scrollbar-thumb, .privacy_flame::-webkit-scrollbar-corner {
    background: #433c2e;
}