/*-------------------------------------------------------------------------------------------
---------------- 追加・上書き用:部品クラス 
---------------- addClass/removeClassは最終行に記載しないと適用されない
---------------------------------------------------------------------------------------------
*/

/* JQueryのaddClass/removeClassで表示/非表示をコントロール */
.visibility_hidden   {visibility: hidden;}
.visibility_collapse {visibility: collapse;}
.visibility_visible  {visibility: visible;}
.display_none  {display: none;}
.display_block {display: block;}


/* 表示の透明不透明 */
.is_nonDisplay { opacity: 0; }
.is_Display    { opacity: 1; }
/* 存在の有無 */
.is_nonExist { opacity: 0; display: none; }
.is_Exist    { opacity: 1; display: block;}


/* スタイルの非表示 */
.is_nonStyle { list-style:none;}


/* transform位置による表示/非表示 */
.is_transform_minus200pct { left: -100%; }


/*-- javascriptで条件満たした際にaddするアニメーションCSS--------------------------*/
/*アニメ--左からスライドイン*/
.is_slideInLeft {
    animation-name: slideInLeft;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-duration:1s;
    animation-fill-mode:forwards;
}
@keyframes slideInLeft {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50%,100% {
    opacity: 1;
  }
}

/*アニメ--中央の奥からふわっと出現*/
.is_flipPopup {
    animation-name: flipPopup;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes flipPopup{
    0% {
        transform: translateY(100px) scale(0.6);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1.0);
    }
    75%,100% {
        opacity: 1;
    }
}


/*アニメ--中央の下からふわっと出現*/
.is_comeUp{
    animation-name:comeUp;
    animation-duration:1.0s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes comeUp{
    from {
        opacity: 0;
        transform: translateY(150px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*アニメ--中央の奥からいったん止まって出現*/
.is_circleIncenter {
    animation-name: circleIncenter;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes circleIncenter {
    0% {
        transform: translateY(-300px) scale(0);
        border-radius:30%;
    }
    50% {
        transform: translateY(-300px) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
  }

/*アニメ--左下から立ち上がる*/
.is_flipLeftTop {
    animation-name: flipLeftTop;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes flipLeftTop{
    0% {
        transform: translate(-200px,300px) rotate(-15deg);
        opacity: 0;
    }
    100% {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
    }
    50%,100% {
        opacity: 1;
    }
}

/*アニメ--右下から立ち上がる*/
.is_flipRightTop {
    animation-name: flipRightTop;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes flipRightTop{
    0% {
        transform: translate(200px,300px) rotate(15deg);
        opacity: 0;
    }
    100% {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
    }
    50%,100% {
        opacity: 1;
    }
}

/*アニメ--左から折り畳みが広がる*/
.is_wraptapeLeftRight {
    animation-name: wraptapeLeftRight;
    animation-duration:3s;
    animation-fill-mode:forwards;
    transform-origin: left center;

    opacity: 0;
}
@keyframes wraptapeLeftRight{
    0% {
        transform: scaleX(0) translate(-5%);
        opacity: 0;
    }
    30% {
        transform: scaleX(1) translate(0);
        opacity: 1;
    }
    100% {
        transform: scaleX(1) translate(0);
        opacity: 1;
    }
}

/*アニメ--っ中央で回転しながら出現*/
.is_wraptapeRotation {
    animation-name: wraptapeRotation;
    animation-duration:3s;
    animation-fill-mode:forwards;
    transform-origin: center;

    opacity: 0;
}
@keyframes wraptapeRotation{
    0% {
        transform: scaleX(0) translate(-5%);
        opacity: 0;
    }
    30% {
        transform: scaleX(1) translate(0);
        opacity: 1;
    }
    100% {
        transform: scaleX(1) translate(0);
        opacity: 1;
    }
}
/*-- javascriptで条件満たした際にaddするアニメーションCSS ここまで --------------------------*/



/*------------ クラス指定用フォント(addClass/removeClass) ------------------------------------------------------------ */
/*------------ フォントサイズは、基準を元にremで定義する------------**/
.font_top7{ font-size: 7.0rem; } 
.font_top6{ font-size: 6.0rem; } 
.font_top5{ font-size: 5.0rem; } 
.font_f1  { font-size: 8.0rem; } 
.font_f2  { font-size: 3.5rem; } 
.font_f3  { font-size: 2.2rem; } 
.font_f4  { font-size: 1.6rem; } 
.font_f5  { font-size: 1.4rem; } 
.font_f6  { font-size: 1.2rem; } 

.font_weight_bold {font-weight:700;}

/*行間の調整*/
.line_hgt_10 { line-height: 10px; } 
.line_hgt_15 { line-height: 15px; } 
.line_hgt_20 { line-height: 20px; } 
.line_hgt_30 { line-height: 30px; } 


/*- 段落文字装飾CSS -*/
.h_shadow01 {
    text-align:center;
    color: black;
    font-weight: bold;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}


 /*総称フォント名には""をつけない、各適用フォントには""をるける*/
.index_ENG { font-family:"Arial Black", sans-serif;  font-weight:Bold; text-align:center; } 
.index_JPN { font-family:"Arial Black", sans-serif;  font-weight:Bold; text-align:center; } 
.p_ENG { font-family:"Verdana","ヒラギノ角ゴ ProN W6"; font-weight:Normal;} 
.p_JPN { font-family:"Verdana","ヒラギノ角ゴ ProN W6"; font-weight:Normal;} 
.ggl_cursive_ENG { font-family:"Courgette","Kalam","Pacifico"  ,sans-serif; font-weight:Normal;} 
.ggl_cursive_JPN { font-family:"BIZ UDPMincho","Kokoro","Hannari","ヒラギノ角ゴ ProN W6",sans-serif; font-weight:Normal;} 

.font-fmly-timesnewroman { font-family: "Times New Roman"; }

.font-pr-pr         { font-family: "Times New Roman"; font-size: calc(5.0rem*0.8); text-align:center; }
.font-siteabc       { font-family: "Times New Roman"; font-size: calc(5.0rem*0.8); text-align:center; }
.font-siteabc-header{ font-family: "Times New Roman"; font-size: calc(4.0rem*0.8); text-align:center; }

.index_ENG.t_left  { text-align:left; } 
.index_JPN.t_left  { text-align:left; } 
.index_ENG.t_right { text-align:right; } 
.index_JPN.t_right { text-align:right; } 

.p_ENG.t_left  { text-align:left; } 
.p_JPN.t_left  { text-align:left; } 
.p_ENG.t_right { text-align:right; } 
.p_JPN.t_right { text-align:right; } 
.p_ENG.t_center { text-align:center; } 
.p_JPN.t_center { text-align:center; } 

.ggl_cursive_ENG.t_left  { text-align:left; } 
.ggl_cursive_JPN.t_left  { text-align:left; } 
.ggl_cursive_ENG.t_right { text-align:right; } 
.ggl_cursive_JPN.t_right { text-align:right; } 
.ggl_cursive_ENG.t_center { text-align:center; } 
.ggl_cursive_JPN.t_center { text-align:center; }

/*スマホレスポンシブ対応--最小480px-最大が960pxに適用する＝タブレット*/
@media screen and (min-width: 481px) and (max-width: 960px){
    .font_f1 { font-size: calc(8.0rem*0.7); } 
    .font_f2 { font-size: calc(3.5rem*0.8); } 
    .font_f3 { font-size: calc(2.2rem*0.9); } 
    .font_f4 { font-size: calc(1.6rem*0.9); } 
    .font_f5 { font-size: calc(1.4rem*0.9); } 
    .font_f6 { font-size: calc(1.2rem*1.0); } 
    .h_shadow01 { left: 50%; }
    /*
    .index_ENG { text-align:left; } 
    .index_JPN { text-align:left; } 
    */
    .index_ENG { left: 50%; } 
    .index_JPN { left: 50%; } 
    .p_ENG.t_center { text-align:left; } 
    .p_JPN.t_center { text-align:left; } 
    .ggl_cursive_ENG.t_center { text-align:left; } 
    .ggl_cursive_JPN.t_center { text-align:left; }
}
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .font_f1 { font-size: calc(8.0rem*0.5); } 
    .font_f2 { font-size: calc(3.5rem*0.6); } 
    .font_f3 { font-size: calc(2.2rem*0.8); } 
    .font_f4 { font-size: calc(1.6rem*0.9); } 
    .font_f5 { font-size: calc(1.4rem*0.9); } 
    .font_f6 { font-size: calc(1.2rem*1.0); } 
    .h_shadow01 { left: 50%; }
    /*
    .index_ENG { text-align:left; } 
    .index_JPN { text-align:left; } 
    */
    .index_ENG { left: 50%; } 
    .index_JPN { left: 50%; } 
    .p_ENG.t_center { text-align:left; } 
    .p_JPN.t_center { text-align:left; } 
    .ggl_cursive_ENG.t_center { text-align:left; } 
    .ggl_cursive_JPN.t_center { text-align:left; }
}

/*------------ クラス指定用フォント(addClass/removeClass) ------------------------------------------------------------ */

.fontstyle_italic{ font-style: italic; }

.fload_left { float:left;  }
.fload_right{ float:right; }

/*+++部品クラス-文字の色+++*/
.letter_color_aoxyzblue   {color:rgb(0, 0, 111);}
.letter_color_siteabcblue {color:rgb(0, 0, 222);}
.letter_color_prprgreen   {color:rgb(0, 111, 0);}
.letter_color_black       {color:black;}
.letter_color_grey        {color:grey;}
.letter_color_white       {color:white;}
.letter_color_blue        {color:blue;}
.letter_color_green       {color:green;}
.letter_color_red         {color:red;}
.letter_color_deeppink    {color:deeppink;}
.letter_color_hotpink     {color:hotpink;}
.letter_color_sakurapink  {color:rgb(255, 150, 255);}
.letter_color_silver      {color:silver;}


/*+++部品クラス-文字の線+++*/
.txt_deco_line_none         {text-decoration-line: none;}
.txt_deco_line_underline    {text-decoration-line: underline;}
.txt_deco_line_overline     {text-decoration-line: overline;}
.txt_deco_line_line-through {text-decoration-line: line-through;}
.txt_deco_line_blink        {text-decoration-line: blink;}

.txt_deco_color_black     {text-decoration-color: black;    text-decoration-thickness: 3px;}
.txt_deco_color_grey      {text-decoration-color: grey;     text-decoration-thickness: 3px;}
.txt_deco_color_white     {text-decoration-color: white;    text-decoration-thickness: 3px;}
.txt_deco_color_blue      {text-decoration-color: blue;     text-decoration-thickness: 3px;}
.txt_deco_color_green     {text-decoration-color: green;    text-decoration-thickness: 3px;}
.txt_deco_color_red       {text-decoration-color: red;      text-decoration-thickness: 3px;}
.txt_deco_color_deeppink  {text-decoration-color: deeppink; text-decoration-thickness: 3px;}






/*+++ font-family 部品クラス- font-family +++++++++*/
/*総称フォント*/
.font_family_generic_sans_serif   { font-family: sans-serif; }
.font_family_generic_serif        { font-family: serif; }
.font_family_generic_monospace    { font-family: monospace; }
.font_family_generic_cursive      { font-family: cursive; }
.font_family_generic_fantasy      { font-family: fantasy; }
/*英語向け*/
.font_family_default             {  }
.font_family_name_Arial          { font-family: "Arial"; }
.font_family_name_ArialBlack     { font-family: "Arial Black"; }
.font_family_name_ComicSansMS    { font-family: "Comic Sans MS"; }
.font_family_name_Georgia        { font-family: "Georgia"; }
.font_family_name_Impact         { font-family: "Impact"; }
.font_family_name_TimesNewRoman  { font-family: "Times New Roman"; }
.font_family_name_Verdana        { font-family: "Verdana"; }
/*日本語向け*/
.font_family_name_Meiryo         { font-family: "メイリオ"; }
.font_family_name_MSPgothic      { font-family: "ＭＳ Ｐゴシック"; }
.font_family_name_MSgothic       { font-family: "ＭＳ ゴシック"; }
.font_family_name_Yugothic       { font-family: "游ゴシック"; }
.font_family_name_MSPmintyo      { font-family: "ＭＳ Ｐ明朝"; }
.font_family_name_MSmintyo       { font-family: "ＭＳ 明朝"; }
.font_family_name_YuMincho       { font-family: "游明朝"; }




/*+++部品クラス-背景の色+++*/
.bg_color_aoxyzblue         {background-color:rgb(0, 0, 111);}
.bg_color_readonly_darkgrey {background-color:rgb(200, 200, 200);}
.bg_color_black             {background-color:black;}
.bg_color_pastelblack       {background-color:rgb(55, 55, 55);}
.bg_color_grey              {background-color:grey;}
.bg_color_silver            {background-color:silver;}
.bg_color_lightgrey         {background-color:lightgrey;}
.bg_color_lightgrey230      {background-color:rgb(230, 230, 230);}
.bg_color_lightgrey235      {background-color:rgb(235, 235, 235);}
.bg_color_lightgrey240      {background-color:rgb(240, 240, 240);}
.bg_color_whitesmoke        {background-color:whitesmoke;}
.bg_color_white             {background-color:white;}
.bg_color_blue              {background-color:blue;}
.bg_color_green             {background-color:green;}
.bg_color_skyblue           {background-color:skyblue;}
.bg_color_brightlightblue   {background-color:rgb(200, 240, 255);}
.bg_color_lightgreen        {background-color:lightgreen;}
.bg_color_brightlightgreen  {background-color:rgb(200, 255, 200);}
.bg_color_pink              {background-color:pink;}
.bg_color_red               {background-color:red;}
.bg_color_aoxyzblue_to_whitesmoke {background: linear-gradient(110deg, rgb(0, 0, 111), whitesmoke);}
.bg_color_brlblue_to_whitesmoke   {background: linear-gradient(110deg, rgb(200, 240, 255), whitesmoke);}
.bg_color_skyblue_to_whitesmoke   {background: linear-gradient(110deg, skyblue, whitesmoke);}

.bg_color_brightlightblue_to_whitesmoke_135deg  {background: linear-gradient(135deg, rgb(200, 240, 255), whitesmoke );}
.bg_color_whitesmoke_to_skyblue      {background: linear-gradient(to right, whitesmoke, skyblue );}
.bg_color_whitesmoke_to_pink         {background: linear-gradient(to right, whitesmoke, pink );}
.bg_color_whitesmoke_to_lightgreen   {background: linear-gradient(to right, whitesmoke, lightgreen );}
.bg_color_forestgreen_to_70darkgreen {background: linear-gradient(to right, forestgreen, rgb(0, 70, 0) );}
.bg_color_lightgrey_to_lightgrey240  {background: linear-gradient(to right, lightgrey, rgb(240, 240, 240) );}
.bg_color_grey_lightgrey235_grey               {background: linear-gradient(.25turn, grey, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, grey);}
.bg_color_navy_lightgrey235_navy               {background: linear-gradient(.25turn, navy, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, navy);}
.bg_color_tomato_lightgrey235_tomato           {background: linear-gradient(.25turn, tomato, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, tomato);}
.bg_color_forestgreen_lightgrey235_forestgreen {background: linear-gradient(.25turn, forestgreen, 2%, rgb(235, 235, 235), 10%, rgb(235, 235, 235), 90%, rgb(235, 235, 235), 98%, forestgreen);}


.bg_color_snow                 {background-color:snow;}
.bg_color_white                {background-color:white;}
.bg_color_mintcream            {background-color:mintcream;}
.bg_color_whitesmoke           {background-color:whitesmoke;}
.bg_color_lightyellow          {background-color:lightyellow;}
.bg_color_linen                {background-color:linen;}
.bg_color_ivory                {background-color:ivory;}
.bg_color_beige                {background-color:beige;}
.bg_color_cornsilk             {background-color:cornsilk;}
.bg_color_bisque               {background-color:bisque;}
.bg_color_seashell             {background-color:seashell;}
.bg_color_mistyrose            {background-color:mistyrose;}
.bg_color_oldlace              {background-color:oldlace;}
.bg_color_moccasin             {background-color:moccasin;}
.bg_color_navajowhite          {background-color:navajowhite;}
.bg_color_blanchedalmond       {background-color:blanchedalmond;}
.bg_color_antiquewhite         {background-color:antiquewhite;}
.bg_color_floralwhite          {background-color:floralwhite;}
.bg_color_lightgoldenrodyellow {background-color:lightgoldenrodyellow;}
.bg_color_lemonchiffon         {background-color:lemonchiffon;}
.bg_color_khaki                {background-color:khaki;}
.bg_color_gold                 {background-color:gold;}
.bg_color_goldenrod            {background-color:goldenrod;}
.bg_color_burlywood            {background-color:burlywood;}
.bg_color_chocolate            {background-color:chocolate;}
.bg_color_coral                {background-color:coral;}
.bg_color_ghostwhite           {background-color:ghostwhite;}
.bg_color_honeydew             {background-color:honeydew;}
.bg_color_lavenderblush        {background-color:lavenderblush;}
.bg_color_aliceblue            {background-color:aliceblue;}
.bg_color_azure                {background-color:azure;}
.bg_color_blueviolet           {background-color:blueviolet;}
.bg_color_brown                {background-color:brown;}
.bg_color_cadetblue            {background-color:cadetblue;}
.bg_color_chartreuse           {background-color:chartreuse;}
.bg_color_crimson              {background-color:crimson;}
.bg_color_darkcyan             {background-color:darkcyan;}
.bg_color_darkgoldenrod        {background-color:darkgoldenrod;}
.bg_color_darkgray             {background-color:darkgray;}
.bg_color_darkgrey             {background-color:darkgrey;}
.bg_color_darkkhaki            {background-color:darkkhaki;}
.bg_color_darkviolet           {background-color:darkviolet;}
.bg_color_magenta              {background-color:magenta;}
.bg_color_fuchsia              {background-color:fuchsia;}
.bg_color_mediumvioletred      {background-color:mediumvioletred;}
.bg_color_mediumorchid         {background-color:mediumorchid;}
.bg_color_darkmagenta          {background-color:darkmagenta;}
.bg_color_darkorchid           {background-color:darkorchid;}
.bg_color_mediumpurple         {background-color:mediumpurple;}
.bg_color_mediumslateblue      {background-color:mediumslateblue;}
.bg_color_darkgreen            {background-color:darkgreen;}
.bg_color_forestgreen          {background-color:forestgreen;}
.bg_color_darkolivegreen       {background-color:darkolivegreen;}
.bg_color_darkslategray        {background-color:darkslategray;}
.bg_color_darkslategrey        {background-color:darkslategrey;}
.bg_color_darkorange           {background-color:darkorange;}
.bg_color_darkred              {background-color:darkred;}
.bg_color_darksalmon           {background-color:darksalmon;}
.bg_color_darkseagreen         {background-color:darkseagreen;}
.bg_color_darkslateblue        {background-color:darkslateblue;}
.bg_color_darkturquoise        {background-color:darkturquoise;}
.bg_color_deeppink             {background-color:deeppink;}
.bg_color_dimgray              {background-color:dimgray;}
.bg_color_firebrick            {background-color:firebrick;}
.bg_color_gray                 {background-color:gray;}
.bg_color_greenyellow          {background-color:greenyellow;}
.bg_color_grey                 {background-color:grey;}
.bg_color_gainsboro            {background-color:gainsboro;}
.bg_color_hotpink              {background-color:hotpink;}
.bg_color_indianred            {background-color:indianred;}
.bg_color_indigo               {background-color:indigo;}
.bg_color_lavender             {background-color:lavender;}
.bg_color_lightcoral           {background-color:lightcoral;}
.bg_color_lightcyan            {background-color:lightcyan;}
.bg_color_lightgray            {background-color:lightgray;}
.bg_color_lightpink            {background-color:lightpink;}
.bg_color_pastellightpink      {background-color:rgb(250, 235, 235);}
.bg_color_lightsalmon          {background-color:lightsalmon;}
.bg_color_lightseagreen        {background-color:lightseagreen;}
.bg_color_lightskyblue         {background-color:lightskyblue;}
.bg_color_lightslategray       {background-color:lightslategray;}
.bg_color_lightsteelblue       {background-color:lightsteelblue;}
.bg_color_maroon               {background-color:maroon;}
.bg_color_olive                {background-color:olive;}
.bg_color_olivedrab            {background-color:olivedrab;}
.bg_color_mediumaquamarine     {background-color:mediumaquamarine;}
.bg_color_mediumseagreen       {background-color:mediumseagreen;}
.bg_color_lightgreen           {background-color:lightgreen;}
.bg_color_pastellightgreen     {background-color:rgb(235, 250, 235);}
.bg_color_mediumspringgreen    {background-color:mediumspringgreen;}
.bg_color_springgreen          {background-color:springgreen;}
.bg_color_lime                 {background-color:lime;}
.bg_color_limegreen            {background-color:limegreen;}
.bg_color_palegreen            {background-color:palegreen;}
.bg_color_lawngreen            {background-color:lawngreen;}
.bg_color_lightblue            {background-color:lightblue;}
.bg_color_paleturquoise        {background-color:paleturquoise;}
.bg_color_turquoise            {background-color:turquoise;}
.bg_color_powderblue           {background-color:powderblue;}
.bg_color_mediumturquoise      {background-color:mediumturquoise;}
.bg_color_skyblue              {background-color:skyblue;}
.bg_color_aqua                 {background-color:aqua;}
.bg_color_cyan                 {background-color:cyan;}
.bg_color_aquamarine           {background-color:aquamarine;}
.bg_color_slateblue            {background-color:slateblue;}
.bg_color_royalblue            {background-color:royalblue;}
.bg_color_mediumblue           {background-color:mediumblue;}
.bg_color_midnightblue         {background-color:midnightblue;}
.bg_color_navy                 {background-color:navy;}
.bg_color_cornflowerblue       {background-color:cornflowerblue;}
.bg_color_deepskyblue          {background-color:deepskyblue;}
.bg_color_dodgerblue           {background-color:dodgerblue;}
.bg_color_darkblue             {background-color:darkblue;}
.bg_color_orange               {background-color:orange;}
.bg_color_orangered            {background-color:orangered;}
.bg_color_orchid               {background-color:orchid;}
.bg_color_palegoldenrod        {background-color:palegoldenrod;}
.bg_color_palevioletred        {background-color:palevioletred;}
.bg_color_papayawhip           {background-color:papayawhip;}
.bg_color_peachpuff            {background-color:peachpuff;}
.bg_color_peru                 {background-color:peru;}
.bg_color_pink                 {background-color:pink;}
.bg_color_plum                 {background-color:plum;}
.bg_color_purple               {background-color:purple;}
.bg_color_red                  {background-color:red;}
.bg_color_rosybrown            {background-color:rosybrown;}
.bg_color_saddlebrown          {background-color:saddlebrown;}
.bg_color_salmon               {background-color:salmon;}
.bg_color_sandybrown           {background-color:sandybrown;}
.bg_color_seagreen             {background-color:seagreen;}
.bg_color_sienna               {background-color:sienna;}
.bg_color_silver               {background-color:silver;}
.bg_color_slategray            {background-color:slategray;}
.bg_color_steelblue            {background-color:steelblue;}
.bg_color_tan                  {background-color:tan;}
.bg_color_teal                 {background-color:teal;}
.bg_color_thistle              {background-color:thistle;}
.bg_color_tomato               {background-color:tomato;}
.bg_color_violet               {background-color:violet;}
.bg_color_wheat                {background-color:wheat;}
.bg_color_yellow               {background-color:yellow;}
.bg_color_yellowgreen          {background-color:yellowgreen;}



/*+++部品クラス-枠の装飾+++*/
.border_solid { border: solid  1px rgba(0, 0, 0, 1); }
.border_double{ border: double 4px rgba(0, 0, 0, 1); }  /*4px以上ないと違いが出ない*/
.border_dashed{ border: dashed 1px rgba(0, 0, 0, 1); }
.border_dotted{ border: dotted 1px rgba(0, 0, 0, 1); }
.border_dashed{ border: dashed 1px rgba(0, 0, 0, 1); }
.border_ridge { border: ridge  1px rgba(0, 0, 0, 1); }
.border_inset { border: inset  1px rgba(0, 0, 0, 1); }

.border_top_solid { border-top: solid  1px rgba(0, 0, 0, 1); }
.border_top_dashed{ border-top: dashed 1px rgba(0, 0, 0, 1); }
.border_top_dotted{ border-top: dotted 1px rgba(0, 0, 0, 1); }

.border_bottom_solid { border-bottom: solid  1px rgba(0, 0, 0, 1); }
.border_bottom_dashed{ border-bottom: dashed 1px rgba(0, 0, 0, 1); }
.border_bottom_dotted{ border-bottom: dotted 1px rgba(0, 0, 0, 1); }

.border_left_solid { border-left: solid  1px rgba(0, 0, 0, 1); }
.border_left_dashed{ border-left: dashed 1px rgba(0, 0, 0, 1); }
.border_left_dotted{ border-left: dotted 1px rgba(0, 0, 0, 1); }

.border_right_solid { border-right: solid  1px rgba(0, 0, 0, 1); }
.border_right_dashed{ border-right: dashed 1px rgba(0, 0, 0, 1); }
.border_right_dotted{ border-right: dotted 1px rgba(0, 0, 0, 1); }


/*+++部品クラス-枠の色+++*/
.border_color_black     { border-color: black; }
.border_color_white     { border-color: white; }
.border_color_whitesmoke{ border-color: whitesmoke; }
.border_color_grey      { border-color: grey; }
.border_color_blue      { border-color: blue; }
.border_color_green     { border-color: green; }
.border_color_red       { border-color: red; }

/*+++部品クラス-枠の角+++*/
.border_radius_5px { border-radius:5px; }
.border_radius_10px{ border-radius:10px; }

/*+++部品クラス-部品位置+++*/
.left_50px  { left:50px;}
.left_100px { left:100px;}

.transition_all_du3s_de1s_tline{
    transition-property: background-image;
    transition-duration: 3s;
    transition-delay:    1s;
    transition-timing-function: ease-in;
}

/*文字列用アンダーライン*/
.underline_before{
    background-image: black;
    background-repeat: no-repeat;
	background-size: 0% 40%;
	background-position: 0% 120%;
    transition: all 2s 0.5s ease-out;
}
.underline_after_darkblue_blue{
    background-image: linear-gradient(to right, rgba(0, 0, 200, 0.5), rgba(0, 0, 255, 0.5));
	background-size: 100% 30%;
}
.underline_after_darkgreen_green{
    background-image: linear-gradient(to right, rgba(0, 200, 0, 0.5), rgba(0, 255, 0, 0.5));
	background-size: 100% 30%;
}

/*+++ list部品クラス-list-style-type +++++++++*/
.list_style_none    { list-style-type: none; }
.list_style_disk    { list-style-type: disc; }
.list_style_circle  { list-style-type: circle; }
.list_style_square  { list-style-type: square; }
.list_style_l_roman { list-style-type: lower-roman; }
.list_style_u_roman { list-style-type: upper-roman; }
.list_style_l_alpha { list-style-type: lower-alpha; }
.list_style_u_alpha { list-style-type: upper-alpha; }
.list_style_decimal { list-style-type: decimal; }
.list_style_decimal_zero { list-style-type: decimal-leading-zero; }



/*+++ 部品クラス-画像サイズ px +++++++++*/
.img_width_250px { width: 250px; }
.img_width_500px { width: 500px; }
.img_width_750px { width: 750px; }
.img_width_1000px{ width: 1000px; }
.img_width_mine  {
    width: 300px; height:300px;

    /*右配置用--一つ上でrelativeを指定して、ここでabusolute+rightで指定*/
    position:relative;
    margin-right:0px; margin-left:auto; 

    border: solid 1px rgba(100,100,100,1);
    object-fit: scale-down;
}
.img_topmsg  {
    width: 300px; height:50px;

    /*右配置用--一つ上でrelativeを指定して、ここでabusolute+rightで指定*/
    position:relative;
    top:5%;
    margin-right:5%; margin-left:auto; 

    object-fit: scale-down;
}

/*+++ 部品クラス- width/height サイズ % +++++++++*/
/* scaleup/downの機能でclass変更の際に使用する */
.width_pct_defalt {} /* defalt */
.width_100pct { width: 100%; }
.width_75pct  { width: 75.00%; }
.width_67pct  { width: 66.67%; }
.width_62pct  { width: 61.81%; }
.width_56pct  { width: 56.25%; }
.width_50pct  { width: 50.00%; }
.width_41pct  { width: 41.42%; }
.width_30pct  { width: 30.28%; }
/*height % ⇒親要素のheightが指定されていないと%指定は効かない*/
.height_100pct { height: 100%;   }
.height_75pct  { height: 75.00%; }
.height_66pct  { height: 66.67%; }
.height_50pct  { height: 50.00%; }
.height_33pct  { height: 33.33%; }
.height_25pct  { height: 25.00%; }
/*aspectratio ⇒width % に対する比率*/
.aspectratio_none     {} /* defalt */
.aspectratio_1_1      { aspect-ratio: 1 / 1; }       /*  */
.aspectratio_4_3      { aspect-ratio: 4 / 3; }       /* アナログTV */
.aspectratio_3_2      { aspect-ratio: 3 / 2; }       /* カメラ */
.aspectratio_47_20    { aspect-ratio: 47 / 20; }     /* シネマスコープ */
.aspectratio_gold     { aspect-ratio: 1618 / 1000; } /* 黄金比率 */
.aspectratio_platinum { aspect-ratio: 1732 / 1000; } /* 白金比率 */
.aspectratio_16_9     { aspect-ratio: 16 / 9; }      /* ワイドTV */
.aspectratio_2_1      { aspect-ratio: 2 / 1; }       /* スコープサイズ */
.aspectratio_silver   { aspect-ratio: 2414 / 1000; } /* 白銀比率 */
.aspectratio_bronze   { aspect-ratio: 3303 / 1000; } /* 青銅比率 */

.paddingtop_75pct  { padding-top: 75.00%;} /* 4:3      => 3/4  => 75.00% エジソン比、映画やテレビ*/
.paddingtop_70pct  { padding-top: 70.07%;} /* 1+√2:1   =>      => 41.42% 大和比*/
.paddingtop_67pct  { padding-top: 66.67%;} /* 3:2      => 2/3  => 66.67% 写真などのフィルムカメラ*/
.paddingtop_62pct  { padding-top: 61.81%;} /* 1.618:1  =>      => 61.81% 黄金比*/
.paddingtop_58pct  { padding-top: 57.74%;} /* √3:1     =>      => 57.74% 白金比*/
.paddingtop_56pct  { padding-top: 56.25%;} /* 16:9     => 9/16 => 56.25% PC向けYouTubeの標準アスペクト比*/
.paddingtop_50pct  { padding-top: 50.00%;} /* 2:1      => 1/2  => 50.00% スコープサイズ*/
.paddingtop_41pct  { padding-top: 41.42%;} /* 1+√2:1   =>      => 41.42% 白銀比*/
.paddingtop_30pct  { padding-top: 30.28%;} /* 3+√13:2  =>      => 30.28% 青銅比*/


/*+++部品クラス-<IMG>/<VIDEO>/<IFRAME>などの中身を、コンテナーにどのようにはめ込むかを設定+++*/
.obj_fit_scaledown { object-fit: scale-down; }
.obj_fit_fill      { object-fit: fill; }
.obj_fit_contain   { object-fit: contain; }
.obj_fit_cover     { object-fit: cover; }
.obj_fit_none      { object-fit: none; }

/*+++部品クラス- func_reset_display(make-newpage.php) の class_css_arryと一致すること*/
.display_inlineblock  { display: inline-block; }
.display_inline       { display: inline; }
.display_block        { display: block; }
.display_flex         { display: flex; }
.display_grid         { display: grid; }
.display_table        { display: table; }
.display_inlinetable  { display: inline-table; }

/*+++部品クラス- func_reset_maxwidth(make-newpage.php) の class_css_arryと一致すること*/
.maxwidth_pct_defalt {} /* defalt */
.maxwidth_100pct  { max-width: 100%;   }
.maxwidth_075pct  { max-width: 70.07%; }
.maxwidth_067pct  { max-width: 66.67%; }
.maxwidth_062pct  { max-width: 61.81%; }
.maxwidth_058pct  { max-width: 57.74%; }
.maxwidth_050pct  { max-width: 50.00%; }
.maxwidth_041pct  { max-width: 41.42%; }
.maxwidth_033pct  { max-width: 33.33%; }
.maxwidth_025pct  { max-width: 25.00%; }
.maxwidth_020pct  { max-width: 20.00%; }


.width_30px    { width: 30px; }
.width_40px    { width: 40px; }
.width_50px    { width: 50px; }
.width_100px   { width: 100px; }
.width_200px   { width: 200px; }
.width_400px   { width: 400px; }
.width_600px   { width: 600px; }
.width_800px   { width: 800px; }
.width_1000px  { width: 1000px; }

.height_30px    { height: 30px; }
.height_40px    { height: 40px; }
.height_50px    { height: 50px; }
.height_100px   { height: 100px; }
.height_200px   { height: 200px; }
.height_400px   { height: 400px; }
.height_600px   { height: 600px; }
.height_800px   { height: 800px; }
.height_1000px  { height: 1000px; }

.maxwidth_30px    { max-width: 30px; }
.maxwidth_50px    { max-width: 50px; }
.maxwidth_100px   { max-width: 100px; }
.maxwidth_200px   { max-width: 200px; }
.maxwidth_400px   { max-width: 400px; }
.maxwidth_600px   { max-width: 600px; }
.maxwidth_800px   { max-width: 800px; }
.maxwidth_1000px  { max-width: 1000px; }

.minwidth_30px    { min-width: 20px; }
.minwidth_30px    { min-width: 30px; }
.minwidth_50px    { min-width: 50px; }
.minwidth_100px   { min-width: 100px; }
.minwidth_200px   { min-width: 200px; }
.minwidth_400px   { min-width: 400px; }
.minwidth_600px   { min-width: 600px; }


/*+++部品クラス- func_reset_minheight(make-newpage.php) の class_css_arryと一致すること*/
.minheight_defalt  {} /* defalt */
.minheight_050px   { min-height: 50px;  }
.minheight_075px   { min-height: 75px;  }
.minheight_100px   { min-height: 100px; }
.minheight_150px   { min-height: 150px; }
.minheight_200px   { min-height: 200px; }
.minheight_300px   { min-height: 300px; }
.minheight_400px   { min-height: 400px; }
.minheight_500px   { min-height: 500px; }


/*+++++ 部品クラス-部品の左右位置by Margin +++++*/
.margin_ALL_auto      { margin:auto;}
.margin_LR_auto_auto  { margin-left:auto; margin-right:auto;}
.margin_LR_10pct_auto { margin-left:10%;  margin-right:auto;}
.margin_LR_20pct_auto { margin-left:20%;  margin-right:auto;}
.margin_LR_30pct_auto { margin-left:30%;  margin-right:auto;}
.margin_LR_40pct_auto { margin-left:40%;  margin-right:auto;}
.margin_LR_auto_10pct { margin-left:auto; margin-right:10%; }
.margin_LR_auto_10pct { margin-left:auto; margin-right:20%; }
.margin_LR_auto_10pct { margin-left:auto; margin-right:30%; }
.margin_LR_auto_10pct { margin-left:auto; margin-right:40%; }
/*スマホレスポンシブ対応--最大が480pxに適用する＝スマホ*/
@media screen and (max-width: 480px){
    .margin_LR_auto_auto  { margin-left:auto; margin-right:auto;}
    .margin_LR_10pct_auto { margin-left:auto; margin-right:auto;}
    .margin_LR_20pct_auto { margin-left:auto; margin-right:auto;}
    .margin_LR_30pct_auto { margin-left:auto; margin-right:auto;}
    .margin_LR_40pct_auto { margin-left:auto; margin-right:auto;}
    .margin_LR_auto_10pct { margin-left:auto; margin-right:auto;}
    .margin_LR_auto_10pct { margin-left:auto; margin-right:auto;}
    .margin_LR_auto_10pct { margin-left:auto; margin-right:auto;}
    .margin_LR_auto_10pct { margin-left:auto; margin-right:auto;}
}


/*+++++ 部品クラス-部品の内側の余白調整by padding +++++*/
.padding_ALL_ZERO  {padding: 0px;}
.padding_left_1pct {padding-left: 1%;}
.padding_left_3pct {padding-left: 3%;}
.padding_left_5pct {padding-left: 5%;}
.padding_left_10px {padding-left: 10px;}
.padding_left_30px {padding-left: 30px;}



/*+++++ 部品クラス-位置by top +++++*/
.top_020px  {top: 20px;}
.top_050px  {top: 50px;}
.top_100px  {top: 100px;}
.top_200px  {top: 200px;}
.top_200px  {top: 300px;}

/*+++++ 部品クラス-位置by top +++++*/
.right_010px  {right: 10px;}
.right_020px  {right: 20px;}
.right_040px  {right: 40px;}
.right_070px  {right: 70px;}
.right_100px  {right: 100px;}



/*+++部品クラス- func_reset_flex_direction/func_chg_flex_direction(make-newpage.php) の class_css_arryと一致すること*/
.flexDirection_defalt        {} /* defalt */
.flexDirection_row           { flex-direction: row;   }
.flexDirection_rowReverse    { flex-direction: row-reverse; }
.flexDirection_column        { flex-direction: column; }
.flexDirection_columnReverse { flex-direction: column-reverse; }

/*+++部品クラス- func_reset_flex_wrap/func_chg_flex_wrap(make-newpage.php) の class_css_arryと一致すること*/
.flexWrap_defalt       {} /* defalt */
.flexWrap_nowrap        { flex-wrap: nowrap; }
.flexWrap_wrap          { flex-wrap: wrap; }
.flexWrap_wrapReverse   { flex-wrap: wrap-reverse; }

/*+++部品クラス- func_reset_justify_content/func_chg_justify_content(make-newpage.php) の class_css_arryと一致すること*/
.justifyContent_defalt       {} /* defalt */
.justifyContent_stretch      { justify-content: stretch; }
.justifyContent_flexStart    { justify-content: flex-start; }
.justifyContent_flexEnd      { justify-content: flex-end; }
.justifyContent_center       { justify-content: center; }
.justifyContent_spaceBetween { justify-content: space-between; }
.justifyContent_spaceAround  { justify-content: space-around; }
.justifyContent_spaceEvenly  { justify-content: space-evenly; }

/*+++部品クラス- func_reset_align_items/func_chg_align_items(make-newpage.php) の class_css_arryと一致すること*/
.alignItems_defalt    {} /* defalt */
.alignItems_stretch   { align-items: stretch; }
.alignItems_flexStart { align-items: flex-start; }
.alignItems_flexEnd   { align-items: flex-end; }
.alignItems_center    { align-items: center; }
.alignItems_baseline  { align-items: baseline; }


/*+++部品クラス-アニメーション の 一時的に目立たせる func_highlight_few_second で使用する*/
/**/
.highlighten_parts{
    outline: dotted 5px yellow;
    animation-name:highlight_flash_onoff;       /*--点滅設定--*/
    animation-duration:1S;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
/*--アニメーションの定義--*/
@keyframes highlight_flash_onoff {
    0%,35%,65%,100% {
      opacity: 1;
    }
    35%,65% {
      opacity: 0.5;
    }
}


/*-- 上場中止の文字専用 */
.postpone { color:red; font-size:small;}
/*-- マイナス文字専用 */
.minus_number { color:red; }



/*------------------------イメージ部品:Vカーソル-----------------------------------*/
/* 共通定義： shape_arrow */
/* Vカーソルの太さ */
.shape_up_arrow_30px   ,.shape_up_arrow_40px ,
.shape_down_arrow_30px , .shape_down_arrow_40px {
    border-top: solid 5px;
    border-right: solid 5px;
    border-color: blue;
    transform: rotate(135deg);
}
/* Vカーソルの大きさ */
.shape_up_arrow_30px   ,.shape_down_arrow_30px { width: 30px; height: 30px;}
.shape_up_arrow_40px   ,.shape_down_arrow_40px { width: 40px; height: 40px;}
/* Vカーソルの回転 */
.shape_up_arrow_30px   ,.shape_up_arrow_40px   { transform: rotate(315deg);}
.shape_down_arrow_30px ,.shape_down_arrow_40px { transform: rotate(135deg);}

@media screen and (max-width: 480px){
    .shape_up_arrow_30px ,.shape_down_arrow_30px { width: 20px; height: 20px;}
    .shape_up_arrow_40px ,.shape_down_arrow_40px { width: 25px; height: 25px;}
}
/*------------------------イメージ部品:Vカーソル-----------------------------------*/


.area_arrow_mark_onoff{
    /*デフォルト配置*/
    position: relative;
    /*デフォルト中央に配置*/
    left: 50%;

    content:  '';
    display:  block;

    z-index: 21;   /*--奥行--*/

    animation-name:ky_flash_onoff;
    animation-duration:2S;
    animation-timing-function:linear;
    animation-iteration-count:infinite;

    /*CSSによるshapeは別クラス*/
}


/*-----------------------------------------------------------------------------------------------*/
/*------------------------ 追加・上書き用:部品クラス END ------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/