/*----------------------------
* 基本
*----------------------------*/
/*デフォルトの要素*/
.l-header {display:none}
.p-hero-header{display:none}
.p-page-header {display:none}
.p-breadcrumb {display:none}
.l-footer {display:none}
.l-main p{
line-height: 2.4;
}
.l-main img{
max-width: 100%;
height: auto;
}
.p-splash__inner img{
max-height: 220px;
max-width: 500px;
}

/*カラム関係*/
.row, .row1 {display: flex;}
.row2 {display: block;}
.row1 {flex-direction: row-reverse;}
.col {width: 100%;}
.col1 {width: 80%; padding: 0 0 0 10%;}

/*アニメーション関係*/
div[class^="fadein"] { opacity: 0;}
div[class$="scrollin"] { opacity: 1;}
.fadein1 {
transform: translate(0, 100px);
transition: all 1500ms;
}
.fadein1.scrollin {transform: translate(0, 0);}
.fadein2 {
transform: translate(100px, 0px);
transition: all 1500ms;
}
.fadein2.scrollin {transform: translate(0, 0);}
.fadein3 {
transform: translate(0px, 0px);
transition: all 1500ms;
}
.fadein3.scrollin {transform: translate(0, 0);}
.fadein4 {
transform: translate(-100px, 0px);
transition: all 1500ms;
}
.fadein4.scrollin {transform: translate(0, 0);}
/*----------------------------
* メニュー
*----------------------------*/
/*メニューボタン*/
.fixed_btn{
position: fixed;
top: 5px; 
right: 10px;
padding: 6px 10px;
z-index: 3;
cursor: pointer;
display:none
}
.humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
.humberger div {
position: absolute;
left: 0;
height: 4px;
width: 36px;
background-color: #444;
border-radius: 2px;
display: inline-block;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.humberger div:nth-of-type(1) {top: 0;}
.humberger div:nth-of-type(2) {top: 13px;}
.humberger div:nth-of-type(3) {top: 26px;}
.humberger.is-active div:nth-of-type(1) {top: 13px;  -webkit-transform: rotate(45deg);  transform: rotate(45deg);}
.humberger.is-active div:nth-of-type(2) {opacity: 0;}
.humberger.is-active div:nth-of-type(3) {top: 13px;  -webkit-transform: rotate(135deg);  transform: rotate(135deg);}
/*メニュー本体*/
.menu{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 25%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(85, 85, 85, 0.8);
}
.menu p{
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5em;
  width: 100%;
  text-align: center;
  padding: 10px 0px;
  box-sizing: border-box;
}
.menu a{
color: white;
text-decoration: none;
}
/* アニメーション前のメニューの状態 */
.menu{
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  pointer-events: auto;
  opacity: 1;
}
/*----------------------------
* トップに戻るボタン
*----------------------------*/
.page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #000000;
  z-index: 1;
  opacity: 0.6;
}
.page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
.page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*----------------------------
* トップ動画コンテンツ
*----------------------------*/
.wrap-video{position:relative;}
.wrap-video video{
  width: 100%;
  height:100%
}
.wrap-video .titleRising{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/
  text-align:center;
}
.wrap-video .titleRising p{
  font-family: 'Fjalla One', sans-serif;
  font-size:100px;
  color:white;
}
.wrap-video .titleRising img{
width: 100%;
height: auto;
}
/*----------------------------
* 見出しコンテンツ
*----------------------------*/
.crosshead{padding: 90px 0px;}
.crosshead h2{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 3em;
margin-bottom: 0px;
text-align:center;
}
.crosshead p{
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.2em;
margin-top: 30px;
text-align:center;
}
.crosshead2{padding: 90px 0px; background-color: #f5f5f5; display:none}
.crosshead2 h2{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 3em;
text-align:center;
}
.crosshead2 p{
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.2em;
margin-bottom: 30.4px;
text-align:center;
}
/*----------------------------
* youtubeコンテンツ
*----------------------------*/
.youtube-side1 {position: relative; background-color: #f5f5f5}
.youtube-side {position: relative; background-color: #f5f5f5}
.youtube-side img, .youtube-side1 img{visibility:hidden;}
div[class^="youtube-side"] .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
 margin:0;
 padding:0;
 width: 80%;
}
.youtube-side1 .text h3, .youtube-side .text h3 { 
font-family: 'Noto Serif JP', serif;
font-size: 2em;
text-align: center;
}
.youtube-side1 .text p, .youtube-side .text p { 
font-family: 'Noto Serif JP', serif;
text-align: center;
}
.youtube-side1 .text .strong-message, .youtube-side .text .strong-message { 
margin-top: 20px; 
font-size: 1.5em;
text-align: center;
}
/*----------------------------
* 画像コンテンツ
*----------------------------*/
/*画像コンテンツ*/
.person{position: relative;}
.play-black{width:100%;}

/*画像コンテンツテキスト*/
.person-side {position: relative; background-color: #f5f5f5}
.person-side img{visibility:hidden}
.person-side .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
 margin:0;
 padding:0;
 width: 80%;
 text-align: center;
}
.person-side .text .jpg60{
width: 60%;
margin: 0 0 20px 0;
visibility:visible;
}
.person-side .text .jpg40{
width: 40%;
margin: 0 0 20px 0;
visibility:visible;
}
.person-side .text img{
width: 50%;
margin: 0 0 20px 0;
visibility:visible;
}
.person-side .text .png{
width: 20%;
margin: 0 0 20px 0;
visibility:visible;
}
.person-side .text h3 { 
font-family: 'Noto Serif JP', serif;
font-size: 2em;
text-align: center;
}
.person-side .text h4 { 
font-family: 'Noto Serif JP', serif;
font-size: 1.2em;
text-align: center;
}
.person-side .text p { 
font-family: 'Noto Serif JP', serif;
margin-bottom: 0px;
}
.q_button{
min-width: 100px;
width: 12em;
padding: .2em 1em .2em;
}
.person-side .text .button-red { 
margin-top: 20px;
text-align:center;
}
#off {
visibility: hidden;
background-color: white;
}
/*----------------------------
* アンケートコンテンツ
*----------------------------*/
p.c_button{
margin-bottom: 0px!important;
text-align:center;
}
/*----------------------------
* フッターコンテンツ
*----------------------------*/
/*フッターコンテンツロゴ*/
.footlogo {
padding-top: 60px;
background-color: #f3f2ee
}
.footlogo__inner{height:100%; text-align:center}
.footlogo__inner img{width:5%; height:auto; margin:0 20px;}
/*フッターコンテンツテキスト*/
.foothead{
padding: 30px 0px 60px 0px;
text-align:center;
background-color: #f3f2ee
}
.foothead img{
padding-bottom: 20px;
width:25%; height:auto;
}
.foothead h2{
font-family: 'Noto Serif JP', serif;
font-size: 3em;
text-align:center;
}
.foothead p{
color: #696969;
margin-bottom: 0px;
text-align:center;
}

/*----------------------------
* タブレット12.9inch以下レスポンシブ用
*----------------------------*/
@media only screen and (max-width: 1600px){
.youtube-side .text h3 {font-size: 1.2em; margin: 0px 0px 20px 0px;}
.youtube-side .text p {font-size: 0.8em;}
.youtube-side .text .strong-message {font-size: 1.1em; margin-top: 20px;}
}
@media only screen and (max-width: 1366px){
/*見出しコンテンツ*/
.title{font-size: 2em;}
/*youtubeコンテンツ*/
.youtube-side1 .text h3 {font-size: 2em; margin: 0px 0px 30px 0px;}
.youtube-side1 .text p {font-size: 1em;}
.youtube-side1 .text .strong-message {font-size: 1.2em; margin-top: 20px;}
.youtube-side .text{margin-top: 10px;}
.youtube-side .text h3 {font-size: 1.2em; margin: 0px 0px 20px 0px;}
.youtube-side .text p {font-size: 0.7em;}
.youtube-side .text .strong-message {font-size: 1em; margin-top: 20px;}
/*人物紹介コンテンツ*/
.person-side .text h3 {font-size: 1.5em; margin-top:20px;}
.person-side .text h4 {font-size: 1em; margin: 10px 0 10px 0;}
.person-side .text img{margin: 0 0 10px 0;}
}
/*----------------------------
* タブレット10.5inch以下レスポンシブ用
*----------------------------*/
@media only screen and (max-width: 1112px){
/*youtubeコンテンツ*/
.youtube-side1 .text h3 {font-size: 1.7em; margin: 0px 0px 20px 0px;}
.youtube-side1 .text p {font-size: 0.8em;}
.youtube-side1 .text .strong-message {font-size: 1.2em; margin-top: 10px;}
.youtube-side .text{margin-top: 10px;}
.youtube-side .text h3 {font-size: 1em; margin: 0px 0px 20px 0px;}
.youtube-side .text p {font-size: 0.5em;}
.youtube-side .text .strong-message {font-size: 0.9em; margin-top: 20px;}
/*人物紹介コンテンツ*/
.person-side .text h3 {font-size: 1.2em; margin-top:20px;}
.person-side .text h4 {font-size: 0.8em; margin-top: 5px;}
.person-side .text p {font-size: 0.7em;}
}
/*----------------------------
* スマホレスポンシブ用
*----------------------------*/
@media only screen and (max-width: 900px){
.youtube-side .text h3 {font-size: 0.5em; margin: 0px 0px 7px 0px;}
.youtube-side .text p {font-size: 0.5em;}
.youtube-side .text .strong-message {font-size: 0.5em; margin-top: 0px;}
}
@media only screen and (max-width: 767px){
/*デフォルトの要素*/
.l-main{padding-top: 0px!important;}
.p-splash__inner img{
max-height: 150px;
max-width: 280px;
}
/*カラム関係*/
.row, .row1{display: block;}
.col1 {width: 100%; padding: 0;}
/*アニメーション関係*/
div[class^="fadein"] {transform: translate(0px, 30px); transition: all 1000ms;}
.fadein3 {transform: translate(0px, 0px)!important;}
/*メニュー本体*/
.menu{width: 100%; height: 100%; background-color: rgba(85, 85, 85, 0.9);}
.menu p{font-size: 1.7em; padding: 20px 0px;}
/*スプラッシュページ調整*/
.p-splash__catch img{max-width: 280px;}
/*トップ動画コンテンツ*/
.wrap-video .titleRising{width: 250px;}
.wrap-video .titleRising p{font-size:50px;}
/*見出しコンテンツ*/
.crosshead {padding: 60px 0px; width:100%;}
.crosshead h2 {font-size: 1.8em;}
.crosshead p{margin-left: 25px; margin-right: 25px;}
.crosshead2 {padding: 60px 0px; width:100%;}
.crosshead2 h2 {font-size: 1.8em;}
.crosshead2 p{font-size: 0.9em; margin-left: 25px; margin-right: 25px;}
/*youtubeコンテンツ*/
div[class^="youtube-side"] .text{margin-top: 0px; width:100%;}
div[class^="youtube-side"] .text h3 {font-size: 1.2em; margin: 0px 0px 20px 0px;}
div[class^="youtube-side"] .text p {font-size: 0.7em;}
div[class^="youtube-side"] .text .strong-message {font-size: 0.9em; margin-top: 20px;}
/*youtubeコンテンツ*/
div[class^="youtube-side"] {height :400px;}
/*人物紹介コンテンツ*/
.person-side{height:400px;}
.person-side .text h3 {font-size: 1.5em;}
.person-side .text h4 {font-size: 1.1em; margin: 10px 0 20px 0;}
.person-side .text img{width: 60%;}
.person-side .text p {font-size: 1em;}
#off {display: none;}
/*フッターコンテンツ*/
.footlogo{display: block;}
.footlogo__inner img{width:20%; height:auto;}
.foothead h2{font-size: 1.4em;}
.foothead p{font-size: 0.7em;}
.foothead img{width:70%; height:auto;}
}