@charset "UTF-8";
@media screen and (max-width:767px){
/* 

スマートフォン用として、ウィンドウサイズが767px以下のときに下記スタイルが適用される。
記述されているものはPCのスタイルなので、そのままスタイルを変更しないものは削除

*/

a[href^="tel:"] { pointer-events:auto; } 


/*----------------------------------------
header 
------------------------------------------*/

header { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2.666vw 5.333vw; /* 10px 20px に相当*/ }
header h1 { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 5.8rem; height: auto; margin: 0; }
header .box_contact { display: block; padding: 10px 0; background-image:url("../images/sample/icon-Hiroshima.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; color:#fff ; line-height: 1.5; text-align: right;margin-top: -10px; }
	header .box_contact_en{background-position: center right; 
	}
header .box_contact p:first-child { font-size:10px; }
header .box_contact p:nth-child(2) { font-size:16px ; }
header .box_contact p:nth-child(3) { font-size:10px; }
header .box_contact ul { display: none; }
header a[href^="tel:"] { color:#fff; }

nav#globalnav { position: relative; width: 100%;  }
#globalnav ul { width: 100vw; margin: 2.666vw -5.333vw 0; padding:0; }
#globalnav li { width: 25%; }
#globalnav li:nth-child(2) { margin-right: 0; }
#globalnav li:nth-child(3) { margin-left: 0; }
#globalnav li + li { border-left: 1px solid #fff; }
#globalnav a { padding:0; color:#fff; font-size:1.2rem; }

#globalswitch {
	top: 66px;
}
/*----------------------------------------
content
------------------------------------------*/
#content { }

#mv
#mv img { width: 100%; height: 100%; object-fit: cover; } /* 11/11 追加　画像エリアを確保した上でそのサイズにトリミングをしている */
#mv .box_contact { display: none; /* スマホのときはいらないから表示しない*/ }
#concept {
  padding: 13.333vw 5.333vw; /* デザインでは10pxにガイドがあるが、実際は20pxくらいで揃っていることもあるので変更している */
  /*background-color:#FFFFDF ;*/		 /* 上書きの必要がないので削除 */
  /*background-image:url("../images/sample/concept-guitar.png");*/		 /* 上書きの必要がないので削除 */
  /*background-repeat: no-repeat;*/		 /* 上書きの必要がないので削除 */
  /*background-position: left 0 bottom 0%;*/		 /* 上書きの必要がないので削除 */
  background-size: cover ; /* 70%から 変更*/

}
#concept .box_flex {
  /*display: flex;*/		 /* 上書きの必要がないので削除 */
  /*align-items:center;*/		 /* 上書きの必要がないので削除 */
  /*justify-content:space-between;*/		 /* 上書きの必要がないので削除 */
  /*max-width: 1040px;*/		 /* 上書きの必要がないので削除 */
  /*margin: auto;*/		 /* 上書きの必要がないので削除 */
	flex-direction: column; /* 11/11 追加 縦に並べたいので、flex-directionを指定するか、display:blockなどに変更する */
}
#concept .box_text {
  width: 100%;  /* 55%から 変更　幅100%にする */
}
#concept .box_text h2 img {
  width:100%;  /* 85%から 変更　幅100%にする */
}
#concept .box_text p img {
  /*margin-top: 13% ;*/
}
#concept .box_image {
  width: 100%; /* 39%から 変更　幅100%にする */
	margin-top: 13%; /* 11/11 追加　#concept .box_text p img のmarginと合わせるときれいに並べられる */
	text-align: center; /* 11/11 追加　中のイメージの幅を100%より小さくしているので中央寄せを追加 */
}

#concept .box_image img {
  /*border-radius: 12px;*/
	width: 80%; /* 11/11 追加*/
}


#floating {
  padding-top: 5.333vw ;	/* 2%から変更 */
  padding-bottom: 5.333vw; /* 2%から変更 */
  /*background-color:#990101;*/	 /* 上書きの必要がないので削除 */
}

#floating p { 
/*height: 24px;
background:url("../images/sample/bg_text.png") repeat-x 0 0 / 1140px 24px;*/
animation: bgloop 20s linear infinite;
/*font-size: 0;
text-indent: -101%;
overflow: hidden;*/
/*  color:#FFFFFF;
  font-size:3.3rem;*/
}

@keyframes bgloop {
    0% { background-position: 0 0;}
  100% { background-position: -1140px 0;}
}
/*
#floating p strong {
  color:#FFFC00;
  font-size:4.6rem ;
}*/


/* 
ここから先をやってみよう。

ポイントは
・幅の設定
・余白の設定
・flexの中身の設定

flexの使い方については
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet 
を参考に。
レスポンシブについては
https://pecopla.net/web-column/how-to-responsive 
https://www.kerenor.jp/flexbox-responsive-layout/
を参考に。

*/


#menu {
  padding:10% 4% 6% 4%;
  /*background-image: url("../images/sample/top-menu/menu-back.jpg");
  background-repeat:no-repeat;*/
  background-size:cover;
}

#menu h2 {
  /*color: #FFFFFF;*/
  font-size:3.0rem ;
  /*text-align: center;
}*/
	}
#menu h2 span {
  /*display: inline-block;*/
  /*position: relative;*/
  /*padding: 0% 10% 2% 10%;*/
}
#menu h2 span::after {
  /*content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: rgba(255,255,255,0.8);*/
}
#menu img{
	/*border-radius: 50%;*/
	width: 90%;
	/*display: block;*/
	margin: 0 auto;
}

#menu ul { 
  /*display:flex;*/
  flex-wrap: wrap;	
  /*align-items: flex-start;
  justify-content:space-between;
  padding-top:8% ;*/
  margin-top: 7%;
  margin-bottom: 7%;
}

#menu li {
  width:50%;
}
#menu .menu-li{
	margin-top: 14%;
}
#menu a {
 /* display: block;
  color:#000000;*/
}
#menu a figcaption {
 /* display: flex;
  align-items: center;
  justify-content: center;
  padding:2% ;
	margin:2em;
  background-color:rgba(255,255,255,0.8) ;
  margin-top:10% ;*/
	width: 90%;
	margin:1rem auto 0;
  font-size: 1.4rem ;	
}


/*----------------------------------------
footer
------------------------------------------*/

#footer {
	/*padding:10% 4% 6% 4% ; /* menu と同じ値にしてグリッドを崩さない */
	/*background-color: #361902;*/
}
#footer .box_flex {
	display: flex;
	flex-direction: column ;
	align-items: center;
}
#footer .box_logo {
	width: 100%;
	/*text-align: center;*/
}
#footer h2 img {
	display: none;
}
#footer .footer-contact {
	/*background-image:url("../images/sample/icon-Hiroshima.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	color:#FFFFFF ;
	text-align: center;*/
	margin-top:8%; 
}
#footer .footer-contact p:first-child{
	/*margin:0;*/
	font-size:1.4rem ;
}
#footer .footer-contact p:nth-child(2) {
	/*margin:0 ;*/
	font-size:2.8rem ;
}
#footer .footer-contact p:last-child {
	/*margin:0 ;*/
	font-size:1.4rem ;
}
#footer .info {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	width: 100%;
	/*color: #fff;*/
}
#footer .info dl {
	display: flex;
	flex-wrap: wrap; /* 折返しを指定する */
	width: 100%;
	font-size: 1.4rem ;
	margin-top: 18%;
	order: 2;
}
#footer .info dt {
	width: 8em;
	margin-bottom:4%;
}
#footer .info dd {
	width: calc(100% - 8em); /* じつは計算した値を指定できる*/
	margin-bottom: 4%;
}
#footer .name{
	display: none;
}
#footer .access{
	order: 2	
}
#footer .time{
	order: 1
}
#footer .box_map {
	width: 100%;
	margin-top: 18%;
	margin-bottom: 18%;
	margin-right: 0;
	order: 3;
}
#footer .box_iframe_wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#footer .box_iframe_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#footer .box_slider {
	width: 100%;
	margin-top: 18%;
	order: 1;
}


/* @media screen and (max-width:767px) のおわりのカッコなので、消さない  */