@charset "UTF-8";


/* ================================================================= */
/* ======================== 0 〜 824px以上 =========================== */
/* ============================================================== */

@media screen and (max-width:824px) {


#top {
background-color: #cccccc;
}

/* mainvisualarea */
#top .mainvisualarea {
position: relative;
}
#top .mainvisualarea .logo {
width: 100%;
position: absolute;
left: 0;
bottom: 37.138%;
}
#top .mainvisualarea p {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 12px;
width: 100%;
text-align: center;
position: absolute;
bottom: 33.242%;
}
#top .mainvisualarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 14px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 220px;
height: 50px;
line-height: 50px;
border-radius: 3px;
position: absolute;
left: 50%;
bottom: 18.116%;
margin-left: -110px;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .mainvisualarea .btn a {
color: #ffffff;
display: block;
font-size: 14px;
}

/* aboutarea */
#top .aboutarea {
background-color: #f9f9f9;
padding: 50px 0;
text-align: center;
}
#top .aboutarea h2 {
font-size: 24px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .aboutarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#top .aboutarea h3 {
font-size: 24px;
line-height: 1.2;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin: 40px 0;
}
#top .aboutarea p {
font-size: 18px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
}
#top .aboutarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .aboutarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 220px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 40px auto 0;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .aboutarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


/* storyarea */
#top .storyarea {
background-color: #ffffff;
padding: 50px 0;
text-align: center;
}
#top .storyarea h2 {
font-size: 30px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .storyarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#top .storyarea h3 {
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
line-height: 1.2;
text-align: center;
margin: 40px 0;
}
#top .storyarea p {
font-size: 16px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
margin-bottom: 50px;
}
#top .storyarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .storyarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 250px;
height: 60px;
line-height: 60px;
border-radius: 3px;
margin: 50px auto 0;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .storyarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


#top .block {
margin-bottom: 60px;
}
#top .block:last-child {
margin-bottom: 0;
}
#top .block .left {
width: 100%;
}
#top .block .right {
width: 100%;
text-align: left;
}
#top .block .right {
padding: 30px 4.333% 0;
position: relative;
}
#top .block .right .credit {
font-size: 16px;
color: #c2a915;
margin-bottom: 15px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-style: italic;
}
#top .block .right h4 {
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
margin-bottom: 30px;
line-height: 1.2;
}
#top .block.first .right .hasen {
width: 125px;
height: auto;
margin-bottom: 30px;
}
#top .block.second .right .hasen {
width: 113px;
height: auto;
margin-bottom: 30px;
}
#top .block.third .right .hasen {
width: 119px;
height: auto;
margin-bottom: 30px;
}
#top .block .right p {
font-size: 16px;
font-family: inherit;
line-height: 2;
margin-bottom: 40px;
}
#top .block .right .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 220px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 0 auto;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .block .right .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


/* materialarea */
#top .materialarea {
background-color: #f9f9f9;
padding: 50px 0;
text-align: center;
}
#top .materialarea h2 {
font-size: 30px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .materialarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#top .materialarea h3 {
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
line-height: 1.2;
text-align: center;
margin: 40px 0;
}
#top .materialarea h4 {
color: #c2a915;
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: left;
margin: 25px 0;
}
#top .materialarea p {
font-size: 16px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
margin-bottom: 40px;
}
#top .materialarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .materialarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 220px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 0 auto;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .materialarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}
#top .materialarea ul {
width: 86.667%;
margin: 0 auto;
}
#top .materialarea ul li {
width: 100%;
margin-bottom: 52px;
}
#top .materialarea ul li p {
margin-bottom: 0;
text-align: left;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}



/* playbackarea */
#top .playbackarea {
padding: 50px 0 0;
text-align: center;
background-color: #ffffff;
}
#top .playbackarea h2 {
font-size: 30px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .playbackarea h2 span {
display: block;
font-size: 14px;
margin-top: 10px;
}
#top .playbackarea h3 {
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
line-height: 1.2;
text-align: center;
margin: 40px 0;
}
#top .playbackarea p {
font-size: 16px;
line-height: 2;
margin-bottom: 45px;
text-align: left;
}
#top .playbackarea .block {
width: 86.667%;
margin: 0 auto;
}
#top .playbackarea .block .right {
padding: 0;
width: 86.154%;
margin: 0 auto;
}
#top .playbackarea .block .left {
text-align: left;
}
#top .playbackarea .block .left ul {
width: 300px;
margin: 0 auto 50px;
}
#top .playbackarea .block .left ul li {
float: left;
}
#top .playbackarea .block .left ul li:first-child {
width: 131px;
height: auto;
margin-right: 20px;
}
#top .playbackarea .block .left ul li:last-child {
width: 149px;
height: auto;
}



}



/*インスタボタン*/
.btn-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 80px;/*高さ*/
  width: 300px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 14px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
  margin: 60px 0px;
}

.btn-insta:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-insta .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.btn-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
  font-size: 14px;/*文字のサイズ*/
}

.btn-insta:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}





/* ================================================================= */
/* ======================== SP END =========================== */
/* ============================================================== */


/* ================================================================= */
/* ======================== 825px以上 =========================== */
/* ============================================================== */


@media screen and (min-width:825px) {


#top {
background-color: #cccccc;
}

/* mainvisualarea */
#top .mainvisualarea {
position: relative;
}
#top .mainvisualarea .logo {
width: 100%;
position: absolute;
left: 0;
bottom: 32.031%;
}
#top .mainvisualarea p {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 24px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30.859%;
}
#top .mainvisualarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 270px;
height: 60px;
line-height: 60px;
border-radius: 3px;
position: absolute;
left: 50%;
bottom: 16.927%;
margin-left: -135px;
}
#top .mainvisualarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}

/* aboutarea */
#top .aboutarea {
background-color: #f9f9f9;
padding: 100px 0;
text-align: center;
}
#top .aboutarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .aboutarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}
#top .aboutarea h3 {
font-size: 50px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin: 50px 0;
}
#top .aboutarea p {
font-size: 18px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
}
#top .aboutarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .aboutarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 250px;
height: 60px;
line-height: 60px;
border-radius: 3px;
margin: 50px auto 0;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .aboutarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


/* storyarea */
#top .storyarea {
background-color: #ffffff;
padding: 100px 0;
text-align: center;
}
#top .storyarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .storyarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}
#top .storyarea h3 {
font-size: 50px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
line-height: 1.44;
text-align: center;
margin: 50px 0;
}
#top .storyarea p {
font-family: 'Noto Serif JP', sans-serif;
font-size: 18px;
line-height: 2;
margin-bottom: 100px;
}
#top .storyarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .storyarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 250px;
height: 60px;
line-height: 60px;
border-radius: 3px;
margin: 50px auto 0;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .storyarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


#top .block {
margin-bottom: 160px;
}
#top .block:last-child {
margin-bottom: 0;
}
#top .block .left {
width: 50%;
float: left;
}
#top .block .right {
width: 50%;
float: left;
}
#top .block.second .left {
width: 50%;
float: right;
}
#top .block.second .right {
width: 50%;
float: right;
}
#top .block.first .right,
#top .block.second .right,
#top .block.third .right {
width: 50%;
float: right;
padding-top: 28.571%;
position: relative;
}



#top .block.first .right .inner {
position: absolute;
top: 50%;
left: 50%;
width: 470px;
height: 354px;
margin-top: -177px;
margin-left: -235px;
text-align: left;
}
#top .block.second .right .inner {
position: absolute;
top: 50%;
left: 50%;
width: 470px;
height: 354px;
margin-top: -177px;
margin-left: -235px;
text-align: right;
}
#top .block.third .right .inner {
position: absolute;
top: 50%;
left: 50%;
width: 470px;
height: 354px;
margin-top: -177px;
margin-left: -235px;
text-align: left;
}




#top .block.first .right .credit,
#top .block.third .right .credit {
font-size: 20px;
color: #c2a915;
margin-bottom: 20px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-style: italic;
}

#top .block.first .right h4,
#top .block.third .right h4 {
font-size: 32px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
margin-bottom: 30px;
}
#top .block.first .right .hasen,
#top .block.third .right .hasen {
width: 160px;
height: auto;
margin-bottom: 40px;
}
#top .block.first .right p,
#top .block.third .right p {
font-size: 14px;
line-height: 2;
margin-bottom: 40px;
}
#top .block .right p {
font-family: inherit;
}
#top .block.first .right .btn,
#top .block.third .right .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 0;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .block.first .right .btn a,
#top .block.third .right .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}
#top .block.second .right .credit {
font-size: 20px;
color: #c2a915;
margin-bottom: 20px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-style: italic;
}
#top .block.second .right h4 {
font-size: 32px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
margin-bottom: 30px;
}
#top .block.second .right .hasen {
width: 160px;
height: auto;
margin-bottom: 40px;
display: inline-block;
}
#top .block.second .right p {
font-size: 14px;
line-height: 2;
margin-bottom: 40px;
text-align: left;
}
#top .block.second .right .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 0;
display: inline-block;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .block.second .right .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}


/* materialarea */
#top .materialarea {
background-color: #f9f9f9;
padding: 100px 0;
text-align: center;
}
#top .materialarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .materialarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}
#top .materialarea h3 {
font-size: 50px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin: 50px 0;
}
#top .materialarea h4 {
color: #c2a915;
font-size: 36px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: left;
margin: 30px 0;
}
#top .materialarea p {
font-size: 18px;
font-family: 'Noto Serif JP', sans-serif;
line-height: 2;
margin-bottom: 60px;
}
#top .materialarea p span {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
}
#top .materialarea .btn {
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
font-size: 16px;
color: #ffffff;
background-color: #c2a915;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 3px;
margin: 0 auto;
box-shadow:0px 0px 7px 3px rgba(194,169,21,0.2);
}
#top .materialarea .btn a {
color: #ffffff;
display: block;
font-size: 16px;
}

#top .materialarea ul {
width: 1100px;
margin: 0 auto;
}
#top .materialarea ul li {
width: 352px;
margin-right: 22px;
margin-bottom: 100px;
float: left;
}
#top .materialarea ul li:nth-child(3n) {
margin-right: 0;
}
#top .materialarea ul li:nth-child(4) {
margin-left: 186px;
margin-bottom: 80px;
}
#top .materialarea ul li:nth-child(5) {
margin-bottom: 80px;
}
#top .materialarea ul li p {
margin-bottom: 0;
text-align: left;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}



/* playbackarea */
#top .playbackarea {
padding: 100px 0 0;
text-align: center;
background-color: #ffffff;
}
#top .playbackarea h2 {
font-size: 46px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
}
#top .playbackarea h2 span {
display: block;
font-size: 16px;
margin-top: 20px;
}
#top .playbackarea h3 {
font-size: 50px;
font-family: 'Noto Serif JP', sans-serif;
font-weight: 600;
text-align: center;
margin: 50px 0;
}
#top .playbackarea p {
font-size: 16px;
line-height: 2;
margin-bottom: 60px;
}
#top .playbackarea .block {
width: 940px;
margin: 0 auto;
padding-left: 10px;
}
#top .playbackarea .block .right {
float: right;
width: 440px;
margin-right: 40px;
}
#top .playbackarea .block .left {
width: 460px;
text-align: left;
margin-right: -10px;
float: right;
}
#top .playbackarea .block .left ul li:first-child {
float: left;
width: 146px;
height: auto;
margin-right: 20px;
}
#top .playbackarea .block .left ul li:last-child {
float: left;
width: 165px;
height: auto;
}


}




/*インスタボタン*/
.btn-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 80px;/*高さ*/
  width: 300px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 14px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-insta:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-insta .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.btn-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
  font-size: 14px;/*文字のサイズ*/
}

.btn-insta:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}







/*フッターメニュー*/

.fotterbox{
    margin-top:40px;
}

.fotter-menu {
  position: relative;
  
  }

.fotter-menu p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  font-size:20px;
  color: white;
  text-align: center;

  /*文字の装飾は省略*/
  }

.fotter-menu img {
  width: 100%;
  }

.fotter-menu_bw {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.fotter-menu_bw:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


/*録音促すメッセージ入れるやつ*/

.gorecordbox {
    
    margin:30px auto;
}

/*録音を促すメッセージ*/
.gorecord {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 12px 15px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: #000;
  border: solid 3px #000;
  border-radius: 10px;
  box-sizing: border-box;
  animation: gorecord 3s ease infinite;
}

.gorecord:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.gorecord:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #000;
  z-index: 1;
}

.gorecord p {
  margin: 0;
  padding: 0;
}

@keyframes gorecord {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.attention {
    width:100%;
    height: auto;
    padding : 180px 120px;
    margin:1px 0px;
    background-image: #000;
    text-align: center;
    color: #fff;
    
}

/* ================================================================= */
/* ======================== SP END =========================== */
/* ============================================================== */