@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 :   rgba(68,51,34,1);	/* 殆ど黒なこげ茶 */
    background-color :  rgba(255,255,255,1);
	padding : 0;
	margin : 0 auto;

	}


a {
	color :   rgba(31,78,121,1);	/* 藍色っぽい */
    text-decoration: none; 
   
   	}

li {
	color :   rgba(31,78,121,1);	/* 藍色っぽい */
   
   	}



img {
    max-width: 100%;
	}


p { 
    max-width: 100%;
	margin : 1px 1px 1px 5px;
	padding : 1px;
	color :   rgba(31,78,121,1);	/* 藍色っぽい */
	}


#top-sec2 h3 ,#top-sec3 h3 ,
#top-sec4 h3 ,#top-sec5 h3 ,
#top-sec6 h3 ,#top-sec7 h3 ,
#tok-sec2 h3 ,#tok-sec3 h3 {
	border-bottom	: 6px  #ddd solid ;
	
	}


#top-sec2 h4 ,#top-sec3 h4 ,#top-sec4 h4 ,#top-sec5 h4 ,#top-sec6 h4 ,#top-sec7 h4 ,
#tok-sec2 h4 ,#tok-sec3 h4 {

	border-bottom	: 3px  #ddd solid ;
	margin-top : 6% ;
	}



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

#top-sec1 {
	position : relative ;
	height: 100vh;
}



#top-sec1-slideshow img {

	position : absolute ;
	
	top : 0% ;					/* 2022.03.08 10%⇒0% */

	border-radius : 0px 0px 1000px 1000px / 0px 0px 50px 50px;		/* 角丸め */

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

	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: center;

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

	z-index : 14 ;

	}




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


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


.top-sec1-header-nav a {
	background-color :  rgba(255,255,255,0.7);
	color: #432;
	margin : 20px 15px 20px 15px;
	
	/* 20210526 追加 */
	/* 20220308 微妙に変更 */
	/* border: 1px solid rgba(31,78,121,1); */
	border-radius : 7% / 50%;		/* 角丸め */
	padding : 2px 28px 2px 28px ;
	
	}


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

	background-color :  rgba(49,193,255,0.4); 
	color :  rgba(255,255,255,1); 	
	box-shadow: 0px 0px 10px 10px    rgba(49,193,255,0.4); 
	}



/* PCでは非表示 */
#top-sec1-header-logo  {
	display : none;
	}


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

#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-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 : 35% ;

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

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

	z-index : 12 ;
	text-align : center ;
	
	text-shadow:  5px  5px  7px    rgba(34,56,103,0.6),
				 -5px -5px  7px    rgba(34,56,103,0.6),
				 -5px  5px  7px    rgba(34,56,103,0.6),
				  5px -5px  7px    rgba(34,56,103,0.6);
	}


#back-btn {

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

	z-index : 3 ;

	}
	

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




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

#top-sec1	{ 
	background: rgba(255,255,255,1  ); 
	}

#top-sec2	{ 
	background: rgba(255,255,255,1  ); 
	}

#top-sec3	{ 
	background: rgba( 49,193,255,0.1); 
	box-shadow: 0px -100px 25px 25px rgba(49,193,255,0.1) ; 
	}

#top-sec4	{ 
	background: rgba(255,255,255,1  ); 
	box-shadow: 0px 0px 25px 25px rgba(255,255,255,1) ; 
	}

#top-sec5	{ 
	background: rgba(255,255,255,1  ); 
	}

#top-sec6	{ 
	background: rgba( 49,193,255,0.1); 
	box-shadow: 0px -100px 25px 25px rgba(49,193,255,0.1) ; 
	}

#top-sec7	{ 
	background: rgba(255,255,255,1  ); 
	box-shadow: 0px 0px 25px 25px rgba(255,255,255,1 ) ; 
	}


#top-sec2	{ 
	height: 100vh;
	max-width : 800px ;
	margin : auto ;
	padding : 3%;
	}


/* ---------------------------------- */
/* #top-sec3,#top-sec4,#top-sec6 共通 */
/* ---------------------------------- */
#top-sec3,#top-sec4,#top-sec6 {
	height : 100vh ;
	display : flex ;
	flex-wrap : wrap;
	}

#top-sec3 ul,#top-sec4 ul,#top-sec6  ul {
	margin-left : 20px ;
	}

#top-sec3 h3,#top-sec4 h3,#top-sec6 h3 {
	margin-bottom : 20px ;
	border-bottom	: 6px  #ddd solid ;
	}
	

.area-harf {
	width : 50% ;
	display : flex ;
	align-items : center ;	/* 縦位置中央 */
}

.harf-photo img { 
	width : 100% ;
	height :auto;
	object-fit:cover;
	object-position: 0% 100%;
	}

.harf-text {
	width : 85%;
    font-size: 0.9rem;
	margin : 35px;
}




/* ---------------------------------- */
/* #top-sec5                          */
/* ---------------------------------- */


#top-sec5 {

	min-height : 100vh ;
	/* 20210526 写真を正方形にしたので、縦の長さが増えたため、height⇒min-heightへ */
	
	padding : 20px 5px 20px 5px ; ;

    
	/* display : grid  ;						*/
	/* grid-template-columns : 1fr 1fr 1fr ;	*/
	/* justify-items   : center ;				*/
	/* align-items : center ;					*/
	/* gap : 25px ;								*/
	}


.area-wrap {
	max-width : 1024px;
	margin : auto ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
	}



.area-wrap img { 
	width :  240px;
	max-width : 43%;
	height : 160px;    
	object-fit:cover;
	/* object-position: 50% 0%; */

	margin : 10px 10px 30px 10px;

	}



/* ---------------------------------- */
/* #top-sec7                          */
/* ---------------------------------- */
#top-sec7 {
	min-height : 100vh ; 
	display : flex ;
	flex-wrap : wrap;

	/* 20210526 add */
    justify-content: space-around;

	}


.area-wrap7 {
	max-width : 1024px;
	margin : auto ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
	}


.top-sec7-harf {

	background-color : rgba(20,210,180,0) ; /* デバッグ用 */

	display : flex ;
	
	flex-direction : column ;
	align-items : center ;
	justify-content : center ;
	
	margin : 10px 10px 30px 10px;

	width     :  240px; 
	max-width :  40%;

	}


.top-sec7-photo  img { 

	object-fit:cover;
	object-position: 50% 0%; 

	height : 160px;    /* 20210526変更 auto→250px*/



	}




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

	/* border-radius : 0px 0px 1000px 1000px / 0px 0px 50px 50px;	*/	/* 角丸め */
	aawidth :  70px;
	aaheight : 70px ;

	text-align : center;	/* ●ボタンの中のセンタリング */

	}


.konyu-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
	margin-bottom : 4px ;	/* border か消えると、縦幅が変わって周りがつられるので、代わりに埋める */
	}



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



.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;

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

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

	object-fit:none;
	object-fit:cover;
	object-position:20% 20%;

	}






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

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

    
}

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

.tokusho-kojinjoho {
    display : flex ;
	justify-content : center ;
}

.tokusho-kojinjoho a{
    color: rgba(255,255,255,0.4);
    font-size: 0.775rem;
	margin : 10px ;
}









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

html {
    font-size: 90%;
}



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

.top-sec1-main {
	top : 38% ;
	}


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

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

	margin: auto;

	z-index : 14 ;
	
	}


#top-sec1-header-logo  {
	
	display : block;
	width   : 54px;
	opacity : 0.9;
	
	top  : 0;
	position : absolute ;

	left : 0;
	right : 0;
	margin : auto ;
	/*left right + marginで中央寄せ*/

/*

*/

	
	background: rgba(249,193,255,0);	/* デバッグ用 */ 

	
	}


#top-sec1-slideshow img {
	height : 85vh;				/* 2022.03.08 85vh ⇒ 95vh */
	}

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

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

	}






#nav-drawer {
  display : inline ;

}

#nav-content {
	padding : 20px ;
	}

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




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

#top-sec3,#top-sec4,#top-sec5,#top-sec6,#top-sec7 {
	height : auto ;
	}


#top-sec3,#top-sec4,#top-sec6,#top-sec7	{ 
	/* 20210527 box-shadow: none; 	*/
	}



#top-sec4 {
	flex-wrap : wrap-reverse;
		}


#top-sec5 {
	/* background: rgba(49,193,255,0.1); */
	height : auto ;	/* 2段なので100vhだとダメ。 */
	display : flex ;
	flex-wrap : wrap;
	}


.area-harf {
	width : 90% ;
	margin-left  : auto;
	margin-right : auto;
	
}

.harf-text {
	width : 95%;
    font-size: 0.9rem;
	margin : 0x;
}






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



}