@charset "UTF-8";


/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    font-size: 62.5%;  /* すべてのベース10px ブラウザDefault値16pxの62.5%＝10px */
	scroll-behavior: smooth;
}

body {
    color: #000;
    font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background:#555555;
    font-size: 1.8rem; /* font-size 18px */
    font-weight: 500;
    line-height: 1.6;
    margin:0;
	padding:0;
}

/* リンク
–––––––––––––––––––––––––––––––––––––––––––––––––– */
img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

/*ヘッダー
-------------------------------------*/
header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 1rem 2rem;
	background: #fff;
}

/*メインコンテンツ
-------------------------------------*/
main {
	background:#fff;
	max-width: 1920px;
	margin: 0 auto;
}

.topimg {
	text-align : center;
	margin-bottom: 6rem;
}

.toptext {
	text-align: center;
	max-width: 860px;
	margin:0 auto 10rem auto;
}

.toptext .midashi {
	font-size: 5rem;
	font-weight: 800;
	line-height: 110%;
	padding-bottom: 3rem;
}

.toplink{
	margin-bottom: 15rem;
}

.toplink .interview_img {
	max-width: 700px;
	text-align: center;
	margin:0 auto;
	padding-bottom: 3rem;
}

.toplink .link {
	display:flex;
	justify-content: center;
	margin: 0 2.5rem;
}

.toplink .link .item {
	width: 230px;
	margin: 0 0.5rem;
}

.colum {
	max-width: 1200px;
	margin: auto;
	padding-bottom: 12rem;
}

.colum .title {
	display: flex;
}

.colum .title img {
	width: 106px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.colum .title .text {
	font-size: 3rem;
	font-weight: 600;
	line-height: 140%;
	margin: 0 0 0 2.5rem;
	padding: 0;
}

.colum .line {
	padding-bottom: 5rem;
}

.colum .interview {}

.colum .interview .midashi_b {
	font-size: 115%;
	font-weight: 600;
	color: #008b8b;
}

.colum .interview .midashi_g {
	font-size: 115%;
	font-weight: 600;
	color: #228b22;
}









.list_area {
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
}

.list_area ul li {
	margin-left: 3rem;
}

.bottun_area {
	padding: 10rem 0;
	display:flex;
	justify-content: center;
	background-color: #255a7e;
}

.bottun_area .item {
  margin: 0 1rem;
}

.bottun_area .item a {
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 210px;
  color: #255a7e;
  font-size: 2.2rem;
  text-align: center;
  font-weight: 700;
  background-color: #fff;
  transition: 0.3s;
}

.bottun_area .item a::after {
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.bottun_area .item a:hover {
  text-decoration: none;
  background-color: #d3dee5;
}

.mskou {
	text-align: right;
	background-color: #255a7e;
}

.mskou img {
	padding: 0 5rem 3rem 0;
	width: 100px;
}


@media screen and (max-width: 768px){
	body {font-size: 1.5rem; }
	header {padding: 1rem 0 0.5rem 1rem;}
	header img {width:170px;}
	.topimg {margin-bottom: 3rem;}
	.toptext {padding-left: 20px; padding-right: 20px; margin-bottom: 4rem;}
	.toptext .midashi {font-size: 2.8rem;	padding-bottom: 3rem;}
	.toplink {margin-bottom: 6rem; padding-left: 20px; padding-right: 20px;}
	.toplink .interview_img {padding-bottom: 3rem; width: 90%;}
	.toplink .link { display:flex; flex-direction: column; align-items: center; justify-content: center; margin: auto;}
	.toplink .link .item {width: 90%; padding-bottom: 0.5rem;}
	.colum {padding-left: 0px; padding-right: 0px; padding-bottom: 8rem;}
	.colum .title .text {background-color: #000; color: #fff; font-size: 2rem; font-weight: 600; line-height: 140%; width: 100%; margin: 0; padding: 1.5rem;}
	.colum .line {padding: 2rem 20px 3rem 20px;}
	.colum .interview {padding-left: 20px; padding-right: 20px;}



	
	

	

	
	.bottun_box {padding-top: 4rem;}	
	.bottun_area {display:flex; flex-direction: column; padding-left: 2rem; padding-right: 2rem;}
	.bottun_area .item {margin: 1rem 0;}
	.bottun_area .item a {width: 240px; font-size: 1.8rem;}
	.mskou img {padding: 0 2rem 1rem 0; width: 60px;}
}

/*フッター
-------------------------------------*/
footer {
    background-color: #0069b2;
	width: 100%;
}

.copyright {
    text-align: center;
    padding: 3rem 0;
	font-size: 1.5rem;
	color: #fff;
	margin: auto 2.5rem;
}

@media screen and (max-width: 768px){
.copyright {
	font-size: 1rem;}
}

/* 幅768px以下の表示
-------------------------------------*/
.sp {
    display: none;
}

@media screen and (max-width: 768px){

.pc { display: none !important; }
.sp { display: block !important; }
}