@charset "utf-8";

/* 装飾
------------------------------------------------------------*/
.op {
transition: 0.3s;
}
.op:hover {
opacity: 0.7;
}


/* リンク設定
------------------------------------------------------------*/
a:link {
	color:#1299df;
	text-decoration:none;
}
a:visited {
	color:#1299df;
	text-decoration:none;
}
a:hover {
	color:#1299df;
	text-decoration:underline;
}
a:active {
	color:#1299df;
	text-decoration:none;
}


/* アニメーション
------------------------------------------------------------*/
.fade-in {
transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
}
.fade-up, .fade-left, .fade-right {
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: transform 0.7s;
-moz-transition: transform 0.7s;
-webkit-transition: transform 0.7s;
-o-transition: transform 0.7s;
}



/* 共通
------------------------------------------------------------*/

html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
position: relative;
font-family:"游ゴシック","YuGothic","メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#000;
-webkit-text-size-adjust: none;
font-weight: 500;
 -webkit-transition: all 0.6s;
transition: all 0.6s;
}
#news_list {
text-align: center;
display: block;
}


/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 1025px) {

.spbr {
display: none !important;
}
body{
font-size: 1.6rem;
line-height: 3rem;
}
header {
padding: 2rem 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
header > div {
width: 20.9rem;
}
header > h1 {
font-family: "Noto Sans JP", sans-serif;
font-size: 3rem;
font-weight: 700;
}
header > h1 span {
font-size: 3rem;
}
header > article {
width: 28rem;
text-align: right;
}
header > article p {
font-size: 3.4rem;
font-weight: bold;
}
header > article p img {
width: 4rem;
vertical-align: -0.3rem;
margin-right: 1rem;
}
header > article small {
font-size: 1.3rem;
font-weight: bold;
display: block;
}
header > article small span {
color: #ff0000;
}
#top_tel {
background: #0DBC11;
color: #fff;
display: block;
padding: 0.3rem 0.4rem;
text-align: center;
font-size: 1.4rem;
transition: 0.3s;
}
#top_tel:hover {
opacity: 0.7;
text-decoration: none;
}
#catch {
position: relative;
background: url("../img/hdr.webp") no-repeat;
background-size: cover;
padding: 7rem 5rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.read {
font-family: "Noto Sans JP", sans-serif;
font-size: 4rem;
font-weight: 700;
margin: 4rem 0;
text-align: center;
line-height: 1.8;
}
#three {
display: flex;
justify-content: space-between;
width: 114rem;
margin: 0 auto;
}
#three article {
width: 36rem;
border: 0.2rem solid #707070;
border-radius: 1rem;
padding: 1.4rem;
}
#three article > div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 13.9rem;
}
#three article h4 {
font-size: 3rem;
font-weight: bold;
line-height: 1.4;
margin-bottom: 1rem;
}
.gray {
color: #535353;
}
.line {
background: #0DBC11;
color: #fff;
padding: 3rem 0;
}
.line h3 {
font-size: 3.6rem;
font-weight: bold;
line-height: 1.6;
}
.line > div {
width: 114rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.line article {
display: flex;
font-size: 2rem;
font-weight: bold;
}
.line article div {
margin-right: 2rem;
}
.line_sp {
display: none;
}
.tel {
text-align: center;
font-weight: bold;
margin: 3rem 0;
}
.tel h4 {
font-weight: bold;
margin-bottom: 1rem;
}
.tel p {
font-size: 4.6rem;
margin-bottom: 0.6rem;
}
.tel p span {
font-size: 2.4rem;
}
.tel small {
font-size: 1.6rem;
}
.tel small span {
color: #ff0000;
}
#nayami {
text-align: center;
margin: 10rem 0 3rem 0;
}
#nayami h3 {
font-size: 4rem;
font-weight: bold;
color: #D30B0B;
text-decoration: underline;
margin-bottom: 5rem;
}
#nayami li {
margin-bottom: 3rem;
}
#nayami li span {
display: inline-block;
font-size: 3rem;
font-weight: bold;
color: #D0760D;
padding: 2rem 4rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
.pro {
background: #000;
text-align: center;
color: #fff;
padding: 2rem 0;
font-size: 4rem;
font-weight: bold;
margin-bottom: 2rem;
}
#pro_cnt {
display: flex;
justify-content: space-between;
}
#pro_cnt figure, #pro_cnt ul {
width: 50%;
}
#pro_cnt ul {
padding: 0 0 0 5rem;
}
#pro_cnt li {
margin-bottom: 2rem;
}
#pro_cnt li span {
display: inline-block;
font-size: 2.6rem;
font-weight: bold;
color: #000;
padding: 2rem 4rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
.read2 {
font-size: 4rem;
font-weight: bold;
text-align: center;
margin: 12rem 0 5rem 0;
}
#case {
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap:1.6rem;
margin: 0 auto 5rem auto;
}
#case_dis {
font-size: 2.6rem;
font-weight: bold;
text-align: center;
line-height: 1.7;
}
#pro2 {
margin-bottom: 0;
}
#flow {
background: #F2F2F2;
padding: 8rem 0;
}
#flow > div {
width: 90rem;
margin: 0 auto;
}
#flow > div article {
overflow: hidden;
border-radius: 1rem;
background: #fff;
display: flex;
justify-content: space-between;
}
#flow > div article h3 {
background: #83D500;
color: #fff;
font-size: 4rem;
font-weight: bold;
padding: 3rem 0;
width: 12rem;
text-align: center;
}
#flow > div article h4, #flow > div article p {
padding: 3rem 0;
}
#flow > div article h4 {
color: #83D502;
font-size: 3rem;
font-weight: bold;
width: 22rem;
padding-left: 3rem;
}
#flow > div article p {
width: 56rem;
}
#flow > div  div {
text-align: center;
margin: 3rem 0 2rem 0;
}
#qa {
width: 90rem;
margin: 0 auto;
}
.qa_left, .qa_right {
display: flex;
justify-content: space-between;
}
.qa_left {
margin-bottom: 5rem;
}
.qa_right {
margin-bottom: 8rem;
}
.qa_left h4 {
position: relative;
background: #D7F2F7;
font-weight: bold;
font-size: 3rem;
line-height: 1;
padding: 3rem;
width: 72rem;
border-radius: 2rem;
display: flex;
align-items: center;
}
.qa_left h4::after {
content: url("../img/arrow_blue.png");
position: absolute;
top: 4rem;
left: -2rem;
}
.qa_right p {
position: relative;
background: #F7E1D7;
line-height: 1.6;
padding: 3rem;
width: 72rem;
border-radius: 2rem;
display: flex;
align-items: center;
}
.qa_right p::after {
content: url("../img/arrow_red.png");
position: absolute;
top: 4rem;
right: -2rem;
}
#company {
background: #F5F5F5;
padding: 1rem 0 5rem 0;
}
#company table {
width: 70rem;
margin: 0 auto;
border-collapse: collapse;
}
#company th, #company td {
padding: 3rem;
vertical-align: top;
border-bottom: 0.1rem solid #aaa;
}
#company th {
text-align: left;
}
#ftr_ban {
text-align: center;
}
footer {
background: #000;
text-align: center;
color: rgba(255,255,255,0.6);
padding: 8rem 0;
}

/* 追加CSS */
#zu1 {
text-align: center;
font-size: 3rem;
margin: 8rem 0;
}
#zu1 h3 {
margin-bottom: 3rem;
font-weight: bold;
}
#zu1 h4 {
font-weight: bold;
margin-bottom: 3rem;
}
#zu1 h4 em {
color: #ff3600;
font-weight: bold;
text-decoration: underline;
font-size: 6rem;
}
#zu1 h4 em span {
font-size: 3.6rem;
}
#zu1 small, #zu2 small {
font-size: 1.4rem;
}
#point {
position: relative;
padding: 5rem 14%;
background: #82bb30;
color: #fff;
font-size: 1.8rem;
}
#point::before {
content: url("../img/hds_kokoga.png");
position: absolute;
top: -3rem;
left: 12%;
}
#point p {
margin-bottom: 2rem;
}
#point p:last-child {
margin-bottom: 0;
}
#zu2 {
text-align: center;
margin: 4rem 0 8rem 0;
}
#oct {
width: 87rem;
margin: 0 auto 8rem auto;
border-radius: 2rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 4rem;
text-align: center;
}
#oct h3 {
font-weight: bold;
font-size: 3rem;
line-height: 1.8;
}
#oct div {
margin: 2rem 0;
}
#plan {
width: 90%;
max-width: 120rem;
margin: 0 auto 8rem auto;
border-top: 0.1rem solid #afa7a7;
}
#plan article {
display: flex;
justify-content: space-between;
padding: 4rem 0;
border-bottom: 0.1rem solid #afa7a7;
}
#plan article figure {
width: 36rem;
}
#plan article > div {
width: calc(100% - 36rem);
padding-left: 5rem;
}
#plan article > div h3 {
margin-bottom: 2rem;
}
#plan article > div h2 {
margin-bottom: 4rem;
font-size: 3rem;
font-weight: bold;
}
#plan article > div h4 {
margin-bottom: 2rem;
font-size: 5rem;
font-weight: bold;
color: #ff3600;
}
#plan article > div h4 span {
font-size: 3rem;
}
#plan article > div p {
font-size: 1.8rem;
line-height: 2;
}
#plan article > div p em {
font-weight: bold;
}
.p_blue {
color: #208dfd;
}
.p_red {
color: #d30303;
}
.p_green {
color: #21c700;
}
#danger {
background-image: url("../img/back_danger.png"), url("../img/back_danger.png"), none, none;
background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
background-position: top left, top right, top, top;
background-color: #f5dd59;
padding: 5rem 0;
margin: 8rem 0;
text-align: center;
}
#danger article {
width: 80rem;
margin: 0 auto;
}
#danger article figure {
margin-bottom: 4rem;
}
#danger article h2 {
position: relative;
font-weight: bold;
font-size: 3rem;
text-decoration: underline;
margin-bottom: 3rem;
}
#danger article h2::before {
content: url("../img/keikoku.png");
position: absolute;
top: -6rem;
left: -1rem;
}
#danger article h2 em {
font-weight: bold;
font-size: 5rem;
color: #ff0000;
}
#danger article dl {
text-align: left;
margin-top: 2rem;
}
#danger article dt {
font-weight: bold;
color: #ff0000;
}
#danger article dd {
margin-bottom: 2rem;
}
#danger article dd:last-child {
margin-bottom: 0;
}
#anzen {
text-align: center;
margin-bottom: 8rem;
}
#anzen h3 {
text-decoration: underline;
font-weight: bold;
font-size: 3rem;
line-height: 2;
margin-bottom: 3rem;
}
#anzen p {
margin-bottom: 3rem;
}
#anzen h4 {
font-weight: bold;
font-size: 3.6rem;
color: #2ac500;
margin-bottom: 5rem;
}
#inter {
background: #e8e8e8;
padding: 4rem 5%;
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#inter figure {
width: 58.6rem;
}
#inter article {
width: calc(100% - 58.6rem);
padding-left: 5rem;
}
#inter article h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 2rem;
line-height: 1.6;
}
#inter article h3 {
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 2rem;
}
#inter article p {
margin-bottom: 2rem;
font-size: 1.8rem;
}
#inter article dl {
border: 0.1rem solid #000;
padding: 2rem;
margin-top: 5rem;
}
#inter article dt {
font-weight: bold;
}
#inter article dd {
margin-bottom: 2rem;
}
#inter article dd:last-child {
margin-bottom: 0;
}
.in_blue {
color: #1e68f0;
}
#sae {
text-align: center;
font-size: 1.8rem;
margin-bottom: 8rem;
}
#sae h2 {
font-weight: bold;
font-size: 3rem;
margin-bottom: 2rem;
}
#sae h2 em {
font-weight: bold;
font-size: 5rem;
}
#sae h3 {
background: #ff7e00;
color: #fff;
padding: 1rem 3rem;
margin-bottom: 2rem;
font-weight: bold;
}
#sae p {
margin-bottom: 2rem;
line-height: 1.8;
}
#sae p em {
color: #ff0000;
font-weight: bold;
}
#sae dl {
margin-bottom: 2rem;
border-top: 0.1rem solid #b3b3b3;
border-bottom: 0.1rem solid #b3b3b3;
padding: 2rem 0;
}
#sae dt {
font-weight: bold;
}
#sae dd {
margin-bottom: 1rem;
}
#sae dd:last-child {
margin-bottom: 0;
}
#tokuten {
background: #c5e790;
text-align: center;
padding: 3rem 10rem;
margin-bottom: 8rem;
font-size: 1.8rem;
}
#tokuten h2 {
position: relative;
background: #ff7e00;
color: #fff;
font-weight: bold;
font-size: 2.6rem;
padding: 1rem 3rem;
width: 80rem;
margin: 0 auto 3rem auto;
border-radius: 1rem;
}
#tokuten h2::before {
content: url("../img/hds_tokuten.png");
position: absolute;
top: -6rem;
left: calc(50% - 12.8rem);
}
#tokuten p {
margin-bottom: 4rem;
}
#tokuten dl {
width: 90rem;
margin: 0 auto;
}
#tokuten dt {
font-weight: bold;
text-align: left;
}
#tokuten dd {
text-align: left;
margin-bottom: 2rem;
}
#tokuten dd:last-child {
margin-bottom: 0;
}
#app {
width: 110rem;
margin: 16rem auto 8rem auto;
}
#app h2 {
position: relative;
text-align: center;
font-weight: bold;
font-size: 3rem;
text-decoration: underline;
margin-bottom: 5rem;
}
#app h2::before {
content: url("../img/hds_apri.png");
position: absolute;
top: -8rem;
left: calc(50% - 8.7rem);
}
#app > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
}
#app > div article {
border-radius: 1rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 2rem;
}
#app > div article figure {
margin-bottom: 2rem;
}
#app > div article h3 {
font-weight: bold;
font-size: 2.4rem;
margin-bottom: 1rem;
}
#app > div article div {
margin-bottom: 1rem;
}
#catch > div:first-child {
width: 61.8rem;
}
#catch > div:last-child {
width: 27.8rem;
}

}

/* タブレット用　縦向き
------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 1024px) {

.spbr {
display: none !important;
}
.pcbr {
display: none !important;
}
body{
font-size: 1.4rem;
line-height:2.6rem;
}
header {
padding: 2rem 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
header > div {
width: 20.9rem;
}
header > h1 {
font-family: "Noto Sans JP", sans-serif;
font-size: 3rem;
font-weight: 700;
display: none;
}
header > h1 span {
font-size: 3rem;
}
header > article {
width: 28rem;
text-align: right;
}
header > article p {
font-size: 3.4rem;
font-weight: bold;
}
header > article p img {
width: 4rem;
vertical-align: -0.3rem;
margin-right: 1rem;
}
header > article small {
font-size: 1.3rem;
font-weight: bold;
display: block;
}
header > article small span {
color: #ff0000;
}
#top_tel {
background: #0DBC11;
color: #fff;
display: block;
padding: 0.3rem 0.4rem;
text-align: center;
font-size: 1.4rem;
transition: 0.3s;
}
#top_tel:hover {
opacity: 0.7;
text-decoration: none;
}
#catch {
position: relative;
background: url("../img/hdr.webp") no-repeat center;
background-size: cover;
padding: 5rem;
}
.read {
font-family: "Noto Sans JP", sans-serif;
font-size: 4rem;
font-weight: 700;
margin: 4rem 0;
text-align: center;
line-height: 1.8;
padding: 0 2rem;
}
#three {
display: flex;
justify-content: space-between;
padding: 0 2rem;
}
#three article {
width: 32%;
border: 0.2rem solid #707070;
border-radius: 1rem;
padding: 1.4rem;
}
#three article > div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 13.9rem;
}
#three article h4 {
font-size: 2rem;
font-weight: bold;
line-height: 1.4;
margin-bottom: 1rem;
}
.gray {
color: #535353;
}
.line {
background: #0DBC11;
color: #fff;
padding: 3rem 5rem;
}
.line h3 {
font-size: 3.6rem;
font-weight: bold;
line-height: 1.6;
}
.line article {
display: flex;
font-size: 2rem;
font-weight: bold;
margin-top: 2rem;
}
.line article div {
margin-right: 2rem;
}
.line_sp {
display: none;
}
.tel {
text-align: center;
font-weight: bold;
margin: 3rem 0;
}
.tel h4 {
font-weight: bold;
margin-bottom: 1rem;
}
.tel p {
font-size: 4.6rem;
margin-bottom: 0.6rem;
}
.tel p span {
font-size: 2.4rem;
}
.tel small {
font-size: 1.6rem;
}
.tel small span {
color: #ff0000;
}
#nayami {
text-align: center;
margin: 10rem 0 3rem 0;
}
#nayami h3 {
font-size: 4rem;
font-weight: bold;
color: #D30B0B;
text-decoration: underline;
margin-bottom: 5rem;
}
#nayami li {
margin-bottom: 3rem;
}
#nayami li span {
display: inline-block;
font-size: 3rem;
font-weight: bold;
color: #D0760D;
padding: 2rem 4rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
.pro {
background: #000;
text-align: center;
color: #fff;
padding: 2rem 0;
font-size: 3rem;
font-weight: bold;
margin-bottom: 2rem;
}
#pro_cnt {
display: flex;
justify-content: space-between;
}
#pro_cnt figure, #pro_cnt ul {
width: 50%;
}
#pro_cnt ul {
padding: 0 2rem 0 2rem;
}
#pro_cnt li {
margin-bottom: 2rem;
}
#pro_cnt li span {
display: inline-block;
font-size: 2.6rem;
font-weight: bold;
color: #000;
padding: 2rem 4rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
.read2 {
font-size: 4rem;
font-weight: bold;
text-align: center;
margin: 12rem 0 5rem 0;
}
#case {
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap:1.6rem;
margin: 0 auto 5rem auto;
}
#case_dis {
font-size: 2rem;
font-weight: bold;
text-align: center;
line-height: 1.7;
}
#pro2 {
margin-bottom: 0;
}
#flow {
background: #F2F2F2;
padding: 8rem 0;
}
#flow > div {
width: 80rem;
margin: 0 auto;
}
#flow > div article {
overflow: hidden;
border-radius: 1rem;
background: #fff;
display: flex;
justify-content: space-between;
}
#flow > div article h3 {
background: #83D500;
color: #fff;
font-size: 4rem;
font-weight: bold;
padding: 3rem 0;
width: 12rem;
text-align: center;
}
#flow > div article h4, #flow > div article p {
padding: 3rem 0;
}
#flow > div article h4 {
color: #83D502;
font-size: 2.4rem;
font-weight: bold;
width: 20rem;
padding-left: 3rem;
}
#flow > div article p {
width: 56rem;
}
#flow > div  div {
text-align: center;
margin: 3rem 0 2rem 0;
}
#qa {
width: 80rem;
margin: 0 auto;
}
.qa_left, .qa_right {
display: flex;
justify-content: space-between;
}
.qa_left {
margin-bottom: 5rem;
}
.qa_right {
margin-bottom: 8rem;
}
.qa_left h4 {
position: relative;
background: #D7F2F7;
font-weight: bold;
font-size: 3rem;
line-height: 1;
padding: 3rem;
width: 72rem;
border-radius: 2rem;
display: flex;
align-items: center;
}
.qa_left h4::after {
content: url("../img/arrow_blue.png");
position: absolute;
top: 4rem;
left: -2rem;
}
.qa_right p {
position: relative;
background: #F7E1D7;
line-height: 1.6;
padding: 3rem;
width: 72rem;
border-radius: 2rem;
display: flex;
align-items: center;
}
.qa_right p::after {
content: url("../img/arrow_red.png");
position: absolute;
top: 4rem;
right: -2rem;
}
#company {
background: #F5F5F5;
padding: 1rem 0 5rem 0;
}
#company table {
width: 70rem;
margin: 0 auto;
border-collapse: collapse;
}
#company th, #company td {
padding: 3rem;
vertical-align: top;
border-bottom: 0.1rem solid #aaa;
}
#company th {
text-align: left;
}
#ftr_ban {
text-align: center;
}
footer {
background: #000;
text-align: center;
color: rgba(255,255,255,0.6);
padding: 8rem 0;
}

/* 追加CSS */
#zu1 {
text-align: center;
font-size: 3rem;
margin: 8rem 0;
}
#zu1 h3 {
margin-bottom: 3rem;
font-weight: bold;
}
#zu1 h4 {
font-weight: bold;
margin-bottom: 3rem;
}
#zu1 h4 em {
color: #ff3600;
font-weight: bold;
text-decoration: underline;
font-size: 6rem;
}
#zu1 h4 em span {
font-size: 3.6rem;
}
#zu1 small, #zu2 small {
font-size: 1.4rem;
}
#point {
position: relative;
padding: 5rem 14%;
background: #82bb30;
color: #fff;
font-size: 1.8rem;
}
#point::before {
content: url("../img/hds_kokoga.png");
position: absolute;
top: -3rem;
left: 12%;
}
#point p {
margin-bottom: 2rem;
}
#point p:last-child {
margin-bottom: 0;
}
#zu2 {
text-align: center;
margin: 4rem 0 8rem 0;
}
#oct {
width: 87%;
margin: 0 auto 8rem auto;
border-radius: 2rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 4rem;
text-align: center;
}
#oct h3 {
font-weight: bold;
font-size: 3rem;
line-height: 1.8;
}
#oct div {
margin: 2rem 0;
}
#plan {
width: 90%;
max-width: 120rem;
margin: 0 auto 8rem auto;
border-top: 0.1rem solid #afa7a7;
}
#plan article {
display: flex;
justify-content: space-between;
padding: 4rem 0;
border-bottom: 0.1rem solid #afa7a7;
}
#plan article figure {
width: 28rem;
}
#plan article > div {
width: calc(100% - 28rem);
padding-left: 5rem;
}
#plan article > div h3 {
margin-bottom: 2rem;
}
#plan article > div h2 {
margin-bottom: 4rem;
font-size: 3rem;
line-height: 1.6;
font-weight: bold;
}
#plan article > div h4 {
margin-bottom: 2rem;
font-size: 5rem;
font-weight: bold;
color: #ff3600;
}
#plan article > div h4 span {
font-size: 3rem;
}
#plan article > div p {
font-size: 1.8rem;
line-height: 2;
}
#plan article > div p em {
font-weight: bold;
}
.p_blue {
color: #208dfd;
}
.p_red {
color: #d30303;
}
.p_green {
color: #21c700;
}
#danger {
background-image: url("../img/back_danger.png"), url("../img/back_danger.png"), none, none;
background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
background-position: top left, top right, top, top;
background-color: #f5dd59;
padding: 5rem 0;
margin: 8rem 0;
text-align: center;
}
#danger article {
width: 80rem;
margin: 0 auto;
}
#danger article figure {
margin-bottom: 4rem;
}
#danger article h2 {
position: relative;
font-weight: bold;
font-size: 2.4rem;
text-decoration: underline;
margin-bottom: 3rem;
}
#danger article h2::before {
content: url("../img/keikoku.png");
position: absolute;
top: -6rem;
left: -1rem;
}
#danger article h2 em {
font-weight: bold;
font-size: 4rem;
color: #ff0000;
}
#danger article dl {
text-align: left;
margin-top: 2rem;
padding: 0 5rem;
}
#danger article dt {
font-weight: bold;
color: #ff0000;
}
#danger article dd {
margin-bottom: 2rem;
}
#danger article dd:last-child {
margin-bottom: 0;
}
#anzen {
text-align: center;
margin-bottom: 8rem;
}
#anzen h3 {
text-decoration: underline;
font-weight: bold;
font-size: 3rem;
line-height: 2;
margin-bottom: 3rem;
}
#anzen p {
margin-bottom: 3rem;
}
#anzen h4 {
font-weight: bold;
font-size: 3.6rem;
color: #2ac500;
margin-bottom: 5rem;
}
#inter {
background: #e8e8e8;
padding: 4rem 2rem;
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#inter figure {
width: 30.6rem;
}
#inter article {
width: calc(100% - 30.6rem);
padding-left: 5rem;
}
#inter article h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 2rem;
line-height: 1.6;
}
#inter article h3 {
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 2rem;
}
#inter article p {
margin-bottom: 2rem;
font-size: 1.8rem;
}
#inter article dl {
border: 0.1rem solid #000;
padding: 2rem;
margin-top: 5rem;
}
#inter article dt {
font-weight: bold;
}
#inter article dd {
margin-bottom: 2rem;
}
#inter article dd:last-child {
margin-bottom: 0;
}
.in_blue {
color: #1e68f0;
}
#sae {
text-align: center;
font-size: 1.8rem;
margin-bottom: 8rem;
}
#sae h2 {
font-weight: bold;
font-size: 3rem;
margin-bottom: 2rem;
}
#sae h2 em {
font-weight: bold;
font-size: 5rem;
}
#sae h3 {
background: #ff7e00;
color: #fff;
padding: 1rem 3rem;
margin-bottom: 2rem;
font-weight: bold;
}
#sae p {
margin-bottom: 2rem;
line-height: 1.8;
}
#sae p em {
color: #ff0000;
font-weight: bold;
}
#sae dl {
margin-bottom: 2rem;
border-top: 0.1rem solid #b3b3b3;
border-bottom: 0.1rem solid #b3b3b3;
padding: 2rem 0;
}
#sae dt {
font-weight: bold;
}
#sae dd {
margin-bottom: 1rem;
}
#sae dd:last-child {
margin-bottom: 0;
}
#tokuten {
background: #c5e790;
text-align: center;
padding: 3rem 10rem;
margin-bottom: 8rem;
font-size: 1.8rem;
}
#tokuten h2 {
position: relative;
background: #ff7e00;
color: #fff;
font-weight: bold;
font-size: 2.6rem;
padding: 1rem 3rem;
line-height: 1.4;
margin: 0 auto 3rem auto;
border-radius: 1rem;
}
#tokuten h2::before {
content: url("../img/hds_tokuten.png");
position: absolute;
top: -6rem;
left: calc(50% - 12.8rem);
}
#tokuten p {
margin-bottom: 4rem;
}
#tokuten dl {
margin: 0 auto;
}
#tokuten dt {
font-weight: bold;
text-align: left;
}
#tokuten dd {
text-align: left;
margin-bottom: 2rem;
}
#tokuten dd:last-child {
margin-bottom: 0;
}
#app {
padding: 0 2rem;
margin: 16rem auto 8rem auto;
}
#app h2 {
position: relative;
text-align: center;
font-weight: bold;
font-size: 3rem;
text-decoration: underline;
margin-bottom: 5rem;
}
#app h2::before {
content: url("../img/hds_apri.png");
position: absolute;
top: -8rem;
left: calc(50% - 8.7rem);
}
#app > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
#app > div article {
border-radius: 1rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 2rem;
}
#app > div article figure {
margin-bottom: 2rem;
}
#app > div article h3 {
font-weight: bold;
font-size: 2.4rem;
margin-bottom: 1rem;
}
#app > div article div {
margin-bottom: 1rem;
}
#catch > div:first-child {
width: 61.8rem;
margin-bottom: 5rem;
}
#catch > div:last-child {
width: 27.8rem;
margin-left: 2rem;
}

}


/* スマートフォン用
------------------------------------------------------------*/
@media only screen and (max-width: 599px) {

.pcbr {
display: none !important;
}
.sp_none {
display: none;
}
body{
font-size: 1.4rem;
line-height: 1.7;
width: 100%;
position: relative;
z-index: 1;
}
header {
padding: 2rem 5rem;
display: flex;
flex-direction: column;
align-items: center;
}
header > div {
width: 20.9rem;
}
header > h1 {
font-family: "Noto Sans JP", sans-serif;
font-size: 3rem;
font-weight: 700;
display: none;
}
header > h1 span {
font-size: 3rem;
}
header > article {
text-align: center;
}
header > article p {
font-size: 3.4rem;
font-weight: bold;
}
header > article p img {
width: 4rem;
vertical-align: -0.3rem;
margin-right: 1rem;
}
header > article small {
font-size: 1.3rem;
font-weight: bold;
display: block;
}
header > article small span {
color: #ff0000;
}
#top_tel {
background: #0DBC11;
color: #fff;
display: block;
padding: 0.3rem 0.4rem;
text-align: center;
font-size: 1.4rem;
transition: 0.3s;
}
#top_tel:hover {
opacity: 0.7;
text-decoration: none;
}
#catch {
position: relative;
background: url("../img/hdr.webp") no-repeat center;
background-size: cover;
padding: 3rem 3rem;
}
.read {
font-family: "Noto Sans JP", sans-serif;
font-size: 2.6rem;
font-weight: 700;
margin: 4rem 0;
text-align: center;
line-height: 1.8;
padding: 0 2rem;
}
#three {
padding: 0 2rem;
}
#three article {
border: 0.2rem solid #707070;
border-radius: 1rem;
padding: 1.4rem;
margin-bottom: 2rem;
}
#three article > div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 13.9rem;
}
#three article h4 {
font-size: 2.4rem;
font-weight: bold;
line-height: 1.4;
margin-bottom: 1rem;
}
.gray {
color: #535353;
}
.line {
background: #0DBC11;
color: #fff;
padding: 3rem 2rem;
}
.line h3 {
font-size: 2.6rem;
font-weight: bold;
line-height: 1.6;
margin-bottom: 2rem;
}
.line h3 br {
display: none;
}
.line article {
display: flex;
font-size: 2rem;
font-weight: bold;
}
.line article div {
display: none;
}
.line_sp a {
color: #fff;
text-decoration: underline;
}
.line_pc {
display: none;
}
.tel {
text-align: center;
font-weight: bold;
margin: 3rem 0;
}
.tel h4 {
font-weight: bold;
font-size: 1.6rem;
}
.tel p {
font-size: 3.6rem;
}
.tel p span {
font-size: 2.4rem;
}
.tel small {
font-size: 1.5rem;
}
.tel small span {
color: #ff0000;
}
#nayami {
text-align: center;
margin: 10rem 0 3rem 0;
}
#nayami h3 {
font-size: 2.6rem;
font-weight: bold;
color: #D30B0B;
text-decoration: underline;
margin-bottom: 5rem;
padding: 0 2rem;
}
#nayami ul {
padding: 0 2rem;
}
#nayami li {
margin-bottom: 3rem;
}
#nayami li span {
display: inline-block;
font-size: 2rem;
font-weight: bold;
color: #D0760D;
padding: 2rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
#nayami > img {
width: 7rem;
}
.pro {
background: #000;
text-align: center;
color: #fff;
padding: 2rem;
font-size: 2.6rem;
font-weight: bold;
}
#pro_cnt figure {
margin-bottom: 2rem;
}
#pro_cnt ul {
padding: 0 2rem;
text-align: center;
}
#pro_cnt li {
margin-bottom: 2rem;
}
#pro_cnt li span {
display: inline-block;
font-size: 2rem;
font-weight: bold;
color: #000;
padding: 2rem 4rem;
border: 0.3rem solid #707070;
border-radius: 5rem;
}
.read2 {
font-size: 3rem;
font-weight: bold;
text-align: center;
margin: 12rem 0 5rem 0;
}
#case {
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr;
gap:1rem;
margin: 0 auto 5rem auto;
}
#case_dis {
font-size: 2rem;
font-weight: bold;
line-height: 1.8;
padding: 0 2rem;
}
#case_dis br {
display: none;
}
#pro2 {
margin-bottom: 0;
}
#flow {
background: #F2F2F2;
padding: 8rem 2rem;
text-align: center;
}
#flow > div article {
overflow: hidden;
border-radius: 1rem;
background: #fff;
}
#flow > div article h3 {
background: #83D500;
color: #fff;
font-size: 2.4rem;
font-weight: bold;
padding: 1.6rem 0;
text-align: center;
}
#flow > div article h4 {
color: #83D502;
font-size: 3rem;
font-weight: bold;
padding: 2rem 0;
}
#flow > div article p {
padding: 0 2rem 2rem 2rem;
}
#flow > div  div {
text-align: center;
margin: 3rem 0 2rem 0;
}
#qa {
padding: 0 2rem;
}
.qa_left, .qa_right {
display: flex;
justify-content: space-between;
}
.qa_left > div, .qa_right > div {
width: 10rem;
}
.qa_left {
margin-bottom: 5rem;
}
.qa_right {
margin-bottom: 8rem;
}
.qa_left h4 {
position: relative;
background: #D7F2F7;
font-weight: bold;
font-size: 2rem;
line-height: 1.4;
padding: 3rem;
width: 100%;
border-radius: 2rem;
display: flex;
align-items: center;
margin-left: 2rem;
}
.qa_left h4::after {
content: url("../img/arrow_blue.png");
position: absolute;
top: 4rem;
left: -2rem;
}
.qa_right p {
position: relative;
background: #F7E1D7;
line-height: 1.6;
padding: 3rem;
border-radius: 2rem;
display: flex;
align-items: center;
margin-right: 2rem;
width: 100%;
}
.qa_right p::after {
content: url("../img/arrow_red.png");
position: absolute;
top: 4rem;
right: -2rem;
}
#company {
background: #F5F5F5;
padding: 1rem 2rem 5rem 2rem;
}
#company table {
border-collapse: collapse;
}
#company th, #company td {
padding: 2rem 0;
vertical-align: top;
border-bottom: 0.1rem solid #aaa;
display: block;
}
#company th {
text-align: left;
border-bottom: none;
padding-bottom: 0;
}
#ftr_ban {
text-align: center;
}
footer {
background: #000;
text-align: center;
color: rgba(255,255,255,0.6);
padding: 5rem 0;
}

/* 追加CSS */
#zu1 {
text-align: center;
font-size: 2rem;
margin: 8rem 0;
}
#zu1 h3 {
font-weight: bold;
}
#zu1 h4 {
font-weight: bold;
margin-bottom: 2rem;
}
#zu1 h4 em {
color: #ff3600;
font-weight: bold;
text-decoration: underline;
font-size: 4rem;
}
#zu1 h4 em span {
font-size: 3rem;
}
#zu1 small, #zu2 small {
font-size: 1.4rem;
}
#point {
position: relative;
padding: 5rem 10%;
background: #82bb30;
color: #fff;
font-size: 1.6rem;
}
#point::before {
content: url("../img/hds_kokoga.png");
position: absolute;
top: -3rem;
left: 12%;
}
#point p {
margin-bottom: 2rem;
}
#point p:last-child {
margin-bottom: 0;
}
#zu2 {
text-align: center;
margin: 4rem 0 8rem 0;
}
#oct {
width: 94%;
margin: 0 auto 8rem auto;
border-radius: 2rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 4rem;
text-align: center;
}
#oct h3 {
font-weight: bold;
font-size: 2.4rem;
line-height: 1.8;
}
#oct p {
text-align: left;
}
#oct div {
margin: 2rem 0;
}
#plan {
width: 94%;
margin: 0 auto 8rem auto;
border-top: 0.1rem solid #afa7a7;
}
#plan article {
padding: 4rem 0;
border-bottom: 0.1rem solid #afa7a7;
}
#plan article figure {
text-align: center;
margin-bottom: 2rem;
}
#plan article figure img {
width: 80%;
}
#plan article > div {
padding: 0 1rem;
}
#plan article > div h3 {
margin-bottom: 2rem;
width: 15rem;
}
#plan article > div h2 {
margin-bottom: 1rem;
font-size: 2.4rem;
font-weight: bold;
}
#plan article > div h4 {
margin-bottom: 2rem;
font-size: 3rem;
font-weight: bold;
color: #ff3600;
}
#plan article > div h4 span {
font-size: 2rem;
}
#plan article > div p {
font-size: 1.5rem;
line-height: 2;
}
#plan article > div p em {
font-weight: bold;
}
.p_blue {
color: #208dfd;
}
.p_red {
color: #d30303;
}
.p_green {
color: #21c700;
}
#danger {
background-image: url("../img/back_danger.png"), url("../img/back_danger.png"), none, none;
background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
background-position: top left, top right, top, top;
background-color: #f5dd59;
padding: 3rem 0;
margin: 8rem 0;
text-align: center;
}
#danger article {
width: 80%;
margin: 0 auto;
}
#danger article figure {
margin-bottom: 4rem;
}
#danger article h2 {
position: relative;
font-weight: bold;
font-size: 2.4rem;
text-decoration: underline;
margin-bottom: 3rem;
}
#danger article h2::before {
content: url("../img/keikoku.png");
position: absolute;
top: -6rem;
left: -1rem;
}
#danger article h2 em {
font-weight: bold;
font-size: 4rem;
color: #ff0000;
}
#danger article dl {
text-align: left;
margin-top: 2rem;
}
#danger article dt {
font-weight: bold;
color: #ff0000;
}
#danger article dd {
margin-bottom: 2rem;
}
#danger article dd:last-child {
margin-bottom: 0;
}
#anzen {
text-align: center;
margin-bottom: 8rem;
padding: 0 2rem;
}
#anzen h3 {
text-decoration: underline;
font-weight: bold;
font-size: 2.4rem;
line-height: 2;
margin-bottom: 3rem;
}
#anzen p {
margin-bottom: 3rem;
}
#anzen h4 {
font-weight: bold;
font-size: 3rem;
color: #2ac500;
margin-bottom: 5rem;
}
#inter {
background: #e8e8e8;
padding: 4rem 5%;
margin-bottom: 8rem;
}
#inter figure {
margin-bottom: 2rem;
}
#inter article {

}
#inter article h2 {
font-size: 2.4rem;
font-weight: bold;
margin-bottom: 2rem;
line-height: 1.6;
}
#inter article h3 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 2rem;
}
#inter article p {
margin-bottom: 2rem;
font-size: 1.6rem;
}
#inter article dl {
border: 0.1rem solid #000;
padding: 2rem;
margin-top: 5rem;
}
#inter article dt {
font-weight: bold;
}
#inter article dd {
margin-bottom: 2rem;
}
#inter article dd:last-child {
margin-bottom: 0;
}
.in_blue {
color: #1e68f0;
}
#sae {
text-align: center;
font-size: 1.6rem;
margin-bottom: 8rem;
}
#sae h2 {
font-weight: bold;
font-size: 2.4rem;
margin-bottom: 2rem;
}
#sae h2 em {
font-weight: bold;
font-size: 3.6rem;
}
#sae h3 {
background: #ff7e00;
color: #fff;
padding: 1rem 3rem;
margin-bottom: 2rem;
font-weight: bold;
}
#sae p {
margin-bottom: 2rem;
line-height: 1.8;
padding: 0 2rem;
text-align: left;
}
#sae p em {
color: #ff0000;
font-weight: bold;
}
#sae dl {
margin-bottom: 2rem;
border-top: 0.1rem solid #b3b3b3;
border-bottom: 0.1rem solid #b3b3b3;
padding: 2rem;
}
#sae dt {
font-weight: bold;
}
#sae dd {
margin-bottom: 1rem;
}
#sae dd:last-child {
margin-bottom: 0;
}
#tokuten {
background: #c5e790;
text-align: center;
padding: 3rem 2rem;
margin-bottom: 8rem;
font-size: 1.8rem;
}
#tokuten h2 {
position: relative;
background: #ff7e00;
color: #fff;
font-weight: bold;
font-size: 2.6rem;
padding: 1rem 3rem;
margin: 0 auto 3rem auto;
border-radius: 1rem;
}
#tokuten h2::before {
content: url("../img/hds_tokuten.png");
position: absolute;
top: -6rem;
left: calc(50% - 12.8rem);
}
#tokuten p {
margin-bottom: 4rem;
text-align: left;
}
#tokuten dl {
margin: 0 auto;
}
#tokuten dt {
font-weight: bold;
text-align: left;
}
#tokuten dd {
text-align: left;
margin-bottom: 2rem;
}
#tokuten dd:last-child {
margin-bottom: 0;
}
#app {
padding: 0 1rem;
margin: 8rem auto 8rem auto;
}
#app h2 {
position: relative;
text-align: center;
font-weight: bold;
font-size: 3rem;
text-decoration: underline;
margin-bottom: 5rem;
}
#app h2::before {
content: url("../img/hds_apri.png");
position: absolute;
top: -8rem;
left: calc(50% - 8.7rem);
}
#app > div {

}
#app > div article {
border-radius: 1rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.2);
padding: 2rem;
margin-bottom: 2rem;
}
#app > div article figure {
margin-bottom: 2rem;
}
#app > div article h3 {
font-weight: bold;
font-size: 2.2rem;
margin-bottom: 1rem;
}
#app > div article div {
margin-bottom: 1rem;
width: 12rem;
}
#catch > div:first-child {
margin-bottom: 3rem;
}
#catch > div:last-child {
width: 20rem;
margin-left: 0.8rem;
}

}