@charset "utf-8";
body{
font-size: 17px;
line-height: 1.5;
}
h1{
margin: 0 0 -15px 0;
padding: 0;
}
p{
text-align: left;
}
.contents_box img, .mokuji_box img{
width: 100%;
height: auto;
}
.sp{
display: none;
}
a{
color: #316f97;
text-decoration-line: none;
}
a:hover{
color: #2daa9c;
}
body{
background-color: #dfefed;
margin: 0;
padding: 0;
}
#outline{
text-align: center;
margin: 0 auto;
}
.flex_box, .flex_box_half{
display: flex;
flex-wrap: wrap;
}
#head_box{
height: 70px;
background-color: #517d99;
}
#top_fv {
  background-image: url("/images/bg_fv.png");
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
}
.col_1, .main_contents{
max-width: 1024px;
width: auto;
margin: 0 auto;
}
.fv_box{
border: 2px solid #517d99;
border-radius: 8px;
background-color: #fff;
}
.fv_box h2{
background-color: #517d99;
border-radius: 6px 6px 0 0;
color: #fff;
text-align: center;
font-size: 2rem;
font-weight: bold;
margin: 0;
padding: 5px 0 0 0;
}
.main_contents{
margin: 0 auto 1.5em;
}
.mokuji_box{
border: 2px solid #6ac1b7;
background-color: #fff;
padding: 1em;
}
.mokuji_box h2{
background-color: #6ac1b7;
text-align: center;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
margin: 0 0 .5em;
padding-top: 3px;
}
.mokuji_box .flex_box, .flex_box_half, .footer_box .col_1.flex_box, #head_box .flex_box.col_1{
justify-content: space-between;
}
.m_half{
width: 46%;
text-align: left;
margin-left: 2em;
}
.m_half dt, .m_half dd{
margin: 0;
padding: 0;
}
.m_half dt{
border-bottom: 1px solid #6ac1b7;
margin-top: 5px;
line-height: 1.4;
}
.m_half dt::before {
  content: '■';
  color: #6ac1b7;
  margin-left: -1em;
}
.m_half dt a{
font-weight: 700;
}
.m_half dd{
margin-bottom: 10px;
}
.m_half dd li{
border-bottom: 1px dotted #999;
margin-top: 5px;
line-height: 1.4;
margin-left: -1em;
}
span.red{
color: #cc0000;
}
.m_list li span.obi{
background-color: #ffff00;
font-weight: 700;
}
.contents_box{
border: 2px solid #517d99;
background-color: #fff;
padding: 1.5em;
}
.contents_box h2{
background-color: #517d99;
color: #fff;
text-align: center;
font-size: 2rem;
font-weight: bold;
margin: 0 0 .5em;
padding: 4px 0 0 0;
}
.contents_box .flex_box, div.flex_box.card{
justify-content: space-between;
}
.right_comment_box p, .comment_box p{
margin: 0;
padding: 0 0 1em;
}
.link_btn a {
  padding: 0.5em 0;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #6ac1b7;
  margin-bottom: 0.5em;
  position: relative;
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 4px 0 #2daa9c;
  border-radius: 3px;
  margin-top: -5px;
}
.contents_box h2 a{
color: #fff;
}
.contents_box h2 a:hover{
color: #ffff00;
}
.pdf{
margin-bottom: .75em;
}
dl.site{
text-align: left;
margin-top: 0;
}
dl.site dt {
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: .2em;
}
dl.site dt::before {
  content: '■';
  color: #517d99;
  font-size: 22px;
}
dl.site dd {
  margin: 0 0 .5em 1.25em;
}
.flex_box_half .movie_box{
width: 49%;
}
.flex_box_half .right_comment_box{
width: 50%;
}
ul.flex_box li{
width: 31%;
margin-left: -1em;
}
ul.pf_list li{
margin-left: -1em;
}
ol.roma{
list-style-type: upper-roman;
text-align: left;
}
blockquote {
    position: relative;
    padding: 10px 12px;
    box-sizing: border-box;
    color: #464646;
    border-left: solid 40px #c4c4c4;
    background: #f3f3f3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -32px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}
blockquote p {
    position: relative;
    padding: 0;
    margin: 5px 0;
    z-index: 3;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
.t_red{
text-align: center;
font-weight: 700;
color: #E40047;
}
.flex_box.note{
margin-bottom: 1em;
}
.flex_box.note div{
padding: .5em;
border: 1px solid #999;
width: 32%;
}
.flex_box.note div p{
text-align: center;
margin: 0;
padding: 0;
}
p.center{
text-align: center;
}
span.secret{
color: #df1159;
}
.balloon-chat {
display: flex;
flex-wrap: wrap;
}
/* 左の吹き出し */
.balloon-chat.left { 
flex-direction: row; /* 左から右に並べる */
}
/* 右の吹き出し */
.balloon-chat.right { 
flex-direction: row-reverse; /* 右から左に並べる */
}
.comment_box .chatting p{
padding-bottom: 0;
}
/* 吹き出しの入力部分の作成 */
.chatting {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */ 
margin: 10px 20px;
padding: 10px 20px;
background: #bfe9db; /*吹き出しのカラーはここで変更*/
text-align: left; /*テキストの位置はここで変更*/
border-radius: 12px; /*吹き出しの丸み具合を変更*/
width:78%;
}
/* 吹き出しの三角部分の作成 */
.chatting::after {
content: "";
border: 15px solid transparent;
border-top-color: #bfe9db; /*カラーはここで変更（吹き出し部分と合わせる）*/
position: absolute;
top: 10px; /*三角部分の高さを変更*/
}
.left .chatting::after {
left: -15px; /*左側の三角部分の位置を変更*/
}
.right .chatting::after {
right: -15px; /*右側の三角部分の位置を変更*/
} 
/* アイコンの作成 */
.balloon-chat figure img {
border-radius: 50%; /*丸の設定*/
border: 2px solid #517d99; /*アイコンの枠のカラーと太さはここで変更*/
margin: 0;
}
/* アイコンの大きさ */
.icon-img {
width: 90px;
height: 90px;
}
/* アイコンの名前の設定 */
.icon-name {
width: 90px; /* アイコンの大きさと合わせる */
font-size: 12px;
text-align: center;
}
div.flex_box.card div{
width : calc(96% / 3) ;
border: 1px dotted #999;
padding: .5em;
text-align: center;
margin-top: .5em;
margin-bottom: .75em;
}
p.t_pay{
text-align: center;
font-weight: 700;
margin: 0 auto;
padding: 0;
border-bottom: 1px solid #000;
width: 90%;
}
p.kinds{
text-align: center;
padding-top: 25%;
}
.right_comment_box ul.pf_list{
margin-top: -.5em;
text-align: left;
}
.right_comment_box ul.pf_list li{
margin-bottom: .25em;
}
.flex_box.com_box div{
width : calc(96% / 2) ;
}
.footer_box{
background-color: #517d99;
padding-bottom: 65px;
}
.footer_box ul.ft_list{
width : calc(97% / 3) ;
font-size: 15px;
text-align: left;
}
.footer_box ul.ft_list li{
margin-left: -1em;
letter-spacing: -1;
color: #fff;
border-bottom: 1px dotted #fff;
margin-bottom: 5px;
}
.footer_box ul.ft_list li.none{
list-style: none;
}
.footer_box ul.ft_list li a{
color: #fff;
}
.footer_box ul.ft_list li a:hover{
color: #ffff00;
}
#page-top, #page-top2, #page-company, .job_web, #page-top3, #page-top4 {
    bottom: 150px;
    font-size: 77%;
    position: fixed;
    right: 5px;
    z-index: 999;
}
.job_web{
top: 0px;
}
#page-top a, #page-top2 a, #page-company a, #page-top3 a {
    background: none repeat scroll 0 0 #333333;
    border-radius: 30px;
    display: block;
    opacity: 0.6;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    width: 116px;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
}
#page-top a:hover {
    background: none repeat scroll 0 0 #999;
    text-decoration: none;
}
#page-top2{
  bottom: 65px;
}
#page-company {
  bottom:170px;
}
#page-top3{
  bottom: 107px;
}
input.grad-trigger{
display: none;
}
.col_1 ol.breadcrumb{
text-align: left;
}
.breadcrumb {
  margin: .25em 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: gray;
}

.breadcrumb li:first-child a:before {
  /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #2e7fea;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}