@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}


body {
/*    font-family: "明朝体","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; */
    font-family:  cursive,sans-serif; 
    line-height: 1.7;
    color: #432;
    background-color :  rgba(255,255,255,1);
	padding : 0;
	margin : 0 auto;

	}


a {
	color :   rgba(31,78,121,1);
    text-decoration: none;
	}


img {
    max-width: 100%;
	}




h2 {
	font-size : 1.8rem;
    font-family: 'Noto Serif JP', 'Klee One','Hachi Maru Pop',cursive,sans-serif; 
	
	}


h4 {
    font-family:  cursive,sans-serif; 
	}



.top-sec2 h3 ,.top-sec3 h3 ,.top-sec4 h3 ,
.top-sec5 h3 ,.top-sec6 h3 ,.top-sec7 h3 {
	margin : 6vh 1vw 3vh 1vw; 
	border-bottom	: 16px  rgba(221,221,221,1) solid ;
	font-size : 1.5em;
	}



.top-sec2 h4 ,.top-sec3 h4 ,.top-sec4 h4 ,
.top-sec5 h4 ,.top-sec6 h4 ,.top-sec7 h4 {
	margin : 4vh 2vw 1vh 2vw ;
	border-bottom	: 4px  rgba(221,221,221,1) solid ;
	font-size : 1.15em;
	}



.top-sec2 p ,.top-sec3 p ,.top-sec4 p ,
.top-sec5 p ,.top-sec6 p ,.top-sec7 p { 
	padding-left  : 3vw ;
	padding-right  : 3vw ;
	}





/* ----------------------------------------------------- */
/*       ヘッダーとメイン                                */
/* ----------------------------------------------------- */

.top-sec1 {
	position : relative ;
}


.top-sec1-center {
	position : relative ;
	max-width : 1024px;
	margin : 0 auto ;	/* 中央寄せ */
	height: 100vh;	/* ここは配下にabsoluteがあって%指定しているので高さが必要 */
	}



#top-sec1-slideshow {
	}



#top-sec1-slideshow img {

	position : absolute ;
	width : 100%;	/* 親の中では100%にしておく */
	height : 100% ;
	
	top : 0% ;
	left : 0;
	right : 0;
	margin  : 0 auto;  /* 中央寄せにこれも必要 */
	
	
	
/*	border-radius : 0px 0px 1000px 1000px / 0px 0px 50px 50px;		/* 角丸め */
	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 50%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */

	z-index : 8 ;
	opacity : 1.0 ;   /* 透明 */

	}



#top-sec1-slideshow img.active {
	z-index: 10;
	opacity: 1.0;
	}

#top-sec1-slideshow img.last-active {
	z-index: 9;
	}




/* HEADER
------------------------------- */

.top-sec1-header  {
	position : absolute ;
    display: flex;
    justify-content: space-between;

	top : 1%;
	left: 1%;
	right: 1%;

	z-index : 14 ;

	}


.top-sec1-header-logo {
	width : 72px ;
	margin : auto 1%;
	}



.top-sec1-header-nav {
    display: flex;
    flex-wrap : wrap ;
    list-style: none;
    justify-content: space-around ;
	margin : 4% auto;
	padding : 0;
	}


.top-sec1-header-nav li {
	padding-left : 30px;
	}


.top-sec1-header-nav a {
	background-color :  rgba(255,255,255,0.0);
	color: #432;
	margin : 20px 15px 20px 15px;
	
	}


.top-sec1-header-nav a:hover {

/*	background-color :  rgba(49,193,255,0.2);*/
/*	box-shadow: 0px 0px 10px 10px    rgba(49,193,255,0.2);*/
	background-color :  rgba(255,255,255,1);
	box-shadow: 0px 0px 10px 10px    rgba(255,255,255,1);
	
/*	color :  rgba(49,193,255,1); 	*/

	}



.top-sec1-header-tel {
	margin : 2%; 1% 0 0 ;
	padding : 0;

	}


/* ハンバーガーメニュー */

#nav-drawer {
  position: relative;
  display:none;
}


/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}


/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}


/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}


.nav-content-ul	{
	list-style : none ;
	padding-top   : 20px;
	padding-left  : 20px ;
	padding-right : 10px ;
	} 

.nav-content-ul li	{
    margin-bottom: 20px;
    border-bottom: 3px #ddd solid;
	} 

.nav-content-ul a	{   /* 字の上だけでなく全体が押せるように */
	display : block;
	}


/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}




.top-sec1-main {
	position : absolute ;
	top : 30% ;

	/* これによってabsoluteで中央寄せ */
	left: 0;
	right: 0;

	color : rgba(31,78,121,1) ;

	z-index : 12 ;
	text-align : center ;
	}





/* 2020.09.21 SNSアイコン　*/
/* 2020.09.25 SNSアイコンのz-indexを13⇒14(スマホだとリンクが出なかった。)*/

.toppage-sns {
	display : flex ;
	position : absolute ;
	/*基準を画面の左上に*/
	top:  75%;
	right: 8%;
	background-color : rgba(255,255,255,.0);
 	z-index : 14 ;

	}

.toppage-sns-insta {

	width  : 40px;
	height : 40px;
 	padding : 5px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(255,255,255,1);

	}

.toppage-sns-twitter {

	width  : 40px;
	height : 40px;
 	padding : 5px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(29,161,242,1);

	}

.toppage-sns-facebook {

	width  : 30px;
	height : 30px;
 	padding : 5px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(29,161,242,1);

	}



#back-btn {

	position: fixed;	/*基準を画面の左上に*/
	top: 92%;
	right: 2%;			/*余白が入らないように*/
	margin: 0;			/*以下装飾*/
	width :  30px;
	height : 30px ;
	background: rgba(31,78,121,1);
	color	:	rgba(255,255,255,1);
	text-align : center ;
	border-radius : 15px ;		/* 角丸め */

	z-index : 3 ;
	opacity : 0.6 ;
	
	}
	

#back-btn a	{
    display : block ;
    width: 100%;
    height: 100%;
    text-align : center ;
    vertical-align: middle;
    padding-top : 5px;
	color	:	rgba(255,255,255,1);
	
	line-height: 20px;

	
	}






/* お知らせ
------------------------------- */

.top-sec2 {
	margin : 5vh 0 5vh  0;
	}
	

.top-sec2-center {
	max-width : 1024px ;
	display : flex ;
	justify-content : flex-start ;
	margin : auto ;
		
	background-color : rgba(10,210,180,0) ; /* デバッグ用 */
	
	}
	
	
.top-sec2-left {

	width : 256px;
	height : 300px;
	margin-top : 3% ; 
		
	background-color : rgba(31,78,121,1) ; /* デバッグ用 */
	
	}


.top-sec2-left img {
	vertical-align : top ;   /* ★下の隙間の解消 */

	}
	
	
	
.top-sec2-con {

	width : 924px;
	/* padding : 10px 30px 10px 30px ; */
		
	background-color : rgba(10,210,10,0) ; /* デバッグ用 */

	}




/* Main
------------------------------- */

.top-sec3 {
	background: rgba(49,193,255,0.1);
	box-shadow: 0px 0px 70px 70px rgba(49,193,255,0.1); 
	margin : 5vh 0 5vh  0;
	}


.top-sec3-center {
	max-width : 1024px ;
	display : flex ;
	justify-content : flex-start ;
	margin : auto ;
		
	background-color : rgba(10,210,180,0) ; /* デバッグ用 */
	
	}
	
	

.top-sec3-left {

	width : 256px;
	height : 300px;
	margin-top : 3% ;
		
	background-color : rgba(255,255,197,1) ; /* デバッグ用 */
	
	}
	

.top-sec3-left img {

	vertical-align : top ;   /* ★下の隙間の解消 */

	}
	


.top-sec3-con {
	width : 924px;

	/* padding : 10px 30px 10px 30px ; */
	background-color : rgba(210,210,180,0) ; /* デバッグ用 */

	}







/* img
------------------------------- */

.top-sec4 {

	background: rgba(255,255,255,1);
	box-shadow: 0px 0px 70px 70px rgba(255,255,255,1); 
	margin : 10vh 0 5vh  0;

	}


.top-sec4-con {
	max-width : 1024px ;
	margin : auto auto 2% auto;
	background-color : rgba(10,210,180,0) ; /* デバッグ用 */
	/* padding : 10px 30px 10px 0px ; */
	}
	
.top-sec4-con h3 {
	margin-right : 30px ;	
	}



.sample-grid {
	display : flex ;
	flex-wrap : wrap;
	margin :  1% 5% 5% 5%;     /* 折り返し個数の調整をこれでやる */
	justify-content : center ;
	}


.sample-grid p {
	margin-top : 0px ;
	text-align : center ;

	}


.sample-item {
	position : relative ;
	max-width : 286px ;
	max-height    : 338px;
	margin :4% 4% 4% 4% ;
	box-shadow: 8px 8px 14px 14px rgba(221,221,221,1);
	z-index : 1 ;
	padding : 1% ;
	background: rgba(149,193,255,0);
}


.sample-item-title {
	margin-left  : 0;
	margin-right : 0;
	text-align : center ;
	font-size : 1.23em;
	border-top		: 2px  #ddd solid ;
	border-bottom	: 2px  #ddd solid ;
	}

.sample-item:hover {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	border-bottom: none;/*線を消す*/
	}


.sample-item : active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
	border-bottom: none;
	}


.sample-item a {
	position : absolute ;	/* 親要素の全体が押せるようにHTML5だとここ書かなくてもいい */
	z-index : 2 ;
	top : 0;
	left :0;
	width : 100%;
	height : 100%;
	}


.sample-item p {		/* 共通的に左余白を取ってあるのでここではクリア */
	margin : auto;
	padding-left  : 1vw ;
	padding-right  : 1vw ;
	font-size : 0.9em;
	}


/* ----------------------------------------------------------------------- */

.top-sec5 {
	background: rgba(49,193,255,0.1);
	box-shadow: 0px 0px 70px 70px rgba(49,193,255,0.1); 
	margin : 10vh 0 5vh  0;
	}


.top-sec5-con {
	max-width : 1024px ;
	margin : auto ;
	}





.top-sec5-con-fig{
	margin-top : 15px;
	text-align:center ;
	}

.top-sec5-con-fig img{
	max-width : 85% ;
	}




/* プロフィール */
.top-sec6 {
	margin : 10vh 0 5vh  0;
	background: rgba(255,255,255,1);
	box-shadow: 0px 0px 70px 70px rgba(255,255,255,1); 
	}


.top-sec6-con {

	max-width : 1024px ;
	margin : auto ;
	}



.toten {
	display : flex ;
	}

.toten img {
	width : 150px;
	height : 150px;
	border-radius : 50% ;
	margin : 10px 10px 10px 10px ;
	}




.tensyu {
	display : flex ;
	}


.tensyu img {
	width : 150px;
	height : 150px;
	border-radius : 50% ;
	margin : 10px 10px 10px 10px ;
	}


.q-btn {

	height : 50px;
	margin-left :30px ;

}


.toiawase-botton {

	margin : 0 ;

  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;

	}


.toiawase-botton:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;

	}


.tokusho-kojinjoho {
	}
	



/* アクセス・お問い合わせ */

.top-sec7 {

	background-color : rgba(255,255,255,1) ; 

	}


.top-sec7-con {

	display : flex ;
	flex-wrap : wrap;
    justify-content: space-between;
    
	max-width : 1024px ;
	margin : auto ;
	padding : 5%;
	
	background-color : rgba(225,25,25,0) ; /* デバッグ用 */
	
	}

.acc-sec-con-text {
	background-color : rgba(225,25,25,0) ; /* デバッグ用 */
	min-width : 35% ;
	}

.acc-sec-con-gmap {
	min-width : 60% ;
	margin : 1% ;
	padding : 1% ;
	
	
	background-color : rgba(225,25,25,0) ; /* デバッグ用 */
	
	}

.acc-sec-con-gmap iframe {
	width : 100% ;
	}





/* ----------------------------------------------------- */
/*       パラメータプール                                */
/* ----------------------------------------------------- */



.mihon {
	width : 100% ;
		position : absolute ;
	z-index : 12 ;
	display : grid ;
	grid-template-columns : 1fr 1fr ;

	align-items: center;
	display: flex;
	flex-wrap : wrap;
	flex-direction : column;
    justify-content: space-between;
	justify-content: center;
	justify-content: space-around;
	background-color : rgba(241,246,227,1) ;

	text-align : left ;
	flex-wrap : wrap;
	border-radius : 10px ;		/* 角丸め */
	border-radius : 0px 30px 30px 0px ;	/* 角丸め */
	background-color : rgba(255,255,255,1) ;
	min-height : 100vh ;
	box-shadow: 0px 0px 15px 15px rgba(255,255,255,1) 
    visibility: visible;
    opacity: 1;

	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 80%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */


	grid-template-columns : repeat(3,minmax(300px,1fr)) ;
	/* grid-template-columns : 1fr 1fr 1fr; */


    -webkit-transition: all .2s ease;
    transition: all .2s ease;

    visibility: hidden;
    
    
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/

	}






/* フッター 
------------------------------- */
footer {
	background: rgba(31,78,121,1);
    text-align: center;
    margin : 20px 0 0 0 ;
    padding: 20px 0;

	box-shadow: 0px 0px 30px 45px rgba(31,78,121,1) ; 

    
}

footer p {
    color: #fff;
    font-size: 0.875rem;
}





/* モバイル版
------------------------------- */
@media (max-width: 800px) {

html {
    font-size: 80%;
	}


.top-sec1 {
	height : 100vh;
	}

.top-sec1-center {
	width : 100%;
	height: 92vh;	/* ここは配下にabsoluteがあって%指定しているので高さが必要 */

	}


#top-sec1-slideshow img {
	top : 10% ;
	}

.top-sec1-main {
	top : 30% ;

	}


/* PCは、ロゴ→電話→メニューだが、
   モバイルの時は、メニューを下に落として、
   ロゴ→電話→メニューの縦にする */

.top-sec1-header  {
	position : absolute ;
    display: inline;
/* flex を初期値に戻す。縦にはするが、順番変えるため、column では駄目 */
	top : 1%;
	left: 1%;
	right: 1%;
/*	bottom : 0;	*/

	z-index : 15 ;
	
	}



.top-sec1-header-logo  {
	position : absolute ;

	left : 0;
	right : 0;
	margin : auto ;
	/*left right + marginで中央寄せ*/
	
	background: rgba(249,193,255,0);	/* デバッグ用 */ 

	width : 68px ;

	}



.top-sec1-header-nav {
	position : absolute ;
	top : 18% ;
   	flex-direction : column;
	left : 0;
	right : 0;

    list-style: none;
	align-items: center;
	
  display:none;

	}


.top-sec1-header-tel {
	position : absolute ;
	/* これによってabsoluteで中央寄せ */

	left : 0;
	right : 0;
	/*left right + marginで中央寄せ*/
	text-align : center ;
	top : 14% ;
	
	background: rgba(249,193,255,0);	/* デバッグ用 */ 

	}


#nav-drawer {
  display : inline ;

}





.top-sec2-center {
	width : 100% ;
	flex-wrap: wrap-reverse;
	}

.top-sec2-left {
	width : 100%;
	height : 100%;
	}
	
	
.top-sec2-left img{
	width : 100%;
	max-height : 256px;
	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 50%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */
	}
	


.top-sec2-con {
	width : 100%;
	margin-bottom : 3vh ;
	}




.top-sec3-center {
	/*flex-direction : column;*/
	flex-wrap: wrap-reverse;
	width : 100% ;
	}

.top-sec3-left {
	width : 100%;
	height : 100%;
	}

	
.top-sec3-left img{
	width : 100%;
	max-height : 256px;
	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 10%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */
	}


.top-sec3-con {
	width : 100%;
	margin-bottom : 3vh ;
	}



.toten {
	flex-direction : column;
	}
	
.toten img {
	width : 100px;
	height :100px;
	}
	
.tensyu {
	flex-direction : column;
	}

.tensyu img {
	width : 100px;
	height :100px;
	}



}