@charset "UTF-8";

/*-----------------------------------------------------------
    ～768 （Mobile）	リキッド
 769～1023（Tablet）	リキッド
1024～1440（PC）		リキッド
1440～    （PC）		コンテンツ幅固定。左右の余白が広がる

ブレークポイント768px/1024px/1441px
-----------------------------------------------------------*/

/*-----------------------------------  
  common
-----------------------------------*/
.securityalert {
	max-width:1440px;
	margin:0 auto;
	font-size:min(1.6rem,16px);
	padding-bottom: 80px;
}
.securityalert section {
	width:75%; /* 1080 */
	margin:auto;
	margin-top:min(10rem,100px);
}
.securityalert section h1 {
	letter-spacing: 0.02em;
	font-size:min(3.4rem,34px);
	font-weight:400;
	margin-bottom: 1em
}
.securityalert section h2 {
	letter-spacing: 0.02em;
	line-height: 1.4;
	font-size:min(2.2rem,22px);
	border-bottom: 1px solid #aaa;
	position: relative;
	padding: 0 0 0.2em 1em;
	margin-bottom: 1.5em;
}
.securityalert section h2::before {
	content:"";
	background-color: #96b7ec;
	width:7px;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	
}
.securityalert section h3{
	margin:2em 0 1.5em;
	font-size:min(2.0rem,20px);
	font-weight:500
}
.securityalert section p{
	line-height: 1.8;
}
.securityalert .list_decimal li{
	position:relative;
	padding-left: 1em;
	line-height: 1.7;
	margin-top:1em;
}
.securityalert .list_decimal li::before{
	content:"\30fb"; /* 「・」 */
	position:absolute;
	top:0;
	left:0;
	width:1em;
	font-weight:600;
}
.securityalert .notes {
	margin-top:1em;
}
.securityalert .notes li{
	font-size:0.85em;
	color:#555;
	margin-top:0.5em;
	text-indent: -1.2em;
	padding-left: 1.2em;
}
.securityalert section .bold{
	font-weight:600;
}
.securityalert section a.text_link{
	text-decoration: underline
}

@media screen and (max-width: 768px) {
	.securityalert {
		font-size:1.4rem;
	}
	.securityalert section {
		width:auto;
		margin-top:6rem;
		padding:0 3%;
	}
	.securityalert section h1 {
		font-size:2.8rem;
	}
	.securityalert section h2 {
		font-size:1.9rem;
	}
	.securityalert section h3{
		margin: 4rem 0 2rem;
		font-size: 1.8rem;
	}
	.securityalert section p{
		
	}
	.securityalert section .link_btn a{
		font-size:1.2rem;
		width:80%;
		max-width:400px;
	}
}
/*-----------------------------------  
  kv  
-----------------------------------*/
.securityalert .kv img{
	max-width:1200px;
	width:100%;
	margin:auto;
}
/*-----------------------------------  
  about
-----------------------------------*/
.securityalert .about{
	text-align: center;
}
.securityalert .about .about_img{
	display:flex;
	gap:3em;
	width:60%;
	margin:2em auto 0;
}
.securityalert .about .about_img img{
	border-radius:1em
}
.securityalert .about .about_nav{
	margin:7em auto 0;
	display:flex;
	justify-content: center;
	gap:2em;
	width:80%;
}
.securityalert .about .about_nav li{
	width:100%;
}
.securityalert .about .about_nav li a{
	background-color: #f0f0f0;
	padding:1em 3em 1em 2em;
	border-radius:0.5em;
	position:relative;
	transition: 0.4s;
	display:block;
}
.securityalert .about .about_nav li a::after{
	content:"";
	position:absolute;
	top:50%;
	right:1.5em;
	transform: translateY(-50%) rotate(45deg);
	width:0.5em;
	height:0.5em;
	border-right:2px solid;
	border-bottom:2px solid;
	
}
@media screen and (min-width: 769px) {
	.securityalert .about .about_nav li a:hover{
		background-color: #d6e3f7;
	}
}
@media screen and (max-width: 768px) {
	.securityalert .about p{
		text-align: left;
	}
	.securityalert .about .about_img{
		gap:1rem;
		width:100%;
	}
	.securityalert .about .about_nav{
		margin:3em auto 0;
		display:flex;
		flex-direction: column;
		gap:1rem;
		width:100%;
	}
}
/*-----------------------------------  
  alert_shake
-----------------------------------*/
.securityalert .alert_shake .shake_movie{
	margin:2em auto 0;
	width:75%;
}
.securityalert .alert_shake .shake_howto{
	display:flex;
	/*flex-wrap: wrap;*/
	/*gap:3%;*/
	justify-content: space-between;
}
.securityalert .alert_shake .shake_howto > li{
	/*width:100%;*/
	background: #f5f5f5;
	padding:2em 1.8em;
	border-radius:2em;
	position:relative;
}
.securityalert .alert_shake .shake_howto > li:nth-child(1){
	width:24%;
}
.securityalert .alert_shake .shake_howto > li:nth-child(2){
	width:33%;
}
.securityalert .alert_shake .shake_howto > li:nth-child(3){
	width:33%;
}
.securityalert .alert_shake .shake_howto > li:not(:last-child)::after{ 
	content:"";
	position:absolute;
	right:-2.5em;
	top:50%;
	transform: translateY(-50%);
	width:0;
	height:0;
	border-style:solid;
	border-width: 1.5em 0 1.5em 1.2em;
	border-color: transparent transparent transparent #F4ACA7;
}
.securityalert .alert_shake .shake_howto h4{
	letter-spacing: 0;
	font-weight:500;
}
.securityalert .alert_shake .shake_howto .shake_image{
	margin:1.5em auto;
}
.securityalert .alert_shake .shake_howto > li:nth-child(1) .shake_image{
	width:90%;
}
.securityalert .alert_shake .shake_howto > li:nth-child(2) .shake_image{
	width:90%;
}
.securityalert .alert_shake .shake_howto > li:nth-child(3) .shake_image{
	width:40%;
}
.securityalert .alert_shake .alert_sound {
	margin:4em auto 0;
	width:60%;
	border:1px solid #DF3030;
	padding:1.5em 4em;
	text-align: center;
}
.securityalert .alert_shake .alert_sound h4{
	color:#DF3030;
	font-weight:500;
}
.securityalert .alert_shake .alert_sound p{
	margin-top:1em;
}
.securityalert .alert_shake .alert_sound button{
	width:min(26rem,260px);
	margin-top:1em;
}
.securityalert .alert_shake .emergency_contact {
	border:1px solid #ddd;
	padding:1.5em 4em;
	margin-top:4em;
	display: flex;
	gap:5%;
}
.securityalert .alert_shake .contact_image{
	width:15%;
	margin-right:1em;
}
.shake_test{
	margin-top:2em;
	display: flex;
	gap:5%;
}
.securityalert .alert_shake .test_image{
	width:15%;
}
.securityalert .alert_shake .shake_test .list_decimal{
	margin-left:1em;
}
@media screen and (max-width: 768px) {
	.securityalert .alert_shake .shake_movie{
		margin:2rem auto 0;
		width:90%;
	}
	.securityalert .alert_shake .shake_howto{
		display:flex;
		flex-direction: column;
		gap:4rem;
		justify-content: space-between;
		margin:0 2rem;
	}
	.securityalert .alert_shake .shake_howto > li{
		padding:2.4rem;
		border-radius:1.4rem;
	}
	.securityalert .alert_shake .shake_howto > li:nth-child(1),
	.securityalert .alert_shake .shake_howto > li:nth-child(2),
	.securityalert .alert_shake .shake_howto > li:nth-child(3){
		width:auto;
	}
	.securityalert .alert_shake .shake_howto > li:not(:last-child)::after{ 
		content:"";
		position:absolute;
		right:50%;
		top:calc(100% + 1rem);
		transform: translateY(0) translateX(50%);
		border-width: 2rem  2rem 0 2rem;
		border-color: #F4ACA7 transparent transparent transparent ;
	}
	.securityalert .alert_shake .shake_howto h4{
		font-size:1.5rem;
	}
	.securityalert .alert_shake .shake_howto .shake_image{
		margin:1.5em auto;
	}
	.securityalert .alert_shake .shake_howto > li:nth-child(1) .shake_image{
		width:70%;
	}
	.securityalert .alert_shake .shake_howto > li:nth-child(2) .shake_image{
		width:100%;
	}
	.securityalert .alert_shake .shake_howto > li:nth-child(3) .shake_image{
		width:45%;
	}
	.securityalert .alert_shake .alert_sound {
		margin:3rem 2rem 0;
		width:auto;
		padding:2rem 2rem;
	}
	.securityalert .alert_shake .alert_sound h4{
	}
	.securityalert .alert_shake .alert_sound p{
		text-align: left;
	}
	.securityalert .alert_shake .alert_sound button{
		width:22rem;
	}
	.securityalert .alert_shake .alert_sound .notes li{
		text-align: left;
	}
	.securityalert .alert_shake .emergency_contact {
		padding:1rem 2rem 2rem;
		margin:3rem 2rem 0;
		flex-direction: column;
	}
	.securityalert .alert_shake .contact_image{
		width:45%;
		margin:2rem auto 0;
	}
	.shake_test{
		margin-top:2rem;
		flex-direction: column;
		gap:2rem;
	}
	.securityalert .alert_shake .test_image{
		width:40%;
		margin:0 auto;
	}
	.securityalert .alert_shake .shake_test .list_decimal{
		margin-left:0;
		margin-top:2rem;
	}
}
/*-----------------------------------  
  alert_touch
-----------------------------------*/
.securityalert .alert_touch .touch_howto{
	display:flex;
	justify-content: space-between;
	margin:2em auto 0;
	gap:5%;
	width:92%;
}
.securityalert .alert_touch .touch_howto li{
	width:100%;
	background: #f5f5f5;
	padding:2em 1.8em;
	border-radius:2em;
}
.securityalert .alert_touch .touch_menu_image{
	width:70%;
	margin:2em auto 0;
}
.securityalert .alert_touch .touch_widget_image{
	width:25%;
	margin:2em auto 0;
}
.securityalert .alert_touch .touch_tips{
	border:1px solid #ddd;
	padding: 0 3em 2em;
	margin:4em auto 0;
	width:92%;
}
.securityalert .alert_touch .tips_image{
	width:12%;
	margin:1em auto 0;
}
@media screen and (max-width: 768px) {
	.securityalert .alert_touch .touch_howto{
		flex-direction: column;
		margin:2rem 2rem 0;
		gap:2rem;
		width:auto;
	}
	.securityalert .alert_touch .touch_howto li{
		padding:2rem 2rem;
		border-radius:1.4rem;
	}
	.securityalert .alert_touch .touch_menu_image{
		width:80%;
		margin:2rem auto 0;
	}
	.securityalert .alert_touch .touch_widget_image{
		width:30%;
		margin:2rem auto 0;
	}
	.securityalert .alert_touch .touch_tips{
		padding: 2rem 2rem;
		margin:3rem 2rem 0;
		width:auto;
	}
	.securityalert .alert_touch .touch_tips h3{
		margin-top:0;
	}
	.securityalert .alert_touch .tips_image{
		width:30%;
		margin:2rem auto 0;
	}
}