@charset "UTF-8";

/* ぺージ全体の設定 */

/*ページ内で使用する画像は横幅1000px以上、ＴＯＰ画像に使用する画像は横幅2000ｐｘ～3000pxでご用意いただいております。
解像度は72dpiまたは96dpi*/
@media screen and (max-width:480px) {
 
	/*　画面サイズが480px以下の場合ここの記述が適用される　*/
	main {
		width: 100%;
	}
	* {
		float: none;
		position: static;
	}
	
 
	img {
		max-width: 100%;
		height: auto;
	}

	#nav a{
		font-size: xx-small;
	}
	body.top h2, body.store h2, body.gallerypage h2, body.charge h2, div.booking h2, p.q_and_a h2  {
		font-size: small;
 		letter-spacing: 0;
 		border-bottom: 0.5px solid #008096;
 		width: 35%;
	}
	p{
		font-size: xx-small;
	}
	nav#footer a{
		font-size: xx-small;
	}
	nav a:focus{
		color:#cd5c5c;
		border-bottom:2px solid #cd5c5c;
	}
	body.top p,body.news p,body.store p, body.gallerypage p, body.charge p, div.booking p,div.bookingmessage p {
		font-size: xx-small;
 		letter-spacing: 0;
	}
	body.top h3,body.top h3, body.store h3, body.galleryh3age h3, body.charge h3, div.booking p  {
		font-size: small;
 		width: 35%;
	}
	/*店舗紹介ページ*/
	#storekorona ul {
		font-size: xx-small;
	}

	div.access p{
		font-size: xx-small;
	}
	div.access img{
		width: 80%;
		margin: 0 15%;
		margin-bottom: 10%;
	}
	/*GALLERY*/
	div#gallery p img {
	  height: 40%;
	  min-width: 100%;
	  max-width: 300px; /* ブラウザIE対策 */
	  object-fit: cover;                /* 等比トリミング  */
	  font-family: 'object-fit: cover'; /* IE 等比トリミング */
	  border: 1px solid #fff;           /* 写真外枠を白フチに*/
	  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	}
	/*予約　問い合わせページ*/
 form input {
        width: 42%;
      }
      label {
      	font-size: x-small;
      }
      #name {
        margin-left: 10%;
        margin-bottom: 3%;
      }
      #email {
        margin-left: 100%;
        margin-bottom: 3%;
      }
      #phone {
        margin-left: 10%;
        margin-bottom: 3%;
      }
      .content {
      	margin-top: 5%;
      }
      .content-label {
        top: 0;
        left: 0;
      }
      .content #content{
        margin-top: 2%;
        margin-left: 35%;
        height: 40%;
        width: 50%;
      }
     div.button {
        margin-top: 30px;
        width: 65%;
        text-align: center;
      }
    div.button button{
    	text-align: center;
        width: 50%;
        height: 5%;
        margin-left: 50%;
        border: none;
        background-color: skyblue;
        color: white;
        font-size: xx-small;
        font-family: ＭＳ ゴシック;
     }
    div.button button{
    	text-align: center;
        width: 50%;
        height: 5%;
        margin-left: 50%;
        border: none;
        background-color: skyblue;
        color: white;
        font-size: xx-small;
        font-family: ＭＳ ゴシック;
     }

    div.button2 button{
    	text-align: center;
        width: 50%;
        height: 5%;
        margin-left: 50%;
        border: none;
        background-color: #f0a1b2;
        color: white;
        font-size: xx-small;
        font-family: ＭＳ ゴシック;
     }
    div.button3 button{
    	text-align: center;
        width: 50%;
        height: 5%;
        margin-left: 50%;
        border: none;
        background-color: #f0dfa1;
        color: white;
        font-size: xx-small;
        font-family: ＭＳ ゴシック;
     }

/* 画面幅の20%の幅で画像を表示 */
.line-vw {
  width : 20vw ; 
}
    img.logo2 {
     	margin: 0 30% 0 2%;
     }
}

	/*Q&A*/

.lineheight175 {
    line-height: 2.25;
    font-size: 20px;
}





.header{ border-bottom: 3px solid #008096;  margin: 0 0 0 0;}


.logo2{
	width: 22%;
	margin-right: 40%;
	/*margin: 0 auto;画像の位置指定*/
}
header a img{/*ツイッター　インスタ*/
	width: 3%;
	margin-left: 0;
	margin-right: 2%;
}
/**/
.toptel {/*トップ画面tel画像*/
	width: 22%;
}


/*基本設定*/

/*trillカラー　青#008096　白#d6caa2*/
.topimg {/*トップ画像*/
	width: 80%;
	height: auto;
}

/*見出しの位置を調整する方法
<h1 style="text-align: center;">
index のh1で使用*/
/*文字の一部分だけ大きさを変える方法
<span style="font-size: 55%;">
index のh1で使用*/

nav{
text-align: center;
font-family: sans-serif;/*ゴシック体*/;
letter-spacing: 0.2em;
margin-bottom: 1.5%;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav#footer li{
margin-bottom: 10%;
font-size: small;
list-style: none;
display: inline-block;
width: 10%;
}
nav#footer2{
margin-bottom: 10%;
text-align: left;
font-size: xx-small;
list-style: none;
display: inline-block;
width: 10%;
}
nav#nav li{
text-align: center;
list-style: none;
display: inline-block;
}
nav#nav li:not(:last-child){
border-right:2px solid #ddd;
}
nav a{
text-decoration: none;
color: #333;
font-size: medium;
width: auto;
}
/*nav a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}*/
nav a:hover{
color:#008080;
border-bottom:2px solid #008080;
}
nav a:focus{
color:#cd5c5c;
border-bottom:2px solid #cd5c5c;
}

footer img {
	width: 100%;
	height: auto;
}

/*トップ画面*//*トップ画面*//*トップ画面*/
/*.tnjmoji{top画像 */
	/*text-align: center;
 	position: relative;相対位置への配置を指定します
	margin-top: 2.5%;
	background-color: #d6caa2;
  }<div class="tnjmoji">
  	<img src="img/top6.jpg" class="topimg">
</div>*/
.slider {
}
.slider img{/*スクリプト画像*/
	width: 100%;
	height:45%;
}
.concept {/*コンセプト*/
 	text-align: center;
	line-height: 1.9;/*行の高さ*/
	letter-spacing: 2px;/*文字間の調整*/
} 
.concept p {
        font-size: xx-small;
        font-color: #d6caa2
	text-align: center;
	line-height: 1.9;/*行の高さ*/
	letter-spacing: 2px;/*文字間の調整*/
}
div.concept2 {
        color: #ffffff;
        background-color:  #cacaca; 
        padding: 10px; 
	line-height: 1.9;/*行の高さ*/
        text-align: center;
        font-size: xx-small;
}
.concept2 p {
        background-color:#cacaca; 
        padding:10px; 
        line-height:10px;
        text-align: center;
        font-size: xx-small;
}
.videoWrap{
	padding-top: 56.25%;
	width: 100%;
	position: relative;
}

.videoWrap video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
/*撮影ＭＥＮＵの画像*/

.picframe {
	text-align: center;/**/
}
.top h2 {/*text-size-adjust: none; 自動拡大を制御*/
	text-align: center;
	width: 15%;
	font-size: 140%;
	margin: 10% auto 5%;/*上　左右　下*/
 	border-bottom: 3px solid #008096;
 	/*下線を文字に合わせる為*/
 	letter-spacing: 20%;/*文字間の調整*/
}
.picframe img {/*撮影ＭＥＮＵの画像*/
	width: 20%;
	margin: 1.2% 5%;
}

.desk {
	display: flex;
	justify-content: center;
}

h3 {
	margin: 12% auto 5%;
 	text-align: center;
 	text-size-adjust: none;
}

iframe {/*お知らせの枠*/
	border: 2px solid #313131;
	padding: 10px 40px 30px;
	overflow-y: auto;
}
{
	border-bottom: 1px dashed #000;
}
#gall{
	margin: 7% auto 5%;
}

/*お知らせ*/
.hoge { 
	text-align: center;
	margin-top: 15%;
}

/*ポンプアップ画像のスタイル*/
.popup:focus, .popup:active {
    position: fixed; /* 要素の位置を固定する */
    top:0;
    left:0;
    right:0;/* 基準の位置を画面の一番右に指定する */
    bottom:0;/* 基準の位置を画面の一番下に指定する */
    margin:auto;
    height: auto;/**/
    z-index: 100;/*要素の重なり順を決めるプロパティ*/
    background: #fff;
    padding: 20px;
    outline: 1px solid #aaa;
    max-width:44vw;/* ポンプアップ画像が大きい場合は、適宜調整 */
}
/*ギャラリーの時の画像*/
#gall {
	text-align: center;
}
.popup {
    height: 200px;
    width:auto;
    cursor: zoom-in;/*マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類*/
    margin: 2%;
}


/*お知らせ お知らせ お知らせ
装飾するとそのままトップのお知らせに載ってしまう
のでそのままで/

/*店舗紹介ページ*//*店舗紹介ページ*//*店舗紹介ページ*/

.store {/*店舗紹介ページ*/
	text-align: center;
}
#store {/*店舗紹介ページ*/
	margin-top: 2.5%;
	margin-bottom: 10%;
	text-align: center;
	background-image: url(img/store1.jpg);
	background-size: cover;
	padding-top: 5%;
	padding-bottom: 20%;
}	
.store h2 {/*店舗紹介ページ*/
	display: inline-block;
	background-color: rgba(255,255,255,0.6);
	font-size: 180%;
	letter-spacing: 0.7em;
	font-weight: normal;
	margin-top: 5%;
	border-bottom: 3px solid #d6caa2;
}
.store p {/*店舗紹介ページ*/
	display: inline-block;
	border-radius:  10px;
	padding:  10px;
	line-height: 1.9;/*行の高さ*/
	width: 65%;/*ボックスの幅*/
	font-size: 120%;
	text-shadow: 1px 1px 1px #aaa;
	background-color: rgba(255,255,255,0.6);
	letter-spacing: 0.1em;/*文字間の調整*/
	/**/
}
#store img {/*トロフィー画像*/
	width: 16%;
	margin: 2% 2%;
	border-radius:  20px;
	border: solid 2.5px #fff;
}

#storekorona {/*コロナ感染症対策文面*/
	margin-bottom: 12%;
	text-align: center;
}
#storekorona p {/*コロナ感染症対策文面*/
	text-shadow: 0 0 0;
	padding: 0;
	margin: 0;
}
#storekorona ul {/*コロナ感染症対策文面*/
	display: inline-block;
	text-align: left;
	background-color: rgba(168,221,255,0.7);
	padding: 2% 7%;
	margin: 5%;
	border-radius:  20px;/*角を丸くする*/
	line-height: 1.9;/*行の高さ*/
}

#storekorona li {/*コロナ感染症対策文面*/
	font-family: sans-serif;/*ゴシック体*/;
}	

/*アクセスheight="40%" */
.access {
	text-align: center;
	margin-top: 10%;
	margin-bottom: 15%;
}
img.accessimg {
	float: left;
	margin-right: 8%;
}
.accessh3 {/*アクセス　h3*/
	width: 15%;
	font-size: 160%;
	letter-spacing: 0.7em;
	font-weight: normal;
	margin-top: 5%;
	border-bottom: 3px solid #d6caa2;
	}
.access p {
	width: 80%;
	font-size: 30%
	line-height: 1.9;/*行の高さ*/
	text-align-last: left;
}
/*料金ご紹介ページ*//*料金ご紹介ページ*//*料金ご紹介ページ*/

.charge {
	text-align: center;
}

.charge h2{
	display: inline-block;
	font-size: 180%;
	letter-spacing: 0.7em;
	font-weight: normal;
	margin-top: 3%;
	margin-bottom: 1%;
	border-bottom: 3px solid #d6caa2;
}
.chargeimg1 {
	padding-top: 5%;
}
.chargeimg1 img {/*撮影メニュー*/
	width: 67%;/*サイズを下げると画像が2列になる*/
	margin: 0 2% 10% 2%;
	text-align: center;
}
.chargeimg2 img {/*撮影メニュー 証明写真*/
	width: 45%;/*サイズを下げると画像が2列になる*/
	margin: 0 2% 12% 2%;
	text-align: center;
}
.chargeimg3 img {/*撮影メニュー スタジオ*/
	width: 65%;/*サイズを下げると画像が2列になる*/
	margin: 0 2% 12% 2%;
	padding: 5%;
	text-align: center;
	border: 3px solid #d6caa2;
}
/*.chargeimg2 {
	background-color: #44afae;
	padding-top: 10%;
}
.chargeimg2 img {
	width: 40%;
	margin-bottom: 5%;
	text-align: center;
	}*/
/*.chargeimg3{証明写真
	margin-top: 10%;
}*/
/*GALLERY*//*GALLERY*//*GALLERY*//*GALLERY*//*GALLERY*//*GALLERY*/

.gallerypage {
	text-align: center;
	box-sizing: border-box;

}
.gallerytop {
	margin-bottom: 15%;
}
.gallerytop h2 {
	display: inline-block;
	background-color: rgba(255,255,255,0.6);
	font-size: 180%;
	letter-spacing: 0.7em;
	font-weight: normal;
	margin-top: 5%;
	margin-bottom: 10%;
	border-bottom: 3px solid #d6caa2;
}
#gallery:after {
  content: '';
  flex-grow: 10; /* 強制的に大きくする */
  display: block;/* IE10 対策 */
}
/** {
}
body {
}*/
#gallery {
  display: flex;
  flex-wrap: wrap;
}
#gallery:after {/* 最後の行に配置される画像がほとんどないとき */
  content: '';  /* 画面いっぱいに横長サイズで表示されないように*/
  flex-grow: 10;
  display: block;/* IE10 対策 */
}
#gallery p {
  flex: auto;    /* flex-grow: 1; でも可 */
  height: 250px;
  margin: 5px;
}
#gallery p img {
  height: 250px;
  min-width: 100%;
  max-width: 300px; /* ブラウザIE対策 */
  object-fit: cover;                /* 等比トリミング  */
  font-family: 'object-fit: cover'; /* IE 等比トリミング */
  border: 8px solid #fff;           /* 写真外枠を白フチに*/
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.7);
}

/*予約　問い合わせページ*//*予約　問い合わせページ*//*予約　問い合わせページ*/
.booking {
	text-align: center;
}
.booking h2 {
	display: inline-block;
	background-color: rgba(255,255,255,0.6);
	font-size: 180%;
	letter-spacing: 0.7em;
	font-weight: normal;
	margin-top: 5%;
	border-bottom: 3px solid #d6caa2;
}
.bookingmessage {
	text-align: center;
	padding: 5% 0 0 0;
}
.bookingmessage p {
	font-size: 125%;
	font-family: sans-serif;/*ゴシック体*/;
	letter-spacing: 0.2em;
}
.bookingmessage img {
	width: 30%;
}
form {
	margin-top: 8%;
	margin-bottom: 10%;
	/*padding-left: 30%;送信フォームが中心に来るけど画面を縮めると崩れる*/
}

.booking p{
        font-weight: bolder;
      }
      input {
        width: 300px;
      }
      #name {
        margin-left: 115px;
        margin-bottom: 10px;
      }
      #email {
        margin-left: 35px;
        margin-bottom: 10px;
      }
      #phone {
        margin-left: 83px;
        margin-bottom: 10px;
      }
      .content {
      	margin-top: 3%;
        position: relative;
      }
      .content-label {
        top: 0;
        left: 0;
      }
      #content {
        margin-top: 7px;
        margin-left: 153px;
        height: 200px;
        width: 350px;
      }
      .button {
        margin-top: 30px;
        width: 550px;
        text-align: center;
      }
      button {
        width: 130px;
        height: 30px
        border: none;
        background-color: skyblue;
        color: white;
        font-size: 113%;
        font-family: ＭＳ ゴシック;
      }
  

line-it-button
<style type="line-it-button/css"> p { border: none;  text-align: right;} </style>
      }   

.youtube{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /*境界線の打ち消し*/
}