@charset "UTF-8";
/*html5doctor.comResetStylesheetv1.6.1LastUpdated:2010-09-17Author:RichardClark-http://richclarkdesign.comTwitter:@rich_clark*/html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}navul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}/*changecolourstosuityourneeds*/ins{background-color:#ff9;color:#000;text-decoration:none;}/*changecolourstosuityourneeds*/mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1pxdotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}/*changebordercolourtosuityourneeds*/hr{display:block;height:1px;border:0;border-top:1pxsolid#cccccc;margin:1em0;padding:0;}input,select{vertical-align:middle;}


/* ----基本設定（画面幅400px以下） ---------------------------------------------- */
*{box-sizing:border-box;}


body,#field,#header,#main,#footer{width:100%;}
.container{ width:90% ; max-width:1126px; margin: 0 auto; }


body,
#field  {background-color:#fafafa;}
#header {background-color:#ff8c00; height:83px;}
#main   {background-color:#ffffff;}
#footer {background-color:#fafafa;}


html,body{ overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;}


#main_item_1{float:left;  width:100%; margin:2.2rem 0; padding:2.7rem 1.8rem; border:1px solid #e5e5e5;}


#main_item_2{float:right; width:100%; margin:2.2rem 0; padding-left:0;}
.clear_element{clear:both;}


#main_item_2>p,
#main_item_2>ul,
#main_item_2>ol,
#main_item_2>div
{margin:2rem 0 2rem 0; padding:0.8rem;}


#main_item_2>#main_item_201{margin:0 0 2rem 0;}


#main_item_1 p{margin:1em 0;}
#main_item_1 h2{margin:3em 0 1rem 0;}
#main_item_1 h3{margin:2em 0 1rem 0; font-weight:bold; text-decoration:none;}


#header_item_1{padding-top:0.5rem;}
#header_item_1 *{color:#ffffff; white-space: nowrap;}


.logo{font-size:1.7rem;font-weight:bold;}


#main_item_1 p.subtitle{margin-bottom:2rem; font-size: 15px; line-height: 24px; color: #6d6d6d; font-weight:700;}


.image_wrapper{text-align:center;}
.image_wrapper img { width:100%; min-width:240px; margin-bottom:2px;}
.image_wrapper_70{text-align:center;}
.image_wrapper_70 img { width:70%; min-width:240px; margin-bottom:2px;}


#main_item_1 .companyname{
    text-decoration:none;
    display: inline-block;
    color: #428AC9;
    font-size: 14px;
    font-weight: 700;
    margin: 2rem 0 0 0;
}
#main_item_2 .companyname{
    text-decoration:none;
    display: inline-block;
    color: #428AC9;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}


.releasedate{
display: inline-block;
color: #6D6D6D;
font-size: 12px;
line-height: 1.6;
margin-top:-1rem!important;
}
.releasedate:before{
    display: inline-block;
    content: '\f017';
    font-family: 'Font Awesome 5 Free';
    font-weight: 500;
    width:1.6em;
    text-align:left;
}


.lead{margin:2em 0; font-weight: 700;}


#main_item_2 ul{list-style: none;margin-bottom:2rem;}
#main_item_2 ul li:nth-child(2n+1){display: inline-block;width:6em;}
#main_item_2 ul li:nth-child(2n){display: inline-block;width:calc(100% - 6em);}
#main_item_2 ul li{line-height:2.5; border-bottom:1px solid #ccc;}
#main_item_2 ul li a{line-height:2.5;}


#footer_item_1 *{text-align:center;}


/* フォント(プロポーショナル) */
html,
body,
*:not(i):not(pre):not(code):not(var):not(samp):not(tt):not(kbd){
    font-size: 14px;
    line-height: 1.6;
    word-break: break-all;
    font-family: 
    'ヒラギノ角ゴ ProN',
    'ヒラギノ角ゴ Pro',
    'ヒラギノ角ゴシック',
    'Hiragino Kaku Gothic ProN',
    'Hiragino Kaku Gothic Pro',
    'Hiragino Sans',
    'メイリオ',Meiryo,
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "游ゴシック体",
    YuGothic,
    "游ゴシック",
    "Yu Gothic",
    Yu-gothic,verdana,
    'ＭＳ Ｐゴシック'
    ,sans-serif,
    system-ui;
}


/* フォント(等幅) */
pre,code,var,samp,tt,kbd{
    font-size: 14px;
    line-height: 1.6;
    word-break: break-all;
    font-family:
    'Noto Sans Mono CJK JP',            /* Noto */
    'Source Han Code JP',               /* 源ノ角 */
    'Ricty',                            /* Inconsolata, Migu 1M */
    'Ricty Diminished',                 /* Inconsolata, Circle M+ 1m */
    'Ricty Diminished Discord',         /* Inconsolata, Circle M+ 1m */
    'Myrica M',                         /* Inconsolata, 源真ゴシック or Mgen+ */
    'MyricaM M',                        /* Inconsolata, Mgen+ */
    'Rounded M+ 1m regular',            /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded M+ 2m regular',            /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded Mgen+ 1m regular',         /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded Mgen+ 2m regular',         /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Migu 1M',                          /* M+, IPAゴシック */
    'Migu 2M',                          /* M+, IPAゴシック */
    'VL ゴシック',                      /* M+ OUTLINE FONTS */
    'M+ 1m',                            /* M+ */
    'M+ 2m',                            /* M+ */
    'Yutapon coding Regular',           /* Yutapon */
    SFMono-Regular,                     /* SF Mono, Migu 1M (macOS10.12+) */
    Consolas,                           /* 英字 (WindowsVista+) */
    'Roboto Mono',                      /* 英字 (Android4+) */
    'Courier New',                      /* Courier (macOS10.3+?, iOS4+?, WindowsXP+?) */
    monospace,
    Meiryo;                             /* 日本語 (WindowsVista+) */
}


p,
a,
a:link,
a:active,
a:visited{margin:0 0;}


h1{font-size:18px!important; font-weight:bold!important; line-height:1.25!important;margin:1rem 0 1rem 0;}


h2,
h3,
h4,
h5,
h6{font-size:16px; font-weight:bold;}


li,
li a,
li *,
dd,
dd *{line-height:1.2;}


/* 強調strong　蛍光マーカーで引いたような下線を引く */
strong{background:linear-gradient(transparent 65%, #fde 65%);}


/*  ヘアライン */
hr{border-top:1px solid #ddd;}


/* コードブロックpreの修飾 */
pre{border: 1px solid #ddd; padding:0; background-color:floralwhite; }
code{color:#000; background-color:floralwhite; border:1px solid #ddd;}
pre>code{color:#000; margin:10px 10px 5px 10px; background-color:floralwhite;border:none;}
pre>code{font-size:14px; line-height:1.6;}

li pre{padding:0; margin:0.5em 0;}
li pre>code{text-indent:0; }


/* 擬似行番号の表現手法についてはSaKuRaiさん https://www.studiomic.net/pre-line-numbers/ の解説を参考にしました。 */
/* ----h6直後だけcodeブロックから行番号を消す---- */
li>h6{display:none;}
h6+pre{padding:0; position:inherit; overflow-y:inherit; overflow-x:inherit;}
h6+pre>code{display:inherit; padding-left:0;}
h6+pre>code{white-space:pre-wrap;}
h6+pre>code::before{position:inherit; content:none; }
/* ----codeブロックに行数字を表示する---- */
pre{padding:0; position:relative; overflow-y:hidden; overflow-x:scroll;}
pre>code{display:block; padding-left:36px; font-size:14px; line-height:1.6;margin-bottom:5px;}
pre>code{white-space:pre;}
pre>code::before{position:absolute; top:0px; left:0px; width:36px; display:block; text-align:right; line-height:1.6;padding-top:10px; padding-right:2px; border-right:1px solid #ddd; color:#aaa; background-color:#fff; content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A";}


/* 上下のマージン
*:not(i){margin:2rem 0;}
li,
dd{margin:2rem 0;}
a,
br,
hr,
span,
div,
div.md-text{margin:0; padding:0;}
pre{margin:0.5rem 0; padding:0;}
 */


/* 子要素の長兄でない場合のhのmargin-top
*+h1,
*+h2{margin-top:110px;padding-top:10px; border-top:1px solid #ddd;}
*+h3{margin-top:80px;}
*+h4{margin-top:40px;}
*+h5{margin-top:40px;}
*+h6{margin-top:40px;}
 */


/* ----brockquoteの修飾、左に3.5rem(35px)の大きな余白を入れる---- */
blockquote{padding:1rem 1rem 1rem 3.5rem; background-color:aliceblue; border:1px solid lavender;}
blockquote{position:relative;}
blockquote::after{font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f10d"; font-size:2.5rem; line-height:1; display:block; position:absolute;top:2px; left:3px; font-weight:bold; color:lavender;}
blockquote code{background-color:#fff; }
li blockquote::after{ left:30px}


/* ----数式ブロックの修飾---- */
div.MathJax_Display{padding:1rem 1rem 1rem 1rem; background-color:#fcfcfc; border:1px solid #ddd;}


/* ----DT/DDの修飾---- */
dl{border-bottom:0px solid #ddd; ;background-color:transparent; display: flex; flex-wrap:wrap;}
dt{border-top:0px solid #ddd;background-color:transparent; width: 6.5em;}
dd{border-top:0px solid #ddd;background-color:transparent; width:calc(100% - 6.5em);}

dl>dd{padding-left: 1em;text-indent:-1em; }
dl>dd::before{
    display:inline-block; 
    width:0.7em; text-align:right; 
    padding-right:0.3em; 
    content:":"; 
    vertical-align:middle; 
}


/* ----Tableライクなリストの修飾---- */

ul.tablelike_ul{list-style:none; border-bottom:0px solid #ddd; ;background-color:transparent; display: flex; flex-wrap:wrap;}
ul.tablelike_ul>li:nth-child(2n+1){border-top:0px solid #ddd;background-color:transparent; width: 6.2em;}
ul.tablelike_ul>li:nth-child(2n){border-top:0px solid #ddd;background-color:transparent; width:calc(100% - 6.2em);}
ul.tablelike_ul>li:nth-child(2n){padding-left: 1em;text-indent:-1em; }
ul.tablelike_ul>li:nth-child(2n)::before{
    display:inline-block; 
    width:0.7em; text-align:right; 
    padding-right:0.3em; 
    content:":"; 
    vertical-align:middle; 
}


ul.tablelike_ul_4em{list-style:none; border-bottom:0px solid #ddd; ;background-color:transparent; display: flex; flex-wrap:wrap;}
ul.tablelike_ul_4em>li:nth-child(2n+1){border-top:0px solid #ddd;background-color:transparent; width: 4.2em;}
ul.tablelike_ul_4em>li:nth-child(2n){border-top:0px solid #ddd;background-color:transparent; width:calc(100% - 4.2em);}
ul.tablelike_ul_4em>li:nth-child(2n){padding-left: 1em;text-indent:-1em; }
ul.tablelike_ul_4em>li:nth-child(2n)::before{
    display:inline-block; 
    width:0.7em; text-align:right; 
    padding-right:0.3em; 
    content:":"; 
    vertical-align:middle; 
}


ul.tablelike_ul_3em{list-style:none; border-bottom:0px solid #ddd; ;background-color:transparent; display: flex; flex-wrap:wrap;}
ul.tablelike_ul_3em>li:nth-child(2n+1){border-top:0px solid #ddd;background-color:transparent; width: 3.2em;}
ul.tablelike_ul_3em>li:nth-child(2n){border-top:0px solid #ddd;background-color:transparent; width:calc(100% - 3.2em);}
ul.tablelike_ul_3em>li:nth-child(2n){padding-left: 1em;text-indent:-1em; }
ul.tablelike_ul_3em>li:nth-child(2n)::before{
    display:inline-block; 
    width:0.7em; text-align:right; 
    padding-right:0.3em; 
    content:":"; 
    vertical-align:middle; 
}


/* ----リストの修飾---- */
ol{list-style:none; padding-left: 3.5rem; text-indent:-3.3rem; }
ol{counter-reset:li;}
ol>li::before{
    display:inline-block; 
    width:3.3rem; text-align:right; 
    padding-right:0.2rem; 
    color:#bbb; 
    font-weight:bold; 
    counter-increment:li; 
    content:counter(li) ". "; 
}

/* CSS
ul{list-style:none; padding-left: 3.5rem; text-indent:-2.5rem; }
ul{}
ul>li::before{
    display:inline-block; 
    width:2.5rem; text-align:right; 
    padding-right:1rem; 
    font-weight:900; 
    font-family:"Font Awesome 5 Free"; 
    content:"\f111"; 
    font-size:0.5em; 
    vertical-align:middle; 
    color:#bbb;
    }
ul li>p{padding:0,margin:0;}
*/


/* ----入れ子リストの修飾---- */
li p,
li p>div.md-text{display:inline; padding:0; text-indent:0; }

li>blockquote>p{padding-left:1.5em;}

li>ol,
li>ul,
li>dl{padding-left:3rem; border-left:1px dashed #bbb;}

li li>ol,
li li>ul,
li li>dl{padding-left:3rem; border-left:0px dashed #bbb;}

li ol>li::before{font-weight:normal;content:counter(li) ") "; color:#bbb;}
li ul>li::before{font-weight:900; font-family:"Font Awesome 5 Free"; content:"\f068";font-size:0.6em; vertical-align:middle; color:#bbb;}

li li ol>li::before{font-weight:normal;content:counter(li) ": "; color:#bbb;}
li li ul>li::before{font-weight:900; font-family:"Font Awesome 5 Free"; content:"\f068";font-size:0.5em; vertical-align:middle; color:#ccc;}


/* ----見出し修飾
h1{}
h2{}
h3{}
h4::before{display:inline-block; width:2rem; margin-right:0.2rem; font-size:0.8em; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f009"; text-align:left; color:#999;}
h5::before{display:inline-block; width:2rem; margin-right:0.2rem; font-size:0.8em; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f02b"; text-align:left; color:#ccc;}
h6::before{display:inline-block; width:2rem; margin-right:0.2rem; font-size:0.8em; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f02c"; text-align:right; color:#d8d8d8;}
h5{color:#777;}
h6{color:#777;}
---- */


/* ----表組みの修飾---- */
.table-bordered {border:0px solid #ddd;border-bottom:1px solid #ddd;}
.table-bordered>thead>tr>th{background-color:#fcfcfc;}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td{border:0px solid #ddd; border-top:1px solid #ddd;}
.table thead>tr>th{border-bottom:0px solid #ddd; background-color:#fcfcfc;}


/* ----画像imgの修飾---- */
.md-image-group.row .col-sm-12{padding:0;}


/* ----外部リンクアイコンの修飾---- */
p i.fas.fa-external-link-alt{font-size:0.5em;padding-left:0.1em;}


/* --------------------------------------------------------------------- */
/* ----このCSSではh6を特殊な表現を呼び出すキーとして使用しています。---- */
/* ----h6を消したい時は、h2の直後に消したいh6を置きます。--------------- */
/* --------------------------------------------------------------------- */


/* ----h2直後のh6を消す---- */
h2+a+h6{display:none!important;}
/* ----h2直後のhrを消す---- */
h2+a+hr{display:none!important;}


/* ----リスト内のh6を消す（リスト内に擬似行番号無のコードブロックを使いたい時にh6+pre+codeを使う）
li>p+h6{display:none;}
li>p+h6+pre{margin-top:10px;}
---- */


/* ----h6直後の順序なしリストの修飾---- */
h6+ul{border:1px solid #ddd; margin-top:-5rem; padding-top:2.5rem;}
h6+ul{padding-left: 6.5rem; text-indent:-5.5rem; }
h6+ul li::before{width:5.5rem;font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f105";font-size:100%; color:#bbb;}


/* ----h6直後の順序有リストの修飾---- */
h6+ol{border:1px solid #ddd; margin-top:-5rem; padding-top:2.5rem;}
h6+ol{padding-left: 6.5rem; text-indent:-5.5rem; }
h6+ol li::before{width:5.5rem;}


/* ----h6直後の表組tableの1行目theadを消す---- */
h6+ .table-bordered > thead{display:none;}


/* ----h2直後のh6の直後に画像と順序なしリストの組み合わせがある場合、自己紹介ページとみなす---- */
h2+a+h6+p.md-image-group{width:160px;margin-top:20px;}
h2+a+h6+p.md-image-group+ul>li{content:none;}
h2+a+h6+p.md-image-group+ul strong{background:transparent;}
h2+a+h6+p.md-image-group+ul>li::before{content:none;}
h2+a+h6+p.md-image-group+ul ul{border:none;}
h2+a+h6+p.md-image-group+ul ul>li::before{content:none;}
h2+a+h6+p.md-image-group+ul+hr{display:none;}




/* 画面幅801px以上の場合------------------------------------------------ */
@media only screen and (min-width: 801px)
{
    .balloon-left {
        border:1px solid #e5e5e5; border-radius:0.5rem;
        position: relative;
        display: inline-block;
    }
    .balloon-left:before {
        content: "";
        position: absolute;
        top: 4rem;
        left: -28px;
        margin-top: -14px;
        border      : 14px solid transparent;
        border-right: 14px solid #ffffff;
        z-index: 2;
    }
    .balloon-left:after {
        content: "";
        position: absolute;
        top: 4rem;
        left: -29px;
        margin-top: -14px;
        border      : 14px solid transparent;
        border-right: 14px solid #e5e5e5;
        z-index: 1;
    }
    #main_item_1{float:left;  width:69%; max-width:776px; margin:2.2rem 0; padding:2.7rem 1.8rem; border:1px solid #e5e5e5;}
    #main_item_2{float:right; width:31%; max-width:350px; margin:2.2rem 0; padding-left:2rem;}
    .clear_element{clear:both;}
}