@charset "UTF-8";

.page_header {
    display         : flex;
    justify-content : space-between;
    padding         : 0px 50px 0px;     /* 余白 上 左右 下 */
}
nav {
    display         : flex;
}

.flexbox_main {
    display         : flex;
    height          : 100%;
    flex-wrap       : wrap;
}
main {
    flex            : 2;        /* 2:1の「２」意味  */
    background      : #00bcdd77;
    padding         : 15px 40px;/* 余白 上下 左右   */
    border-radius   : 2em;      /* 角丸            */
    margin-right    : 1em;      /* 右側に余白       */
    margin-bottom   : 1em;      /* 下側に余白       */
}
aside {
    flex            : 1;        /* 2:1の「１」意味  */
    background      : #d1d1d1;
    padding         : 15px 40px;/* 余白 上下 左右   */
    border-radius   : 2em;      /* 角丸            */
    margin-bottom   : 1em;      /* 下側に余白       */
}

body {
    font-size       : 100%;
}
body a {
    color           : blue;
    font-weight     : bold;
}
body a:hover {
    color           : #0bd;
    font-weight     : bold;
}
h1,h2,h3,body a,label {
    font-family     : 'M PLUS Rounded 1c', sans-serif;
}
label {
    font-weight     : bold;
}

footer {
    padding         : 0px 0px 20px;     /* 余白 上 左右 下 */
    text-align      : center;
    background-image: url("footer.png");
    background-position: center;
    background-size :auto 100%;
    opacity         : 0.8;
}

span_h1,span_h3,span {
    position        : relative;
}
span_h1::before {
    position        : absolute;
    content         : "";
    border-radius   : 50%;
    background-color: red;
    width           : 10px;
    height          : 10px;
    top             : -10px;
    left            : 10px;
 }
span_h3::before {
    position        : absolute;
    content         : "";
    border-radius   : 50%;
    background-color: red;
    width           : 5px;
    height          : 5px;
    top             : -5px;
    left            : 6px;
}
span::before {
    position        : absolute;
    content         : "";
    border-radius   : 50%;
    background-color: white;
    width           : 5px;
    height          : 5px;
    top             : -3px;
    left            : 6px;
 }

.imgpng {
    width           : 100%;
    min-width       : 300px;
    height          : auto;
}
.imgsyou {
    width           : 80px; 
    height          : 80px;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"] {
    border          : 0.5px solid #d1d1d1;
    border-radius   : 0.5em;
    font-size       : 100%;
    margin-left     : 1em;
    padding         : 1em;
    width           : 65%;
    box-sizing      : border-box;
}

/* ボタン */
.btn-default {
    display         : inline-block;
    border-radius   : 0.75em;       /* 角丸         */
    font-size       : 18pt;         /* 文字サイズ   */
    text-align      : center;       /* 文字位置     */
    cursor          : pointer;      /* カーソル     */
    padding         : 12px 12px;    /* 余白         */
    background      : #000066;    /* 背景色       */
    color           : white;      /* 文字色       */
    line-height     : 1em;          /* 1行の高さ    */
    transition      : .3s;          /* なめらか変化 */
    box-shadow      : 6px 6px 3px #666666;  /* 影の設定 */
    border          : 2px solid #000066;    /* 枠の指定 */
    margin-right    : 2em;
    margin-bottom   : 1em;
}
.btn-default:hover {
    box-shadow      : none;         /* カーソル時の影消去 */
    color           : #000066;    /* 文字色     */
    background      : white;      /* 背景色     */
}

/* ボタン さらにアップロード */
.btn-more {
    display         : inline-block;
    border-radius   : 0.25em;       /* 角丸       */
    font-size       : 15pt;         /* 文字サイズ */
    padding         : 5px 15px;     /* 余白       */
    background      : #0078d4;    /* 背景色     */
    color           : white;      /* 文字色     */
    transition      : .3s;          /* なめらか変化 */
    box-shadow      : none;         /* 影の設定   */
    border          : none;         /* 枠の指定   */
}
.btn-more:hover {
    box-shadow      : none;         /* カーソル時の影消去 */
    color           : white;      /* 文字色     */
    background      : #106ebe;    /* 背景色     */
}

/* ラジオボタン　【新規・修正】*/
.redio1 {
    display         : inline-block;
    padding         : 0.5em 0.75em;
    border-radius   : 0.75em;       /* 角丸       */
    background      : white;
    margin-left     : 1em;
}
input:checked + .redio1 {
    border-width    : 2px;          /* 上側と左右に枠線を引く */
    border-style    : solid;        /* 枠線の種類は「実線」 */
    border-color    : black;      /* 枠線の色は「黒」 */
    border-radius   : 0.75em;       /* 左上と右上の角だけを丸くする */
    padding         : 0.5em 0.75em; /* 内側の余白量 */
    font-weight     : bold;         /* タブの文字を太字にする */
    color           : red;        /* タブの文字色：赤色 */
    background-color: #ffffcc;    /* タブの背景色：淡い黄色 */
}
.hide-radiobtn {
    display         : none;
}

/* ラジオボタン　支援サービス */
.tab {
    display         : inline-block;
    padding         : 0.5em 0.75em;
    border-radius   : 0.75em;       /* 角丸       */
    background      : white;
    margin-left     : 1em;
}
/* ▼選択状態のタブ */
input:checked + .tab {
    border-width    : 2px 2px 0px 2px;/* 上側と左右に枠線を引く */
    border-style    : solid;        /* 枠線の種類は「実線」 */
    border-color    : black;      /* 枠線の色は「黒」 */
    border-radius   : 0.75em 0.75em 0px 0px;    /* 左上と右上の角だけを丸くする */
    padding         : 0.5em 0.75em;             /* 内側の余白量 */
    font-weight     : bold;         /* タブの文字を太字にする */
    color           : red;        /* タブの文字色：赤色 */
    background-color: #ffffcc;    /* タブの背景色：淡い黄色 */
    z-index         : 10;           /* 選択中のタブと重なっている枠線だけが見えない */
    position        : relative;     /* 選択中のタブと重なっている枠線だけが見えない */
}
.tabcontent {
    border-radius   : 0.75em;       /* 角丸       */
    display         : none;         /* 標準では非表示にする */
    border          : 2px solid black;   /* 枠線を引く：黒色で1ピクセルの実線 */
    padding         : 1em;          /* 内側の余白量 */
    background-color: #ffffcc;    /* 背景色：淡い黄色 */
    margin-top      : -2px;         /* 選択中のタブと重なっている枠線だけが見えない */
    z-index         : 0;            /* 選択中のタブと重なっている枠線だけが見えない */
    position        : relative;     /* 選択中のタブと重なっている枠線だけが見えない */
    width           : 65%;
}
/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }

/* テーブル　確認画面 */
table {
    border-collapse : collapse;
    border          : solid 2px orange; /*表全体を線で囲う*/
    background      : white;
    width           : 65%;
}
table th, table td {
    border          : dashed 1px orange;
    text-align      : left;
    padding         : 6px;
}
.tdwidth {
    width           : 150px;
}

/* 破線 */
hr {
    height          : 0;
    margin          : 0;
    padding         : 0;
    border          : 0;
    border-top      : 5px dotted #777777;
}

ul {
    margin:0;
    padding:0
  }

.goriyou {
    display         : flex;
}
.goriyou-OK {
	flex-grow: 1;
	position: relative;
	margin-right: 2em;
}
.goriyou-NG {
	flex-grow: 2;
	position: relative;
	margin-right: 2em;
}
.goriyou .goriyou-OK::after {
	position: absolute; /*--positionを追加--*/
	top: 0;
	left: 100%;
	margin: 0 1rem;
	content: "";
	width: 1px; /*--縦線の太さ(幅)--*/
	height: 100%;
	background-color: #333; /*--縦線の色--*/
}
.goriyou-gyousei {
    margin-left     : 2em;
}