@charset "utf-8";

/* 設定
--------------------*/
header,footer,nav,section{display:block;}

body,p,h1,h2,h3,h4,h5,h6,
ul,li,img{
	margin:0;
	padding:0;
	font-size:100%;
	line-height:140%;
	font-weight:normal;
   
}

.clearfix{zoom:1;}
.clearfix:after{
	content:"";
	clear:both;
	display:block;
}



body {
font-size:	13px;-webkit-text-size-adjust:none;

font-family: 	"Helvetica Neue", Arial,
		"Hiragino Kaku Gothic ProN","Hiragino Sans",
		Meiryo, sans-serif;

}

img{border:none;}

li{list-style:none;}

a{color=#000;}


/*ヘッダ
--------------------*/
#box_t{
	background-color:#000099 ;
	text-align:center;
}

h2#top{
	font-size:18px;
	font-weight:none;
	color: #ffffff;
	text-shadow: 0 1px 0 #9e96d6;
}

/* 上下説明文
--------------------*/

#intro{
	margin:15px 10px 0;
}

#outro{
	margin:0 10px 15px;
}


/* メニュー
--------------------*/
#menubox{
	width:315px;
	margin:0 auto;
}

#menubox ul{
	background:#FFFFDD;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#menubox li{
	float:left;
	text-align:center;
	margin:0 10px 10px 0;
}

#menu li img{
	border-radius: 8px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

#menubox a{
	text-decoration:none;
}

#menubox2{
	width:400px;
	margin:0 auto;
}

/* フッタ
--------------------*/
#footer{
	text-align:center;
	background-color:#000099 ;
	color:#ffffff;
	font-size:12px;
	padding:5px 0;
}

#footer a{color:#ffffff; text-decoration:none;}



/*　説明ページ上部タイトル
----------------------------------*/

h2#cate{
	font-size:20px;
	font-weight:none;
	padding-top:20px;
	color: #FFFFFF;
	text-shadow: 0 1px 0 white;
	margin:0 5px;
	text-align:left;
}

#box_t p img{
	margin:5px 5px 0 7px;
	float:left;
}



/* 手順説明　見出し　背景色紺色
----------------------------------*/
h3{
	color:#FFFFFF;
	font-size:16px;
    font-weight: bold;
	line-height:29px;
	height:29px;
	padding-left:10px;
	margin-top:15px;
}

h3 span{
	padding-left:18px;
    background: border-box #00008b;
}

h4{
	color:#00008b;
}


/* 画像
----------------------------------*/

.siteimg img{
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    text-align: center;
    display: flex; justify-content: center;
}


@media screen and (min-width: 480px) {
	.box01{
	float:left;
	width:95%;
	}
}


/* 電話ボタン
----------------------------------*/

.btn-tel{
  position: relative;
  display: block;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size:18px;  
  background: #f75065;
  padding: 10px 20px;
  margin: auto;
  max-width: 250px;
}

.btn-tel::after{
  content: "";
  background: url(img/telicon.png) no-repeat center;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: 15px;
}







/*事故違反関連↓
----------------------------------*/

/*ページ内リンクの余白↓
----------------------------------*/

.blank{
	margin:0px 20px;
}



/*見出しメッセ
----------------------------------*/
h1#flow{
    padding: 0.4em 0.5em;
    color: #494949;
    font-size:	18px;-webkit-text-size-adjust:none;
    display:block;
    background: #f4f4f4;
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
}





/*説明ボックス 
----------------------------------*/
.sitebox div{
	margin:10px;
}



.box01 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 2em;
    border: solid 3px #62c1ce;
}

.box01 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 20px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
 
}
.box01 p {
    margin: 0; 
    padding: 0;
}

/*　進む戻るとかの横並びUL　2パタン　動かん未使用
--------------------------------------------*/

.twopics{
    display:flex;
    justify-content: center;
    border: 1px solid #999;
    padding: 10px;
    width: 100%;
}

 .c-manu ul {
    display: flex;
    flex-wrap:wrap;
  }

  .c-menu li {
      width: calc(100%/2);
      padding:0 5px;
      box-sizing: border-box;
      list-style: none;
  }

    .c-menu li img {
        max-width: 100%
            height: auto;
  }

/*仮組　ボタン　未使用
----------------------------------*/

.btn{
    width:150px;
    height:45px;
    line-height:60px;
}
.btn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#F7F7F7;
    text-align:center;
    border-left:20px solid #2A1CFF;
    color:#14038C;
    font-size:20px;
    font-weight:bold;
    box-shadow:0px 2px 2px 0px #DEDEDE ;
}


/* スタッフロール
--------------------*/
#rollbox{
	width:315px;
	margin:0 auto;
}

#rollbox ul{
	background:#FFFFDD;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	padding:10px 0 0 10px;
	margin:15px 10px;
}

#rollbox li{
	float:center;
	text-align:center;
	margin:0 10px 10px 0;
}

#rollbox a{
	text-decoration:none;
}


/*一覧表
-------------------------------------*/


table {
	border-collapse: collapse;
}
th {
	border: solid 1px #666666;
	color: #FFFFFF;
	background-color: #008000;
}
td {
	border: solid 1px #666666;
	color: #000000;
	background-color: #ffffff;
}
thead th {
	background-color: #008080;
	color: #FFFFFF;
}


/*-〇囲いアイコン
-------------------------------------*/

.circle {
  display: inline-block;
  background: #fffacd;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  color: #000;
  font-size: 32px;
  text-align: center;
  line-height: 55px;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
}

/*-〇囲いアイコン　金券画像
-------------------------------------*/

.circle2 {
  display: inline-block;
  background: #40e0d0;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  color: #000;
  font-size: 18px;
  text-align: center;
  line-height: 27px;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
  }  
    
/*-〇囲いアイコン　金券画像
-------------------------------------*/

.circle3 {
  display: inline-block;
  background: #ffd700;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  color: #000;
  font-size: 18px;
  text-align: center;
  line-height: 27px;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
   } 