@charset "UTF-8";

/*
======== table of content. ===============

summary:ワイヤーフレーム要素

==========================================
*/

/*----------------------------------------
base setteing 
------------------------------------------*/
html { font-size: 62.5%; /* 基本となるフォントサイズを10pxに設定 */}

body {
  position:relative;
  background:#ffffd8;
  color:#000;
  font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size:1.6rem; /* rem... html要素のフォントサイズを基準にする単位。この場合、html要素のフォントサイズの1.6倍の大きさにする、という設定 */
  line-height: 2;  /* https://developer.mozilla.org/ja/docs/Web/CSS/line-height 参照 */
  -webkit-text-size-adjust:100%; /* スマホが横向きになったときにフォントサイズが大きくならないように設定 */
}

/*
h1 { margin-top: 2rem; }
h2 { margin-top: 2rem; }
h3 { margin-top: 2rem; }
h4 { margin-top: 2rem; }
p,
ul,
ol,
li { margin-top: 2rem; }
*:first-child { margin-top: 0; }  *はすべての要素のこと、:first-childは一番最初の要素のこと

ここは必要に応じて設定する 
上につけるか下につけるかは分かれるので分かれるので自分なりに決めておくこと。 https://www.monosus.co.jp/posts/2016/02/000177.html 参照
*/

a { color:#FFFFFF; text-decoration:none; }
a[href^="tel:"] { color:#000; cursor:default; pointer-events: none; } /* 電話番号のリンクはPCのときはただのテキストとして処理する */
img { max-width:100%; height:auto; }


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

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; /* width: 1500px;  ウィンドウ幅いっぱいのデザインなので、そういう要素には基本的に幅はつけない */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
}
header a[href^="tel:"] { color:#fff; }


header .tel-number a {
    color:#fff;
    text-decoration:none;
    }

header h1 { /* header内の要素にだけつけたい&ページ内で同じ要素を使っても影響がないように子孫セレクタを使用する */
  position: absolute; /*本来は header自体がfixedになっているので中身もfixされているから不要だけど、今回のデサインではfixedないしabsoluteが必要。なぜならh1とulが重なっているため、どちらかを上のレイヤーに乗せないといけないから。今回はh1を上に持ってくる */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 12;
  width: 6.25vw;
  height: 8.333vw;
  margin: auto;
  max-width: 90px;
  max-height: 120px;

}
header h1 a { display: block; }
header h1 img {
	max-width: 100%;
	max-height: 100%;
}

header .box_contact { display: none; }  /* 11/11 追加 */

nav#globalnav { /* 旧.main-nav。要素名navは省略可能 */
  position: relative;
  /* display: flex; ここにflexをつけても子要素がulしかないため効果がない  */
  /*color: #FFFFFF; 基本的にaタグにはカラー設定をするため、ここに記載してもaタグへの指定が優先されてしまい効かない */
  z-index: 11;
}

#globalnav ul {
  display: flex;
  justify-content:space-between; /* リンクの間隔を空けたいので適切な値を選ぶ。この場合はpaddingとセットで使うとするとどれがいいか考えよう → 11/11 space-aroundから変更。 */
  width:100% ; /* flexにするとインライン要素のように中身の要素の幅を足したサイズになるため設定が必要。ウィンドウの幅と同じにする値を追加。 */
  padding: 3vw 2vw 2vw ; /* 左右に余白を設ける。デザインの左右の余白を%で計算して%指定で。 */
}
#globalnav li {
	width: 20%; /* 11/11 追加 */
  margin-top: 0; /* 先に設定している li のmarginは不要なので打ち消しておく */
	text-align: center; /* 11/11 追加 */
}
#globalnav li:nth-child(2) { margin-right: 10%; } /* 11/11 追加 */
#globalnav li:nth-child(3) { margin-left: 10%; } /* 11/11 追加 */
#globalnav a {
  display: block; /* inline要素だとテキストの長さ分だけしか幅を持たない＆幅や高さなどが設定できない */
  padding:1.388vw; /* テキストだけだとリンクのエリアがリンクのエリアが小さいため少し広げておくと良い。今回はヘッダーの高さをaの高さで確保しよう。横は10px程度は確保しておこう */
  color: #fff;
  font-size:1.8rem ;
}
#globalswitch {
	position: fixed;
	right: 40px;
	top:15px;
	z-index: 12;
}
#globalswitch ul{
	display: flex;
	width: 4em;
	justify-content: space-between;
}
#globalswitch li{
	color: #FFFFFF;
	font-size: 1.4rem
}

#globalswitch a{
	color: #FF8300;
}

#globalswitch .jpswitch{
}


/*----------------------------------------
content
------------------------------------------*/
#content { }

#mv {
  position:relative; /* この要素を基準とする値を入れる */
}

#mv .video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#mv .video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#mv .overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

#mv .box_contact {
  position:absolute; /* これは画像にかぶさっているので絶対配置したい */
  right:5% ; /* 基準となっている要素の右と下の余白を％で計算して入力 */
  bottom:5% ;
  background-image:url("../images/sample/icon-Hiroshima.png"); /* これは広島の画像を指定 */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
  color:#FFFFFF ;
  text-align: center;
}
#mv .box_contact_en{
	background-position: center right;
	text-align: right;
}
#mv .tel-number a {
    color:#fff;
    text-decoration:none;
    }

#mv .box_contact p:first-child {
  margin:0; /* ここから3つのマージンはどれか2つにつけるでもよし、3つにつけるでも良い。ただしtopならtopで、bottomならbottomで統一すること */
  font-size:20px ;
}
#mv .box_contact p:nth-child(2) {
  margin:0 ;
  font-size:36px ;
}
#mv .box_contact p:last-child {
  margin:0 ;
  font-size:18px ;
}


#concept {
  padding:11% 6% 15% 10%;
  background-color:#FFFFDF ;
  background-image:url("../images/sample/concept-guitar.png");
  background-repeat: no-repeat;
  background-position: left 15% bottom 0%;
  background-size: 70% ;
  
}
#concept .box_flex {
  display: flex;
  align-items:center;
  justify-content:space-between;
  max-width: 1040px;
  margin: auto;
  padding: auto;
}
#concept .box_text {
  width: 55%;
}
#concept .box_text h2 img {
  width:85%;
}
#concept .box_text p img {
  margin-top:13% ;
}

#concept .box_image {
  width: 39%;
}

#concept .box_image img {
  border-radius: 12px;
}


#floating {
  padding-top: 2% ;
  padding-bottom:2%; 
  background-color:#990101;
}
#floating p { 
height: 24px;
background:url("../images/sample/bg_text.png") repeat-x 0 0 / 1140px 24px;
animation: bgloop 10s 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 ;
}*/

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

#menu h2 {
  color: #FFFFFF;
  font-size:3.6rem ;
  text-align: center;
  font-family: serif;
}

#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: 85%;
	display: block;
	margin: 0 auto;
}

#menu ul { 
  display:flex;
  align-items: flex-start;
  justify-content:space-between;
  padding-top:8% ;
}

#menu li {
  width:100%;
}

#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% ;
  font-family: serif;
}


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

#footer {
	padding: 10vw 4vw 6vw; /* menu と同じ値にしてグリッドを崩さない */
	background-color: #361902;
}
#footer .box_flex {
	display: flex;
	justify-content:space-between;
}
#footer .box_logo {
	width: 30.497%;
	text-align: center;
}
#footer h2 img {
  width: 15rem;
  height: 20.3rem;
}
#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:15%; 
}
#footer .footer-contact p:first-child{
	margin:0;
	font-size:20px;
}
#footer .footer-contact p:nth-child(2) {
	margin:0 ;
	font-size:36px ;
}
#footer .footer-contact p:last-child {
	margin:0 ;
	font-size:18px ;
}
#footer .footer-contact a {
	color:#fff;
}
#footer .info {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	width: 68.057%;
	color: #fff;
	justify-content: space-between;
}
#footer .info dl {
	display: flex;
	flex-wrap: wrap; /* 折返しを指定する */
	width: 100%;
}

#footer .info dt {
	width:11em;
	margin-bottom:4%;
}
#footer .info dd {
	width: calc(100% - 11em); /* じつは計算した値を指定できる*/
	margin-bottom: 4%;
}

#footer .box_map {
	width: 61.979%;
	margin-top: -5rem;
}
#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: 34.621%;
	margin-top: -5rem;
}