@charset "utf-8";

/* 全ページ共通の設定
============================== */
html {
  font-size: 100%;/* 16px = 100% */
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  }

a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
dl {font-weight: bold}

/* コンテンツの幅・左右中央の設定 */
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
 }

/* Headerエリアの設定 ---------- */
.main-nav {
  background-color: black;
	display: flex;
	justify-content: space-around;
  align-items: flex-end;
  padding-top: 5px;
  padding-bottom: 0px;
    }


/* ナビゲーションの設定 */
.main-nav a:hover {
	color: lightgreen;
    }






/* トップページだけの設定
============================== */
#home {
    min-height: 100vh;
background-color: black;
}/* ブラウザと同じ高さに */


.home-content {
  font-size: 1.125rem;/* 大文字解除 */
	color: lightgreen;
  text-align: center;
  margin-top: 2%;
}

.home-content > video {
    width: 55vw;
}


/*aboutページの設定*/
article { display: flex;
  margin-top: 25px;
    padding-bottom: 0px;
  justify-content: space-evenly;
  }
dl {margin-top:5%;}


/*worksページのみの設定*/
#thumbnail{
display: grid;
gap: 26px;
grid-template-columns: repeat(9, 0.12fr) ;
magin-top: 0;
padding-top: 0; 
margin-bottom: 50px;}

.first_piace {
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 0px;
  justify-content: space-between;
  }

.first_piace img {margin-top: 50px;}
.first_piace .explanation{
	font-size: 0.9rem;
    font-weight: bold
}

h3{margin-top: 40px;
margin-left: 40px;
}

.submit p{font-size:0.6rem;
font-weight: bold}

/*--タイル型レイアウトの設定*/

h4{
font-size: 0.78rem;
margin-top: 0.5rem; 
}
.item{
font-size:0.7rem ;
}
.item p{
margin-top: -10%; }
.grid{
display: grid;
gap: 26px;
grid-template-columns: 1fr 1fr 1fr ;
magin-top: 5px;
margin-bottom: 50px;
}

/*cafeページの設定*/
.submit .grid #cafe_crescendo .item{margin-bottom:50px;}
#cafe_crescendo{grid-row-gap:100px;}

/*othersページの設定*/
#sonota{grid-row-gap:100px;}
/*GIFアニメページの設定*/
#waitress{background-color: lemonchiffon;
	align-items: center;
	margin-top: 100px;
}
#gifanime_coror{
	width: 9%;
height: 9%
}

/*Line stumpページの設定*/
.wrapper_stump{
	height: 36%;
	width: 36%;
margin-left: auto;
	margin-right: auto;
}

/* Contactページのみの設定
============================== */
#contact {
	min-height: 100vh;}
.sub-title {font-size: 0.8rem;
font-weight: bold;}

/* フォームの設定 */
input[type="range"] {
  -webkit-appearance: none; /*これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 7px; /* バーの高さ */
  width: 32%; /* バーの幅 */
  background: #8acdff; /* バーの背景色 */
  border-radius: 10px; /* バーの両端の丸み */
  border: solid 3px #dff1ff; /* バー周囲の線 */
	margin-bottom: 50px;
}

/* お名前・メール・メッセージの設定 */
form div {
	margin-bottom: 14px;
}
label {
	font-size: 1.125rem;
	margin-bottom: 10px;
	font-weight:  bold;
	display: block;
}

/* お名前・メール・メッセージの設定 */
input[type="text"],
input[type="email"],
textarea {
	background-color: rgba(193,221,255,0.5);
	border: 1px solid aqua;
	border-radius: 5px;
	padding: 2px;
	font-size: 1rem;
}

/* お名前・メールの設定 */
#email{
    width: 100%;
}
input[type="text"],
input[type="email"] {
		max-width: 240px;
}

/* メッセージの設定 */
textarea {
	width: 100%;
	max-width: 480px;
	height: 6rem;
}

/* 送信ボタンの設定 */
.button {/* ボタンデザイン */
  background-color: #0bd;
  color: #fff;
  padding: 5px 10px;
  font-size: 1.2rem;
  border-radius: 5px;
}
/* 自宅情報の設定 */
#location {
	padding: 4% 0;
}
#location .wrapper {
	display: flex;
	justify-content: space-between;
}
.location-info { /* 住所等 */
	width: 22%;
    
}
.location-info p {
	padding: 5px 20px;
    }
.location-map {
	width: 74%;
}
.location-map iframe {/*地図*/
	width: 100%;
}



/*戻るボタンの設定*/
#back{background-color:khaki;
  color: #fff;
  padding: 5px 10px;
  font-size: 1.2rem;
	font-weight: bold;
  border-radius: 5px;}

/* Footerエリアの設定 ---------- */
footer{
	background-color: black;
	text-align: center;
    margin-top: 55px;
	padding-top:0;
    padding-bottom:0
	}
footer p {
	color: #fff;
	font-size: 0.875rem;/* 16 × 0.875 = 14 */
}


/*モバイル版-----------------------------------*/

@media (max-width: 600px){
	
	index h3{font-size: 0.7%
	}	
.wrapper{
margin-right: 15px;
margin-left: 15px;
}
/*トップページ----------------------*/
#home{
margin-right: 15px;
margin-left: 15px;
}
.main-nav {  
   display: flex;
  list-style: none;
  font-size: 0.8rem;
  text-transform: uppercase;/* 大文字表示 */
  margin-top: 10px;
}

/*worksページ*/

.first_piace{flex-direction: column;
align-items: center}

#thumbnail
{display: grid;
gap:26px;
grid-template-columns: repeat(3,1fr);
margin-top: 6%;
margin-bottom: 50px;
}

#thumbnail p{margin-top: 2px}

/*aboutページ*/
article {flex-direction: column;
align-items: center;
margin-right: 15px;
margin-left: 15px;}

section{
margin-top: 0px;
}

article h2 {margin-top: 3rem}


/*contactページ*/
.wrapper
{flex-direction: column;
align-items: center}


.location-info { /* 住所等 */
	width: 100%;
    
    }
}