@charset "utf-8";

/*エラー等*/


#console_id {
    display: block;
    z-index: 10;
    position: fixed;top: 0px;left: 0px;
    color :#f00;
    font-size: 40px;
    
}

.tyuuigaki{
    
    display: block;
    width:100%;
    text-align:center;
    margin:0 auto;
    color: blue;
    font-weight: bold;

}

h1 {
    
    margin: 4% auto;
    padding: 2% ;
    font-size: 3em;
    line-height: 1.5em;
    text-align: center;
    color: white;
    text-shadow:2px 2px 10px #fff;
    width:77%;
    height: 64px;
    border-bottom: solid 1px rgba(90,90,90,0.3); 
    
}

h2 {
    margin: 4% auto;
    padding: 1% 0;
    font-size: 2em;
    line-height: 2em;
    text-align: center;
    color: white;
    text-shadow:2px 2px 10px #fff;
    width:80%;
    height: 64px;
}

h3 {
    
    padding             :       2vh 0 0 0;
    margin              :       0 auto;
	font-weight			:		bold; 
	font-size			:		1.5em;
	text-align			:		center;
    line-height         :       01; 
    color               :       white;
    text-shadow			:		0px 2px 20px black;
    width               :       100%;
    
}

h4 {
    margin: 2% auto;
    padding: 2% ;
    font-size: 3em;
    line-height: 1.5em;
    text-align: center;
    color: white;
    text-shadow:2px 2px 10px #fff;
    width:77%;
    height: 64px;
    border-bottom: solid 1px rgba(90,90,90,0.5); 
}


a {
    /*アンカーに下線を消す対処*/
 
    text-decoration: none;
    color: #333;
}

div {
    
    -moz-overflow-style: none;    /* IE, Edge 対応 */
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
    
}

div::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    
}

#table {
    width: 100%;
    margin:0 auto;
    height: auto;
    text-align: center;
}

.tabel_box { 
    display: inline-block;
    vertical-align:top;
    margin:1%;
    padding: 1%;
    min-width:  400px;
    min-height: 400px;
    height: auto;
    background-color: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.postit {
    
    display             : block;
    margin              : 5% auto;
    overflow            : hidden;
    text-align          : left;
    padding             : 3%;
    background          : #fff;
    border              : solid 2px #ffc3c3;
    border-radius       : 10px; 
    width               : 30vw;
    height              : auto;

}

#tyuui {
    
    text-align: center;
    margin: 12% auto 0;

}

.licence_colombox {
    
    margin: 5% auto;
    padding: 1%;
    width:90%;    height: auto;
    background-color: beige;
    
}

.licence_colombox th,td{
    
      padding: 1% 2%;
    line-height: 2;
}

.licence_colombox th{
  
    width:120px;
    background-color: floralwhite;
}

.licence_colombox td{
    
    width:80px;
    background-color: azure;
    text-align: center;
}

.red{
    
    color :red;   
}

.blue{
    color :blue;   
    
}

.opg_frame {
    display: block;
    margin: 5% auto;
    padding: 2px;
    margin-bottom: 5px;
    border: 1px solid #eee;
    border-radius: 2px;
    width:100%;
    max-width:100%;
    min-height: 140px;
    background-color: white;
}

.opg_image{
    float: left;
    width:28%;
    height: auto;
    margin: 0px 5% 0 0;
    padding: 8px;
    overflow: hidden;
    border-right: 1px solid #eee;
    background-size: contain;
}

.opg_caption {
    
    padding:0;
    
}

.opg_title {

    color       :black;
    font-size    : 18px;
    font-weight : bold;
    
}
.opg_link {
    margin: 0; 
    font-size: 8px;
    font-weight: ;
    color: black;
}

.opg_des{
    font-size:12px; 
    color:black;
}

/*【素材・チップ等】*/

.top_pagelink{

    margin: 1% auto;
    position: relative;
    text-align: center;

    width:100%;
    max-width:360px ;
    height: auto;

    
}

.floatbody{
    
    z-index: 15;
    display: block;
    margin: -12% auto;
    position: fixed;top:0px:left:0px;
    background: rgba(255,255,255,0.8);
    width:100%;
    height: 100%;
    overflow: hidden;
    background-size:cover;

    
}

.line {

    margin: 0 auto;

    border-bottom      :  solid 1px rgb(20,20,20,0.1);
    width: 50vw;
    height: 10px;
    
}

.crystal_box {
    margin: 0 auto;
    padding: 1% 1% 5%;

    background-color:rgba(255,255,255,0.5);
    box-shadow: 4px 20px 20px rgba(0,0,0,0.4);
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-radius: 5px;
    width: 85%;
    max-width: 880px;
    height: auto;
}

.border_ref{
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    
}

.frame:active {
    position: relative;
    top :5px;
    box-shadow: 0 0 20px rgba(0,0,0,7);
}

.float_clear{
  /* floatを解除 */
  clear: both;
}

.li_mark_none {
    list-style: none;
}

.cursor_point{
    
    cursor:pointer;
    
}

.text_huchi{
  color: #000;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.text_huchi_link{

  text-decoration: underline;
  color: #00f;
  font-weight: bolder;
  text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
              -1px 1px 0 #fff, 1px -1px 0 #fff,
              0px 1px 0 #fff,  0-1px 0 #fff,
              -1px 0 0 #fff, 1px 0 0 #fff;
    
}

.box_back_image{
    
    margin: 5% auto;
    background-size: cover;
    width:1000px;
    height: auto;
    
}



/*【おあそび効果】*/

#mugioasobi{
    
    font-size: 2em;
    color:black;
    text-align:center;
    margin: 5%;
}


.hanabutton {
    text-align : center;
    margin: 0 auto;
    text-shadow: 0px 2px 5px #000;
    font-size: 1em;
    line-height: 2.5;
    font-weight: bolder;
    
    color: black;
    background-color: azure;
    
    border-radius: 5px;
    box-shadow: 0px 5px 8px rgb(0,0,0,0.5);
    cursor:pointer;
    width: 90%;
    height: auto;
   
}

.hanabutton:active{
    
    border-radius: 5px;
    border: solid 1px gray;
    opacity: 0.8;
    box-shadow: 0px 0px 0px rgb(0,0,0,0.1);   
}

.hanabutton:hover{
    color: white;
}


.backframe {
    
    z-index: 9;
    position: fixed;
    left: 0px;top: 0px;
    background: rgba(20,20,20,0.7);
    width:100vw;height:100vh;
    overflow: hidden;
    
}

.message_tyuui {

    display: block;
    position: fixed;left :50%;top:35%;
    margin:auto;
    vertical-align: middle;

}

.message_tyuui div {
    z-index: 10;
    display: block;
    position: relative;left :-200px;top:25;
    background-color: lightcyan;
    border-color:  cadetblue;
    border-radius: 10px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.2);
    width:400px;height: 240px;
    overflow: hidden;
    
}



.message_tyuui h4 {
    margin: 5% auto;
    text-align: center;
    line-height: 2em;
    font-size: 1em;
    font-weight: bolder;
    border-bottom: solid 1px #b8dede;
    width: 80%; height:auto;
}



.message_tyuui p {
    display: block;
    margin: 0% auto;
    padding: 2px;
    text-align: center;

    width:80%;height: auto;
    
}

.message_tyuui div div {
    cursor:pointer;

    z-index: 10;
    position: relative;bottom: 5%;left: 0;
    text-align: center;
    margin: 2em auto;
    border-color: aquamarine;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    line-height: 2em;
    color: azure;
    text-shadow:1px 1px 3px #000;
    background-color: cadetblue;
    width:128px;height: 2em;
    overflow: hidden;
}


.message_tyuui div div:active {
    
    transform: scale(0.9);
}

.message_tyuui div div:hover {
    
    box-shadow: 0px 0px 25px rgba(0,0,0,0.4);
}



.phone_massege_pop {
    
    z-index: auto;
    display: block;
    margin: 4% auto;
    padding: 1px 20px;
    font-size: 0.9em;
    line-height: 2.4em;

    width:auto;
    min-width: 64px;
    max-width: 256px;
    height: 32px;

    overflow: hidden;
    animation : massegePopAnime 0.6s ease-in-out 0s infinite alternate backwards;

}

@keyframes massegePopAnime {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(10%);
    }
}


.pc_massege_pop {
    
    z-index: auto;
    display: block;　
    margin: 4% auto;
    padding: 1% 4%;
    font-size: 0.9em;
    line-height: 2.4em;

    width:100%;
    min-width: 64px;
    max-width: 420px;
    height: 32px;

    overflow: hidden;
    animation : massegePopAnime 0.6s ease-in-out 0s infinite alternate backwards;
    
}



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


.message_tyuui h4 {
    margin: 5% auto;
    text-align: center;
    line-height: 2em;
    font-size: 1.2em;
    font-weight: bolder;
    border-bottom: solid 1px #b8dede;
    width: 80%; height:auto;
}
    
.message_tyuui div {
    z-index: 10;
    display: block;
    position: relative;left :-200px;top:25;
    background-color: lightcyan;
    border-color:  cadetblue;
    border-radius: 10px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.2);
    width:85vw;height: 240px;
    overflow: hidden;
    
}
    
.message_tyuui div div {


    z-index: 10;
    position: relative;bottom: 5%;left: 0;
    text-align: center;
    margin: 1.5em auto;
    border-color: aquamarine;
    border-radius: 5px;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 2.2em;
    color: azure;
    text-shadow:1px 1px 3px #000;
    background-color: cadetblue;
    width:192px;height: 2.2em;
    overflow: hidden;
}

    
.tabel_box {
    
    display: inline-block;
    vertical-align:top;
    margin:1%;
    padding: 1%;
    min-width: 400px;
    min-height: 400px;
    height: auto;
    background-color: rgb(255,255,255,0.1);
    border-radius: 2px;

}
    asa{
    color:dimgray;
}
#table {
    width: 100%;
    
    margin:0 auto;
    height: auto;
    text-align: center;

}

    
.no-phone {
    
    text-align          : center;
    margin              : 7% auto;
    text-shadow         : 0px 2px 5px #000;
    font-size           : 1em;
    line-height         : 2.5;
    font-weight         : bolder;
    
    color               : darkblue;
    background-color    : azure;
    border-radius       : 5px;
    box-shadow          : 0px 5px 8px rgb(0,0,0,0.5);
    cursor              :　pointer;
    width               : 80%;
    height              : auto;

    
}
    

.line {

    margin              : 0 auto;
    border-bottom       : solid 1px rgb(20,20,20,0.1);
    width               : 80vw;
    height              : 0px;
    
} 

.postit {
    
    z-index             : 3;
    padding             : 3%;
    margin              : 5% auto;
    text-align          : left;

    background          : #fff;
    border              : solid 2px #ffc3c3;
    border-radius       : 10px; 
    width               : 60vw;
    height              : auto;
}


.opg_frame {
    display: block;
    margin: 1% auto;
    padding: 2px;
    margin-bottom: 5px;
    border: 1px solid #eee;
    border-radius: 2px;
    width:100%;
    max-width:100%;
    min-height: 140px;
    background-color: white;
}

.opg_image{
    float: left;
    width:28%;
    height: auto;
    margin: 0px 5% 0 0;
    padding: 8px;
    overflow: hidden;
    border-right: 1px solid #eee;
    background-size: contain;
}

.opg_caption {
    
    padding:0;
    
}

.opg_title {

    color       :black;
    font-size    : 18px;
    font-weight : bold;
    
}
.opg_link {
    margin: 0; 
    font-size: 8px;
    font-weight: ;
    color: black;
}

.opg_des{
    font-size:12px; 
    color:black;
}

    
}