@charset "utf-8";
/*
Theme Name : asxcojp
*/


.floatL { float: left; }
.floatR { float: right; }

.txt_10 { font-size: 10px; }
.txt_11 { font-size: 11px; }
.txt_12 { font-size: 12px; }
.txt_14 { font-size: 14px; }
.txt_16 { font-size: 16px; }
.txt_18 { font-size: 18px; }
.txt_20 { font-size: 20px; }
.txt_22 { font-size: 22px; }
.txt_24 { font-size: 24px; }

.txt_b { font-weight: bold; }

.txt_c { text-align: center; }
.txt_l { text-align: left; }
.txt_r { text-align: right; }

.txt_white { color: #ffffff; }
.txt_red { color: #ff0000; }
.txt_orange { color: #FDA12A; }

.line_125 { line-height: 125%; }
.line_150 { line-height: 170%; }
.line_200 { line-height: 200%; }
.line_220 { line-height: 220%; }

.mt_30 { margin-top: 30px; }
.mt_50 { margin-top: 50px; }
.mt_90 { margin-top: 90px; }
.mt_100 { margin-top: 100px; }

.mb_5   { margin-bottom: 5px; }
.mb_10  { margin-bottom: 10px; }
.mb_15  { margin-bottom: 15px; }
.mb_20  { margin-bottom: 20px; }
.mb_25  { margin-bottom: 25px; }
.mb_30  { margin-bottom: 30px; }
.mb_35  { margin-bottom: 35px; }
.mb_40  { margin-bottom: 40px; }
.mb_45  { margin-bottom: 45px; }
.mb_50  { margin-bottom: 50px; }
.mb_60  { margin-bottom: 60px; }
.mb_70  { margin-bottom: 70px; }
.mb_80  { margin-bottom: 80px; }
.mb_90  { margin-bottom: 90px; }
.mb_100 { margin-bottom: 100px; }

.ml_5   { margin-left: 5px; }
.ml_10  { margin-left: 10px; }
.ml_15  { margin-left: 15px; }
.ml_20  { margin-left: 20px; }
.ml_25  { margin-left: 25px; }

.pt_45 { padding-top: 45px;}
.pl_60 { padding-left: 60px; }
.plr_20 { padding: 0 20px; }

.w_200 { width: 200px; }
.w_250 { width: 250px; }
.w_280 { width: 280px; }
.w_300 { width: 300px; }
.w_310 { width: 310px; }
.w_340 { width: 340px; }
.w_350 { width: 350px; }
.w_450 { width: 450px; }
.w_500 { width: 500px; }
.w_550 { width: 550px; }
.w_600 { width: 600px; }
.w_650 { width: 650px; }
.w_700 { width: 700px; }
.w_750 { width: 750px; }
.w_800 { width: 800px; }
.w_900 { width: 900px; margin-left: auto; margin-right: auto; }
.w_950 { width: 950px; margin-left: auto; margin-right: auto; }
.w_1000 { width: 1000px; margin-left: auto; margin-right: auto; }
.w_1100 { width: 1100px; margin-left: auto; margin-right: auto; }
@media screen and (max-width:900px){
.w_900 { width: 100%; }
.w_950 { width: 100%; }
.w_1000 { width: 100%; }
.w_1100 { width: 100%; }
}

/* font 明朝
--------------------------------------*/
.font_mincho { font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }


/* section
--------------------------------------*/
.box_common { width: 950px; margin: 0 auto; position: relative; }

/* div
--------------------------------------*/
.inner_20 {
	padding: 0 20px;
}

.inner_30 {
	padding: 0 30px;
}


/* タイトル
--------------------------------------*/
h2.common { font-size: 3.6rem; font-weight: bold;}
h2.common img {vertical-align: baseline;}
h3.common { font-size: 3.4rem; font-weight: bold; color: #e79b37; background: url("images/bg/bg_h3.gif") no-repeat bottom left; padding-bottom: 5px; }
h4.common { font-size: 2.2rem; font-weight: bold; padding-bottom: 10px; border-bottom: 2px solid #000; text-align: center; }
h5.common { font-size: 2rem; font-weight: bold; text-decoration: underline; }

h3.title01 { font-size: 18px;font-weight:bold;text-align: center;color:#fff;margin:3% 0 1% 0;padding:1% 2%;background: #000;}
h3.title02 { font-size: 18px;font-weight:bold;color:#000;margin:3% 0 1% 0;padding:1% 2%;background: #ddd;}

/* アンダーライン
--------------------------------------*/
.uL_bottom { border-bottom:1px solid #333; }

/* ボックス
--------------------------------------*/
.block01{ padding: 17px; border: 6px solid #e7e7e7; }


/* ボックスの背景
--------------------------------------*/
.boxGrey { position:relative; overflow: hidden; }
.boxGrey:before { content: ""; position: absolute; top: 0; left: 0; transform: skewY(-45deg); transform-origin: bottom left; width:60%; height:400px; z-index: -1; background-color:#f0f0f0; }
.boxDarkGrey {position:relative; overflow: hidden;}
.boxDarkGrey:before { content: ""; position: absolute; top: 0; left: 0; transform: skewY(-45deg); transform-origin: bottom left; width:100%; height:900px; z-index: -1; background-color:#666666; }
.boxDarkGrey:after { content: ""; position: absolute; top: 0; left: 0; width:100%; height:100%; z-index: -2; background-color:#757575; }
@media screen and (max-width:900px){
.boxGrey:before { width:100%; }
}
.boxConerBlue {position:relative; overflow: hidden; padding: 0 50px 50px;}
.boxConerBlue h2 {height: 50px;}
.boxConerBlue::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; border-style: solid; border-width: 250px 250px 0 0; border-color: #0044cc transparent transparent transparent; }
.boxConerBlue::after { content: ""; position: absolute; bottom: 0; right: 0; z-index: -1; border-style: solid; border-width: 0 0 150px 150px; border-color: transparent transparent #bfd0f2 transparent; }
.boxConerGrey {position:relative; overflow: hidden; padding: 0 50px 50px;}
.boxConerGrey h2 {height: 50px;}
.boxConerGrey::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; border-style: solid; border-width: 250px 250px 0 0; border-color: rgba(102,102,102,1.00) transparent transparent transparent; }
.boxConerGrey::after { content: ""; position: absolute; bottom: 0; right: 0; z-index: -1; border-style: solid; border-width: 0 0 150px 150px; border-color: transparent transparent rgba(217,217,217,1.00) transparent; }

@media screen and (max-width:900px){
	.boxDarkGrey:before { height:200px; }
	.boxConerBlue {padding: 0 30px 30px;}
	.boxConerBlue::before { border-width: 100px 100px 0 0; }
	.boxConerBlue::after { border-width: 0 0 80px 80px; }
}


/* リンク
--------------------------------------*/
a.common:link,
a.common:visited { color: #0071e3; font-size: 1.4rem; margin-top: 26px; }
a.common::after {content: url("images/bg/125_arr_24.png");display: inline-block;margin-left: 5px;}
a.common_gray:link,
a.common_gray:visited { color: #262626; font-size: 1.4rem; margin-top: 26px; }
a.common_gray::after {content: url("images/bg/125_arr_24.png");display: inline-block;margin-left: 5px;}

.commonLink { position: relative; border: 2px solid #000; text-align: center; overflow: hidden;z-index:100;}
.commonLink::before { content: url("images/bg/bg_mark_sankaku.png"); position: absolute; top:-5px; left:5px;}
.commonLink a { display: block; line-height: 300%; font-weight: bold;}
.commonLink a:hover { color: #fff; }


/* ページエンドのコメント
--------------------------------------*/
p.page_end_comment { text-align: center; font-weight: bold; font-size: 24px; color: #FFF; background-color: #a80b0b; padding: 6px 0 4px; }


/* テーブル
--------------------------------------*/
table.common{width: 900px; margin: auto auto 30px;border-top:2px solid #000;border-left:2px solid #000;}
table.common th {background-color: #000;color:#fff;border-right:2px solid #fff;border-bottom:2px solid #fff; padding: 5px;}
table.common td {border-right:2px solid #000;border-bottom:2px solid #000; background-color: #fff; padding: 5px;}
table.common tr:nth-last-of-type(1) th {border-bottom:2px solid #000;}

.tbl01,
.tbl01 { width: 100%; margin: -17px 0; }

.tbl01 th,
.tbl01 td { padding: 15px 0; border-bottom: 1px solid #ccc; vertical-align: top; }
.tbl01 th { padding-right: 20px; font-weight: 700;}

.tbl01 tr.last th,
.tbl01 tr.last td { border-bottom: none; }
.tbl01 { margin: 0; }

.tbl02 { width: 100%; border: 1px solid #ddd; border-collapse: collapse; }
.tbl02 tr, .tbl02 th, .tbl02 td { border: 1px solid #ddd; }
.tbl02 th, .tbl02 td { padding: 5px; }
.tbl02 th { background: #ffdb9d; text-align: center; }
.tbl02 tr.odd td, .tbl02 tr.odd th { background: #f9f9f9; }

/* 404エラー */
.error_url { background-color: #BFBFBF; }


/* clearfix
--------------------------------------*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}

/* アニメーション設定
--------------------------------------*/
/* 画面外にいる状態 */
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/* 画面外にいる状態 */
.fadein_onload {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein_onload.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.st1{
  fill:#0060e6;
  stroke:#0060e6;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 4s ease-in 0s;
  animation: hello 4s ease-in 0s;
}

  @-webkit-keyframes hello {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#0060e6;
      }
    }


/* 共通アニメーション設定　マウスオーバー
--------------------------------------*/
/*両側からのアニメーション　背景黒*/
a.hover_effect_both::before,
a.hover_effect_both::after{content: "";display: block;position: absolute;top: 0;width: 50%;height: 100%;z-index: -1; background: rgba(0,0,0,.9);
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);}
a.hover_effect_both::before {left: 0;}
a.hover_effect_both::after {right: 0;}

a.hover_effect_both:not(:hover)::before,
a.hover_effect_both:not(:hover)::after {opacity: 0;transition-duration: .6s;}
a.hover_effect_both:not(:hover)::before {transform: translateX(-175px) skew(-30deg);}
a.hover_effect_both:not(:hover)::after {transform: translateX(275px) skew(-30deg);}

/*両側からのアニメーション　背景水色*/
a.hover_effect_both_blue::before,
a.hover_effect_both_blue::after{content: "";display: block;position: absolute;z-index: -1; top: 0;width: 50%;height: 100%;background: #59AAC7;
	transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);}
a.hover_effect_both_blue::before {left: 0;}
a.hover_effect_both_blue::after {right: 0;}

a.hover_effect_both_blue:not(:hover)::before,
a.hover_effect_both_blue:not(:hover)::after {opacity: 0;transition-duration: .6s;}
a.hover_effect_both_blue:not(:hover)::before {transform: translateX(-175px) skew(-30deg);}
a.hover_effect_both_blue:not(:hover)::after {transform: translateX(275px) skew(-30deg);}

/*左からのアニメーション　背景黒*/
a.effect_left_black { position: relative; z-index: 2;}
a.effect_left_black::before{
	content: "";opacity: 0;display: block;position: absolute;z-index: -1; top: 0;left:-30px;width: 130%;height: 100%;background: rgba(0,0,0,.9);
	transform: skew(-45deg) translateX(-300px);transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);}
a.effect_left_black:hover::before{opacity: 1;transform: skew(-30deg) translateX(0);transition-duration: .6s;}


/*左からのアニメーション　背景白*/
a.effect_left_white::before{content: "";opacity: 0;display: block;position: absolute;z-index: -1;top: 0;left:-30px;width: 130%;height: 100%;background: rgba(255,255,255,.9);
	transform: skew(-45deg) translateX(-300px);transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);}
a.effect_left_white:hover::before{
	opacity: 1;transform: skew(-30deg) translateX(0);transition-duration: .6s;}

/*HOVERアニメーション　背景黒*/
a.effect_black { position: relative; z-index: 3;}
a.effect_black:hover { color: #fff;}
a.effect_black::before{content: "";opacity: 0;display: block;position: absolute;z-index: -1;top: 0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,.9);
	transition: opacity .3s, transform .3s}
a.effect_black:hover::before{
	opacity: 1;}

a.effect_white { position: relative; z-index: 3;}
a.effect_white:hover { color: #fff;}
a.effect_white::before{content: "";opacity: 0;display: block;position: absolute;z-index: -1;top: 0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,.9);
	transition: opacity .3s, transform .3s}
a.effect_white:hover::before{
	opacity: 1;}


/* モーダルウィンドウのスタイル */
.modal {
  position: fixed;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  display:none;
  z-index:1900000;
}
 
/* オーバーレイのスタイル */
.overLay {
  position:absolute;
  top:0;
  left:0;
  background:rgba(256,256,256,0.4);
  width:100%;
  height:100vh;
  z-index:2000000;
}
 
/* モーダルウィンドウの中身のスタイル */
.modal .inner {position:absolute;z-index:2000001;top:50%;left:50%;transform:translate(-50%,-50%);padding: 20px;background-color: #fff;border: 2px solid #000;}
.modal .btnClose{position:absolute;top:-13px;right:-13px;}

@keyframes modal{
  0% {top:-100%}
  100% {top:50%}
}
@keyframes modalClose {
  0% {top:50%}
  100% {top:100%}
}

#searchform { padding:50px 0 30px; }
#searchform input[type="text"] { height:50px;width:350px;border:2px solid #000;padding: 0 20px; margin-bottom:10px;}
.rounded {border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;}
#searchform input[type="submit"]  {
    background: #FFF;
    color: #b50000;
    border: 2px solid #b50000;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 6px 15px;
    text-align: center;
    vertical-align: middle;
    margin: 0 5px;
}
.boxBlack { background-color:#000; padding:5px;color:#fff;}
.searchList li {border-bottom:1px dashed #aaa;}
.searchList li a { display:block;padding:20px 40px;}
.searchList li a:hover{background-color:#ddd;}

@media screen and (max-width:600px){
	.modal .inner {width:90%;}
	#searchform input[type="text"] { width:80%;}
}