@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/



/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color: #000;
  font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 20px;
  font-variant-emoji: text;
  color: #333;
}
a {
  color: #FFF;
  text-decoration:none;
}
a:hover {
  color: #069;
  text-decoration:underline;
}
a:hover {
	opacity: 0.5 ;
}


#stage {
	width:100%;
	height: auto;
	background-color: #000;
	overflow:hidden;
	position: relative;
}

/*==========================================
 ヘッダーのスタイル
===========================================*/

header {
	width:100%;
  margin: 0 auto;
  text-align:center;
  position: absolute;
  top:0;
  left:0;
}
header h1 {
	text-align: left;
  padding:15px 15px 15px 0px;
  width:100%;
}
header h1 img {
  width:100%;
  max-width:200px;
}




nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: none;
}
 
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}
 
/*ナビゲーション部分*/
 
.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color: #FFF;
  text-decoration:none;
}
 
 

 
.menu{
  text-align:center;
  background-color:rgba(0,0,100,0.5);
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
 
/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
 
}
 
/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
 
}
 
/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
	position: relative;
    /* position: fixed;    bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
  right:0px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 40px;
    border-bottom: solid 4px #FFF;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 32px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}





#topImage {
	width: 100vw;
    height: 100vh;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	-webkit-align-items: center;
  	align-items: center;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	-webkit-justify-content: center;
  	justify-content: center;
  	-webkit-flex-direction: column;
  	-ms-flex-direction: column;
  	flex-direction: column;
	background-image: url(../img/bg.png);
    background-size: cover;
    background-position: center;
}



#imgIn {
	width: 100vw;
    height: 100vh;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	-webkit-align-items: center;
  	align-items: center;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	-webkit-justify-content: center;
  	justify-content: center;
  	-webkit-flex-direction: column;
  	-ms-flex-direction: column;
  	flex-direction: column;
}

#imgIn img {
	width:80%;
	height:auto;
}




/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
div#contents {
	padding: 0px 0 0 0;
	background-color: #000;
}


/*==========================================
 コンテンツエリア -> INFORMATIONのスタイル
===========================================*/
#mainNaiyou {
	margin: 0 auto;
	width: 100%;
	background-image: url(../img/cbn.png);
	background-repeat: repeat;
}

#mainNaiyou2 {
	margin: 0px auto;
	width: 100%;
	background-color: #000;
}

#mainNaiyou3 {
	margin: 0px auto;
	width: 100%;
	background-color: #CCC;
}

#mainNaiyou4 {
	margin: 0 auto;
	width: 100%;
	background-color: #FF0;
	background-image: url(../img/cbn_red.png);
	background-repeat: repeat;
}

#mainKukuri {
	text-align: center;
	margin: 0px auto;
	padding: 20px 8px;
	width:90%;
}
#mainKukuri img{
	width:95%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 0px 0;
	vertical-align: top;
}



#haikei {
	background-image: url(../img/wbg.png);
	background-repeat: no-repeat;
	background-size:cover;
}


#title {
	text-align: center;
	width:100%;
	margin: 0;
	padding: 20px 0 20px;
	color:#FFF;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.2em;
	line-height: 1.3em;
}



#seihin::before {
    display: block;
    height: 2rem;
    margin-top: -2rem;
    content: "";
}
#seinou::before {
    display: block;
    height: 2rem;
    margin-top: -2rem;
    content: "";
}
#kensa::before {
    display: block;
    height: 2rem;
    margin-top: -2rem;
    content: "";
}
#zisseki::before {
    display: block;
    height: 2rem;
    margin-top: -2rem;
    content: "";
}
#mizu::before {
    display: block;
    height: 2rem;
    margin-top: -2rem;
    content: "";
}


#mainKukuri p{
	font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	text-align: center;
	font-weight: bold;
	font-size: 0.7em;
	line-height: 2em;
	letter-spacing: 0.2em;
	padding: 5px 5px 10px;
	color: #FFF;
}
#mainKukuri p a{
	color: #333;
}

#mainKukuri p black {
	color: #F00;
}










#ta01 {
	padding: 20px 0 0 0 ;
}
#table01 {
	padding: 0;
	background-color: #333;
	width: 100%;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
#table01 tr {
	padding: 0;
	color: #FFF;
  border-bottom: 1px solid #CCC;
}

#table01 th {
	letter-spacing: 0.1em;
	font-size: 0.8em;
	padding: 8px;
	border: none;
	color: #FFF;
  width: 25%;
  border-right: 1px solid #CCC;
}

#table01 td{
	font-size: 0.7em;
	padding: 8px 8px 8px 12px;
	border: none;
	color: #FFF;
	line-height: 1.8em;
  border-right: 1px solid #CCC;
  text-align:left;
}


#ta02 {
	padding: 0px 0 45px 0 ;
}
#table02 {
	padding: 0;
	background-color: #333;
	width: 100%;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
#table02 tr {
	padding: 0;
	color: #FFF;
  border-bottom: 1px solid #CCC;
}

#table02 th {
	letter-spacing: 0.2em;
	font-size: 0.7em;
	padding: 8px;
	border: none;
	color: #FFF;
  width: 25%;
  line-height: 1.6em;
  border-right: 1px solid #CCC;
}

#table02 td{
	letter-spacing: 0.1em;
	font-size: 0.7em;
	padding: 8px 8px 8px 12px;
	border: none;
	color: #FFF;
	line-height: 1.4em;
  border-right: 1px solid #CCC;
  text-align:left;
  text-align: justify;
}




#chuu p {
	margin: 0 auto;
	padding: 20px 0;
	text-align: left;
	font-size: 0.6em;
	color: #FFF;
	line-height: 2em;
}






#list li {
	text-indent:-1em;
  padding-left:1em;
  font-variant-emoji: text;
}
	




#clip {
	margin: 0;
	padding: 20px 0 0 0;
	width:100%;
	height:auto;
}
#clip img {
	width:100%;
	height:auto;
	max-width: 250px;
}

.sma{
    display: block;
}



#kPhoto {
	padding: 20px 0;
 }

#kPhoto img {
	width: 100%;
	height: auto;
}

#mPhoto {
	 text-align: center;
	 margin: 0 auto;
	 padding: 0 0px ;
	 max-width: 600px;
	 height:auto;
 }
#mPhoto img {
	width: 90%;
}


#last {
	margin: 0 auto;
	padding: 0;
}
#last p {
	margin:0;
	padding:0 ;
	font-size: 20px;
	line-height: 2em;
	background-color: #09F;
	display: inline;
}


#photo {
	width:100%;
	margin:0 auto;
	padding:0;
}
#text {
	text-align: left;
	padding:15px 0px 0;
	margin: 0 auto;
	width:95%;
	font-size: 0.6em;
	line-height: 1.6em;
	color: #333;
	text-align: left;
	text-align: justify;
  text-justify: inter-ideograph; /* IE用 */
}



.textBig {
	font-size: 1.3em;
}

.small {
	font-size:0.6em;
	color:#0FF;
	letter-spacing: 0.1em;
	line-height: 0.6em;
	}
	
.small2 {
	font-size: 0.9em;
	letter-spacing: 0.1em;
	}
	
.small3 {
	font-size:0.8em;
	color:#0FF;
	letter-spacing: 0.1em;
	line-height: 0.6em;
	}
	


.kasen {
	background: linear-gradient(transparent 70%, #6FF 80%);
      display: inline-block;
	  margin-bottom: 10px;
	  line-height: 1.4em;
	  display: inline;
}

.dotto {
	border-bottom: 1px dotted #FFF;
}


.kakoi {
	margin: 0px;
	padding: 5px 5px 5px 8px;
	border: 1px solid #FFF;
}




#textIcon {
	width: 100%;
	font-size:1em;
}

#textIcon p {
	text-align: left;
	text-align:justify;
}


#textleft {
	width: 100%;
	font-size:0.8em;
	padding: 0 0 30px 0;
}

#textleft p {
	text-align: left;
	text-align:justify;
}

.textleft {
	line-height: 1em;
}


#textleft2 {
	width: 100%;
	font-size:0.8em;
	padding: 0 0 5px 0;
}

#textleft2 p {
	text-align: left;
	text-align:justify;
}

.textleft2 {
	line-height: 1em;
	letter-spacing: 0.1em;
}

.kase {
	border-bottom:1px solid #FFF;
}




#tyouseiKakoi {
	font-size: 18px;
	padding: 0 0 20px 0;
	text-align: left;
}


.midashiIcon {
	display: inline-block;
    width: 15px;
    height: 15px;
	padding: 0px 0px 0px 3px;
	margin: 0px 0 0 0;
    background: url(../img/re.png);
	background-position: bottom left;
    background-repeat: no-repeat;
	/* サイズは画像の元サイズを利用して計算
    　　もちろん、普通にpxで指定しても良い */
    background-size: calc(30px * 0.5)  /* width */
                     calc(30px * 0.5); /* height : 48px , line-heightと合わせる*/
}

.cap {
	font-size: 0.8em;
	color: #999;
	letter-spacing: 0.1em;
}


.yellow {
	color: #FF0;
	margin: 0px auto;
	padding: 0 ;
}

.backcolor {
	background-color:#0CF;
}

.red {
	color: #b40000;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0px auto;
	padding: 0 ;
}

.black {
	color:#000;
}

.otai {
	color:#F8D900;
}


#formChousei {
	padding: 20px 0;
}

/*==========================================
 ページトップへボタンのスタイル
===========================================*/
#pagetopBtn {
    position: fixed;
    bottom: 8px;
    right: 10px;
    z-index: 30;
}
#pagetopBtn img {
	max-width:40px;
	height: auto;
}
/*==========================================
 フッターのスタイル
===========================================*/
footer {
	text-align: center;
	margin: 0 auto;
	color: #FFF;
  background: linear-gradient(to bottom, #6CF, #39F);
  padding: 20px 0 0px;
}

#kyousan {
	width: 90%;
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 20px 0;
}
#kyousan img {
	max-width: 200px;
	height: auto;
}

#sns {
	margin: 0 auto;
	padding:10px 0 20px;
	text-align: center;
}
#sns img {
	max-width: 30px;
	height:auto;
	padding: 0 10px 0;
}

footer p {
	font-size: 0.7em;
	line-height: 1.5em;
}

footer small {
  font-size: 0.7em;
  letter-spacing:0.2em;
  color: #FFF;
}

.ftitle {
	font-weight:bold;
	font-size:1em;
	letter-spacing:0.1em;
}


.fbig {
	font-weight:bold;
	font-size:1.2em;
	letter-spacing:0.2em;
	border: 1px solid;
	margin: 0px;
	padding: 5px 3px 3px 5px;
	line-height: 3em;
}


#copy {
	width:100%;
	padding:25px 0;
	margin:0 auto;
	background-color:#000;
}


/*

@media screen and (min-width : 768px) {
	
  #content {
    margin: 0;
  }
  
  #menu {
    display: block;
  }
  .slicknav_menu {
    display: none;
  }
}
*/
/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width: 769px) {



#seihin::before {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    content: "";
}
#seinou::before {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    content: "";
}
#kensa::before {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    content: "";
}
#zisseki::before {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    content: "";
}
#mizu::before {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    content: "";
}


#topImage img {
	width:60%;
}

 
 
header h1 img {
  width:100%;
  max-width:250px;
}

 
  
  div#contents {
    width:100%;
    margin: 0 auto;
  }
  
 #mainNaiyou {
	  width: 100%;
  }
 #mainKukuri {
	 margin: 0 auto;
	 max-width: 960px;
 }
 
 
 
 
 #tyouseiKakoi {
	 font-size: 25px;
	text-align: center;
}

 
 
 
 .sma{
    display: none;
}
 
 
  #kPhoto {
	 text-align: center;
	 margin: 0 auto;
	 max-width: 100%;
	 height:auto;
	 padding: 30px 0px;
 }
 
 
	 
#links img {
	 max-width: 500px;
	 height: auto;
 }
#photo {
	max-width: 600px;
	height:auto;
}



#text {
	text-align: left;
	padding:15px 0px 0;
	margin: 0 auto;
	width:85%;
	font-size: 0.8em;
	line-height: 1.7em;
	color: #333;
	text-align: left;
	text-align: justify;
  text-justify: inter-ideograph; /* IE用 */
}
.kome {
	font-size: 0.9em;
	line-height: 1em;
	color: #999;
}


#planPhoto {
	width:100%;
}
#planPhoto2 {
	max-width: 600px;
	height:auto;
	margin: 0 auto;
	text-align: center;
}

#kyousan img {
	max-width: 280px;
}
  
}


/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 1600px) {
	


nav{
	color: #FFF;
	background: none;
 display: flex;
}
 
.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:1.3em;
letter-spacing: 0.1em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu li + li {
	padding:0 0px;
	margin:0;
	border-left:1px solid #FFF;
}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}



  #topImage img {
	width:45%;
}
  
  
  
#mainKukuri p{
	font-size: 1.2em;
	line-height: 2em;
	letter-spacing: 0.2em;
}
  
#title {
	padding-bottom: 50px;
}
.textKyouchou {
	font-size: 1.2em;
	letter-spacing: 0.1em;
	background: linear-gradient(transparent 80%, #e5d3aa 20%);
}




#ta01 {
	padding: 40px 0 0 0 ;
}

#table01 th {
  letter-spacing: 0.4em;
  width: 15%; 
}
#table01 td {
	font-size: 16px;
  letter-spacing: 0.1em;
}



#table02 th {
  width: 15%;
}
#table02 td {
	font-size: 16px;
  letter-spacing: 0.1em;
}


#chuu p {
	font-size: 0.9em;
	line-height: 1.7em;
	font-weight: 100;
}

 
  
 #space {
	padding:25px 0 35px;
} 
  
  
  div#contents {
    width: 100%;
    margin: 0 auto;
  }
  
 #mainNaiyou {
	  width: 100%;
  }
  
#kPhoto {
	 text-align: center;
	 margin: 0 auto;
	 max-width: 960px;
	 height:auto;
	 padding: 50px 0px 65px;
 }

#mainKukuri {
	padding: 50px 0;
}











#clip {
	padding: 50px 0;
}
#clip img {
	max-width: 450px;
}

#links {
	padding: 20px 0 0;
}
#links img {
	max-width:700px;
}


#mainNaiyou3 {
	padding: 120px 0;
}

#sayuKukuri {
}
#narabi {
	display: flex;
	flex-direction: row;
	width:920px;
	height:auto;
	margin: 0 auto;
	padding: 0px;
}
#narabi div {
	flex-grow: 1;
	display: inline-block;
	flex-wrap: wrap; /* 折返し指定 */
	color: #333;
	padding: 0 20px;
	margin:0;
	align-items: flex-start; 
}

#narabi2 {
	display: flex;
	flex-direction: row-reverse;
	width:920px;
	height:auto;
	margin: 0 auto;
	padding: 0px;
}
#narabi2 div {
	flex-grow: 1;
	display: inline-block;
	flex-wrap: wrap; /* 折返し指定 */
	color: #333;
	padding: 0 20px;
	margin:0;
	align-items: flex-start;
}

#photo {
	width:420px;
	margin: 0 0px 0 0px ;
}
#photo img {
	width: 100%;
	height: auto;
}
#text {
	width:420px;
	margin: 0 0px 0 0 ;
	padding: 0;
	font-size: 0.8em;
	line-height: 1.8em;
}




.midashiIcon {
    width: 25px;
    height: 25px;
    background-size: calc(30px * 0.8)  /* width */
                     calc(30px * 0.8); /* height : 48px , line-heightと合わせる*/
}





#line {
	width:880px;
	padding: 0px 0 30px 0;
	margin: 30px  auto 0;
}
#mTitle {
	padding: 0 0 20px 0;
}


#question {
	width: 860px;
}
#question dt {
   text-indent: -1.5em;
   padding-left: 1.2em;
   padding-bottom: 15px;
   margin: 0 0 0 0 ;
   color:#333;
   font-weight: bold;
   font-size: 1em;
   line-height: 1.5em;
   letter-spacing: 0.1em;
}
#question dd {
   padding-left:35px;
   padding-bottom: 30px;
   font-size: 0.9em;
   line-height: 1.5em;
   letter-spacing: 0.1em;

}
.q {
	color:#FFF;
	background-color: #D1AC5A;
	margin: 0px 10px 0 0px;
	padding: 0px 5px;
}

  footer {
    text-align: center;
  }
  
  footer p {
	font-size: 1em;
	line-height: 1.5em;
}
.fbig {
	font-weight:bold;
	font-size:1.2em;
	letter-spacing:0.2em;
	border: 1px solid;
	margin: 0px;
	padding: 5px 10px 0px 15px;
	line-height: 3em;
}
  
 
}