@charset "UTF-8";

/*基本設定-----------------------------------------*/
html, body { height: 100%; }

body {
    font-family: "Sawarabi Mincho";
    font-size: 1em;
    color: #333333;
    line-height:1.8em;
    }

a:link {color: #ff0054;} 
a:visited {color: #ff0054;} 
a:hover {color: #006aff; text-decoration: none;} 
a:active {color: #A45200;} 



/*webフォント-----------------------------------------*/
.wf-hannari { font-family: "Hannari"; }
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }




/*トップページ=========================================*/
#oc_title{
  width: 100%;
  height: 100vh; 
  z-index: 10;
    background-color: aqua;
}

.head_tit{
    font-size: 0.8em;
}
.jumbotron{
    height: 100vh;
    vertical-align: middle;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 0;
}
.start_arrow{
	text-align: center;
    position: relative;
	top:-50px;
	height: 10px;
}


/*　ページトップボタン */

#pageTop {
  position: fixed;
  bottom: 5px;
  right: 5px;
}

#pageTop i {
  padding-top: 6px
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  /*background-color: #fff;*/
  color: #666;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


#oc_concpt{
    width: 100%;
    height: 100vh;
    padding: 0px;
    font-family: "Noto Sans JP";
    background-color:#F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* 要素の位置を固定する */
    bottom: 0; /* 基準の位置を画面の一番下に指定する */
    z-index: -100;
    margin-left: auto;
    margin-right: auto;
}

.shikaku_img{
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

.shikaku_img img{
    height: 80%;
    /*height: 50vh;*/
}
.shikaku_txt{
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.shikaku_txt h3{
    font-size: 1.3em;
}
.shikaku_txt p{
    margin-top: 10px;
    font-size: 0.7em;
    line-height: 2em;
}



/*メイン- - - - - - - - - - -*/

.top_line{
	background-color: #fff;
    position: relative;
	top: 800px;
	width: 100%;
    border-top: thin solid #ddd;
    border-bottom: thin solid #ddd;
    margin-bottom: 800px;
}
.container{
    text-align: center;
    background-color: #fff;
    position: relative;
    /*top: 800px;*/
    padding-top: 150px;
    padding-bottom: 50px;
}


/*ごあいさつ- - - - - - - - - - -*/

.goaisatsu{
	margin-bottom: 100px;
}

.goaisatsu p{
	margin-bottom: 30px;
}




/*demo動画リスト- - - - - - - - - - -*/


.demo_list{
    border-radius: 10px;
    margin: 5px;
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    border: inset 1px #eeeeee;
    box-shadow: 0 0 8px gray;
}

.demo_main p{
 	font-size: 0.7em;
    margin-bottom: 0px;
}


h3{
    font-size: 1.3em;
}

h4{
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 5px;
}

h5{
    font-size: 0.7em;
    margin-top: 100px;
}


/*ura_oc- - - - - - - - - - -*/

#uraOc{
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /*要素の位置を固定する */
    bottom: 0; /* 基準の位置を画面の一番下に指定する */
    width: 100%;
    z-index: -50;
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom: 150px;*/
    height: 100vh;
    vertical-align: middle;
}




/*fotter- - - - - - - - - - -*/

.fotter_line{
    background-color: #fff;
    position: relative;
    top: 800px;
    width: 100%;
    border-top: thin solid #ddd;
    /*border-bottom: thin solid #ddd;*/
}

.fotter_container{
    text-align: center;
    background-color: #fff;
    position: relative;
    /*top: 800px;*/
    padding-top: 10px;
    padding-bottom: 100px;
}

fotter{
	font-size: 0.7em;
}

.fotter_aria{
    width: 100%;
}

.b_txt{
    color: #333333;
}

/*------------------------------------------*/


@media (min-width: 1200px) {
    .carousel slide img{
        max-width: 600px; } }
@media (min-width: 992px) {
    .carousel slide img{
        max-width: 600px; } }



/*---------------------------------------------------------*/
/* ローディング画面 */
/* 非表示 */
.is-hide {
    display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
    transition-property: opacity;
    transition-delay: .9s;
    transition-duration: .8s;
    opacity: 0;
    pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
    transition-property: opacity;
    transition-delay: .9s;
    transition-duration: .3s;
    opacity: 0;
    pointer-events: none;
}
/* ローディング画面 */
#loader-bg {
    background: #ffffff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#loader {
    height: 120px;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    position: fixed;
    top: 50%;
    width: 120px;
}
#loader p {
    color: #454545;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}
#loader p img {
    display: inline-block;
}

/* その他 */
.yokoku1{
    background-color: red;
    color: yellow;
    font-size: 0.7em;
    margin-left: 5px;
}

.yokoku2{
    background-color: yellow;
    color: red;
    font-size: 0.7em;
    margin-left: 5px;
}