/*  Web Font  */

/*

■Mrs Eaves OT Roman
font-family: mrs-eaves, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0;

■FOT-Chiaro Std B キアロ
font-family: fot-chiaro-std, sans-serif;
font-weight: 700;
font-style: normal;

■Heisei Mincho Std W3
font-family: "heisei-mincho-std", serif;
font-weight: 300;
font-style: normal;

■Heisei Mincho Std W9
font-family: "heisei-mincho-std", serif;
font-weight: 900;
font-style: normal;

 */


/*  ------ Basic style ------  */

body{
color: rgba(0,0,0,1.00);
font-size: medium;
}


/*  ------ Link ------  */
a{
	text-decoration:none;
}

a:link {
	color: rgba(82,119,165,1.00);
}
a:visited {
	color: rgba(82,119,165,1.00);
}
a:hover {
	color: #4892D6;
}
a:active {
	color: rgba(131,170,180,1.00);
}

a img:hover{
		opacity: 0.8;
		transition: all 0.5s ease;
}

/*  <p>タグフォント設定  */

p{
	margin: 1em auto;
	line-height: 1.8em;
}

/*  文章<p>の中のリンクは太字にする  */
p a{
	margin: 0 0.5em;
	font-weight: bold;
}


/*----画像リキッド------*/
img {
  max-width: 100%;
  height: auto;
}

/*  画像が並ぶ時のマージン  */

.imgx{
	margin: 2px;
}

/*----見出し------*/
h1{
	text-align: center;
	margin: 0;
	padding: 0.5em 0em;
	font-size: medium;
	font-weight: normal;
	color: #000;
	border-bottom: solid 1px #5277A4;
	border-top: solid 1px #5277A4;
}

h2{
	text-align: left;
	margin: 0px;
	padding: 2px 10px;
	font-size: medium;
	font-weight: normal;
	color: #000;
	border: solid 1px #9EB3CE;
}

/*----ヘッダー------*/

header{

	/*  ------ SmartPhone ------  */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo{
	margin: auto;
}

	/*  ------ Main Page(SmartPhone) ------  */

/*  ------Sectionフレーム------  */

section {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*  ------DIVフレーム------  */

/*  row_c=中央指定で横に並べる  */
div.row_c {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 40px auto;
}

/*  row_cx=スマホは中央指定で横、全画面は左詰め */
div.row_cx {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 40px auto;
}

/*  row_l=左詰めで横に並べる  */
div.row_l {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 40px auto;
}

/*  col_c=中央指定で縦に並べる  */
div.col_c {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	margin: 40px auto;
}

/*  txt_box=テキスト表示用  */

div.txt_box {
	margin: 40px auto;
	line-height: 1.8em;
}

div.txt_box2 {
	margin: 20px auto;
	padding: 0 1em;
	line-height: 1.8em;
}

/*  ------Updateコンテンツ------  */

div.update_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border:solid 0px #000;
	width: 325px;
	margin: 15px;
}

div.update_box p {
	font-size: small;
	padding: 0 1em;
	margin-bottom: 0px;
	font-weight: bold;
}

div.update_box ul {
	font-size: small;
	margin: 0.2em 0px 10px 0px;
	padding: 0 1em;
	width: 100%;
}

div.update_box li {
	margin: auto;
  	list-style-type: none;
}

div.update_box li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 0.5em;
  background: #5277A4;
  border-radius: 50%;
  margin-right: 8px;
}

/*  ------Worksコンテンツ------  */

div.works_box00 {
	width : 100%;
	
}

div.works_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border:solid 1px #ccc;
	width: 325px;
	margin: 10px;
	padding: 20px;
	overflow: hidden;
	border-radius: 9px;
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);/*影*/
	background-color: #fff;
}

div.works_box p {
	font-size: small;
	padding: 0 1em;
	margin-bottom: 0px;
	font-weight: bold;
}

div.works_box ul {
	font-size: small;
	margin: 0.2em 0px 10px 0px;
	padding: 0 1em;
	width: 100%;
}

div.works_box li {
	margin: auto;
  	list-style-type: none;
}

div.works_box li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.6em;
  height: 1em;
  background: #5277A4;
  margin-right: 5px;
}

/*  タグ並べる用  */
div.tag_box {
	display: flex;
	flex-direction: row;
}

/*  タグ　w=枠 r=赤 p=ピンク b=ブルー g=濃グレー n=薄グレー */

div.tag_w{
	font-size: x-small;
	text-align: center;
	width: 70px;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #5277A4;
	color: #5277A4;
}

div.tag_r{
	font-size: x-small;
	text-align: center;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #A4525C;
	background-color: #A4525C;
	color: #fff;
	letter-spacing: 2px;
}

div.tag_p{
	font-size: x-small;
	text-align: center;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #E8A5D3;
	background-color: #E8A5D3;
	color: #fff;
	letter-spacing: 2px;
}

div.tag_b{
	font-size: x-small;
	text-align: center;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #5277A4;
	background-color: #5277A4;
	color: #fff;
	letter-spacing: 2px;
}

div.tag_g{
	font-size: x-small;
	text-align: center;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #27394F;
	background-color: #27394F;
	color: #fff;
	letter-spacing: 2px;
}

div.tag_n{
	font-size: x-small;
	text-align: center;
	padding: 2px 5px;
	margin: 1px;
	border: solid 1px #88A3C3;
	background-color: #88A3C3;
	color: #fff;
	letter-spacing: 2px;
}



/*　TOPに戻るボタン　*/
	
#topbutton{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 10px;
  bottom: 70px;
  opacity: 1.0;
  display: none;
}
#topbutton a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#topbutton a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: rgb(82,119,165);
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#topbutton a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: rgb(82,119,165);
}

#topbutton a:hover{
    transform: translateY(-5px);
}


/*  ------ Information ------  */

div.info {
	margin: 40px auto;
	width:100%;
	height:160px;
	overflow:auto;
	border: solid 0px #999999;
	background-color:#ffffff;
}

ul.info_ul{
	list-style: none;
	margin:0;
	padding-left: 0em;
	line-height: 2em;
}

li.info_new{
	font-weight: bold;
}

li.info_new:before{
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 1em;
  background: #A49950;
  margin-right: 0.5em;
}

li.info_old:before{
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 1em;
  background: rgba(82,119,165,1.00);
  margin-right: 0.5em;
}

/*----フッター------*/
footer{

	background-color: rgba(255,255,255,1.00);
	color: rgba(82,119,165,1.00);
	border-top: solid 1px rgba(82,119,165,1.00);
	padding: 20px 0;
	letter-spacing: 0.1em;
	font-size: 8pt;
	text-align: center;

}

	/*  ------ PC ------  */
@media screen and (min-width: 1000px){
	
	header{
			margin: 20px 0;
			display: flex;
   			justify-content: center;
    		align-items: flex-end;
	}

	/*  ------ Main Page(PC) ------  */
	
	div.info {
	width:1000px;
}
	
	div.row_c {
	margin: 40px auto;

}
	
	div.txt_box{
	width: 1000px;
}
	
	div.works_box00 {
	width : 90%;
	
}
	
	div.row_cx {
	justify-content: flex-start;
}
	
}

/*  ------ メディアアクエリ終了 ------  */

/*  ------ nobanner表示 ------  */

.nobanner{
	width: 199px;
	height: 39px;
	border: solid rgba(82,119,165,1.00) 1px;
	position:relative;
}

.nobanner_min{
	width: 87px;
	height: 30px;
	border: solid rgba(82,119,165,1.00) 1px;
	position:relative;
}

.nobanner:hover{
	border: solid rgba(131,170,180,1.00) 1px;
}

p.nobanner_name{
	text-align: right;
	vertical-align: bottom;
	padding-right: 1em;
	padding-bottom: 0em;
}

.nobanner_min:hover{
	border: solid rgba(131,170,180,1.00) 1px;
}

p.nobanner_name_min{
	text-align: center;
	font-size: 7pt;
}


/* デザインボタン */
/* 01=枠青 02=背景青 03=背景赤 04=グレー*/

.btn01 a {
    background-color: #fff;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px auto;
    max-width: 280px;
    padding: 7px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	border: solid 2px #5277A4;
}

.btn01 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.btn01 a:hover {
	border: solid 2px #A49950;
 	color: #A49950;
}
.btn01 a:hover:after {
  right: 1.4rem;
}


.btn02 a {
    background-color: #5277A4;
	color: #fff;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px auto;
    max-width: 280px;
    padding: 7px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.btn02 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.btn02 a:hover {
  background-color: #2B4F7B;
  color: #FFF;
}
.btn02 a:hover:after {
  right: 1.4rem;
}

.btn03 a {
    background-color: #A4525C;
	color: #fff;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px auto;
    max-width: 280px;
    padding: 7px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.btn03 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.btn03 a:hover {
  background-color: #862733;
  color: #FFF;
}
.btn03 a:hover:after {
  right: 1.4rem;
}

.btn04 a {
    background-color: #ccc;
	color: #666;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px auto;
    max-width: 280px;
    padding: 7px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.btn04 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.btn04 a:hover {
  background-color: #999;
  color: #000;
}
.btn04 a:hover:after {
  right: 1.4rem;
}


/*  ------ 文章<p>の頭に記号を付けたい時 ------  */

.i_go:before{
	
	font-size: x-small;
	margin: 0;
	content: "》";
	
}


.i_go_x:before{
	
	margin: 0;
	content: "》";
	
}

.i_try:before{
	
	font-size: x-small;
	margin: 0 0.5em;
	content: "▲";
	
}
	
.i_blue:before{
	
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 1em;
  background: #5277A4;
  margin-right: 0.5em;
	
}

.i_gold:before{
	
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 1em;
  background: #A49950;
  margin-right: 0.5em;
	
}


.i_red:before{
	
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width: 0.5em;
  height: 1em;
  background: #A4525C;
  margin-right: 0.5em;
	
}


.i_slash:before{

	margin: 0 0.5em;
	content: "＼";
	
}

.i_slash:after{

	margin: 0 0.5em;
	content: "／";
	
}

/*  ------ 段落つけたいとき ------  */
p.dan{
	text-indent: 1em;
}