@charset "utf-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}
body {font-size:14px; line-height:160%; font-family: "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; overflow-x:hidden;}
ul,ol,li,dl,dt,dd{list-style: none;}
fieldset,img { border: 0; vertical-align: middle; overflow: hidden; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { *zoom:1;}
.clear { clear: both; display: block; height: 0; overflow: hidden; }
img{ max-width:100%;}
a{ text-decoration:none; color:inherit;}

body {
  background-color: #dadee2;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 2px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 2px, transparent 2px);
    background-size: 16px 16px, 16px 16px;
    background-position: 0 0, 8px 8px;
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; top: 0; left: 0; width: 130%; height: 120vh; background-image:url(../images/bg.svg); background-position:center top, center top; background-size:100% 100%; background-repeat:no-repeat; transform: skewX(-45deg); transform-origin:0 20%; z-index:-1;}
.header{ width:100%; text-align:center; border-bottom: solid 10px #000; background-image: repeating-linear-gradient(90deg, transparent, transparent 4px, #e1e1e1 4px, #e1e1e1 8px); background-color: #efefef;}
.main{ width:1100px; position:relative; margin: 30px auto; padding-bottom: 50px; box-shadow:inset 0 5px 0 #000; border-bottom: solid 5px #000; background-color: #ff641f;
  background-image:
    linear-gradient(90deg, #000 5px, transparent 5px, transparent 5px, transparent calc(100% - 5px), #000 calc(100% - 5px)),  
    radial-gradient(circle, #e04500 2px, transparent 3px),
    radial-gradient(circle, #e04500 2px, transparent 3px);
    background-size: auto, 16px 16px, 16px 16px;
    background-position: 0 0, 0 0, 8px 8px;
}

.o_main{ width:1000px; margin:0 auto; padding:0;}
.t_ph{ padding:0 0 1% 0;}
.card_list{ padding:0 3.2% 2% 3.3%; overflow:hidden; font-size:0; text-align:center;}
.card_list li{ width:20%; display:inline-block; *display:inline; *zoom:1; vertical-align:top; position:relative;}
.card_list li .link{ position:absolute; width:92.3%; height:80%; display:block; text-indent:-9999px; top:1.3%; left:4%}
.mb{ padding:2% 4% 4%; background:#007fc3;}
.zx_bn{ margin:0 0 3% 0;}
.mb h2{ margin-top:10px;}

.cl{ position:relative;}
.c01 a,.c02 a,.c03 a{ position:absolute; top:0; width:29.4%; height:79.4%; display:block; text-indent:-9999px;}
.c01 a{ left:4%;}
.c02 a{ left:35.3%;}
.c03 a{ left:66.6%;}
.ti{ font-size:12px; font-weight:bold; text-align:center; line-height:140%; color:#fff; padding:10px 0;}

.t_card{ width:100%; display:inline-block; text-align:center;}
.t_card img{ width:calc(25% - 10px); margin:0 5px 10px; box-shadow:0 0 20px rgba(255,240,0,1); transition:0.4s;}
.t_card img:hover{ box-shadow:0 0 5px rgba(255,255,255,1),0 0 20px rgba(255,255,255,1);}

.news{ background:url(../images/news_bg1.jpg) 0 0; margin:25px 0 0 0; position:relative;}
.news .news_list{ background:url(../images/news_bg2.png) 0 0 no-repeat; padding:60px 2% 2% 2%; width:66%; float:left;}
.news .news_list ul{ background:#fff; padding:5px 15px 15px 15px; height:210px; overflow:auto;}
.news .news_list ul li{ border-bottom:solid 1px #ddd; padding:9px 0 5px 0; display:table; width:100%;}
.news .news_list ul li em{ font-style:normal; color:#823721; display:table-cell; width:97px;}
.news .news_list ul li .news_tt{ display:table-cell;}
.news .r_ph{ width:29%; position:absolute; bottom:-1%; right:2%;}

.step{ border-left:solid 10px #00aff7; padding:3.6%; background:#fff; color:#333; position:relative;}
.step .sx{ position:absolute; width:19px; height:33px; left:-10px; bottom:0;}
.step .s_content{ border-bottom:solid 1px #ddd; padding-bottom:18px; margin-bottom:20px;}
.step .s_content.bno{ border:none; padding-bottom:0; margin-bottom:0;}
.step .s_content .sc_l{ width:66%; margin-right:3.8%; float:left;}
.step .s_content .sc_l h3{ padding-left:38px; font-size:18px; line-height:180%;}
.step .s_content .sc_l h3 span{ font-size:22px; font-weight:bold; color:#d20000;}
.step .s_content .sc_l .s_t{ padding:10px 16px; background:#e3f0f5; margin-top:18px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}
.step .s_content .sc_l .s_t p{ background:url(../images/s_icon.png) 4px 4px no-repeat; padding-left:18px; font-size:14px; line-height:160%; margin:4px 0;}
.step .s_content .sc_l .s_t p b{ font-weight:normal; color:#d20000;}
.step .s_content .sc_l .s_t p span{ background:#9fe3ff; padding:8px; margin:6px 0; line-height:180%; display:block;}
.step .s_content .sc_l a{ color:#0081ff; text-decoration:underline;}
.step .s_content .sc_l a:hover{ color:#d20000;}

.step .s_content .sc_l .s1{ background:url(../images/s1.png) 0 1px no-repeat;}
.step .s_content .sc_l .s2{ background:url(../images/s2.png) 0 1px no-repeat;}
.step .s_content .sc_l .s3{ background:url(../images/s3.png) 0 1px no-repeat;}
.step .s_content .sc_l .s4{ background:url(../images/s4.png) 0 1px no-repeat;}
.step .s_content .sc_l .s5{ background:url(../images/s5.png) 0 1px no-repeat;}
.step .s_content .sc_l .s6{ background:url(../images/s6.png) 0 1px no-repeat;}
.step .s_content .sc_l .s7{ background:url(../images/s7.png) 0 1px no-repeat;}

.step .sc_r{ width:30.2%; float:left; text-align:center;}
.step .sc_r .s_ph{ border:solid 2px #00aff7;}
.step .sc_r .s_ph1{ margin-top:-58px;}
.step .sc_r .ph_btn{ margin-top:8px;}

.step .s_content .sc_234{ width:100%;}
.step .s_content .sc_234 h3{ font-size:18px; line-height:180%;}
.step .s_content .sc_234 h3 span{ font-size:22px; font-weight:bold; color:#d20000;}
.step .s_content .sc_234 .s_t{ padding:10px 16px; background:#e3f0f5; margin-top:18px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}
.step .s_content .sc_234 .s_t p{ background:url(../images/s_icon.png) 4px 4px no-repeat; padding-left:18px; font-size:14px; line-height:160%; margin:4px 0;}
.step .s_content .sc_234 .s_t p span{ color:#d20000;}
.step .s_content .sc_234 .s_t p a{ color:#0081ff; text-decoration:underline;}
.step .s_content .sc_234 .s_t p a:hover{ color:#d20000;}
.step .s_content .sc_234 .s_t2{ padding:14px 16px 10px 16px; font-size:16px; line-height:180%; background:#ffe6b5; margin-top:18px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}
.step .s_content .sc_234 .s_t2 span{ font-size:18px; font-weight:bold; color:#d20000;}

.step .s_content .swl{ width:48.1%; margin-right:3.8%;}
.step .s_content .swr{ width:48.1%; margin-right:0;}
.step .s_content .swr span{ color:#d20000;}
.step .s_content .swl img, .step .s_content .swr img{ margin:0 0 10px; border:solid 2px #00aff7;}
.step .s_content .st4 img{ border:none;}

.step .s_content .mh{ min-height:356px;}


.sbox{ width:100%;}
.sbox .end{ margin-bottom:40px;}
.sbox .title{ margin-top:20px;}
.sbox .s_c1{ background:#fff; border-bottom:solid 2px #00d0ba; border-left:solid 2px #00d0ba; border-right:solid 2px #00d0ba;}
.sbox .s_c2{ background:#fff; border-bottom:solid 2px #9b00c8; border-left:solid 2px #9b00c8; border-right:solid 2px #9b00c8;}
.sbox .s_c2 b{ font-size:1.6em; line-height:180%;}
.sbox .s_c3{ background:#fff; padding:20px; border-bottom:solid 2px #00c000; border-left:solid 2px #00c000; border-right:solid 2px #00c000;}
.sbox .s_c3 span{ color:#f00;}
.sbox .s_c3 a{ color:#0081ff; text-decoration:underline; word-wrap:break-word; word-break:break-all;}
.sbox .s_c3 a:hover{ color:#d20000;}
.zx_zzz{ width:100%; text-align:center; overflow:hidden;}
.zx_zzz .zx_d{ padding:16px 0;}
.pc_ss{ padding:3% 3.6%; margin-bottom:20px; background:#fff; border:solid 2px #983cff; text-align:left;}
.pc_ss .s_t{ padding:10px 16px 10px 35px; background:#e3f0f5 url(../images/s_icon.png) 22px 15px no-repeat; font-size:16px; color:#d20000; line-height:160%; margin:15px 0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}

.ec{ text-align:center; margin:30px 0; font-size:12px; line-height:160%; color:#000;}

/*-------------------------------------------*/
@media screen and (max-width: 1200px) {
body { background-size:150% auto;}
.header{ width:94%; padding: 0 3%;}
.main{ width:94%;}
.o_main{ width:94%;}
}

/*-------------------------------------------*/
@media screen and (max-width: 1000px) {
.step .sc_r .s_ph1{ margin-top:2px;}

.header{ border-bottom: solid 6px #000;}
.main{ width:100%; background-size: 0 0, 16px 16px, 16px 16px; margin:0 auto; padding-bottom: 0; border:none;}
.o_main{ width:100%; background-size: 100%, 5%;}
.t_card{width:calc(92% + 10px); padding:0 calc(4% - 5px);}
.t_ph{ margin:0 4%; padding:0 0 3% 0;}
.news{ margin:10px 4% 0 4%;}
.zx_bn{ margin:1% 4% 4% 4%;}
}

/*-------------------------------------------*/
@media screen and (max-width: 750px) {
.header{ width:100%; padding: 0; border-bottom: solid 4px #000;}
.news .news_list{ width:62%;}
.news .news_list ul li{ display:block;}
.news .news_list ul li em{ width:100%; float:none; display:block;}
.news .r_ph{ width:40%; bottom:2%; right:0.5%;}
}

/*-------------------------------------------*/
@media screen and (max-width: 640px) {
body{ font-size: 12px; background-size: 180% auto;}
.t_ph{ margin:0 3%; padding:3% 0 1% 0;}
.mb{ padding:0.1% 3% 30px;}
.zx_bn{ margin:0 3% 3% 3%;}
.news{ margin:10px 3% 0 3%;}
.news .news_list{ background-size:auto 60%; padding:40px 2% 2% 2%; width:60%;}

.step .s_content .sc_l{ width:100%; margin-right:0; float:none;}
.step .s_content .sc_l .s_t{ margin-top:10px;}
.step .sc_r{ width:100%; float:none;}
.step .sc_r .s_ph{ margin-top:18px;}
.step .sc_r .s_ph1{ margin-top:18px;}
.step .s_content .swl{ width:100%; margin-right:0; margin-bottom:10px;}
.step .s_content .swr{ width:100%;}
.step .s_content .mh{ min-height:auto; margin-bottom:20px;}
.step .s_content .sc_l h3{ font-size:14px; line-height:170%; padding-left:28px;}
.step .s_content .sc_l h3 span{ font-size:16px;}
.step .s_content .sc_l .s_t p{ font-size:12px;}
.step .s_content .sc_234 h3{ font-size:14px; line-height:160%;}
.step .s_content .sc_234 h3 span{ font-size:16px;}
.step .s_content .sc_234 .s_t p{ font-size:12px;}
.step .s_content .sc_234 .s_t2{ font-size:14px; line-height:160%;}
.step .s_content .sc_234 .s_t2 span{ font-size:16px;}
.step .s_content .st4 img{ width:35%; border:none; margin:0 0 20px 0;}
.step .s_content .sc_l .s1{ background-size:1.4rem;}
.step .s_content .sc_l .s2{ background-size:1.4rem;}
.step .s_content .sc_l .s3{ background-size:1.4rem;}
.step .s_content .sc_l .s4{ background-size:1.4rem;}
.step .s_content .sc_l .s5{ background-size:1.4rem;}
.step .s_content .sc_l .s6{ background-size:1.4rem;}
.step .s_content .sc_l .s7{ background-size:1.4rem;}
.sbox .s_c2 b{ font-size:1.2em; line-height:140%;}

.zx_zzz{ padding-bottom:0;}
.zx_zzz .zx_d{ padding:10px 0;}
.zx_zzz .zx_d img{ width:16%;}
.pc_ss .s_t{ font-size:14px;}
}

/*-------------------------------------------*/
@media screen and (max-width: 480px) {
.news .r_ph{ width:42%; bottom:4%;}
}