@charset "UTF-8";

/* 共通部分
------------------------------ */
html{
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Midium", "遊ゴシック Medium", "遊ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    /*background-color: #B7FFDB;*/
}
a{
    text-decoration: none;  /* aタグの下線なし */
}
img{
    max-width: 100%;
}
header{
    margin-bottom: 50px;
}
.wrapper{
    max-width: 1100px;  /*横幅を指定することで画面の左右に余白が出来る*/
    margin: 0 auto;     /*中央に配置する指定*/
    padding: 0 4%;      /*スマホ向けの余白*/
}
.home-content{
    /*margin-top: 30px;*/
    margin-bottom: 30px;
}

/*.menu-content{
    max-width: 560px;
    margin-top: 10%;
}
.menu-content p{
    font-size: 1.125rem;
    margin: 10px 0 0;
}*/
/* floatさせる要素の後の要素に影響させないように
------------------------------ */
/* 方法1：floatさせる要素を持つ親要素のクラスにclearfixを追加 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* 方法2：floatさせる要素の後の要素にclearを追加 */
.clear{
    clear:both;  /*floatの解除*/
}
/*「div_flex」内の全ての要素にflexが適応される モバイルでは縦並び*/
.div_flex{
    width: 100%;
    display: flex;            
    flex-direction: row; /*横並び*/
    align-items: baseline;
}
/*「div_flex」内の全ての要素にflexが適応される モバイルでも横並び*/
.div_flex_2{
    width: 100%;
    display: flex;            
    flex-direction: row; /*横並び*/
    align-items: baseline;
}
.div_not_flex > p,
.div_not_flex > div{
    display: flex;            
    flex-direction: column; /*たて並び*/
}
/*
単一（左）と複数（右）
*/
.main{
  display:flex;
  width:500px;
}
.Sidebar{
  display:flex;
  flex-flow: column wrap;
  margin-left: 20px;
  width: 100%;
}
.main-content{
    background:lightcoral;
}
.Sidebar div{
  width:250px;
  background:lightblue;
}
.Sidebar div{
  flex:1;
}
.Sidebar_mid{
    vertical-align: middle;
}
.div_1 {
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

.item_content {
    border-top: 1px solid #ddd;  /*淡いグレーの線*/
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    /*  display: flex;            横並び
      flex-wrap: wrap;
      align-items: center;*/
}
.item_content_wide {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    /*display: flex;            横並び*/
    align-items: center;
}
/* item_contentの中にあり、横並びを変更したくないとき */
.item_content .div_flex_inner {
    display: flex;
    flex-direction: row;
/*    margin-top: auto;       下揃え*/
    align-items: center;    /*垂直方向揃え*/

}
/* item_contentの中にあり、横並びを変更したくないとき */
.item_content_wide .div_flex_inner {
    display: flex;
    flex-direction: row;
    /*margin-top: auto;       下揃え*/
    align-items: center;    /*垂直方向揃え*/
}

#container {
    /**width: 98%;**/
    /**max-width: 1000px;**/
    width: 97%;
    max-width: 1000px;
	
    /*font-size: 16px;*/
    font-size: 15px;
    margin: 0 auto;
    /*text-align: center;*/
}
.main{
    margin-top: 30px;
    width: 800px;
}
#global-nav {
    width: 100%;
    text-align: center;
}

#save_1,#save_2,#logout,#check,#download_pdf{
    font-size: 14px;
    font-weight: bold;
    color: white;	
}

#login{
    width:180px;
    height: 20px;
    text-align: left;
    font-size: 14px;
}

/*.fixed {
    position: fixed;  要素を固定する
    *top: 0;
    z-index: 1;*
    top: 8px;       *固定した位置から始まる座標*
    left:160px;*0にすると真ん中*
    z-index: 1;
}*/
.btn_login {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #000066;    /* 枠の指定 */
  max-width: 200px;
}
.btn_login:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000066;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

/** ページ区切り線 **/
hr {
  background-color: #fff;
  /**border-top: 2px dotted #bbb; デフォルト2px灰色**/
  border-top: 3px dotted orange;
}

.tbl1 {
    border-collapse: collapse;
    /* border: #000000 0px solid; */
    background-color: rgb(255,255,255);
    border: 0px;
    border-width: 0px;
    /*width: 750px;*/
    width: 100%;
}

.tbl1 .tr1 {
    border: #007B1C 0px solid;
    background-color: #B7FFDB;
}

.tbl1 .tr2 {
    background-color: rgb(255,255,255);
}

.tbl1 .td1 {
    padding: 8px;
    border-top: 1px solid #007B1C;
    border-left: 1px solid #007B1C;
    border-bottom: 1px solid #007B1C;
    border-right: 1px solid #007B1C;
    /* line-height: 130%; */
}

/** セレクトボックスのフォントサイズ **/
select{
    font-size:20px;
    text-align: center;
}
/** テキストボックス **/
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
    background: rgba(255,255,255,.5);   /* 半透明 */
    border: 1px solid #ccccca;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    margin-bottom: 10px;
    
/*    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 1em;
    padding-right: 1em;
    height: 33px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 15px;
    text-align: left;*/
}
input[type=date] {
    font-size: 18px;
    background: rgba(255,255,255,.5);   /* 半透明 */
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus{
    border: 1px solid #045085 !important;
}    
/**　ラジオボタンとチェックボックスは大きめに **/
input[type="checkbox"],
input[type="radio"] {
/*    opacity:0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;*/

    -webkit-transform: scale(1.2);
     transform: scale(1.2);
}
h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0 5px 10px;
    color: #000000;
    background: #e0ffe0;
    border-left: solid 13px #68be8d;
    /**width: 740px;**/
	width: 100%;
    font-size: 14pt;
    text-align: left;
}

h3 {
    padding: 3px 0 3px 10px;
    font-size: 12pt;
    border-left: solid 8px #68be8d;
    border-bottom: solid 2px #68be8d;
    /**width: 740px;**/
	width: 100%;
    text-align: left;
    color: #006e54;
    background: #f7ffef;
}
label {
 /**display:block;**/
 /**float:left;**/
/**float:center;**/
/**width:25px;**/
}

#login_id,#login_pw{
    width:180px;
    height: 40px;
    text-align: left;
    font-size: 16px;
}
/** 設問と設問の間の行間 **/ 
.cla_div20{
    font-size:20px;
}
/** 文章内のスペース **/
.cla_span1{ margin:0px 1px; }
.cla_span2{ margin:0px 2px; }
.cla_span3{ margin:0px 3px; }
.cla_span4{ margin:0px 4px; }
.cla_span5{ margin:0px 5px; }
.cla_span6{ margin:0px 6px; }
.cla_span7{ margin:0px 7px; }
.cla_span8{ margin:0px 8px; }
.cla_span9{ margin:0px 9px; }
.cla_span10{ margin:0px 10px; }
.cla_span15{ margin:0px 15px; }
.cla_span20{ margin:0px 20px; }
.cla_span25{ margin:0px 25px; }
.cla_span30{ margin:0px 30px; }
.cla_span35{ margin:0px 35px; }
.cla_span40{ margin:0px 40px; }
.cla_span45{ margin:0px 45px; }
.cla_span50{ margin:0px 50px; }
.cla_span55{ margin:0px 55px; }
.cla_span60{ margin:0px 60px; }
.cla_span65{ margin:0px 65px; }
.cla_span70{ margin:0px 70px; }
.cla_span75{ margin:0px 75px; }
.cla_span80{ margin:0px 80px; }
.cla_span85{ margin:0px 85px; }
.cla_span90{ margin:0px 90px; }
.cla_span95{ margin:0px 95px; }
.cla_span100{ margin:0px 100px; }
/** フォント **/
.span_red{
    color: red;
}
.font_25{
    font-size:25px;
}
.font_27{
    font-size:27px;
}
.font_30{
    font-size:30px;
}
.wd_10{ width: 10px;}
.wd_20{ width: 20px;}
.wd_30{ width: 30px;}
.wd_40{ width: 40px;}
.wd_50{ width: 50px;}
.wd_60{ width: 60px;}
.wd_70{ width: 70px;}
.wd_80{ width: 80px;}
.wd_90{ width: 90px;}
.wd_100{ width: 100px;}
.wd_150{ width: 150px;}
.wd_200{ width: 200px;}
.wd_250{ width: 250px;}
.wd_300{ width: 300px;}
.wd_350{ width: 350px;}
.wd_400{ width: 400px;}
.wd_450{ width: 450px;}
.wd_500{ width: 500px;}
.wd_550{ width: 550px;}
.wd_600{ width: 600px;}
.wd_650{ width: 650px;}
.wd_700{ width: 700px;}
.wd_750{ width: 750px;}
.wd_800{ width: 800px;}
.wd_850{ width: 850px;}
.wd_900{ width: 900px;}
.wd_950{ width: 950px;}
.wd_1000{ width: 1000px;}
.wd_1050{ width: 1050px;}
.wd_1100{ width: 1100px;}
.wd_1150{ width: 1150px;}

/** 大括弧 「」 **/
.kakko01 {
	padding: 25px;
	position: relative;
        text-align: center;
}
.kakko01::before, .kakko01::after {
	content: '';
	width: 25px;
	height: 25px;
	position: absolute;
}
.kakko01::before {
	border-left: solid 2px #000000;
	border-top: solid 2px #000000;
	top: 0;
	left: 0;
}
.kakko01::after {
	border-right: solid 2px #000000;
	border-bottom: solid 2px #000000;
	bottom: 0;
	right: 0;
}
/** 大括弧 []  **/
.kakko02 {
	padding: 20px;
	position: relative;
        text-align:left;
}
.kakko02::before, .kakko02::after {
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
}
.kakko02::before {
	border-left: solid 2px #888;
	border-top: solid 2px #888;
	border-bottom: solid 2px #888;
	top: 0;
	left: 0;
}
.kakko02::after {
	border-right: solid 2px #888;
	border-top: solid 2px #888;
	border-bottom: solid 2px #888;
	top: 0;
	right: 0;
}
/** 大括弧 （）  **/
.kakko03 {
	padding: 30px;
	position: relative;
        text-align: center;
        color: #888;
}
.kakko03::before, .kakko03::after {
	display: block;
	font: normal normal 6rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	position: absolute;
	line-height: 0;
}
.kakko03::before {
	content: '(';
	top: 50%;
	left: 0;
}
.kakko03::after {
	content: ')';
	top: 50%;
	right: 0;
        color: #888;
}
/** 大括弧 ＜＞  **/
.kakko05 {
  position: relative;
  padding: 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align:center;
}
.kakko05>p{
  margin-bottom: 0;
}
.kakko05::before,
.kakko05::after,
.kakko05 > p::before,
.kakko05 > p::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 50%;
  background-color: #888;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.kakko05::before {
  top: 0;
  left: 15px;
  margin-top: 4px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.kakko05::after {
  bottom: 0;
  left: 15px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.kakko05 > p::before {
  top: 0;
  right: 25px;
  margin-top: 4px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.kakko05 > p::after {
  bottom: 0;
  right: 25px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
/** 矢印 左から右下に直角に折れ曲がる  **/
.arrow01{
  position: relative;
  width: 200px;
  height: 50px;
  border-top: 8px solid #5bc0de;
  border-right: 8px solid #5bc0de;
  box-sizing: border-box;
}

.arrow01::after{
  content: "";
  position: absolute;
  bottom: -14px;
  right: -17px;
  border-top: 14px solid #5bc0de;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
/** 矢印 上から右下に直角に折れ曲がる  **/
                    /** 矢印の線 **/
.arrow02{
  position: relative;
  width: 200px;
  height: 50px;
  border-left: 8px solid #5bc0de;
  border-bottom: 8px solid #5bc0de;
  box-sizing: border-box;
}
                    /** 矢印のかたち **/
.arrow02::after{
  content: "";
  position: absolute;
  bottom: -17px;        /** 座標 **/
  right: -14px;         /** 座標 **/
  border-left: 14px solid #5bc0de;          /** 矢印の線に設置する面 **/
  border-top: 14px solid transparent;       /** 矢印の斜め線 **/
  border-bottom: 14px solid transparent;    /** 矢印の斜め線 **/
}

.inline-block {
    display:  inline-block;     /* インラインブロック要素にする */
    background-color:  #ffffff;    /* 背景色指定 */
    vertical-align: top;    /* 上寄せ */
}

/** 選択不可のときのカーソル表示 **/
:disabled {
  /*background-color: 活性の時と同じ色;*/
  /*color: inherit もしくは活性の時と同じ色;*/
  cursor: not-allowed;
  background-color: #AAA;
}
/** 非表示 **/
.display_none{
    display: none;
    /*height: 0px;*/
}
/** 表示 **/
.display{
    display: block;
    /*height: 0px;*/
}
/** readonlyのカーソル **/
.text_readonly {
  cursor: not-allowed;
  background-color: #aaaaaa !important;
}
input[type="text"].text_readonly:focus{
    border: 1px #CCCCCA solid !important;
}

p.msg{    
/*    color: #ffd700;
    font-size: 20px;
    font-weight: bold;*/
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
.font_blue{
    color: #000066;
}
.font_silver{
    color: #C0C0C0;
}
.font_bold{
    font-weight: bold;
}
hr.hr_main{
    background-color: #ffd700;
    height: 1px;
    border: none;
}
/*設問の補足_FAQなどで使用*/
.secList{
    border-bottom: 1px #ddd solid;      /* 下線 */
    margin-bottom: 10px;
    color: #432;
    padding: 10px;
    display: block;     /* リンクのクリックできる範囲を広げる */
}
/*.secList::before {
    content: "【 ";
}*/
/*.secList::after {
    content: " 】";
}*/
.secList:hover{
    color: #0bd;   /* マウスオーバーしたときの色 */
    cursor: pointer;
}
/*icomoonのアイコンで画像を表示させているとき*/
.icon{
    margin: 10px;
}
.positionleft{
    text-align: left;
}
/*リスト*/
.list_none li{
    list-style-type: none;       /*リストのポチを非表示にする*/
}
.list_decimal li {
    list-style-type: decimal;       /*数字*/
}
.list_decimal_zero li {
    list-style-type: decimal-leading-zero;      /*前ゼロありの2桁の数字*/
}
/* モバイル版(メディアクエリ)
------------------------------ */
/* 画面サイズが0～600pxのときに適応させる */
@media screen and (max-width: 600px) {
    h1{
        font-size: 1rem;
    }
    #container{
        text-align: left;
    }
    .item_content_wide{
         align-items: normal;  /*flexのときの上下位置*/
    }
    input[tyep="text"],
    input[type="email"],
    input[type="password"],
    textarea{
        max-width: 100%;
    }
    button{
        max-width: 100%;
    }
    article,
    aside{
        width: 100%;    /* 横幅を目いっぱい広げる */
    }
    .page_title_12 {
      font-size: 1.5rem;
    }
    .div_flex {
      display: flex;            
      flex-direction: column; /*たて並び*/
    }
    /*複数（左）と単一（右）*/
    .main{
      display:flex;
      flex-direction: column; /*縦並び*/
    }
    .Sidebar {
      display: flex;            
      flex-direction: column; /*縦並び*/
      margin-top: 20px;
      margin-left: 0;
    }
    /*.main-content,*/ 
    .Sidebar div{
      max-width:250px;
      background:pink;
    }
    /*複数（左）と単一（右）ここまで*/

    .div_1 {
      margin-top: 20px;
    }

    .item_content {
  /*    padding-left: 14px;
      padding-right: 14px;*/
      padding-top: 8px;
      padding-bottom: 8px;
      margin-right: 15px;
      flex-direction: column;  /* 横並び表示を縦並びに変更する */
    }
    .home-content{
        /*font-size: 1.5rem;*/
    }
}