@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Train+One&family=Manrope:wght@500;700&display=swap');

html {/* scroll-behavior: smooth; */ min-width: 320px;}
body {font-size: clamp(14px, 2.8vw, 18px); line-height: 1.8; color: #111; padding: 0; margin: 0; letter-spacing: 0.03em; overflow-x: hidden;
font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', YuGothic, '游ゴシック体', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;}

h1,
h2,
h3 {font-feature-settings: "palt"; letter-spacing: 0.1em;}

h3,
h4,
h5,
h6 {line-height: 1.4;}
h5,
h6 {font-size: inherit;}

img {max-width: 100%; height: auto;}

a {color: inherit; border: dashed 1px transparent; transition: all .2s;}
a .d_ib {text-decoration: underline !important;}
a:hover {opacity: .7;}
#nav_main a,
[class*="btn_"] a,
#totop a {opacity: inherit;}

i, em {font-style: normal;}
p > em {color: #000000;}
i {font-family:'din'; letter-spacing: 0.05em; font-size: 110%; font-weight: normal; margin-left: 0.05em;}
em {font-weight: bold;}
sup {font-size: 9px; margin-right: 3px;}

ul {list-style: none;}
ul, li, dl, dt, dd {margin: 0; padding: 0;}
dt {font-weight: bold;}

.img_wrap {margin: 1.5em 0; text-align: center;}
.img_wrap:last-child {margin-bottom: 0;}


/* ========= inner_wrap ========= */
.container {overflow-x: hidden; overflow-y: auto;}
.inner_wrap {margin: 0 auto; padding: 0 clamp(15px, 4vw, 40px);}
main .inner_wrap,
.sec_contact .inner_wrap {max-width: 1200px; box-sizing: content-box; padding-top: 30px; padding-bottom: 30px;}

@media (min-width: 768px) {
	main .inner_wrap,
	.sec_contact .inner_wrap {padding-top: 60px; padding-bottom: 60px;}
}

@media (min-width: 1024px) {
	main .inner_wrap,
	.sec_contact .inner_wrap {padding-top: 100px; padding-bottom: 100px;}
}

/* ========= header ========= */
header .inner_wrap {padding: 5px 3%; min-height: 60px; display: flex; align-items: center; margin: 0 auto;}
header .inner_wrap p {margin: 0; width: 40%; max-width: 230px; min-width: 170px; z-index: 1;}
header .inner_wrap a {display: block;}
header .inner_wrap a:hover,
header .inner_wrap a:focus {opacity: 1;}

@media (min-width: 768px) {
	header .inner_wrap {min-height: 100px;}
}

/* ========= footer ========= */
footer {padding: 20px; font-size: smaller; text-align: center; line-height: 1.4;}
footer p {margin: 0;}
footer p.copy {font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 90%;}

/* ========= toTop ========= */
#totop {position: sticky; bottom: 0; margin: 0 auto; max-width: 1500px; z-index: 10; opacity: 0; transition: 0.2s;}
#totop.is_active {opacity: 1; transition: 0.2s;}
#totop a {position: absolute; right: 1em; bottom: 1em; height: 100%; background: rgba(0, 0, 0, 0.7); border-radius: 100%; height: 4em; width: 4em; overflow: hidden; text-indent: 100%; line-height: 0; white-space: nowrap;}
#totop a::before {content:""; position: absolute; width: 1.5em; height: 1.5em; top: calc((100% - 1.5em) / 2); left: calc((100% - 1.5em) / 2); transform: rotate(-90deg); background-color: #fff;
-webkit-mask-image: url(../img/icon_arrow_01.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../img/icon_arrow_01.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}

#totop a:hover {background: #000;}
#totop a:hover::before {transition: all .2s; background-color: #ffe430;}

.icon_blank::after {content: "別ウィンドウで開きます"; display: inline-block; white-space: nowrap; text-indent: 13em; width: clamp(8px, .90em, 16px); height:  clamp(9px, .9em, 16px); overflow: hidden; vertical-align: middle; margin: 0 0.3em; background-color: #222; transition: all .2s;
-webkit-mask-image: url(../img/icon_blank.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../img/icon_blank.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}

.icon_blank:only-child::after {margin-right: 0;}
 a.icon_blank.c_blu::after {background-color: #0061cc;}

/* ========= mv ========= */
#mv_wrap {position: relative; overflow: hidden;}
#mv_wrap > * {position: relative; z-index: 1;}
#mv_wrap::before {position: absolute; background-color: #ffe420; left: 0; top: 0; width: 100%; height: calc(100% - 11em); content: ""; z-index: -3;}
#mv_wrap .inner_wrap {max-width: 1300px; position: relative; padding-top: 0; padding-bottom: 0;}
#mv_wrap .inner_wrap::after {content: "WEB SECURITY"; font-size: clamp(70px, 10vw, 130px); position: absolute; top: -1em; left: -0.1em;  transform: rotate(90deg); transform-origin: left bottom; font-family: 'Train One', sans-serif; letter-spacing: -0.05em; color: #fff; line-height: 1; opacity: .4; white-space: nowrap; z-index: -2;}

#mv_wrap .mv_img {display: flex; justify-content: center; margin-top: -10%; margin-bottom: -10%; padding: 5% 10% 0 15%; position: relative; /*transition: all .5s;*/ z-index: -1;}
#mv_wrap .mv_img > span {max-width: 360px; position: relative;}
#mv_wrap .mv_img > span img {max-width: inherit;}
#mv_wrap .mv_img > span::after {transform: rotate(45deg); transform-origin: center bottom; position: absolute; right: 38%; bottom: 10%; z-index: -1; content: "";  width: 100%; height: 400%; background-color: #fff; border-radius: 0 0 1000px 1000px;}

#mv_wrap .indent_a {margin-top: 2em;}

#mv_wrap .title_wrap {max-width: 680px; padding-top: 25px;}
#mv_wrap .title_wrap ._title p {line-height: 1.3; font-feature-settings: "palt"; margin: 0;}
#mv_wrap .title_wrap ._wazuka {color: #d41d2d; display: flex; font-weight: bold; gap: 0.2em; align-items: flex-end; letter-spacing: 0;}
#mv_wrap .title_wrap ._wazuka span span {font-size: 130%;}
#mv_wrap .title_wrap ._wazuka::before,
#mv_wrap .title_wrap ._wazuka::after {content: "／";}
#mv_wrap .title_wrap ._wazuka::before {transform: scale(-1, 1);}
#mv_wrap .title_wrap ._incident {background-color: #d41d2d; color: #fff; padding: .4em .8em .55em; display: inline-block; margin-top: 10px; letter-spacing: .1em; line-height: 1.4; width: 100%; text-align: center;}
#mv_wrap .title_wrap ._incident {font-size: clamp(10px, 3vw, 18px);}
#mv_wrap .title_wrap ._incident u {font-size: 140%; vertical-align: -0.05em; font-family: 'Manrope', sans-serif; font-weight: bold; letter-spacing: 0; line-height: 1; display: inline-block; text-decoration: none; border-bottom: 1px solid #fff000;}
#mv_wrap .title_wrap ._incident em {font-size: larger;}
#mv_wrap .title_wrap h1 {line-height: 1; margin: 0; font-size: inherit; margin-top: 1.5em;}
#mv_wrap .title_wrap h1 span {font-size: 150%; display: inline-block;}
#mv_wrap .title_wrap h1 img {width: 100%;}

@media (min-width: 768px) {
	#mv_wrap::before {height: calc(100% - 2em);}
	#mv_wrap .inner_wrap::after {top: -0.2em; left: -0.2em; transform: rotate(0);}
	#mv_wrap .mv_img {position: absolute; top: calc(120px - 13vw); right: -25px; padding: 0; width: 40%; margin: 0;}
	#mv_wrap .mv_img > span {min-width: 300px; max-width: 320px;}
	#mv_wrap .title_wrap {width: 60%; min-width: 500px; max-width: 700px; margin: 0; padding-top: 40px; padding-bottom: 5%;}
	#mv_wrap .title_wrap p ._wazuka {font-size: clamp(18px, 1.8vw, 22px);}
	#mv_wrap .title_wrap p ._incident {font-size: clamp(17px, 1.8vw, 22px);}
}

@media (min-width: 820px) {
	#mv_wrap .mv_img {top: 0; right: -20px;}
	#mv_wrap .mv_img > span {min-width: 360px; max-width: 360px;}
}

@media (min-width: 1024px) {
	#mv_wrap {overflow: visible;}
	#mv_wrap .mv_img {top: -5%;}
	#mv_wrap .mv_img > span {min-width: 400px; max-width: 400px;}
}

@media (min-width: 1200px) {
	#mv_wrap .mv_img {top: -15%;}
	#mv_wrap .mv_img > span {min-width: 420px; max-width: 500px;}
	#mv_wrap .inner_wrap::after {left: -0.4em;}
	#mv_wrap .title_wrap {max-width: 710px; padding-left: 25px;}
}

/* ========= fadeIn  ========= */
@media screen and (min-width: 980px), print {
	.fadeIn01 {opacity: 0; animation: fadeIn01 .6s ease .2s 1 normal forwards;}
	.fadeIn02 {opacity: 0; animation: fadeIn02 .8s ease .6s 1 normal forwards;}
	.fadeIn03 {opacity: 0; animation: fadeIn03  1s ease 1s 1 normal forwards;}
}

@keyframes fadeIn01 {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn02 {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn03 {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (min-width: 980px), print {
	.fadeInB {opacity: 0; animation: fadeInB .8s ease .2s 1 normal forwards;}
	.fadeInT {opacity: 0; animation: fadeInT .8s ease .6s 1 normal forwards;}
	.fadeInL {opacity: 0; animation: fadeInL .8s ease .8s 1 normal forwards;}
	.fadeInR {opacity: 0; animation: fadeInR .8s ease .8s 1 normal forwards;}
}

@keyframes fadeInB {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInT {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInL {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInR {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ========= mv_bnr ========= */
.mv_bnr_wrap {position: static; top: 0; right: 0; z-index: 10;}
.mv_bnr {position: absolute; top: 0; right: 0; z-index: 10;}
.mv_bnr > a {display: block; text-align: center; background-color: #2458bd; color: #fff; border-radius: 0 0 0 20px; text-decoration: none; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.18);}

.mv_bnr > a:hover,
.mv_bnr > a:focus {opacity: 1; background-color: #0f3b91; color: #fff; transition: all .2s;}

.mv_bnr > a > .inner {display: flex; justify-content: center; align-items: center; padding: .5em .5em .65em;}
.mv_bnr > a > .inner > .image {margin: -3px 3px 0 -15px;}
.mv_bnr > a > .inner > .image img {width: 80px; height: auto;}
.mv_bnr > a > .inner > .text {text-align: center; margin: 0;}
.mv_bnr > a > .inner > .text .sub  {display: block; font-size: clamp(12px, 2.2vw, 15px); line-height: 1.3; margin-bottom: .25em;}
.mv_bnr > a > .inner > .text .main {display: block; font-size: clamp(15px, 3.6vw, 20px); line-height: 1.5; color: #ffe430;}


@media screen and (max-width: 400px) {
	.mv_bnr > a {width: 170px; border-radius: 0 0 0 15px;}
	.mv_bnr > a > .inner > .text .sub  {font-size: 80%;}
	.mv_bnr > a > .inner > .text .sub br {display: none;}
	.mv_bnr > a > .inner > .text .main {font-size: 90%; margin-top: .25em;}
	.mv_bnr > a > .inner > .image img {width: 110px;}
}

@media screen and (max-width: 350px) {
	.mv_bnr > a {width: auto;}
	.mv_bnr > a > .inner {padding: .5em .75em .65em;}
	.mv_bnr > a > .inner > .image {display: none;}
	.mv_bnr > a > .inner > .text .sub br {display: block;}
}

@media screen and (min-width: 640px) {
	.mv_bnr > a > .inner {padding: .5em 1em .65em;}
	.mv_bnr > a > .inner > .image {margin: -6px 5px 0 -40px;}
	.mv_bnr > a > .inner > .image img {width: 110px;}
}

@media screen and (min-width: 980px) {
	.mv_bnr > a {box-shadow: 0 5px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
}

@media screen and (min-width: 1200px) {
	.mv_bnr > a {width: 220px; height: 210px; border-radius: 0 0 0 40px;}
	.mv_bnr > a::before {content: ""; display: inline-block; height: 14px; width: 14px; border: solid #ffe430; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; bottom: 1rem; left: 50%; margin-left: 0;}
	.mv_bnr > a > .inner  {flex-direction: column;}
	.mv_bnr > a > .inner > .text .sub {line-height: 1.5;}
	.mv_bnr > a > .inner > .image {margin: 0 0 5px;}
	.mv_bnr > a > .inner > .image img {width: 130px;}
}

/* ========= nav ========= */
#nav_main {max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;}
#nav_main ul {display: flex; flex-direction: column; font-feature-settings: "palt"; background-color: #111; border-radius: 15px; overflow: hidden;}
#nav_main ul br {display: none;}
#nav_main ul li {line-height: 1.4; width: 100%; position: relative;}
#nav_main ul li::after {content: ""; position: absolute; background-color: #656565; bottom: 1px; left: 3%; height: 1px; width: calc(100% - 6%);}
#nav_main ul li:last-child::after {content: none;}
#nav_main ul a {color: #fff; display: flex; gap: 1rem; align-items: center; min-height: 4.5em; padding: 5px 4%; position: relative; text-decoration: none;}
#nav_main ul a em {font-size: 105%;}
#nav_main ul a:hover {color: #ffe430;}
#nav_main ul a::before {content: ""; flex-shrink: 0; display: inline-block; background: url(../img/icon_arrow_01.svg) no-repeat #ffe430 center center / 50%; transform: rotate(90deg); height: 34px; width: 34px; border-radius: 50%;}
#nav_main ul a:hover::before {transform: rotate(90deg) translate(1px, 0);}


@media (min-width: 1024px) {
	#nav_main ul {flex-direction: row; border-radius: 100px; gap: 0; padding: 0 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
	#nav_main ul a {flex-direction: row-reverse; text-align: center; min-height: 100px; padding-left: 25px; padding-right: 25px;}
	#nav_main ul a span {font-size: clamp(14px, 1.5vw, 18px); width: 100%;}
	#nav_main ul br {display: inline;}
	#nav_main ul li::after {bottom: auto; left: auto; right: 0; top: 15px; height: calc(100% - 30px); width: 1px;}
	#nav_main ul li:last-child:after {display: none;}
}

.tit_lv2 {text-align: center; line-height: 1.5; margin-bottom: 3rem;}
.tit_lv2 em {display: inline-block; line-height: 1; background-color: #ffe430; position: relative;}
.tit_lv2 em::after {content: ""; position: absolute; height: 7px; width: 100%; left: 0; bottom: -14px;}
.tit_lv2 em::after {background:repeating-linear-gradient(-45deg,#333,#333 2px,#fff 0,#fff 5px);}
.bg_gry_a .tit_lv2 em::after {background:repeating-linear-gradient(-45deg,#333,#333 2px,#eff1f2 0,#eff1f2 5px);}

@media (min-width: 768px) {
	.tit_lv2 {font-size: 36px; font-size: clamp(20px, 3vw, 36px);}
}

.tit_lv3 {color: #3063c7; display: flex; justify-content: center; position: relative; margin-bottom: 2.5em; font-size: 1.5em;}
.tit_lv3::after {content: ""; position: absolute; left: 50%; top: calc(100% + 0.6em); margin-left: -1em; width: 2em; background-color: #3063c7; height: 4px;}
.tit_lv4 {border-bottom: solid 1px #666; padding-bottom: 0.5em; margin: 3em 0 1em; font-size: 1.2em;}
.tit_lv5 {position: relative; padding-left: 0.5em; margin: 3em 0 1em; font-size: 1.1em;}
.tit_lv5::before {content: ""; position: absolute; top: 0.1em; left: 0; height: 100%; width: 3px; background-color: #3063c7;}

.tit_ex {position: absolute; width: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; min-height: 5em; margin: 0; margin-top: -2.5em !important;}
.tit_ex > span {background-color: #fff; padding: 0 2%; text-align: center; margin-left: 1em; margin-right: 1em;}

.box_a,
.box_b {padding: clamp(15px, 4vw, 60px); margin: 3em 0; background-color: #fff; position: relative;}
.box_a,
.box_b {border-radius: 20px;}
.box_b {border: solid 3px #3063c7;}
.box_b.bc_red {padding: clamp(15px, 4vw, 40px); position: relative; margin-top: 6em; padding-top: 5em;}
.box_a.bs_a {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}

.box_c {padding: clamp(15px, 3vw, 40px); margin: 2em auto; background-color: #fff;}
.box_c._red {max-width: 820px; background-color: rgba(212,29,46,0.10);}
.box_c._blu {max-width: 820px; background-color: rgba(47,116,199,0.12);}
.box_c > dd {margin-top: 1em;}

@media (min-width: 1024px) {
	.tit_ex br {display: none;}
	.box_a,
	.box_b {border-radius: 30px; padding: 80px;}
	.box_b {border-width: 4px;}
	.box_b.bc_red {padding-top: 4em;}
}

/* background */
[class*="bg_icon_"] {position: relative; z-index: 1;}
[class*="bg_icon_"] > * {z-index: 1; position: relative;}
[class*="bg_icon_"]::before {content: ""; position: absolute; left: 0; top: 0; width: clamp(160px, 20vw, 300px); height: clamp(160px, 20vw, 300px); z-index: 0; overflow: hidden;}
[class*="bg_icon_"]::before {background-color: #eaeff9;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: top 10px left -60px; mask-position: top 10px left -60px;}
.bg_icon_a::before {
-webkit-mask-image: url(../img/icon_def.svg);
mask-image: url(../img/icon_def.svg);}
.bg_icon_b::before {background-color: #fbe8ea;
-webkit-mask-image: url(../img/icon_exc.svg);
-webkit-mask-position: top 0 left -40px;
mask-image: url(../img/icon_exc.svg);
mask-position: top 0 left -40px;
}


[class*="icon_tit_"] {display: flex; align-items: center; gap: 0.3em;}
[class*="icon_tit_"]::before {content: ""; display: inline-block; width: 2em; height: 2em; background-color: #3063c7;
-webkit-mask-image: url(../img/icon_def.svg);
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../img/icon_def.svg);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;}
.icon_tit_a::before {-webkit-mask-image: url(../img/icon_def.svg); mask-image: url(../img/icon_def.svg);}
.icon_tit_b::before {-webkit-mask-image: url(../img/icon_exc.svg); mask-image: url(../img/icon_exc.svg);}

th [class*="icon_tit_"]::before {background-color: #fff;}

.bg_gry_a {position: relative;}
.bg_gry_a::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #eff1f2; z-index: -2;}

.bg_gry_b {position: relative;}
.bg_gry_b::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5em; background-color: #eff1f2; z-index: -1;}
.bg_gry_b > div {padding-bottom: 1px;}

.bg_img_em {display: flex; justify-content: center; gap: 3%; align-items: center;}
.bg_img_em::before,
.bg_img_em::after {content: ""; width: clamp(30px, 4vw, 50px); height: clamp(30px, 4vw, 50px); flex-shrink: 0; background-color: #666;
-webkit-mask-image: url(../img/bg_em.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../img/bg_em.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;}
.bg_img_em::after {transform: scale(-1, 1);}

.bg_img_deco_a > * {position: relative; z-index: 1;}
.bg_img_deco_a {position: relative; z-index: 0;}
.bg_img_deco_a::before {position: absolute; top: 20px; left: 0; width: clamp(100px, 15vw, 200px); height: clamp(350px, 50vw, 600px); content: ""; z-index: -1; background: url(../img/bg_img_a.svg) no-repeat transparent top right / cover;}
.bg_img_deco_a._reverse::before {left: auto; right: 0; transform: scale(-1, 1);}
.bg_img_deco_a._top_a::before {top: -20px; z-index: -2;}

@media (min-width: 768px) {
	.bg_img_deco_a._top_a::before {top: -70px;}
	.bg_icon_b::before {mask-position: top 10px left -40px;}
}

.indent_a {text-indent: -1.5em; padding-left: 1.5em;}

/* =========  ========= */
.incident_list {display: grid; gap: 20px;}
.incident_list > div {background-color: #f0f0f0; padding: 50px 6% 25px; position: relative; border-radius: 10px;}
.incident_list > div::before {position: absolute; content: ""; top: 0; left: 50%; width: 56px; height: 56px; border-radius: 100%; margin-top: -15px; margin-left: -28px;}
.incident_list > div::before {background: url(../img/icon_exc2.svg) no-repeat #d41d2e center center / contain;}
.incident_list > div h4 {display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.5;}
.incident_list .img_wrap {max-width: 400px; margin-left: auto; margin-right: auto;}
.incident_list h5 {display: block; border-top: 1px solid #999; padding-top: 1em; margin: 0.5em 0;}

@media (min-width: 425px) {
	.incident_list {grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}
}

@media (min-width: 1024px) {
	.incident_list {gap: 40px 30px;}
	.incident_list h5 {font-size: smaller;}
}

.li_num_a {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 3%; margin: 4em 0; padding: 0;}
.li_num_a li {width: clamp(120px, 42vw, 300px); height: clamp(120px, 42vw, 300px);
		display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
		color: #fff; line-height: 1.6; text-align: center; padding: 3%; margin: -5px 0;
		background: url(../img/bg_bomb.svg) no-repeat transparent center center / contain;
}

.li_num_a li::before {content: "01"; font-size: clamp(28px, 10vw, 3.5em); height: 50%; font-family: 'Train One', sans-serif; font-weight: normal; line-height: 1; display: flex; align-items: center; flex-shrink: 0;}
.li_num_a li > span {font-size: clamp(6px, 3.2vw, 18px); min-height: 30%; display: flex; align-items: center; font-feature-settings: "palt";}
.li_num_a li:nth-child(2)::before {content: "02";}
.li_num_a li:nth-child(3)::before {content: "03";}

@media (max-width: 639px) {
	.li_num_a li em {margin-top: -.75em;}
}

@media (min-width: 768px) {
	.li_num_a {gap: 3%; justify-content: center;}
}

.li_icon_a {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 3%; margin: 4em 0; padding: 0;}
.li_icon_a li {width: clamp(110px, 37vw, 280px); height: clamp(110px, 37vw, 280px);
		display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
		line-height: 1.6; text-align: center; padding: 3%; background-color: #ffe420; border-radius: 50%; position: relative;
}
.li_icon_a li::before {content: ""; height: 40%; display: flex; align-items: center; width: 100%; position: absolute; top: -7%; left: 0; max-height: 90px; background: url(../img/icon_diagnosis_01.svg) no-repeat transparent center center / contain;}
.li_icon_a li > span {font-size: clamp(6px, 2.8vw, 18px); min-height: 35%; display: flex; align-items: center; margin-top: 40%; font-feature-settings: "palt";}
.li_icon_a li:nth-child(2)::before {background-image: url(../img/icon_diagnosis_02.svg);}
.li_icon_a li:nth-child(3)::before {background-image: url(../img/icon_diagnosis_03.svg);}

@media (min-width: 768px) {
	.li_icon_a li::before {padding-top: 20px;}
}

.dl_step {max-width: 1000px; margin-left: auto; margin-right: auto;}
.dl_step dt {position: relative;}
.dl_step dt::before {content: ""; position: absolute; top: calc(5em + 10px); left: 50%; height: calc((100% - 3em) - 20px); width: 0; border-left: dotted 1px #999; z-index: 2;}
.dl_step > div:last-child dt::before {display: none;}
.dl_step dt > span {flex-shrink: 0; display: flex; font-weight: normal; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; width: 5em; height: 5em; border-radius: 50%; background-color: #3063c7; line-height: 1; position: relative; z-index: 1; padding-bottom: 0.2em;}
.dl_step dt > span > span:nth-child(1) {font-family: 'Manrope', sans-serif;}
.dl_step dt .ff_a {font-size: 180%; margin-top: 0.1em; letter-spacing: 0;}
.dl_step dd {background-color: #e7eff9; padding: clamp(15px, 3%, 25px); border-radius: 8px; position: relative; top: -5px; width: 100%;}
.dl_step h4 {margin-bottom: 0;}
.dl_step p {margin-top: 0.5em;}
.dl_step > div {display: flex; gap: 3%; align-items: stretch; margin-bottom: 2em;}

/* ========= btn ========= */
.btn_a a {background-color: #fff; min-height: 3em; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 3em; border: solid 1px #333333; padding: 0.5em 1.5em 0.7em;}
.btn_a a:hover,
.btn_a a:focus {background-color: #000; color: #fff; transition: all .2s;}
.btn_a a.icon_blank:hover::after,
.btn_a a.icon_blank:focus::after {background-color: #fff;}
 [class*="btn_"] li {max-width: 20em; margin-left: auto; margin-right: auto;}

/* _icon */
/*.btn_a._icon li {max-width: 20em; margin-left: auto; margin-right: auto;}*/

.btn_a._icon a {display: flex; color: #111; background-color: #ffe430; border: 3px solid #ffe430; min-height: 3.8em; justify-content: center; align-items: center; width: 100%; border-radius: 3em; text-decoration: none; font-weight: bold; padding-right: 1em;}
.btn_a._icon a::before {
    content: "";
    width: 2.25em;
    height: 2.25em;
    margin-right: .5em;
    background-color: #000;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.btn_a._icon a:hover,
.btn_a._icon a:focus {background-color: #fff; transition: all 0.5s;}


/* _contact */
.btn_a._contact a::before {
    -webkit-mask-image: url(../img/icon_contact.svg);
    mask-image: url(../img/icon_contact.svg);
}

/* _download */
.btn_a._download a::before {
    -webkit-mask-image: url(../img/icon_download.svg);
    mask-image: url(../img/icon_download.svg);
}

ul.btn_a,
ul.btn_b {margin: 2em 0; display: flex; justify-content: center; padding: 0; flex-direction: column; gap: 15px;}
ul.btn_a li,
ul.btn_b li {width: 100%; display: flex; line-height: 1.4;}

.incident_list dt.btn_a {margin: 1em 0;}
.incident_list dt.btn_a a {max-width: 450px; margin: 0 auto; line-height: 1.4;}

.btn_b a {background-color: #111; color: #fff; text-decoration: none; min-height: 4em; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 4px; padding: 0.5em 3em; position: relative;}
.btn_b a::after {content: "a"; width: 0.8em; height: 0.8em; position: absolute; right: 1.2em; top: 50%; margin-top: -.4em; color: #fff;}
.btn_b a::after {background-color: #fff;
-webkit-mask-image: url(../img/icon_arrow_01.svg);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url(../img/icon_arrow_01.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}

ul.btn_b._sm {flex-direction: row; flex-wrap: wrap;}
ul.btn_b._sm li {max-width: 20em;}

@media (min-width: 768px) {
	ul.btn_b._sm {gap: 25px;}
}

/* ========= sec_contact ========= */
.sec_contact {background: url(../img/bg_img_01.jpg) no-repeat #000000 center center / cover; color: #fff; padding: 1% 0 3%;}
.sec_contact h2 {display: flex; justify-content: center; font-size: clamp(18px, 2.2vw, 33px); flex-wrap: wrap;}

/* ========= table basic ========= */
table {width: 100%; margin: 2em 0; border-spacing: 0; border-collapse: collapse; border: solid 2px #666; background-color: #fff; line-height: 1.6;}
table th,
table td {vertical-align: top; padding: 0.5em 1em; border: solid #aaaaaa; border-width: 1px; height: 4em;}
table thead th {background-color: #dcdcdc; text-align: center; vertical-align: middle;}
table tbody th {text-align: left; background-color: #f2f2f2;}

ul[class*="ul_"]:first-child,
ul[class*="ul_"] > li:first-child,
[class*="box_"]:first-child,
[class*="btn_"]:first-child,
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
p:first-child,
ul:first-child,
dl:first-child,
table:first-child {margin-top: 0;}

ul[class*="ul_"]:last-child,
ul[class*="ul_"] > li:last-child,
[class*="box_"]:last-child,
[class*="btn_"]:last-child,
h1:last-child,
p:last-child,
ul:last-child,
dl:last-child,
table:last-child {margin-bottom: 0;}

/* ========= table custom ========= */
table[class*="tbl_"] {border: solid 2px #3063c7; font-size: 80%;}
table[class*="tbl_"] th,
table[class*="tbl_"] td {padding: 1.25em; border-right: 0; position: relative; font-size: clamp(14px, 3vw, 16px);}

table[class*="tbl_"] thead th {background-color: #3063c7; color: #fff; font-size: larger;}
table[class*="tbl_"] tbody th {background-color:#e7f2ff;}

@media only screen and (max-width: 767px) {
	table[class*="tbl_"] tbody th {font-size: 14px;}
}

@media only screen and (max-width: 639px) {
	table {word-break: break-all;}
}

table tbody td:nth-child(1) .title_wrap .title {color: #3063c7; font-size: 110%; font-weight: bold; margin-bottom: 0; min-width: 240px;}
table tbody td:nth-child(1) .title_wrap .text  {margin-top: .5em;}
table tbody td{position: relative; border-left: 0 solid #fff;}

table[class*="tbl_"] thead th::after,
table[class*="tbl_"] tbody td::after {content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background-color: #ccc; z-index: 1;}
table[class*="tbl_"] th:last-child::after,
table[class*="tbl_"] td:last-child::after {content: none;}
table[class*="tbl_"] thead th::after {background-color: #fff; width: 2px; right: -2px;}
table[class*="tbl_"] tbody td::after {top: 0.5em; height: calc(100% - 1em);}
table[class*="tbl_"] a {color: #0061cc;}
table[class*="tbl_"] a.icon_blank::after {background-color: #0061cc;}

@media only screen and (min-width: 640px) {
	table tbody td:nth-child(1) .title_wrap {
    display: flex;
    align-items: center;
    gap: 2em;
    height: 100%;
 }
}

table h6 {color: #3063c7; margin: 0 0 .5em; font-size: 110%;}
table._col2 thead th:nth-child(1) {background-color: #fff; color: #d41d2e; border-bottom: 2px solid #d41d2e;}
table._col2 thead th:nth-child(2) {background-color: #fff; color: #3063c7; border-bottom: 2px solid #3063c7;}

table._col2 tbody td:nth-child(1) {background-color: #fff; padding-left: .5em;}
table._col2 tbody td:nth-child(2) {position: relative; padding-left: 2%;}
table._col2 tbody td:nth-child(2)::before {content: ""; position: absolute; top: 50%; left: -8px; margin-top: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid #3063c7;
    border-right: 0 solid transparent;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.scroll_wrap {margin: 2em 0; overflow-y: auto;}
.scroll_wrap table {min-width: 768px;}
.scroll_wrap table::-webkit-scrollbar {height: auto;}
.scroll_wrap table::-webkit-scrollbar-track {background-color: #e6e6e6;}
.scroll_wrap table::-webkit-scrollbar-thumb {background-color: #ccc;}
.scroll_wrap table::-webkit-scrollbar-thumb:hover {background-color: #aaa;}
.scroll_wrap table {scrollbar-width: auto; scrollbar-color: #e6e6e6 #ccc;}

/* ========= modaal ========= */
.modaal-content-container {padding: 5%;}
.modaal-container {max-height: calc(100vh - 100px); min-height: 50dvh; overflow-y: auto; border-radius: 1em;}
.modaal-inner-wrapper {padding-top: 30px !important; padding-bottom: 0 !important;}

.modaal-close {top: 5px; right: 25px;}
.modaal-close:focus,
.modaal-close:hover {background: transparent;}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {background: #ccc;}
.modaal-close:after,
.modaal-close:before {border-radius: 0; width: 2px; height: 35px; top: 8px; left: -25px;}
.modaal-close span {
    position: relative !important;
    height: auto!important;
    width: auto !important;
    overflow:auto;
    font-size: large;
    white-space: nowrap;
}

.modaal-close span:hover,
.modaal-close span:focus {opacity: .75; transition: all .2s;}

/* ========= module ========= */
.list-notes > li {display: flex; color: #444; font-size: smaller;}
.list-notes > li * {color: #444;}
.list-notes > li + li {margin-top: 5px;}
.list-notes > li > .mark {margin-right: 5px; white-space: nowrap;}
.list-notes > li > .item {width: 100%;}

/* lay_img_a */
.lay_img_a + .lay_img_a {margin-top: 3em;}
.lay_img_a h4,
.lay_img_a h4 i {margin-bottom: 1em;}
.lay_img_a .img_wrap img {border-radius: 10px;}
.lay_img_a .img_wrap._nbr img {border-radius: 0;}

@media (min-width: 768px) {
	.lay_img_a {display: flex; align-items: flex-start; gap: 5% 3%;}
	.lay_img_a .img_wrap {flex-shrink: 0; margin: 0; width: 50%; max-width: 400px; margin-top: 90px;}
	.lay_img_a._reverse {flex-direction: row-reverse;}
}

@media (min-width: 768px) {
	.lay_img_a .img_wrap {margin-top: 20px;}
}

ul[class*="ul_"] {list-style: none;}
ul[class*="ul_"]:last-child,
ul[class*="ul_"] > li:last-child {margin-bottom: 0;}
ul.ul_a > li {position: relative; margin: 0.4em 0 0.4em 1.2em;}
ul.ul_a > li::before {background-color: #666; content: ""; position: absolute; border-radius: 50%; width: 0.6em; height: 0.6em; top: .8em; left: -1em; margin-top: -0.2em;}

ul.ul_a._col_a {display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); margin-bottom: -0.5em;}
ul.ul_a._col_a > li {margin-top: 0; margin-bottom: 0.5em; width: 100%; min-width: 10em; padding-right: 3em;}

ul.ul_check > li {position: relative; margin: 0.4em 0; padding-left: 1.7em;}
ul.ul_check > li::before {content: ""; position: absolute; width: 1em; height: 0.5em; border: solid #3063c7; border-width: 0 0 3px 3px; transform: rotate(-45deg); top: .7em; left: 1px; margin-top: -2px;}

.box_c._red ul.ul_check > li::before {border-color: #d41d2e;}

.tit_damage i {color: #d41d2e; display: flex; flex-direction: column; align-items: center; line-height: 1.1; flex-shrink: 0; width: 3em; position: relative; white-space: nowrap; margin-bottom: 10px;}
.tit_damage i span:nth-child(1) {font-size: 74%; font-weight: normal; z-index: 1; letter-spacing: 0; font-weight: bold; font-family: 'Manrope', sans-serif;}
.tit_damage i span.ff_a {font-size: 300%;}
.tit_damage i::after {content: ""; position: absolute; left: 0%; bottom: -6px; width:100%; height: 0; border-bottom: 2px solid #d41d2e;}

.icon_arrow_02 {z-index: 2;}
.icon_arrow_02 + div {margin-top: 3.5em;}
.icon_arrow_02::after {content: url(../img/icon_arrow_02.svg); z-index: 3; color: #000; position: absolute; top: 100%; margin-top: -1em; left: calc(50% - 80px); width: 160px; height: 70px;}

@media (min-width: 1024px) {
	.icon_arrow_02::after {left: calc(50% - 120px);  width: 240px; height: 90px; margin-top: -35px;}
}

[id*="anc_prevent_"] {display: none;}

[class*="_col2"] {margin: 2em 0;}
[class*="_col2"] > * {margin: 0;}
.tb_col2 {display: flex; gap: 20px; flex-direction: column;}
.tb_col2 > * {width: 100%;}

@media (min-width: 1024px) {
	.tb_col2 {display: flex; gap: 5%; flex-direction: row;}
	.tb_col2 > * {width: 100%;}
}

/* ========= box_download ========= */
.box_download {position: relative; background-color: #2458bd; color: #fff; margin: 3em 0; padding: clamp(15px, 4vw, 20px) clamp(15px, 4vw, 50px) clamp(15px, 4vw, 50px); border-radius: clamp(10px, 2.8vw, 30px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.box_download .tit {color: #fff; text-align: center; font-size: clamp(17px, 2.8vw, 24px);}
.box_download .tit .sub {font-size: clamp(18px, 3vw, 26px); line-height: 1.6;}
.box_download .tit .main {display: block;font-size: clamp(20px, 4.3vw, 36px); font-weight: bold; line-height: 1.2; margin-top: -.5em;}
.box_download .tit ruby {font-size: clamp(20px, 4.3vw, 40px); color: #ff0;}
.box_download .tit ruby rt {translate: 0 .5em;}
.box_download .txt {font-size: clamp(15px, 1.9vw, 19px); line-height: 2;}

@-moz-document url-prefix() {
	.box_download .tit ruby rt {position: relative; top: .5em;}
}

.box_download .lay_img_a {display: flex; flex-direction: column-reverse; align-items: center;}
.box_download .lay_img_a .text_wrap {margin: 0;}
.box_download .lay_img_a .img_wrap {width: auto;  margin: 1em 0;}
.box_download .lay_img_a .btn_a {margin: 1em 0;}

.box_download .ribbon {
  font-size: clamp(18px, 3.6vw, 28px);
  font-weight: bold;
  color: #fff;
}

.box_download .ribbon {
  --f: .5em;
  --r: .5em;
  
  position: absolute;
  left: clamp(30px, 3.6vw, 60px);
  top: calc(-1*var(--f));
  padding: .65em .65em .5em;
  background: #f73f21;
  border-right: var(--f) solid #0005;
  border-bottom: var(--r) solid #0000;
  clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 calc(100% - var(--r)),calc(50% - var(--f)/2) 100%,calc(100% - var(--f)) calc(100% - var(--r)),calc(100% - var(--f)) var(--f),100% var(--f));
}

@media screen and (min-width: 768px) {
	.box_download .lay_img_a {flex-direction: row-reverse;}
	.box_download .lay_img_a .img_wrap {margin: 0; max-width: 240px;}
	.box_download .lay_img_a .btn_a {margin: 2.5em 0 0;}
}

@media screen and (min-width: 980px) {
	.box_download .lay_img_a .img_wrap {max-width: 300px;}
}

/* ========= module ========= */
.fs_clamp_a {font-size: clamp(14px, 3vw, 16px);}
.fs_clamp_b {font-size: clamp(14px, 3vw, 14px);}

.ff_a {font-family: 'Train One', sans-serif; letter-spacing: -0.05em;}
.fs_sm {font-size: smaller !important;}
.fs_lg {font-size: larger !important;}
.fs_i  {font-size: inherit !important;}

@media (max-width: 639px) {
	.sp_fs_sm {font-size: smaller !important;}
	.sp_fs_lg {font-size: larger !important;}
	.sp_fs_i  {font-size: inherit !important;}
}

@media (min-width: 768px) {
	.tb_fs_lg {font-size: larger !important;}
}

@media (min-width: 1024px) {
	.pc_fs_lg {font-size: larger !important;}
}

.fw_b {font-weight: bold;}
.fw_n {font-weight: normal;}
.c_red {color: #d41d2e;}
.c_blu {color: #3063c7;}
.c_yel {color: #fff000;}

.bc_red {border-color: #d41d2e;}

.d_ib {display: inline-block !important;}
.d_f {display: flex !important;}
.ai_c {align-items: center !important;}
.jc_c {justify-content: center !important;}
.ta_c {text-align: center !important;}
.lh_n {line-height: normal;}

.m_0  {margin: 0 !important;}
.mt_0 {margin-top: 0 !important;}
.mt_10 {margin-top: 10px !important;}
.mt_15 {margin-top: 15px !important;}
.mb_0 {margin-bottom: 0 !important;}
.mb_10 {margin-bottom: 10px !important;}
.mb_15 {margin-bottom: 15px !important;}
.pb_0 {padding-bottom: 0 !important;}
.pb_10 {padding-bottom: 10px !important;}
.pb_15 {padding-bottom: 15px !important;}

/*br.pc {display: none !important;}*/


@media (max-width: 639px) {
	br.pc {display: none !important;}
	.sp_m_0  {margin: 0 !important;}
	.sp_mt_0 {margin-top: 0 !important;}
	.sp_mt_10 {margin-top: 10px !important;}
	.sp_mt_15 {margin-top: 15px !important;}
	.sp_mb_0 {margin-bottom: 0 !important;}
	.sp_mb_10 {margin-bottom: 10px !important;}
	.sp_mb_15 {margin-bottom: 15px !important;}
}

@media (min-width: 426px) {
	.sp_d_ib {display: none !important;}
}

@media (min-width: 640px) {
	.tb_d_ib {display: inline-block !important;}
	.sp_m_0  {margin: 0 !important;}
	br.sp {display: none !important;}
}

@media (min-width: 1024px) {
	br.pc {display: inline !important;}
	.pc_ta_c {text-align: center !important;}
	.pc_d_f {display: flex !important;}
	.pc_g_20 {gap: 20px;}
	.pc_g_25 {gap: 25px;}
	.pc_g_30 {gap: 30px;}
	.pc_g_35 {gap: 35px;}
	.pc_g_40 {gap: 40px;}
}

.w_10  {width: 10% !important;}
.w_15  {width: 15% !important;}
.w_20  {width: 20% !important;}
.w_25  {width: 25% !important;}
.w_30  {width: 30% !important;}
.w_35  {width: 35% !important;}
.w_40  {width: 40% !important;}
.w_45  {width: 45% !important;}
.w_50  {width: 50% !important;}
.w_55  {width: 55% !important;}
.w_60  {width: 60% !important;}
.w_65  {width: 65% !important;}
.w_70  {width: 70% !important;}
.w_75  {width: 75% !important;}
.w_80  {width: 80% !important;}
.w_85  {width: 85% !important;}
.w_90  {width: 90% !important;}
.w_95  {width: 95% !important;}
.w_100 {width: 100% !important;}

@media (max-width: 767px) {
	.sp_w_a {width: auto !important;}
	.sp_w_5 {width: 5% !important;}
	.sp_w_10 {width: 10% !important;}
	.sp_w_15 {width: 15% !important;}
	.sp_w_20 {width: 20% !important;}
	.sp_w_25 {width: 25% !important;}
	.sp_w_30 {width: 30% !important;}
	.sp_w_35 {width: 35% !important;}
	.sp_w_40 {width: 40% !important;}
	.sp_w_45 {width: 45% !important;}
	.sp_w_50 {width: 50% !important;}
	.sp_w_55 {width: 55% !important;}
	.sp_w_60 {width: 60% !important;}
	.sp_w_65 {width: 65% !important;}
	.sp_w_70 {width: 70% !important;}
	.sp_w_75 {width: 75% !important;}
	.sp_w_80 {width: 80% !important;}
	.sp_w_85 {width: 85% !important;}
	.sp_w_90 {width: 90% !important;}
	.sp_w_95 {width: 95% !important;}
	.sp_w_100 {width: 100% !important;}
}