@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : covid.css
 Author     : 
 Style Info : レイアウトCSS設定
=================================================================== */

/* ----------------------- Browser Default Initialization */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div { display: block; }
html{ overflow-y: scroll; }
ol, ul{ list-style:none; }

.fL{float: left;}
.fR{float: right;}
.br_fl-768{display: block;}
.br_fl-576{display: block;}

body.covid{font-size: 18px;}

.covid .top{background: url("../img/covid/top.jpg") no-repeat; background-size: cover; background-position: top center; height: 440px;}
.covid .top .container{ position: relative;}
.covid .top_txt{position: absolute; right: 15%; top: 120px;}
.covid .top_txt h2{width: 200px; height: 200px; text-align: center; color: #fff; background: #ec651a; background-image: url("../img/covid/disinfection.png"); background-repeat: no-repeat; background-position:  center 20px; padding-top: 90px; border-radius: 50%; margin-bottom: 20px;}
.covid .top_txt h2 span{font-size: 2.5rem;}
.covid .top_txt img{width: 120%; margin-left: -5%;}

.covid .rule h1{text-align: center; padding: 40px; background: #f5a200; color: #fff; line-height: 1.4;}
.covid .rule .icon{background: #fff8e1; padding: 30px 20px;}
.covid .rule .col_6{display: flex;	display: -ms-flexbox; /* IE10 */flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */}
.covid .rule .col_6>div{width: 16.666%; padding: 1%;}
.covid .rule .col_6>div img{width: 100%;}

.covid .guideline h2{text-align: center; margin: 80px 0 60px; font-size: 2.5rem; color: #6c757d;}
.covid .guideline dt{background: #f5a200; color: #fff; font-size: 24px; padding: 3px 20px; margin-bottom: 15px;}
.covid .guideline dd{margin-bottom: 30px; padding: 0 20px; font-size: 20px;}
.covid .guideline dd p{text-indent: -1em; padding-left: 1em;}
.covid .guideline .w40{width: 40%;}
.covid .guideline .w60{width: 60%;}
.covid .guideline .w40 img{width: 90%;}
.covid .guideline .fR.w40 img{margin-left: 10%;}

.covid .circl_L{height: 80px; background: url("../img/covid/circle_L.png") no-repeat top center; background-size: contain; margin: -10px 0 40px;}
.covid .circl_R{height: 80px; background: url("../img/covid/circle_R.png") no-repeat top center; background-size: contain; margin: -10px 0 40px;}

.covid .last_txt{background: #fff8e1; padding: 30px 0 20px; margin-top: 60px;}
.covid .last_txt p{text-align: center; font-size: 24px; font-weight: bold; color: #6c757d;}
.covid .child{height: 420px; background: url("../img/covid/child.jpg")no-repeat; background-size: contain; background-position: top center;}


@media screen and (max-width:992px) { 
/*　画面サイズが992pxまではここを読み込む　*/
	.covid .top_txt{right: 0;}
	
}

@media screen and (max-width:768px) { 
/*　画面サイズが768pxまではここを読み込む　*/

	.covid .rule h1{font-size: 2rem;}
}

@media screen and (max-width:576px) { 
/*　画面サイズが576pxまではここを読み込む　*/
	body.covid{font-size: 16px;}
	.br_fl-768{display: none;}
	
	.covid .top{height: 380px;}
	.covid .top_txt{right: 5%; top: 100px;}
	.covid .top_txt h2{width: 170px; height: 170px; background-size: 60%; font-size: 1.6rem; padding-top: 80px;}
	.covid .top_txt h2 span{font-size: 2rem;}
	.covid .top_txt img{width: 120%; margin-left: -5%;}
	
	.covid .rule h1{font-size: 1.4rem;}
	.covid .rule .col_6>div{width: 33.333%; padding: 2%;}
	
	.covid .guideline h2{margin: 40px 0 ; font-size: 1.8rem;}
	.covid .guideline dt{font-size: 18px; padding: 3px 10px; margin-bottom: 10px;}
	.covid .guideline dd{margin-bottom: 20px; padding: 0 10px; font-size: 16px;}
	.covid .guideline .fL, .covid .guideline .fR{float: none;}
	.covid .guideline .w40{width: 60%; min-width: 250px; margin: 0 auto 20px;}
	.covid .guideline .w60{width: 100%;}
	.covid .guideline .w40 img{width: 100%;}
	.covid .guideline .fR.w40 img{margin-left: 0;}
	
	.covid .circl_L, .covid .circl_R{height: 0; background: none; margin: 0;}
	
	.covid .last_txt{padding: 20px 0; margin-top: 40px;}
	.covid .last_txt p{text-align: center; font-size: 18px; text-align: left;}
	.covid .child{height: 230px;}
}

@media screen and (max-width:415px) { 
/*　画面サイズが415pxまではここを読み込む　*/
	.br_fl-576{display: none;}
	
	.covid .top{height: 310px;}
	.covid .top_txt{right: 2%;}
	.covid .top_txt h2{width: 140px; height: 140px; background-size: 60%; font-size: 1.4rem; padding-top: 65px; margin-bottom: 10px;}
	.covid .top_txt h2 span{font-size: 1.8rem;}
	.covid .top_txt img{width: 100%; margin-left: 0;}
	
	.covid .child{height: 180px;}
	.covid .last_txt p{font-size: 16px;}
	
}